Using event delegation and dataset to reduce the listener to one (#168)

* added all the possible position options into the demo page

* event listener is reduced to one and data- attribute is used.

demo/index.html

@@ -142,11 +142,25 @@ driver.highlight({
 </code></pre>
     </div>
     <div class="section__example">
-      <div class="top-20 position-btns">
-        <a href="#" id="position-btn-left">On my Left</a>
-        <a href="#" id="position-btn-top">On my Top</a>
-        <a href="#" id="position-btn-bottom">On my Bottom</a>
-        <a href="#" id="position-btn-right">On my Right</a>
+      <div class="top-90 position-btns" id="position-btns">
+        <a href="#" id="position-btn-left" data-alignment="left">Left, Left Top</a>
+        <a href="#" id="position-btn-left-center" data-alignment="left-center">Left Center</a>
+        <a href="#" id="position-btn-left-bottom" data-alignment="left-bottom">Left Bottom</a>
+
+        <a href="#" id="position-btn-right" data-alignment="right">Right, Right Top</a>
+        <a href="#" id="position-btn-right-center" data-alignment="right-center">Right Center</a>
+        <a href="#" id="position-btn-right-bottom" data-alignment="right-bottom">Right Bottom</a>
+
+        <a href="#" id="position-btn-top" data-alignment="top">Top, Top-left</a>
+        <a href="#" id="position-btn-top-center" data-alignment="top-center">Top Center</a>
+        <a href="#" id="position-btn-top-right" data-alignment="top-right">Top Right</a>
+
+        <a href="#" id="position-btn-bottom" data-alignment="bottom">Bottom, Bottom left</a>
+        <a href="#" id="position-btn-bottom-center" data-alignment="bottom-center">Bottom center</a>
+        <a href="#" id="position-btn-bottom-right" data-alignment="bottom-right">Bottom right</a>
+
+        <a href="#" id="position-btn-mid-center" data-alignment="mid-center">Mid Center</a>
+        <!-- <a href="#" id="position-btn-auto" data-alignment="auto">Auto</a> -->
       </div>
       <p class="top-20">If you don't specify the position or specify it to be <code>auto</code>, it will automatically
         find the suitable position for the popover and show it</p>

demo/scripts/demo.js

@@ -205,65 +205,25 @@ document.addEventListener('DOMContentLoaded', function () {
     padding: 0,
   });
 
-  document.querySelector('#position-btn-left')
+  document.querySelector('#position-btns')
     .addEventListener('click', (e) => {
       e.preventDefault();
 
-      positionBtnsDriver.highlight({
-        element: '#position-btn-left',
-        showButtons: false,
-        popover: {
-          title: 'Did you know?',
-          description: 'You can add HTML in title or description also!',
-          position: 'left'
-        }
-      });
-    });
-
-  document.querySelector('#position-btn-right')
-    .addEventListener('click', (e) => {
-      e.preventDefault();
-
-      positionBtnsDriver.highlight({
-        element: '#position-btn-right',
-        showButtons: false,
-        popover: {
-          title: 'Did you know?',
-          description: 'You can add HTML in title or description also!',
-          position: 'right'
-        }
-      });
-    });
-
-  document.querySelector('#position-btn-bottom')
-    .addEventListener('click', (e) => {
-      e.preventDefault();
-
-      positionBtnsDriver.highlight({
-        element: '#position-btn-bottom',
-        showButtons: false,
-        popover: {
-          title: 'Did you know?',
-          description: 'You can add HTML in title or description also!',
-          position: 'bottom'
-        }
-      });
-    });
+      let id = e.target.id;
+      let alignment = e.target.dataset.alignment;
 
-  document.querySelector('#position-btn-top')
-    .addEventListener('click', (e) => {
-      e.preventDefault();
+      if (!alignment) return;
 
       positionBtnsDriver.highlight({
-        element: '#position-btn-top',
+        element: `#${id}`,
         showButtons: false,
         popover: {
           title: 'Did you know?',
           description: 'You can add HTML in title or description also!',
-          position: 'top'
+          position: alignment
         }
       });
-    });
+    })
 
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position

demo/styles/demo.scss

@@ -108,6 +108,17 @@ section {
   }
 }
 
+.position-btns {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-gap: 8px;
+  text-align: center;
+
+  #position-btn-mid-center{
+    grid-column: 2/ span 1;
+  }
+}
+
 .position-btns a {
   text-decoration: none;
   font-size: 13px;
@@ -115,4 +126,4 @@ section {
   background: #f54336;
   color: white !important;
   border-radius: 6px;
-}
+}