service2.js: Fix status icon and port status popup

However, status popup was disabled as deemed excessive for our use case.

service2.js

@@ -162,11 +162,11 @@ class BesService {
       this.statusDiv,
       this.hostElement.nextSibling
     )
-    const statusPopup = document.createElement('bes-popup-status-el')
+    // const statusPopup = document.createElement('bes-popup-status')
-    document.body.appendChild(statusPopup)
+    // document.body.appendChild(statusPopup)
-    this.statusDiv.addEventListener('click', e =>
+    // this.statusDiv.addEventListener('click', e =>
-      this.handleStatusClick(e, statusPopup)
+    //   statusPopup.show(e.clientX, e.clientY, this)
-    )
+    // )
   }
 
   /**
@@ -742,7 +742,7 @@ class BesDOMService extends BesService {
         }
       }
     }
-    BesPopupEl.hide()
+    BesPopup.hide()
   }
 
   /**
@@ -784,14 +784,17 @@ class BesDOMService extends BesService {
  *
  * Grammar mistake popup dialog
  *
- */
+ *************************************************************************/
-class BesPopupEl extends HTMLElement {
+class BesPopup extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({ mode: 'open' })
   }
 
-  render() {
+  /**
+   * Called each time the element is added to the document
+   */
+  connectedCallback() {
     this.shadowRoot.innerHTML = `
       <style>
         :host {
@@ -859,7 +862,7 @@ class BesPopupEl extends HTMLElement {
       <div class="bes-popup-container">
         <div class="bes-toolbar">
           <div class="bes-popup-title">Besana</div>
-          <button class="bes-close-btn" onclick="BesPopupEl.hide()">X</button>
+          <button class="bes-close-btn" onclick="BesPopup.hide()">X</button>
         </div>
         <div class="bes-text-div">
           <span class="popup-text">
@@ -869,13 +872,14 @@ class BesPopupEl extends HTMLElement {
         </div>
       </div>
     `
+    this.addEventListener('mousedown', this.onMouseDown)
   }
 
   /**
    * Shows popup window.
    *
-   * @param {*} x X location hint
+   * @param {Number} x X location hint
-   * @param {*} y Y location hint
+   * @param {Number} y Y location hint
    */
   show(x, y) {
     this.style.position = 'fixed'
@@ -929,7 +933,7 @@ class BesPopupEl extends HTMLElement {
       replacementBtn.addEventListener('click', () => {
         if (allowReplacements) {
           service.replaceText(el, match, replacement.value)
-          BesPopupEl.hide()
+          BesPopup.hide()
         }
       })
       replacementDiv.appendChild(replacementBtn)
@@ -992,14 +996,6 @@ class BesPopupEl extends HTMLElement {
     document.removeEventListener('mousemove', this.handleMouseMove)
   }
 
-  /**
-   * Called each time the element is added to the document
-   */
-  connectedCallback() {
-    this.render()
-    this.addEventListener('mousedown', this.onMouseDown)
-  }
-
   /**
    * Dismisses all the popups.
    */
@@ -1010,7 +1006,154 @@ class BesPopupEl extends HTMLElement {
   }
 }
 
-customElements.define('bes-popup-el', BesPopupEl)
+customElements.define('bes-popup-el', BesPopup)
+
+// /*************************************************************************
+//  *
+//  * Status pop-up
+//  *
+//  *************************************************************************/
+// class BesStatusPopup extends HTMLElement {
+//   constructor() {
+//     super()
+//     this.attachShadow({ mode: 'open' })
+//   }
+
+//   /**
+//    * Called each time the element is added to the document
+//    */
+//   connectedCallback() {
+//     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>
+//     `
+//   }
+
+//   /**
+//    * Shows popup window.
+//    *
+//    * @param {Number} x X location hint
+//    * @param {Number} y Y location hint
+//    * @param {BesService} service Grammar checking service
+//    */
+//   show(x, y, service) {
+//     this.style.position = 'fixed'
+//     this.style.display = 'block'
+
+//     // Element needs some initial placement for the browser to provide this.offsetWidth and this.offsetHeight measurements.
+//     // The fade-in effect on the popup window should prevent flicker.
+//     this.style.left = `0px`
+//     this.style.top = `0px`
+//     this.classList.add('show')
+
+//     if (x + this.offsetWidth <= window.innerWidth) {
+//       this.style.left = `${x}px`
+//     } else if (this.offsetWidth <= x) {
+//       this.style.left = `${x - this.offsetWidth}px`
+//     } else {
+//       this.style.left = `${x - this.offsetWidth / 2}px`
+//     }
+
+//     if (y + 20 + this.offsetHeight <= window.innerHeight) {
+//       this.style.top = `${y + 20}px`
+//     } else if (this.offsetHeight <= y) {
+//       this.style.top = `${y - this.offsetHeight}px`
+//     } else {
+//       this.style.top = `${y - this.offsetHeight / 2}px`
+//     }
+
+//     if (service) {
+//       const disableButton = this.shadowRoot.querySelector('.bes-service-btn')
+//       disableButton.onclick = () => {
+//         service.unregister()
+//         BesStatusPopup.hide()
+//       }
+//     }
+//     this.classList.add('show')
+//   }
+
+//   /**
+//    * Dismisses all the popups.
+//    */
+//   static hide() {
+//     const popup = document.querySelector('bes-popup-status.show')
+//     popup?.classList?.remove('show')
+//   }
+// }
+
+// customElements.define('bes-popup-status', BesStatusPopup)
 
 // Auto-register all elements with bes-service class.
 window.addEventListener('load', () => {

styles.css

@@ -1,3 +1,5 @@
+/* TODO: Dark mode theme */
+
 /* Mistake types styles */
 .bes-typo-mistake {
   border-bottom: 2px solid red;
@@ -79,17 +81,17 @@
 }
 
 .bes-status-icon.bes-status-success {
-  background-image: url('/images/checkmark-svgrepo-com.svg');
+  background-image: url('images/checkmark-svgrepo-com.svg');
 }
 
 .bes-status-icon.bes-status-loading {
-  background-image: url('/images/loading-svgrepo-com.svg');
+  background-image: url('images/loading-svgrepo-com.svg');
 }
 
 .bes-status-icon.bes-status-error {
-  background-image: url('/images/error-svgrepo-com.svg');
+  background-image: url('images/error-svgrepo-com.svg');
 }
 
 .bes-status-icon.bes-status-mistakes {
-  background-image: url('/images/mistake-svgrepo-com.svg');
+  background-image: url('images/mistake-svgrepo-com.svg');
 }