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)