Enhance popup styles and improve functionality

online-editor.js

@@ -242,30 +242,41 @@ function besGetBlockParent(el, edit) {
 
 function besHandleClick(e, editor) {
   const targetEl = e.target
+  const popup = document.querySelector('bes-popup-el')
   if (targetEl.tagName === 'DIV') {
     const editorData = besEditors[editor.id]
     const divIndex = editorData.children.findIndex(
       child => child.elements === targetEl
     )
     const matches = editorData.children[divIndex]?.matches
-    if (!matches) return
-    for (let m of matches) {
-      if (m.rects) {
-        for (let r of m.rects) {
-          const clientX = e.clientX
-          const clientY = e.clientY
-          if (isPointInRect(clientX, clientY, r)) {
-            const popup = document.querySelector('my-component')
-            popup.changeText(m.message)
-            popup.show(clientX, clientY)
-          }
-        }
-      }
+    if (!matches) {
+      popup.hide()
+      return
     }
+    if (besRenderPopup(matches, popup, e.clientX, e.clientY)) return
+  } else {
+    popup.hide()
   }
 }
 
-function isPointInRect(x, y, rect) {
+function besRenderPopup(matches, popup, clientX, clientY) {
+  for (let m of matches) {
+    if (m.rects) {
+      for (let r of m.rects) {
+        if (besIsPointInRect(clientX, clientY, r)) {
+          popup.changeText(m.message)
+          popup.show(clientX, clientY)
+          return true
+        }
+      }
+    } else {
+      popup.hide()
+    }
+  }
+  return false
+}
+
+function besIsPointInRect(x, y, rect) {
   return (
     x >= rect.x &&
     x <= rect.x + rect.width &&

popup.js

@@ -1,4 +1,4 @@
-class MyComponent extends HTMLElement {
+class BesPopupEl extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({ mode: 'open' })
@@ -14,6 +14,9 @@ class MyComponent extends HTMLElement {
         :host {
           position: relative;
           display: inline-block;
+          z-index: -1
+        }
+        :host(.show){
           z-index: 10;
         }
         .popup-text {
@@ -25,12 +28,25 @@ class MyComponent extends HTMLElement {
         }
         .bes-popup-container {
           visibility: hidden;
-          max-width: 200px;
-          background-color: white;
+          max-width: 300px;
+          bacground-color: rgb(47, 50, 55);
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
           border-radius: 5px;
           padding: 8px;
         }
+        .bes-toolbar {
+          display: flex;
+          justify-content: end;
+          padding: 5px 2px;
+        }
+        .bes-toolbar button {
+          margin-right: 2px;
+        }
+        .bes-text-div{
+          background-color: white;
+          padding: 10px;
+          border-radius: 5px;
+        }
         :host(.show) .bes-popup-container {
           visibility: visible;
           animation: fadeIn 1s;
@@ -41,15 +57,19 @@ class MyComponent extends HTMLElement {
         }
       </style>
       <div class="bes-popup-container">
+        <div class="bes-toolbar">
+          <button class="bes-close-btn">X</button>
+        </div>
+        <div class="bes-text-div">
           <span class="popup-text">
             Tole je testni popup
           </span>
         </div>
+      </div>
     `
   }
 
   show(x, y) {
-    console.log(x, y)
     y = y + 20
     this.style.position = 'fixed'
     this.style.left = `${x}px`
@@ -57,8 +77,8 @@ class MyComponent extends HTMLElement {
     this.classList.add('show')
   }
 
-  toggle() {
-    this.classList.toggle('show')
+  hide() {
+    this.classList.remove('show')
   }
 
   changeText(text) {
@@ -66,4 +86,4 @@ class MyComponent extends HTMLElement {
   }
 }
 
-customElements.define('my-component', MyComponent)
+customElements.define('bes-popup-el', BesPopupEl)