class BesPopupEl extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
}
connectedCallback() {
this.render()
}
render() {
this.shadowRoot.innerHTML = `
`
}
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)