Add dynamic constraint secondary values with story for constraint options

Author: AshesOfOwls

dist/index.js

@@ -2283,6 +2283,19 @@ var generateClassesForConstraint = function generateClassesForConstraint(prefix,
   return [prefix + '--popover-primary-' + constraint.popover.primary, prefix + '--popover-secondary-' + constraint.popover.secondary, prefix + '--attachment-primary-' + constraint.attachment.primary, prefix + '--attachment-secondary-' + constraint.attachment.secondary];
 };
 
+var generatePossibleConstraintsFor = function generatePossibleConstraintsFor(side) {
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      return [side + ' left', side + ' center', side + ' right'];
+    case 'left':
+    case 'right':
+      return [side + ' top', side + ' center', side + ' bottom'];
+    default:
+      return [side.join(' ')];
+  }
+};
+
 var Positioner = function () {
   function Positioner(options) {
     _classCallCheck(this, Positioner);
@@ -2464,34 +2477,59 @@ var Positioner = function () {
   }, {
     key: 'parseConstraints',
     value: function parseConstraints() {
-      var id = 0;
-      var classPrefix = this.options.classPrefix;
+      var _this = this;
 
-      this.constraints = this.options.constraints.map(function (constraint) {
-        var attachmentConstraint = constraint.attachment.split(' ');
-        var popoverConstraint = constraint.popover.split(' ');
-
-        id += 1;
-
-        var parsedConstraint = {
-          id: id,
-          attachment: {
-            primary: attachmentConstraint[0],
-            secondary: attachmentConstraint[1],
-            string: constraint.attachment
-          },
-          popover: {
-            primary: popoverConstraint[0],
-            secondary: popoverConstraint[1],
-            string: constraint.popover
-          }
-        };
+      this.constraints = [];
+
+      this.options.constraints.forEach(function (constraint) {
+        return _this.parseConstraint(constraint);
+      });
+    }
+  }, {
+    key: 'parseConstraint',
+    value: function parseConstraint(constraint) {
+      var _this2 = this;
+
+      var validConstraints = [];
 
-        parsedConstraint.classes = generateClassesForConstraint(classPrefix, parsedConstraint);
+      var attachmentConstraints = generatePossibleConstraintsFor(constraint.attachment);
+      var popoverConstraints = generatePossibleConstraintsFor(constraint.popover);
 
-        return Object.assign({}, constraint, parsedConstraint);
+      popoverConstraints.forEach(function (attachment) {
+        attachmentConstraints.forEach(function (popover) {
+          validConstraints.push({ popover: popover, attachment: attachment });
+        });
+      });
+
+      validConstraints.forEach(function (validConstraint) {
+        return _this2.addConstraint(validConstraint);
       });
     }
+  }, {
+    key: 'addConstraint',
+    value: function addConstraint(constraint) {
+      var classPrefix = this.options.classPrefix;
+      var attachmentConstraint = constraint.attachment.split(' ');
+      var popoverConstraint = constraint.popover.split(' ');
+
+      var parsedConstraint = {
+        id: this.constraints.length,
+        attachment: {
+          primary: attachmentConstraint[0],
+          secondary: attachmentConstraint[1],
+          string: constraint.attachment
+        },
+        popover: {
+          primary: popoverConstraint[0],
+          secondary: popoverConstraint[1],
+          string: constraint.popover
+        }
+      };
+
+      parsedConstraint.classes = generateClassesForConstraint(classPrefix, parsedConstraint);
+
+      this.constraints.push(Object.assign({}, constraint, parsedConstraint));
+    }
   }, {
     key: 'enable',
     value: function enable() {
@@ -2551,7 +2589,7 @@ var Positioner = function () {
   }, {
     key: 'destroy',
     value: function destroy() {
-      this.clearActiveConstraint();
+      // this.clearActiveConstraint();
       this.destroyListeners();
       this.destroyContainer();
     }
@@ -2611,14 +2649,14 @@ var Positioner = function () {
   }, {
     key: 'getActiveConstraint',
     value: function getActiveConstraint() {
-      var _this = this;
+      var _this3 = this;
 
       if (!this.options.unnecessaryRepositioning && this.canFitInto(this.activeConstraint)) {
         return this.activeConstraint;
       }
 
       return this.constraints.find(function (constraint) {
-        if (_this.canFitInto(constraint)) {
+        if (_this3.canFitInto(constraint)) {
           return constraint;
         }
         return false;
@@ -2835,6 +2873,7 @@ var Positioner = function () {
         return;
       }
 
+      this.toggleActiveConstraints(false);
       this.activeConstraint = null;
     }
   }, {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "popover.js",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

src/positioner.js

@@ -56,6 +56,19 @@ const generateClassesForConstraint = (prefix, constraint) => ([
   `${prefix}--attachment-secondary-${constraint.attachment.secondary}`,
 ]);
 
+const generatePossibleConstraintsFor = (side) => {
+  switch (side) {
+  case 'top':
+  case 'bottom':
+    return [`${side} left`, `${side} center`, `${side} right`];
+  case 'left':
+  case 'right':
+    return [`${side} top`, `${side} center`, `${side} bottom`];
+  default:
+    return [side.join(' ')];
+  }
+};
+
 class Positioner {
   constructor(options) {
     this.generateOptions(options);
@@ -210,33 +223,48 @@ class Positioner {
   }
 
   parseConstraints() {
-    let id = 0;
-    const classPrefix = this.options.classPrefix;
+    this.constraints = [];
 
-    this.constraints = this.options.constraints.map((constraint) => {
-      const attachmentConstraint = constraint.attachment.split(' ');
-      const popoverConstraint = constraint.popover.split(' ');
-
-      id += 1;
-
-      const parsedConstraint = {
-        id,
-        attachment: {
-          primary: attachmentConstraint[0],
-          secondary: attachmentConstraint[1],
-          string: constraint.attachment,
-        },
-        popover: {
-          primary: popoverConstraint[0],
-          secondary: popoverConstraint[1],
-          string: constraint.popover,
-        },
-      };
-
-      parsedConstraint.classes = generateClassesForConstraint(classPrefix, parsedConstraint);
-
-      return Object.assign({}, constraint, parsedConstraint);
+    this.options.constraints.forEach(constraint => this.parseConstraint(constraint));
+  }
+
+  parseConstraint(constraint) {
+    const validConstraints = [];
+
+    const attachmentConstraints = generatePossibleConstraintsFor(constraint.attachment);
+    const popoverConstraints = generatePossibleConstraintsFor(constraint.popover);
+
+    popoverConstraints.forEach((attachment) => {
+      attachmentConstraints.forEach((popover) => {
+        validConstraints.push({ popover, attachment });
+      });
     });
+
+    validConstraints.forEach(validConstraint => this.addConstraint(validConstraint));
+  }
+
+  addConstraint(constraint) {
+    const classPrefix = this.options.classPrefix;
+    const attachmentConstraint = constraint.attachment.split(' ');
+    const popoverConstraint = constraint.popover.split(' ');
+
+    const parsedConstraint = {
+      id: this.constraints.length,
+      attachment: {
+        primary: attachmentConstraint[0],
+        secondary: attachmentConstraint[1],
+        string: constraint.attachment,
+      },
+      popover: {
+        primary: popoverConstraint[0],
+        secondary: popoverConstraint[1],
+        string: constraint.popover,
+      },
+    };
+
+    parsedConstraint.classes = generateClassesForConstraint(classPrefix, parsedConstraint);
+
+    this.constraints.push(Object.assign({}, constraint, parsedConstraint));
   }
 
   enable() {
@@ -287,7 +315,7 @@ class Positioner {
   }
 
   destroy() {
-    this.clearActiveConstraint();
+    // this.clearActiveConstraint();
     this.destroyListeners();
     this.destroyContainer();
   }
@@ -540,6 +568,7 @@ class Positioner {
   clearActiveConstraint() {
     if (!this.activeConstraint) { return; }
 
+    this.toggleActiveConstraints(false);
     this.activeConstraint = null;
   }
 

storybook/stories/react/README/constraint_options.md

@@ -0,0 +1,34 @@
+## Description
+
+The constraint option controls how the popover flows around its attachment. The value is a list of objects, each representing a different position that the popover can be in relative to the attachment element. The popover will go over this list and find the first constraint which allows the popover to fit on screen.
+
+Each object is written like such: `{ popover: '$primary $secondary', attachment: '$primary $secondary' }`.
+
+For the popover element, the `$primary` represents the side of the popover where the arrow will be present, and the `$secondary` represents where the arrow sits on the `$primary` side. For instance, the setting of `popover: 'top left'`, will have the arrow on the top left side of the popover.
+
+For the attachment element, the `$primary` represents the side of the attachment element where the popover will sit on, and the `$secondary` represents where the arrow points to on the `$primary` attachment side. For instance, the setting of `attachment: 'right top'`, will put the popover on the right side of the attachment and with the arrow pointing to the top portion of the attachment element.
+
+The valid values for `$primary` and `$secondary` are `[``top``right``bottom``left``center|middle``]`. You can also choose to omit the `$secondary` value, which will auto-fill with the three logical sides that the `$secondary` value can be in (this is done to reduce code length when designing complex constraints).
+
+## Example
+
+```javascript
+import { PopoverjsReact } from 'popover.js';
+const popoverOptions = {
+  showOn: ['trigger.click'],
+  hideOn: ['trigger.click'],
+  constraintElement: 'scroll',
+  constraints: [
+    { popover: 'right', attachment: 'left' },
+    { popover: 'top', attachment: 'bottom' },
+    { popover: 'bottom', attachment: 'top' },
+    { popover: 'left', attachment: 'bottom' },
+  ],
+};
+...
+<PopoverjsReact popoverOptions={popoverOptions}>
+  <div className="demo-trigger">I am the trigger</div>
+  <div className="demo-content">I am the content</div>
+</PopoverjsReact>
+...
+```

storybook/stories/react/constraint_options.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { withReadme } from 'storybook-readme';
+import { storiesOf } from '@storybook/react';
+import { PopoverjsReact } from '../../../dist';
+import README from './README/constraint_options.md';
+
+const popoverOptions = {
+  showOn: ['trigger.click'],
+  hideOn: ['trigger.click'],
+  constraintElement: 'scroll',
+  constraints: [
+    { popover: 'right', attachment: 'left' },
+    { popover: 'top', attachment: 'bottom' },
+    { popover: 'bottom', attachment: 'top' },
+    { popover: 'left', attachment: 'bottom' },
+  ],
+};
+
+storiesOf('React Adapter', module)
+  .addDecorator(withReadme(README))
+  .add('Constraint Options', () => (
+    <div className="constraint-element">
+      <div className="constraint-element-inner">
+        <PopoverjsReact popoverOptions={popoverOptions}>
+          <div className="demo-trigger">I am the trigger</div>
+          <div className="demo-content">I am the content</div>
+        </PopoverjsReact>
+      </div>
+    </div>
+  ));

storybook/stories/react/index.js

@@ -13,3 +13,4 @@ import './body_attached';
 import './consecutive_popovers';
 import './popover_inside_trigger';
 import './cursor_tracing';
+import './constraint_options';

storybook/stories/styles.scss

@@ -53,6 +53,6 @@ body {
 }
 
 .popoverjs-content {
-  height: 100px;
+  height: 200px;
   width: 100px;
 }