From eb1ec9574929e9479bb7f1e737b61fe46593ed68 Mon Sep 17 00:00:00 2001
From: Aljaz Grilc <aljaz.grilc@amebis.si>
Date: Thu, 28 Mar 2024 14:08:44 +0100
Subject: [PATCH] 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 |   7 ++
 service.js                      | 142 +++++++++++++++++++++++++++++++-
 2 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 images/turn-off-svgrepo-com.svg

diff --git a/images/turn-off-svgrepo-com.svg b/images/turn-off-svgrepo-com.svg
new file mode 100644
index 0000000..6c31e9c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/service.js b/service.js
index dded9ca..cad462a 100644
--- a/service.js
+++ b/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)