diff --git a/service.js b/service.js index 0e3026d..5f312ba 100644 --- a/service.js +++ b/service.js @@ -454,13 +454,14 @@ class BesService { * @param {*} match Grammar checking rule match * @param {PointerEvent} source Click event source */ - popupCorrectionPanel(el, match, source) { + popupCorrectionPanel(pointsInRect, source) { this.dismissPopup() const popup = document.querySelector('bes-popup-el') - // TODO: popup.setContent(elements, matches, this, this.isContentEditable()) - popup.changeMessage(match.match.message) - popup.appendReplacements(el, match, this, this.isContentEditable()) - this.highlightMistake(match) + BesPopup.clearReplacements() + pointsInRect.forEach(({ el, match }) => { + popup.setContent(el, match, this, this.isContentEditable()) + this.highlightMistake(match) + }) popup.show(source.clientX, source.clientY) } @@ -910,18 +911,18 @@ class BesTreeService extends BesService { const source = event?.detail !== 1 ? event?.detail : event const el = this.getBlockParent(source.targetElement || source.target) if (!el) return - + const pointsInRect = [] for (let result of this.results) { for (let m of result.matches) { for (let rect of m.highlights) { if (BesService.isPointInRect(source.clientX, source.clientY, rect)) { - this.popupCorrectionPanel(el, m, source) - return + pointsInRect.push({ el, match: m }) } } } } this.dismissPopup() + if (pointsInRect.length) this.popupCorrectionPanel(pointsInRect, source) } } @@ -1563,18 +1564,19 @@ class BesPlainTextService extends BesService { const source = event?.detail !== 1 ? event?.detail : event const el = source.targetElement || source.target || this.hostElement if (!el) return - + const pointsInRect = [] for (let result of this.results) { for (let m of result.matches) { for (let rect of m.highlights) { if (BesService.isPointInRect(source.clientX, source.clientY, rect)) { - this.popupCorrectionPanel(result.range, m, source) - return + console.log(result.range) + pointsInRect.push({ el: result.range, match: m }) } } } } this.dismissPopup() + if (pointsInRect.length) this.popupCorrectionPanel(pointsInRect, source) } /** @@ -2043,6 +2045,7 @@ class BesPopup extends HTMLElement { background-color: #eee; padding: 10px; border-radius: 5px; + border: 1px solid #f1f3f9; } .bes-replacement-btn{ margin: 4px 1px; @@ -2083,6 +2086,7 @@ class BesPopup extends HTMLElement { .bes-text-div { font-weight: lighter; background-color: #333; + border: 1px solid #57585A; } } @@ -2091,12 +2095,6 @@ class BesPopup extends HTMLElement {
Besana
-
- - -
-
-
` this.addEventListener('mousedown', this.onMouseDown) @@ -2135,13 +2133,36 @@ class BesPopup extends HTMLElement { } } + setContent(el, match, service, allowReplacements) { + const popup = this.shadowRoot.querySelector('.bes-popup-container') + const newTextDiv = this.createPopupTextDiv() + popup.appendChild(newTextDiv) + this.changeMessage(match.match.message, newTextDiv) + if (match.match.replacements) { + this.appendReplacements(el, match, service, allowReplacements, newTextDiv) + } + } + + createPopupTextDiv() { + const textDiv = document.createElement('div') + textDiv.classList.add('bes-text-div') + const popupText = document.createElement('span') + popupText.classList.add('popup-text') + const replacementDiv = document.createElement('div') + replacementDiv.classList.add('bes-replacement-div') + textDiv.appendChild(popupText) + textDiv.appendChild(replacementDiv) + return textDiv + } + /** * Clears all grammar mistake suggestions. */ - clearReplacements() { - Array.from( - this.shadowRoot.querySelector('.bes-replacement-div')?.children - ).forEach(replacement => replacement.remove()) + static clearReplacements() { + const popup = document.querySelector('bes-popup-el') + popup.shadowRoot + .querySelectorAll('.bes-text-div') + .forEach(el => el.remove()) } /** @@ -2153,8 +2174,8 @@ class BesPopup extends HTMLElement { * @param {Boolean} allowReplacements Host element is mutable and grammar mistake may be replaced * by suggestion */ - appendReplacements(el, match, service, allowReplacements) { - const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div') + appendReplacements(el, match, service, allowReplacements, element) { + const replacementDiv = element.querySelector('.bes-replacement-div') match.match.replacements.forEach(replacement => { const replacementBtn = document.createElement('button') replacementBtn.classList.add('bes-replacement-btn') @@ -2174,9 +2195,8 @@ class BesPopup extends HTMLElement { * * @param {String} text */ - changeMessage(text) { - this.clearReplacements() - this.shadowRoot.querySelector('.popup-text').innerText = text + changeMessage(text, element) { + element.querySelector('.popup-text').innerText = text } /**