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"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title>1105</title> <defs> </defs> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(1.000000, 0.000000)" fill="#fe0606"> <path d="M10.124,1.613 L10.124,3.962 C11.73,4.849 12.756,6.586 12.756,8.54 C12.756,11.394 10.406,13.709 7.508,13.709 C4.612,13.709 2.262,11.395 2.262,8.54 C2.262,6.523 3.274,4.791 4.958,3.939 L4.958,1.611 C2.021,2.586 0.063,5.304 0.063,8.54 C0.063,12.592 3.397,15.875 7.507,15.875 C11.618,15.875 14.953,12.592 14.953,8.54 C14.954,5.363 12.98,2.638 10.124,1.613 L10.124,1.613 Z" class="si-glyph-fill"> </path> <path d="M7.46,7.873 C8.238,7.873 8.872,7.393 8.872,6.798 L8.872,1.115 C8.872,0.521 8.238,0.04 7.46,0.04 C6.681,0.04 6.048,0.521 6.048,1.115 L6.048,6.798 C6.048,7.393 6.681,7.873 7.46,7.873 L7.46,7.873 Z" class="si-glyph-fill"> </path> </g> </g> </g>
+
</svg>

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)