From b9e11b1d19cdfeb09cdcc2e8f511c29ed38140d2 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 28 Jul 2018 20:49:02 +0400
Subject: [PATCH] Add bottom right positioning

---
 demo/scripts/demo.js |  2 +-
 src/core/popover.js  | 25 ++++++++++++++++++++++++-
 src/driver.scss      |  6 +++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 7ea6d6a..dfd0d4c 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -8,7 +8,7 @@ document.addEventListener('DOMContentLoaded', function () {
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
         nextBtnText: 'Okay, Start!',
-        position: 'bottom-center'
+        position: 'bottom-right'
       },
     }, {
       element: '#logo_img',
diff --git a/src/core/popover.js b/src/core/popover.js
index 9f298ae..879ed51 100644
--- a/src/core/popover.js
+++ b/src/core/popover.js
@@ -142,6 +142,9 @@ export default class Popover extends Element {
       case 'bottom-center':
         this.positionOnBottomCenter(position);
         break;
+      case 'bottom-right':
+        this.positionOnBottomRight(position);
+        break;
       case 'auto':
       default:
         this.autoPosition(position);
@@ -262,7 +265,27 @@ export default class Popover extends Element {
     this.node.style.bottom = '';
 
     // Add the tip at the top center
-    this.tipNode.classList.add('top', 'center');
+    this.tipNode.classList.add('top', 'position-center');
+  }
+
+  /**
+   * Shows the popover on the bottom-right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnBottomRight(elementPosition) {
+    // const popoverWidth = this.getSize().width / 2;
+    // const nodeCenter = elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
+    this.node.style.right = `${elementPosition.left - this.options.padding}px`;
+    // this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
+    this.node.style.left = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('top', 'position-right');
   }
 
   /**
diff --git a/src/driver.scss b/src/driver.scss
index 858fec7..0777ffb 100644
--- a/src/driver.scss
+++ b/src/driver.scss
@@ -66,9 +66,13 @@ div#driver-popover-item {
       border-left-color: transparent;
     }
 
-    &.center {
+    &.position-center {
       left: 49%;
     }
+
+    &.position-right {
+      right: 20px;
+    }
   }
 
   .driver-popover-footer {