Add option to close popover when it is constrained/cutoff from the page

AshesOfOwls · Oct 19, 2017 · 2839711 · 2839711
1 parent 24bb9a3
commit 2839711
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/dist/popover.js b/dist/popover.js
@@ -429,7 +429,9 @@ var Popoverjs = function () {
   }, {
     key: 'positionerOptions',
     get: function get() {
-      return Object.assign({}, this.options);
+      return Object.assign({
+        hide: this.forceHide.bind(this)
+      }, this.options);
     }
   }]);
 
@@ -1205,6 +1207,7 @@ var defaults = {
   scrollPositioning: true,
   scrollParentConstraint: true,
   applyClassesToAttachment: false,
+  closeOnCutoff: false,
   constraints: [{
     popover: 'top right',
     attachment: 'bottom right'
@@ -1478,7 +1481,7 @@ var Positioner = function () {
 
       this.scrollParent = this.getScrollParent();
       if (this.scrollParent) {
-        this.scrollParent.addEventListener('scroll', this.onResize.bind(this));
+        this.scrollParent.addEventListener('scroll', this.onScroll.bind(this));
       }
     }
   }, {
@@ -1502,11 +1505,20 @@ var Positioner = function () {
     key: 'onResize',
     value: function onResize() {
       this.position();
+      this.attemptAutoClose();
     }
   }, {
     key: 'onScroll',
     value: function onScroll() {
       this.position();
+      this.attemptAutoClose();
+    }
+  }, {
+    key: 'attemptAutoClose',
+    value: function attemptAutoClose() {
+      if (this.isCompletelyConstrained && this.options.closeOnCutoff) {
+        this.options.hide();
+      }
     }
   }, {
     key: 'disable',
@@ -1536,6 +1548,8 @@ var Positioner = function () {
       if (activeConstraint) {
         this.applyConstraint(activeConstraint);
       }
+
+      this.isCompletelyConstrained = !activeConstraint;
     }
   }, {
     key: 'getActiveConstraint',

diff --git a/src/index.js b/src/index.js
@@ -115,7 +115,9 @@ class Popoverjs {
   }
 
   get positionerOptions() {
-    return Object.assign({}, this.options);
+    return Object.assign({
+      hide: this.forceHide.bind(this),
+    }, this.options);
   }
 
   setUpPositioner() {

diff --git a/src/positioner.js b/src/positioner.js
@@ -14,6 +14,7 @@ const defaults = {
   scrollPositioning: true,
   scrollParentConstraint: true,
   applyClassesToAttachment: false,
+  closeOnCutoff: false,
   constraints: [{
     popover: 'top right',
     attachment: 'bottom right',
@@ -258,7 +259,7 @@ class Positioner {
 
     this.scrollParent = this.getScrollParent();
     if (this.scrollParent) {
-      this.scrollParent.addEventListener('scroll', this.onResize.bind(this));
+      this.scrollParent.addEventListener('scroll', this.onScroll.bind(this));
     }
   }
 
@@ -279,10 +280,18 @@ class Positioner {
 
   onResize() {
     this.position();
+    this.attemptAutoClose();
   }
 
   onScroll() {
     this.position();
+    this.attemptAutoClose();
+  }
+
+  attemptAutoClose() {
+    if (this.isCompletelyConstrained && this.options.closeOnCutoff) {
+      this.options.hide();
+    }
   }
 
   disable() {
@@ -310,6 +319,8 @@ class Positioner {
     if (activeConstraint) {
       this.applyConstraint(activeConstraint);
     }
+
+    this.isCompletelyConstrained = !activeConstraint;
   }
 
   getActiveConstraint() {