diff --git a/dist/popover.js b/dist/popover.js index 0c41ad5e..55a32fd7 100644 --- 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 index 4b91af65..6d5380f2 100644 --- 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 index 7ae5c37d..0ee56225 100644 --- 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() {