On click open correct popup and show error message

online-editor.js

@@ -6,7 +6,19 @@ window.onload = () => {
   // Search and prepare all our editors found in the document.
   document.querySelectorAll('.bes-online-editor').forEach(edit => {
     let editor = {
-      timer: null
+      timer: null,
+      children: [
+        {
+          elements: null,
+          isProofed: false,
+          matches: [
+            {
+              range: null,
+              rects: null
+            }
+          ]
+        }
+      ]
     }
     besEditors[edit.id] = editor
     besProof(edit)
@@ -15,7 +27,7 @@ window.onload = () => {
       e => besHandleBeforeInput(edit.id, e),
       false
     )
-    edit.addEventListener('click', e => besHandleClick(e))
+    edit.addEventListener('click', e => besHandleClick(e, edit))
     // TODO: Handle editor resizes.
   })
 }
@@ -62,6 +74,7 @@ async function besProof(el) {
               return response.json()
             })
             .then(responseData => {
+              const matches = [{ range: null, rects: null, message: null }]
               responseData.matches.forEach(match => {
                 let range = document.createRange()
 
@@ -98,10 +111,15 @@ async function besProof(el) {
                   }
                 }
 
-                besAddMistake(range, match)
+                const clientRect = besAddMistake(range, match)
+                matches.push({
+                  range: range,
+                  rects: clientRect,
+                  message: match.message
+                })
               })
 
-              besMarkProofed(el)
+              besMarkProofed(el, matches)
             })
             .catch(error => {
               // TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI.
@@ -153,8 +171,15 @@ function besIsProofed(el) {
 }
 
 // Mark given block element as grammar-proofed.
-function besMarkProofed(el) {
+function besMarkProofed(el, matches) {
-  el.setAttribute('besProofed', 'true')
+  const editorId = el.parentElement.id
+  const editor = besEditors[editorId]
+  editor.children.push({
+    isProofed: true,
+    elements: el,
+    matches: matches
+  })
+  // editor.children['matches'] = matches
 }
 
 // Mark given block element as not grammar-proofed.
@@ -196,6 +221,7 @@ function besAddMistake(range, match) {
     // return true;
     // });
   }
+  return clientRects
 }
 
 // Tests if given element is block element.
@@ -223,14 +249,52 @@ function besGetBlockParent(el, edit) {
   return el
 }
 
-function besHandleClick(e) {
+function besHandleClick(e, editor) {
-  switch (e.target) {
+  console.log(e)
-    case e.target.closest('span'):
+  const targetEl = e.target
-      const clicked = e.target.closest('span')
+  if (targetEl.tagName === 'DIV') {
-      const infoText = clicked?.dataset.info
+    // Find div inside besEditors[editor.id].children
-      const myComponent = document.querySelector('my-component')
+    console.log(besEditors[editor.id])
-      myComponent.setAttribute('my-attribute', infoText)
+    const editorData = besEditors[editor.id]
-      console.log(clicked)
+    const divIndex = editorData.children.findIndex(
-      break
+      child => child.elements === targetEl
+    )
+    const matches = editorData.children[divIndex].matches
+
+    for (let m of matches) {
+      console.log(m)
+      if (m.rects) {
+        for (let r of m.rects) {
+          console.log(r)
+          const x = e.clientX
+          const y = e.clientY
+          if (isPointInRect(x, y, r)) {
+            console.log(m.message)
+            const popup = document.querySelector('my-component')
+            popup.changeText(m.message)
+            popup.toggle('show')
+          }
+        }
+      }
+    }
+    console.log('The point is outside the rectangle')
   }
+  // switch (e.target) {
+  //   case e.target.closest('span'):
+  //     const clicked = e.target.closest('span')
+  //     const infoText = clicked?.dataset.info
+  //     const myComponent = document.querySelector('my-component')
+  //     myComponent.setAttribute('my-attribute', infoText)
+  //     console.log(clicked)
+  //     break
+  // }
+}
+
+function isPointInRect(x, y, rect) {
+  return (
+    x >= rect.x &&
+    x <= rect.x + rect.width &&
+    y >= rect.y &&
+    y <= rect.y + rect.height
+  )
 }

popup.js

@@ -1,15 +1,52 @@
 class MyComponent extends HTMLElement {
-  static get observedAttributes() {
+  constructor() {
-    return ['my-attribute']
+    super()
+    this.attachShadow({ mode: 'open' })
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  connectedCallback() {
-    if (name === 'my-attribute') {
+    this.render()
-      console.log(
+  }
-        `Value of my-attribute changed from ${oldValue} to ${newValue}`
+
-      )
+  render() {
-      // You can perform some action based on the new value here
+    this.shadowRoot.innerHTML = `
-    }
+      <style>
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+        .popup-text {
+          visibility: hidden;
+          width: 160px;
+          background-color: #555;
+          color: #fff;
+          text-align: center;
+          padding: 8px 0;
+          position: absolute;
+          z-index: 1;
+        }
+        :host(.show) .popup-text {
+          visibility: visible;
+          animation: fadeIn 1s;
+        }
+        @keyframes fadeIn {
+          from {opacity: 0;}
+          to {opacity:1 ;}
+        }
+      </style>
+      <span class="popup-text">
+        Tole je testni popup
+        <slot></slot>
+      </span>
+    `
+  }
+
+  toggle() {
+    this.classList.toggle('show')
+  }
+
+  changeText(text) {
+    this.shadowRoot.querySelector('.popup-text').textContent = text
   }
 }