Add navigation buttons in popup #4

service.js

@@ -354,6 +354,13 @@ class BesService {
           this.findNextMistake(1)
         }
         break
+      case 'Enter':
+        if (e.ctrlKey) {
+          e.preventDefault()
+          e.stopPropagation()
+          // TODO: What to do when we have multiple replacements?
+          this.acceptReplacement()
+        }
       default:
         break
     }
@@ -1023,6 +1030,11 @@ class BesService {
     )
   }
 
+  static arrowBtnNavigation(value, service) {
+    const direction = value === 'forward' ? 1 : value === 'back' ? -1 : 0
+    service.findNextMistake(direction)
+  }
+
   /**
    * Creates auxiliary DOM elements for text adornments.
    */
@@ -1130,7 +1142,7 @@ class BesService {
       popup.setContent(el, match, this, this.isContentEditable())
       this.highlightMistake(match)
     })
-    popup.show(source.clientX, source.clientY)
+    popup.show(source.clientX, source.clientY, this)
   }
 
   /**
@@ -1189,7 +1201,7 @@ class BesService {
     this.highlightMistake(match)
     match.highlights.forEach(el => {
       const clientY = `${el.y + 150}`
-      popup.show(el.x, clientY)
+      popup.show(el.x, clientY, this)
     })
   }
 
@@ -2863,7 +2875,7 @@ class BesPopup extends HTMLElement {
           padding: 3px 2px;
         }
         .bes-toolbar button {
-          margin-right: 2px;
+          margin-right: 0px;
         }
         .bes-popup-title {
           color: #333;
@@ -2904,6 +2916,9 @@ class BesPopup extends HTMLElement {
           width: 100%;
           height: 100%;
         }
+        .bes-mistake-nav{
+          margin-right: 10px;
+        }
         :host{
           --bes-close-icon: #485362;
           --hover-bg-clr: #dee3ed;
@@ -2948,12 +2963,36 @@ class BesPopup extends HTMLElement {
       <div class="bes-popup-container">
         <div class="bes-toolbar">
           <div class="bes-popup-title">Besana</div>
+           <div class="bes-mistake-nav">
+          <button class="bes-close-btn" title="Prejšnja napaka">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="var(--bes-close-icon)" d="M11 20V7.825l-5.6 5.6L4 12l8-8l8 8l-1.4 1.425l-5.6-5.6V20z"/></svg>
+          </button>
+          <button class="bes-close-btn" title="Naslednja napaka">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="var(--bes-close-icon)" d="M11 4v12.175l-5.6-5.6L4 12l8 8l8-8l-1.4-1.425l-5.6 5.6V4z"/></svg>
+          </button>
+          </div>
           <button class="bes-close-btn" onclick="BesPopup.dismiss()">
             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="var(--bes-close-icon)" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
           </button>
         </div>
       </div>
     `
+    const prevBtn = this.shadowRoot.querySelector(
+      '.bes-mistake-nav .bes-close-btn[title="Prejšnja napaka"]'
+    )
+    const nextBtn = this.shadowRoot.querySelector(
+      '.bes-mistake-nav .bes-close-btn[title="Naslednja napaka"]'
+    )
+
+    prevBtn.addEventListener('click', () => {
+      if (this.hostElService)
+        BesService.arrowBtnNavigation('back', this.hostElService)
+    })
+    nextBtn.addEventListener('click', () => {
+      if (this.hostElService)
+        BesService.arrowBtnNavigation('forward', this.hostElService)
+    })
+
     this.addEventListener('mousedown', this.onMouseDown)
   }
 
@@ -2963,9 +3002,9 @@ class BesPopup extends HTMLElement {
    * @param {Number} x X location hint
    * @param {Number} y Y location hint
    */
-  show(x, y) {
+  show(x, y, service) {
-    console.log(x, y)
     this.style.position = 'fixed'
+    this.hostElService = service
 
     // Element needs some initial placement for the browser to provide this.offsetWidth and this.
     // offsetHeight measurements.