From 88eeb965404200866d18830c79f3789df8c67955 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 8 Feb 2019 00:40:27 +0400
Subject: [PATCH] Add functionality to position the popover on mid center

---
 demo/scripts/demo.js |  1 +
 src/core/popover.js  | 27 +++++++++++++++++++++++++++
 src/driver.scss      |  4 ++++
 types/index.d.ts     |  6 ++++++
 4 files changed, 38 insertions(+)

diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 071d429..d05b4dd 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -10,6 +10,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: 'mid-center',
       },
     }, {
       element: '#logo_img',
diff --git a/src/core/popover.js b/src/core/popover.js
index 3df764b..d33498e 100644
--- a/src/core/popover.js
+++ b/src/core/popover.js
@@ -167,6 +167,9 @@ export default class Popover extends Element {
       case 'bottom-right':
         this.positionOnBottomRight(position);
         break;
+      case 'mid-center':
+        this.positionOnMidCenter(position);
+        break;
       case 'auto':
       default:
         this.autoPosition(position);
@@ -434,6 +437,30 @@ export default class Popover extends Element {
     this.tipNode.classList.add('top', 'position-right');
   }
 
+  /**
+   * Shows the popover on the mid-center of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnMidCenter(elementPosition) {
+    const popoverDimensions = this.getSize();
+    const popoverHeight = popoverDimensions.height;
+    const popoverWidth = popoverDimensions.width / 2;
+    const popoverCenter = popoverHeight / 2;
+
+    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
+    const topCenterPosition = (elementPosition.top - popoverCenter) + elementCenter + this.options.offset;
+    const nodeCenter = this.options.offset + elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
+
+    this.node.style.top = `${topCenterPosition}px`;
+    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('mid-center');
+  }
+
   /**
    * Automatically positions the popover around the given position
    * such that the element and popover remain in view
diff --git a/src/driver.scss b/src/driver.scss
index 5791aac..41790e8 100644
--- a/src/driver.scss
+++ b/src/driver.scss
@@ -99,6 +99,10 @@ div#driver-popover-item {
         right: 20px;
       }
     }
+
+    &.mid-center {
+      display: none;
+    }
   }
 
   .driver-popover-footer {
diff --git a/types/index.d.ts b/types/index.d.ts
index 7309ccd..4d9de47 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -555,6 +555,12 @@ declare module 'driver.js' {
        */
       private positionOnBottomRight(position: Driver.Position): void;
 
+      /**
+       * Positions the popover to the middle center of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnMidCenter(position: Driver.Position): void;
+
       /**
        * Positions the popover automatically around the element position
        * @param {Driver.Position} position