Improve displaying mistakes count and add TODOs

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 <tagName>...</tagName>.
@@ -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'))