Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Move code from popupjs and paste it into main JS file.

Browse Source
This commit is contained in:
Aljaž Grilc 2024-02-13 11:42:41 +01:00
parent fbb9a06a10
commit a6130c39ce
3 changed files with 126 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -6,7 +6,6 @@
<title>Editor</title>
<link rel="stylesheet" href="styles.css" />
<script src="online-editor.js"></script>
<script src="popup.js"></script>
</head>
<body>
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>

126
online-editor.js
View File

@ -413,3 +413,129 @@ window.onresize = () => {
})
})
}
// This is popup element
class BesPopupEl extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
}
connectedCallback() {
this.render()
}
render() {
this.shadowRoot.innerHTML = `
<style>
:host {
position: relative;
display: inline-block;
z-index: -1
}
:host(.show){
z-index: 10;
}
.popup-text {
max-width: 160px;
color: black;
text-align: center;
padding: 8px 0;
z-index: 1;
}
.bes-popup-container {
visibility: hidden;
max-width: 300px;
background-color: rgb(241, 243, 249);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 8px;
z-index: 1;
}
.bes-toolbar {
display: flex;
justify-content: end;
padding: 5px 2px;
}
.bes-toolbar button {
margin-right: 2px;
}
.bes-text-div{
background-color: white;
padding: 10px;
border-radius: 5px;
}
.bes-replacement-btn{
margin: 5px 0;
padding: 5px;
border: none;
border-radius: 5px;
background-color: #239aff;
color: white;
cursor: pointer;
}
.bes-replacement-btn:hover{
background-color: #1976f0;
}
:host(.show) .bes-popup-container {
visibility: visible;
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<div class="bes-popup-container">
<div class="bes-toolbar">
<button class="bes-close-btn">X</button>
</div>
<div class="bes-text-div">
<span class="popup-text">
</span>
<div class="bes-replacement-div">
</div>
</div>
</div>
`
}
show(x, y) {
y = y + 20
this.style.position = 'fixed'
this.style.left = `${x}px`
this.style.top = `${y}px`
this.clear()
this.classList.add('show')
}
clear() {
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
const replacements = replacementDiv.childNodes
if (!replacements.length) return
replacements.forEach(replacement => {
replacementDiv.removeChild(replacement)
})
}
hide() {
this.classList.remove('show')
}
changeText(text) {
this.shadowRoot.querySelector('.popup-text').textContent = text
}
appendReplacements(replacement, offset, length) {
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
const replacementBtn = document.createElement('button')
replacementBtn.classList.add('bes-replacement-btn')
replacementBtn.dataset.length = length
replacementBtn.dataset.offset = offset
replacementBtn.textContent = replacement
replacementBtn.classList.add('bes-replacement')
replacementDiv.appendChild(replacementBtn)
}
}
customElements.define('bes-popup-el', BesPopupEl)

124
popup.js
View File

@ -1,124 +0,0 @@
class BesPopupEl extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
}
connectedCallback() {
this.render()
}
render() {
this.shadowRoot.innerHTML = `
<style>
:host {
position: relative;
display: inline-block;
z-index: -1
}
:host(.show){
z-index: 10;
}
.popup-text {
max-width: 160px;
color: black;
text-align: center;
padding: 8px 0;
z-index: 1;
}
.bes-popup-container {
visibility: hidden;
max-width: 300px;
background-color: rgb(241, 243, 249);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 8px;
z-index: 1;
}
.bes-toolbar {
display: flex;
justify-content: end;
padding: 5px 2px;
}
.bes-toolbar button {
margin-right: 2px;
}
.bes-text-div{
background-color: white;
padding: 10px;
border-radius: 5px;
}
.bes-replacement-btn{
margin: 5px 0;
padding: 5px;
border: none;
border-radius: 5px;
background-color: #239aff;
color: white;
cursor: pointer;
}
.bes-replacement-btn:hover{
background-color: #1976f0;
}
:host(.show) .bes-popup-container {
visibility: visible;
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<div class="bes-popup-container">
<div class="bes-toolbar">
<button class="bes-close-btn">X</button>
</div>
<div class="bes-text-div">
<span class="popup-text">
</span>
<div class="bes-replacement-div">
</div>
</div>
</div>
`
}
show(x, y) {
y = y + 20
this.style.position = 'fixed'
this.style.left = `${x}px`
this.style.top = `${y}px`
this.clear()
this.classList.add('show')
}
clear() {
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
const replacements = replacementDiv.childNodes
if (!replacements.length) return
replacements.forEach(replacement => {
replacementDiv.removeChild(replacement)
})
}
hide() {
this.classList.remove('show')
}
changeText(text) {
this.shadowRoot.querySelector('.popup-text').textContent = text
}
appendReplacements(replacement, offset, length) {
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
const replacementBtn = document.createElement('button')
replacementBtn.classList.add('bes-replacement-btn')
replacementBtn.dataset.length = length
replacementBtn.dataset.offset = offset
replacementBtn.textContent = replacement
replacementBtn.classList.add('bes-replacement')
replacementDiv.appendChild(replacementBtn)
}
}
customElements.define('bes-popup-el', BesPopupEl)