Implement new popup for service unregistration.

The popup not only serves the immediate purpose of unregistering services but is also designed with future enhancements in mind. It can be used as a display element for showcasing all errors present in the current host element in upcoming versions of besService.

images/turn-off-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-turn-off" fill="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+

service.js

@@ -60,11 +60,13 @@ class BesService {
       false
     )
     if (this.timer) clearTimeout(this.timer)
-    service.abortController.abort()
+    this.abortController.abort()
     besServices = besServices.filter(item => item !== this)
     this.hostElement.spellcheck = this.originalSpellcheck
     this.correctionPanel.remove()
     this.scrollPanel.remove()
+    this.statusDiv.remove()
+    this.statusIcon.remove()
   }
 
   /**
@@ -223,6 +225,11 @@ class BesService {
     statusDiv.appendChild(statusIcon)
     this.setStatusDivPosition(hostElement, statusDiv)
     hostElement.parentNode.insertBefore(statusDiv, hostElement.nextSibling)
+    const statusPopup = document.createElement('bes-popup-status-el')
+    document.body.appendChild(statusPopup)
+    statusDiv.addEventListener('click', e => {
+      this.handleStatusClick(e, statusPopup)
+    })
 
     return { correctionPanel, scrollPanel, statusDiv, statusIcon }
   }
@@ -377,6 +384,10 @@ class BesService {
     this.statusIcon.classList.add(status)
   }
 
+  handleStatusClick(e, popup) {
+    popup.show(e.clientX, e.clientY, this)
+  }
+
   /**
    * Tests if given element is block element.
    *
@@ -1016,6 +1027,134 @@ class BesPopupEl extends HTMLElement {
   }
 }
 
+class BesStatusPopup extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: none;
+        }
+        :host(.show){
+          z-index: 10;
+        }
+        .popup-text {
+          max-width: 160px;
+          color: black;
+          text-align: center;
+          padding: 8px 0;
+          z-index: 1;
+        }
+        .bes-popup-container {
+          visibility: hidden;
+          max-width: 300px;
+          background-color: rgb(241, 243, 249);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+          border-radius: 5px;
+          padding: 8px;
+          z-index: 1;
+        }
+        .bes-toolbar {
+          display: flex;
+          justify-content: end;
+          padding: 5px 2px;
+        }
+        .bes-toolbar button {
+          margin-right: 2px;
+        }
+        .bes-popup-title {
+          flex-grow: 1;
+        }
+        .bes-text-div{
+          background-color: white;
+          padding: 10px;
+          border-radius: 5px;
+        }
+        .bes-service-btn{
+          background-color: none;
+          width: 30px;
+          height: 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .bes-turn-off{
+          width: 20px;
+          height: 20px;
+        }
+        :host(.show) .bes-popup-container {
+          visibility: visible;
+          animation: fadeIn 1s;
+        }
+        @keyframes fadeIn {
+          from {opacity: 0;}
+          to {opacity:1 ;}
+        }
+      </style>
+      <div class="bes-popup-container">
+        <div class="bes-toolbar">
+          <div class="bes-popup-title">Besana</div>
+          <button class="bes-close-btn" onclick="BesStatusPopup.hide()">X</button>
+        </div>
+        <div class="bes-text-div">
+          <span class="popup-text">
+            Če želite izključiti preverjanje pravopisa, kliknite na gumb.
+          </span>
+          <button class="bes-service-btn">
+            <img class="bes-turn-off" src="/images/turn-off-svgrepo-com.svg" alt="Izključi preverjanje pravopisa">
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  show(x, y, service) {
+    y = y + 20
+    this.style.position = 'fixed'
+    this.style.left = `${x}px`
+    this.style.top = `${y}px`
+    this.style.display = 'block'
+
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+    const popupWidth = this.offsetWidth
+    const popupHeight = this.offsetHeight
+    const maxPositionX = viewportWidth - popupWidth
+    const maxPositionY = viewportHeight - popupHeight
+    const positionX = this.offsetLeft
+    const positionY = this.offsetTop
+    if (positionX > maxPositionX) {
+      this.style.left = maxPositionX + 'px'
+    }
+    if (positionY > maxPositionY) {
+      this.style.top = maxPositionY + 'px'
+    }
+    this.disableButton = this.shadowRoot.querySelector('.bes-service-btn')
+    if (service) {
+      this.disableButton.addEventListener('click', () => this.disable(service))
+    }
+    this.classList.add('show')
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  disable(service) {
+    service.unregister()
+    BesStatusPopup.hide()
+  }
+
+  static hide() {
+    const popup = document.querySelector('bes-popup-status-el.show')
+    popup?.classList?.remove('show')
+  }
+}
+
 window.onload = () => {
   document.querySelectorAll('.bes-service').forEach(hostElement => {
     if (hostElement.tagName === 'TEXTAREA') BesTAService.register(hostElement)
@@ -1055,3 +1194,4 @@ window.onscroll = () => {
 }
 
 customElements.define('bes-popup-el', BesPopupEl)
+customElements.define('bes-popup-status-el', BesStatusPopup)