Popover auto positioning

ec450711 · Kamran Ahmed · ede8cb95 · ec450711 · ec450711 · ec450711
隐藏空白更改
内联并排

Showing with 50 addition and 6 deletion

assets/scripts/src/element.js assets/scripts/src/element.js +47 -3

assets/styles/scss/demo.scss assets/styles/scss/demo.scss +0 -1

index.html index.html +3 -2

未找到文件。
--- a/assets/scripts/src/element.js
+++ b/assets/scripts/src/element.js
@@ -75,11 +75,30 @@ export default class Element {
  }

  showPopover() {
+    this.resetPopover();
+
+    // Position at which the element is
    const position = this.getCalculatedPosition();

-    this.popover.style.left = `${position.left}px`;
-    this.popover.style.top = `${position.bottom + 10}px`;
-    this.popover.style.display = 'block';
+    const popoverTip = this.popover.querySelector('.sholo-popover-tip');
+
+    const documentHeight = this.getDocumentHeight();
+    const popoverHeight = this.getPopoverHeight();
+    const popoverMargin = this.options.padding + 10;
+
+    this.popover.style.left = `${position.left - this.options.padding}px`;
+
+    // Calculate different dimensions after attaching popover
+    const documentHeightAfterPopOver = position.bottom + popoverHeight + popoverMargin;
+
+    // If adding popover would go out of the window height, then show it to the top
+    if (documentHeightAfterPopOver >= documentHeight) {
+      this.popover.style.top = `${position.top - popoverHeight - popoverMargin}px`;
+      popoverTip.classList.add('bottom');
+    } else {
+      this.popover.style.top = `${position.bottom + popoverMargin}px`;
+      popoverTip.classList.add('top');
+    }
  }

  getPopover() {
@@ -93,4 +112,29 @@ export default class Element {
  hidePopover() {
    this.popover.style.display = 'none';
  }
+
+  getDocumentHeight() {
+    // eslint-disable-next-line prefer-destructuring
+    const body = this.document.body;
+    const html = this.document.documentElement;
+
+    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+  }
+
+  getPopoverHeight() {
+    return Math.max(this.popover.scrollHeight, this.popover.offsetHeight);
+  }
+
+  resetPopover() {
+    this.popover.style.display = 'block';
+    this.popover.style.left = '';
+    this.popover.style.top = '';
+    this.popover.style.bottom = '';
+    this.popover.style.right = '';
+
+    // Remove the positional classes from tip
+    this.popover
+      .querySelector('.sholo-popover-tip')
+      .className = 'sholo-popover-tip';
+  }
 }
--- a/assets/styles/scss/demo.scss
+++ b/assets/styles/scss/demo.scss
@@ -47,7 +47,6 @@ section {

 /////////////////////////////////////////
 div#sholo-popover-item {
-
  display: none;
  background: white;
  margin: 0;

--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 </head>
 <body>
 <div id="sholo-popover-item">
-  <div class="sholo-popover-tip top"></div>
+  <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>
@@ -65,9 +65,10 @@
    const sholo = new Sholo({
      animate: true,
      opacity: 0.8,
-      padding: 0
+      padding: 5
    });

+
  document.querySelector('.btn__example')
    .addEventListener('click', function () {
      sholo.highlight('.section__header');