Move status icon out of core grammar checking service

Status icon is user-implemented now.
2024-06-27 11:35:40 +02:00
parent 042a6b288c
commit 4e3559408e
14 changed files with 264 additions and 142 deletions
--- a/samples/common.js
+++ b/samples/common.js
@@ -0,0 +1,140 @@
+/**
+ * Class to receive grammar checking service notification
+ * 
+ * This implementation handles the status icon in the lower-right corner of the host element.
+ */
+class BesStatusIconEventSink {
+  /**
+   * Called when grammar checking service is registered
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  register(service) {
+    this.statusDiv = document.createElement('div')
+    this.statusDiv.classList.add('bes-status-div')
+    this.statusIcon = document.createElement('div')
+    this.statusIcon.classList.add('bes-status-icon')
+    this.statusDiv.appendChild(this.statusIcon)
+    this.setStatusDivPosition(service)
+    service.textElement.parentNode.insertBefore(
+      this.statusDiv,
+      service.textElement.nextSibling
+    )
+  }
+
+  /**
+   * Called when grammar checking service is unregistered
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  unregister(service) {
+    this.statusDiv.remove()
+    this.statusIcon.remove()
+  }
+
+  /**
+   * Called to report repositioning
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  reposition(service) {
+    this.setStatusDivPosition(service)
+  }
+
+  /**
+   * Called to report resizing
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  resize(service) {
+    this.setStatusDivPosition(service)
+  }
+
+  /**
+   * Repositions status DIV element.
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  setStatusDivPosition(service) {
+    const rect = service.textElement.getBoundingClientRect()
+    const scrollbarWidth =
+      service.textElement.offsetWidth - service.textElement.clientWidth
+    this.statusDiv.style.left = `${rect.right - 40 - scrollbarWidth}px`
+    const scrollbarHeight =
+      service.textElement.offsetHeight - service.textElement.clientHeight
+    this.statusDiv.style.top = `${rect.bottom - 30 - scrollbarHeight}px`
+  }
+
+  /**
+   * Called to report grammar proofing started
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  startProofing(service) {
+    this.updateStatusIcon('bes-status-loading', 'Besana preverja pravopis.')
+  }
+
+  /**
+   * Called to report grammar-checking failed (as 500 Internal server error, timeout, etc.)
+   *
+   * @param {BesService} service Grammar checking service
+   * @param {Response} response HTTP response
+   */
+  failedProofing(service, response) {
+    this.updateStatusIcon(
+      'bes-status-error',
+      `Pri preverjanju pravopisa je prišlo do napake ${response.status} ${response.statusText}.`
+    )
+  }
+
+  /**
+   * Called to report grammar-checking run is ended
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  endProofing(service) {
+    if (service.proofingError) {
+      this.updateStatusIcon(
+        'bes-status-error',
+        `Pri obdelavi odgovora pravopisnega strežnika je prišlo do napake: ${service.proofingError}`
+      )
+    } else if (service.proofingMatches > 0)
+      this.updateStatusIcon(
+        'bes-status-mistakes',
+        `Število napak: ${service.proofingMatches}`
+      )
+    else this.updateStatusIcon('bes-status-success', 'V besedilu ni napak.')
+  }
+
+  /**
+   * Sets status icon style and title.
+   *
+   * @param {String} status CSS class name to set status icon to
+   * @param {String} title Title of the status icon
+   */
+  updateStatusIcon(status, title) {
+    const statuses = [
+      'bes-status-loading',
+      'bes-status-success',
+      'bes-status-mistakes',
+      'bes-status-error'
+    ]
+    statuses.forEach(statusClass => {
+      this.statusIcon.classList.remove(statusClass)
+    })
+    this.statusIcon.classList.add(status)
+    this.statusDiv.title = title
+  }
+}
+
+class BesCKStatusIconEventSink extends BesStatusIconEventSink {
+  /**
+   * Repositions status DIV element.
+   *
+   * @param {BesService} service Grammar checking service
+   */
+  setStatusDivPosition(service) {
+    this.statusDiv.style.right = `10px`
+    this.statusDiv.style.bottom = `10px`
+  }
+}