Dynamically add the popover if not there

assets/scripts/src/constants.js

@@ -5,10 +5,28 @@ export const OVERLAY_ZINDEX = '999999999';
 
 export const ESC_KEY_CODE = 27;
 
-export const ID_POPOVER = 'sholo-popover-item';
 export const ID_OVERLAY = 'sholo-canvas-overlay';
 
+export const ID_POPOVER = 'sholo-popover-item';
 export const CLASS_POPOVER_TIP = 'sholo-popover-tip';
+export const CLASS_POPOVER_TITLE = 'sholo-popover-title';
+export const CLASS_POPOVER_DESCRIPTION = 'sholo-popover-description';
+export const CLASS_POPOVER_FOOTER = 'sholo-popover-footer';
+export const CLASS_CLOSE_BTN = 'sholo-close-btn';
 export const CLASS_NEXT_STEP_BTN = 'sholo-next-btn';
 export const CLASS_PREV_STEP_BTN = 'sholo-prev-btn';
-export const CLASS_CLOSE_BTN = 'sholo-close-btn';
+
+// language=HTML
+export const POPOVER_HTML = `
+  <div id="${ID_POPOVER}">
+    <div class="${CLASS_POPOVER_TIP}"></div>
+    <div class="${CLASS_POPOVER_TITLE}">Popover Title</div>
+    <div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>
+    <div class="${CLASS_POPOVER_FOOTER}">
+      <a href="javascript:void(0)" class="${CLASS_CLOSE_BTN}">Close</a>
+      <span class="sholo-btn-group">
+        <a class="${CLASS_PREV_STEP_BTN}" href="javascript:void(0)">&larr; Previous</a>
+        <a class="${CLASS_NEXT_STEP_BTN}" href="javascript:void(0)">Next &rarr;</a>
+      </span>
+    </div>
+  </div>`;

assets/scripts/src/popover.js

 import Element from './element';
-import { CLASS_POPOVER_TIP, ID_POPOVER } from './constants';
+import { CLASS_POPOVER_TIP, ID_POPOVER, OVERLAY_PADDING, POPOVER_HTML } from './constants';
 
 /**
  * Popover that is displayed on top of the highlighted element
  */
 export default class Popover extends Element {
   constructor(options = {
-    padding: 10,
+    padding: OVERLAY_PADDING,
   }, window, document) {
     super();
 
@@ -14,17 +14,35 @@ export default class Popover extends Element {
     this.window = window;
     this.document = document;
 
-    this.node = this.getPopover();
+    this.node = this.preparePopover();
+    this.hide();
   }
 
-  getPopover() {
-    // @todo: Create if not there
-    const popover = this.document.getElementById(ID_POPOVER);
-    popover.style.position = 'absolute';
+  preparePopover() {
+    let popover = this.document.getElementById(ID_POPOVER);
+    if (popover) {
+      return popover;
+    }
+
+    popover = Popover.createFromString(POPOVER_HTML);
+    document.body.appendChild(popover);
 
     return popover;
   }
 
+  /**
+   * Turn a string into a node
+   * @param  {String} htmlString to convert
+   * @return {Node}   Converted node element
+   */
+  static createFromString(htmlString) {
+    const div = document.createElement('div');
+    div.innerHTML = htmlString.trim();
+
+    // Change this to div.childNodes to support multiple top-level nodes
+    return div.firstChild;
+  }
+
   getHeight() {
     return Math.max(this.node.scrollHeight, this.node.offsetHeight);
   }
@@ -35,8 +53,8 @@ export default class Popover extends Element {
 
   reset() {
     this.node.style.display = 'block';
-    this.node.style.left = '';
-    this.node.style.top = '';
+    this.node.style.left = '0';
+    this.node.style.top = '0';
     this.node.style.bottom = '';
     this.node.style.right = '';
 
@@ -49,11 +67,11 @@ export default class Popover extends Element {
   show(position) {
     this.reset();
 
-    const popoverTip = this.node.querySelector(`.${CLASS_POPOVER_TIP}`);
-
     const pageHeight = this.getFullPageSize().height;
-    const popoverHeight = this.getHeight();
+
+    const popoverTip = this.node.querySelector(`.${CLASS_POPOVER_TIP}`);
     const popoverMargin = this.options.padding + 10;
+    const popoverHeight = this.getHeight();
 
     this.node.style.left = `${position.left - this.options.padding}px`;
 

assets/styles/scss/demo.scss

@@ -48,6 +48,7 @@ section {
 /////////////////////////////////////////
 div#sholo-popover-item {
   display: none;
+  position: absolute;
   background: white;
   margin: 0;
   padding: 15px;

index.html

@@ -9,18 +9,6 @@
   <link rel="stylesheet" href="./assets/styles/css/demo.css">
 </head>
 <body>
-<div id="sholo-popover-item">
-  <div class="sholo-popover-tip"></div>
-  <div class="sholo-popover-title">Did you know?</div>
-  <div class="sholo-popover-description">You can make step by step introductions with sholo!</div>
-  <div class="sholo-popover-footer">
-    <a href="javascript:void(0)" class="sholo-close-btn">Close</a>
-    <span class="sholo-btn-group">
-      <a class="sholo-prev-btn" href="javascript:void(0)">&larr; Previous</a>
-      <a class="sholo-next-btn" href="javascript:void(0)">Next &rarr;</a>
-    </span>
-  </div>
-</div>
 <div class="page-wrap">
   <section class="section__header" data-sholo="Hey welcome to presenter!">
     <h1>Sholo</h1>