125 lines
3.1 KiB
JavaScript
125 lines
3.1 KiB
JavaScript
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)
|