diff --git a/index.html b/index.html index 4f14c4f..2c6ceea 100644 --- a/index.html +++ b/index.html @@ -9,23 +9,24 @@ - - + + + +
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
--> +
+
To je preiskus.
- +
+
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
-
- + diff --git a/service.js b/service.js index 5d32ec6..fd767f2 100644 --- a/service.js +++ b/service.js @@ -44,6 +44,7 @@ class BesService { service.proof(hostElement) if (service.statusIcon.classList.contains('bes-status-loading')) { service.updateStatusIcon('bes-status-success') + service.statusDiv.title = 'BesService je registriran.' } if (textAreaService) service.textAreaService = textAreaService return service @@ -76,7 +77,7 @@ class BesService { */ async proof(node) { this.updateStatusIcon('bes-status-loading') - let mistakesCounter = 0 + this.statusDiv.title = 'BesService je v procesu preverjanja pravopisa.' switch (node.nodeType) { case Node.TEXT_NODE: return [{ text: node.textContent, node: node, markup: false }] @@ -115,13 +116,13 @@ class BesService { .then(response => { if (!response.ok) { this.updateStatusIcon('bes-status-error') + this.statusDiv.title = 'Napaka pri preverjanju pravopisa.' throw new Error('Backend server response was not OK') } return response.json() }) .then(responseData => { let matches = [] - mistakesCounter += responseData.matches.length responseData.matches.forEach(match => { let range = document.createRange() @@ -170,16 +171,19 @@ class BesService { match: match }) }) - this.markProofed(node, matches, mistakesCounter) + this.markProofed(node, matches) }) .catch(error => { if (error.name === 'AbortError') return this.updateStatusIcon('bes-status-error') + this.statusDiv.title = 'Napaka pri preverjanju pravopisa.' throw new Error( 'Parsing backend server response failed: ' + error ) }) } + this.updateStatusIcon('bes-status-success') + this.statusDiv.title = 'BesService je registriran.' return [{ text: '<' + node.tagName + '/>', node: node, markup: true }] } else { // Surround inline element with dummy .... @@ -274,7 +278,7 @@ class BesService { * @param {Element} el DOM element that was checked * @param {Array} matches Grammar mistakes */ - markProofed(el, matches, mistakesCounter) { + markProofed(el, matches) { this.removeChild(el) this.children.push({ isProofed: true, @@ -282,8 +286,18 @@ class BesService { matches: matches }) - if (mistakesCounter > 0) this.updateStatusIcon('bes-status-mistakes') - else this.updateStatusIcon('bes-status-success') + // TODO: This also shows the count of mistakes that are not visible, meaning that they are hidden behind the shown ones. + const count = this.children.reduce( + (total, child) => total + child.matches.length, + 0 + ) + if (count > 0) { + this.updateStatusIcon('bes-status-mistakes') + this.statusDiv.title = 'Število napak: ' + count + } else { + this.updateStatusIcon('bes-status-success') + this.statusDiv.title = 'V besedilu ni napak.' + } } /** @@ -594,8 +608,9 @@ class BesService { setStatusDivPosition(hostElement, statusDiv) { const hRects = hostElement.getBoundingClientRect() + const scrollTop = window.scrollY || document.documentElement.scrollTop statusDiv.style.left = hRects.right - 40 + 'px' - statusDiv.style.top = hRects.top + hRects.height - 30 + 'px' + statusDiv.style.top = hRects.top + hRects.height - 30 + scrollTop + 'px' } static isPointInRect(x, y, rect) { @@ -636,8 +651,8 @@ class BesCKService extends BesService { * @param {Element} el DOM element that was checked * @param {Array} matches Grammar mistakes */ - markProofed(el, matches, mistakesCounter) { - super.markProofed(el, matches, mistakesCounter) + markProofed(el, matches) { + super.markProofed(el, matches) // This is a solution for displaying mistakes in CKEditor. It is not the best solution, but it works for now. if (this.ckEditorInstance) window.dispatchEvent(new Event('resize')) diff --git a/styles.css b/styles.css index 3eb2810..be36f76 100644 --- a/styles.css +++ b/styles.css @@ -78,7 +78,7 @@ height: 30px; background-size: contain; background-repeat: no-repeat; - cursor: pointer; + cursor: help; } .bes-status-icon.bes-status-success {