From 1de5288914cf672f29ffaae10fc38dc9c978e61c Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 11 Mar 2018 14:08:26 +0100
Subject: [PATCH] More examples and docs

---
 demo/scripts/demo.js  | 82 +++++++++++++++++++++++++++++++++++++++++++
 demo/styles/demo.scss | 10 +++++-
 index.html            | 28 +++++++++++++++
 3 files changed, 119 insertions(+), 1 deletion(-)

diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 20ba3f1..48dbf13 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -101,6 +101,88 @@ document.querySelector('#run-single-element-with-popover')
       popover: {
         title: 'Did you know?',
         description: 'You can add HTML in title or description also!',
+        position: 'top'
       }
     });
   });
+
+/////////////////////////////////////////////////////
+// Highlighting single element with popover position
+/////////////////////////////////////////////////////
+const singleSholoWithPopoverPosition = new Sholo();
+document.querySelector('#run-single-element-with-popover-position')
+  .addEventListener('click', (e) => {
+    e.preventDefault();
+
+    singleSholoWithPopoverPosition.highlight({
+      element: '#single-element-with-popover-position',
+      popover: {
+        title: 'Did you know?',
+        description: 'You can add HTML in title or description also!',
+        position: 'left'
+      }
+    });
+  });
+
+/////////////////////////////////////////////////////
+// Highlighting single element with popover position
+/////////////////////////////////////////////////////
+const positionBtnsSholo = new Sholo({
+  padding: 0
+});
+
+document.querySelector('#position-btn-left')
+  .addEventListener('click', (e) => {
+    e.preventDefault();
+
+    positionBtnsSholo.highlight({
+      element: '#position-btn-left',
+      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();
+
+    positionBtnsSholo.highlight({
+      element: '#position-btn-right',
+      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();
+
+    positionBtnsSholo.highlight({
+      element: '#position-btn-bottom',
+      popover: {
+        title: 'Did you know?',
+        description: 'You can add HTML in title or description also!',
+        position: 'bottom'
+      }
+    });
+  });
+
+document.querySelector('#position-btn-top')
+  .addEventListener('click', (e) => {
+    e.preventDefault();
+
+    positionBtnsSholo.highlight({
+      element: '#position-btn-top',
+      popover: {
+        title: 'Did you know?',
+        description: 'You can add HTML in title or description also!',
+        position: 'top'
+      }
+    });
+  });
\ No newline at end of file
diff --git a/demo/styles/demo.scss b/demo/styles/demo.scss
index a8c5c7d..f386d9f 100644
--- a/demo/styles/demo.scss
+++ b/demo/styles/demo.scss
@@ -91,8 +91,16 @@ section {
     background-color: #fafbfc;
     border: 3px solid #e1e4e8;
     border-radius: 3px;
-    box-shadow: inset 0 0 10px rgba(27,31,35,0.05);
+    box-shadow: inset 0 0 10px rgba(27, 31, 35, 0.05);
     margin-bottom: 0;
     margin-top: 7px;
   }
+}
+
+.position-btns a {
+  font-size: 13px;
+  padding: 10px 15px;
+  background: #f54336;
+  color: white !important;
+  border-radius: 6px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index fd5f032..9f8aeed 100644
--- a/index.html
+++ b/index.html
@@ -102,8 +102,36 @@ driver.highlight({
   }
 });
 </code></pre>
+      <p class="top-20">You can modify the behavior of this popover also by a certain set of options. More on it
+        below.</p>
     </div>
 
+    <hr class="hr__fancy">
+
+    <div id="single-element-with-popover-position" class="section__example">
+      <h4>Popover Positioning</h4>
+      <p>You can also, change the position of the popover to be either <code>left</code>, <code>top</code>,
+        <code>right</code> or <code>bottom</code>.</p>
+      <a href="#" class="btn__run-demo" id="run-single-element-with-popover-position">Run it</a>
+      <pre><code class="javascript">const driver = new Driver();
+driver.highlight({
+  element: '#some-element',
+  popover: {
+    title: 'Title for the Popover',
+    description: 'Description for it',
+    position: 'left', // can be `top`, `left`, `right`, `bottom`
+  }
+});
+</code></pre>
+      <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>
+      <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>
+    </div>
   </section>
 </div>
 
-- 
GitLab