Optionally toggle the constraint classes on the attachment element

AshesOfOwls · Aug 14, 2017 · 125e037 · 125e037
1 parent 7653652
commit 125e037
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 16 deletions.
diff --git a/dist/popover.js b/dist/popover.js
@@ -102,6 +102,14 @@ var removeClass = function removeClass(element, className) {
   element.classList.remove(className);
 };
 
+var toggleClassesOnElement = function toggleClassesOnElement(element, classes, isToggled) {
+  var method = isToggled ? addClass : removeClass;
+
+  classes.forEach(function (className) {
+    method(element, className);
+  });
+};
+
 var setHalfPointsOnOrigin = function setHalfPointsOnOrigin(origin) {
   var halfHeight = origin.height / 2;
   var halfWidth = origin.width / 2;
@@ -174,6 +182,7 @@ exports.getElementOrigin = getElementOrigin;
 exports.setHalfPointsOnOrigin = setHalfPointsOnOrigin;
 exports.getWindowOrigin = getWindowOrigin;
 exports.whichTransitionEvent = whichTransitionEvent;
+exports.toggleClassesOnElement = toggleClassesOnElement;
 
 /***/ }),
 /* 1 */
@@ -1591,6 +1600,7 @@ var defaults = {
   constraintElement: null,
   unnecessaryRepositioning: true,
   scrollPositioning: true,
+  applyClassesToAttachment: false,
   constraints: [{
     popover: 'top left',
     attachment: 'bottom right'
@@ -1816,6 +1826,7 @@ var Positioner = function () {
   }, {
     key: 'destroy',
     value: function destroy() {
+      this.clearActiveConstraint();
       this.destroyListeners();
       this.destroyContainer();
     }
@@ -2035,7 +2046,13 @@ var Positioner = function () {
   }, {
     key: 'toggleActiveConstraints',
     value: function toggleActiveConstraints(isToggled) {
-      this.togglePopoverClasses(this.getActiveConstraintClasses(), isToggled);
+      var constraintClasses = this.getActiveConstraintClasses();
+
+      this.togglePopoverClasses(constraintClasses, isToggled);
+
+      if (this.options.applyClassesToAttachment) {
+        (0, _utils.toggleClassesOnElement)(this.attachmentElement, constraintClasses, isToggled);
+      }
     }
   }, {
     key: 'activeConstraintIs',
@@ -2058,12 +2075,7 @@ var Positioner = function () {
   }, {
     key: 'togglePopoverClasses',
     value: function togglePopoverClasses(classes, isToggled) {
-      var popover = this.popoverElement;
-      var method = isToggled ? _utils.addClass : _utils.removeClass;
-
-      classes.forEach(function (className) {
-        method(popover, className);
-      });
+      (0, _utils.toggleClassesOnElement)(this.popoverElement, classes, isToggled);
     }
   }, {
     key: 'getActiveConstraintClasses',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popover.js",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "",
   "main": "dist/popover.js",
   "scripts": {

diff --git a/src/positioner.js b/src/positioner.js
@@ -1,11 +1,12 @@
-import { addClass, removeClass, getElementOrigin, getWindowOrigin } from './utils';
+import { toggleClassesOnElement, getElementOrigin, getWindowOrigin } from './utils';
 
 const defaults = {
   dynamicWidth: false,
   attachmentElement: null,
   constraintElement: null,
   unnecessaryRepositioning: true,
   scrollPositioning: true,
+  applyClassesToAttachment: false,
   constraints: [{
     popover: 'top left',
     attachment: 'bottom right',
@@ -198,6 +199,7 @@ class Positioner {
   }
 
   destroy() {
+    this.clearActiveConstraint();
     this.destroyListeners();
     this.destroyContainer();
   }
@@ -390,7 +392,13 @@ class Positioner {
   }
 
   toggleActiveConstraints(isToggled) {
-    this.togglePopoverClasses(this.getActiveConstraintClasses(), isToggled);
+    const constraintClasses = this.getActiveConstraintClasses();
+
+    this.togglePopoverClasses(constraintClasses, isToggled);
+
+    if (this.options.applyClassesToAttachment) {
+      toggleClassesOnElement(this.attachmentElement, constraintClasses, isToggled);
+    }
   }
 
   activeConstraintIs(constraintObject) {
@@ -406,12 +414,7 @@ class Positioner {
   }
 
   togglePopoverClasses(classes, isToggled) {
-    const popover = this.popoverElement;
-    const method = isToggled ? addClass : removeClass;
-
-    classes.forEach((className) => {
-      method(popover, className);
-    });
+    toggleClassesOnElement(this.popoverElement, classes, isToggled);
   }
 
   getActiveConstraintClasses() {

diff --git a/src/utils.js b/src/utils.js
@@ -17,6 +17,14 @@ const removeClass = (element, className) => {
   element.classList.remove(className);
 };
 
+const toggleClassesOnElement = (element, classes, isToggled) => {
+  const method = isToggled ? addClass : removeClass;
+
+  classes.forEach((className) => {
+    method(element, className);
+  });
+};
+
 const setHalfPointsOnOrigin = (origin) => {
   const halfHeight = origin.height / 2;
   const halfWidth = origin.width / 2;
@@ -88,4 +96,5 @@ export {
   setHalfPointsOnOrigin,
   getWindowOrigin,
   whichTransitionEvent,
+  toggleClassesOnElement,
 };