bug fixes and features update

sa-si-dev · Jul 17, 2022 · d66294f · d66294f
1 parent 4bf9596
commit d66294f
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 29 deletions.
diff --git a/docs/properties.md b/docs/properties.md
@@ -12,6 +12,7 @@
 | showDuration | Number | 300 | Transition duration for show animation (in milliseconds) |
 | hideDuration | Number | 200 | Transition duration for hide animation (in milliseconds) |
 | transitionDistance | Number | 10 | Distance to translate on show/hide animation (in pixel) |
+| updatePositionThrottle | Number | 100 | Throttle time for updating popover position on scroll event (in milliseconds) |
 | zIndex | Number | 1 | CSS z-index value for popover element |
 | hideOnOuterClick | Boolean | true | Hide on clicking outside of popover element |
 | showOnHover | Boolean | false | Show popover element on hovering trigger element |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popover-plugin",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A javascript plugin for popover",
   "scripts": {
     "start": "webpack --mode development --watch",

diff --git a/src/popover.js b/src/popover.js
@@ -4,6 +4,27 @@ const keyDownMethodMapping = {
   27: 'onEscPress',
 };
 
+const dataProps = [
+  'target',
+  'position',
+  'margin',
+  'offset',
+  'enterDelay',
+  'exitDelay',
+  'showDuration',
+  'hideDuration',
+  'transitionDistance',
+  'updatePositionThrottle',
+  'zIndex',
+  'hideOnOuterClick',
+  'showOnHover',
+  'hideArrowIcon',
+  'disableManualAction',
+  'disableUpdatePosition',
+];
+
+let attrPropsMapping;
+
 export class PopoverComponent {
   /**
    * @property {(element|string)} ele - Trigger element to toggle popover element
@@ -16,6 +37,7 @@ export class PopoverComponent {
    * @property {number} [showDuration=300] - Transition duration for show animation (in milliseconds)
    * @property {number} [hideDuration=200] - Transition duration for hide animation (in milliseconds)
    * @property {number} [transitionDistance=10] - Distance to translate on show/hide animation (in pixel)
+   * @property {number} [updatePositionThrottle=100] - Throttle time for updating popover position on scroll event (in milliseconds)
    * @property {number} [zIndex=1] - CSS z-index value for popover element
    * @property {boolean} [hideOnOuterClick=true] - Hide on clicking outside of popover element
    * @property {boolean} [showOnHover=false] - Show popover element on hovering trigger element
@@ -128,7 +150,7 @@ export class PopoverComponent {
       $ele: this.$scrollableElems,
       events: 'scroll',
       method: 'onAnyParentScroll',
-      throttle: 100,
+      throttle: this.updatePositionThrottle,
     });
   }
 
@@ -206,6 +228,7 @@ export class PopoverComponent {
     this.showDuration = parseFloat(options.showDuration);
     this.hideDuration = parseFloat(options.hideDuration);
     this.transitionDistance = parseFloat(options.transitionDistance);
+    this.updatePositionThrottle = parseFloat(options.updatePositionThrottle);
     this.zIndex = parseFloat(options.zIndex);
     this.hideOnOuterClick = convertToBoolean(options.hideOnOuterClick);
     this.showOnHover = convertToBoolean(options.showOnHover);
@@ -232,6 +255,7 @@ export class PopoverComponent {
       showDuration: 300,
       hideDuration: 200,
       transitionDistance: 10,
+      updatePositionThrottle: 100,
       zIndex: 1,
       hideOnOuterClick: true,
       showOnHover: false,
@@ -245,29 +269,12 @@ export class PopoverComponent {
 
   setPropsFromElementAttr(options) {
     let $ele = options.ele;
-    let mapping = {
-      'data-popover-target': 'target',
-      'data-popover-position': 'position',
-      'data-popover-margin': 'margin',
-      'data-popover-offset': 'offset',
-      'data-popover-enter-delay': 'enterDelay',
-      'data-popover-exit-delay': 'exitDelay',
-      'data-popover-show-duration': 'showDuration',
-      'data-popover-hide-duration': 'hideDuration',
-      'data-popover-transition-distance': 'transitionDistance',
-      'data-popover-z-index': 'zIndex',
-      'data-popover-hide-on-outer-click': 'hideOnOuterClick',
-      'data-popover-show-on-hover': 'showOnHover',
-      'data-popover-hide-arrow-icon': 'hideArrowIcon',
-      'data-popover-disable-manual-action': 'disableManualAction',
-      'data-popover-disable-update-position': 'disableUpdatePosition',
-    };
 
-    for (let k in mapping) {
+    for (let k in attrPropsMapping) {
       let value = $ele.getAttribute(k);
 
       if (value) {
-        options[mapping[k]] = value;
+        options[attrPropsMapping[k]] = value;
       }
     }
   }
@@ -502,7 +509,20 @@ export class PopoverComponent {
   static updatePositionMethod() {
     this.popComp.popper.updatePosition();
   }
+
+  static getAttrProps() {
+    const { convertPropToDataAttr } = DomUtils;
+    const result = {};
+
+    dataProps.forEach((d) => {
+      result[convertPropToDataAttr(d)] = d;
+    });
+
+    return result;
+  }
   /** static methods - end */
 }
 
+attrPropsMapping = PopoverComponent.getAttrProps();
+
 window.PopoverComponent = PopoverComponent;
diff --git a/src/sass/partials/popover.scss b/src/sass/partials/popover.scss
@@ -40,7 +40,7 @@
 
 .pop-comp-wrapper {
   &.position-bottom {
-    .pop-comp-arrow {
+    & > .pop-comp-arrow {
       margin-left: -$arrowHalfSize;
       left: 0;
       top: -#{$arrowSize - 1px};
@@ -52,23 +52,23 @@
   }
 
   &.position-top {
-    .pop-comp-arrow {
+    & > .pop-comp-arrow {
       margin-left: -$arrowHalfSize;
       left: 0;
       bottom: -#{$arrowSize - 1px};
     }
   }
 
   &.position-right {
-    .pop-comp-arrow {
+    & > .pop-comp-arrow {
       margin-top: -$arrowHalfSize;
       top: 0;
       left: -#{$arrowSize - 1px};
     }
   }
 
   &.position-left {
-    .pop-comp-arrow {
+    & > .pop-comp-arrow {
       margin-top: -$arrowHalfSize;
       top: 0;
       right: -#{$arrowSize - 1px};

diff --git a/src/utils/dom-utils.js b/src/utils/dom-utils.js
@@ -90,7 +90,7 @@ export class DomUtils {
       return [];
     }
 
-    let $scrollableElems = [window];
+    let $scrollableElems = [];
     let $parent = $ele.parentElement;
 
     while ($parent) {
@@ -105,4 +105,12 @@ export class DomUtils {
 
     return $scrollableElems;
   }
+
+  /**
+   * convert "maxValue" to "data-max-value"
+   * @param {string} prop
+   */
+  static convertPropToDataAttr(prop) {
+    return prop ? `data-popover-${prop}`.replace(/([A-Z])/g, '-$1').toLowerCase() : '';
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -10,6 +10,12 @@ https://sa-si-dev.github.io/popover
 Licensed under MIT (https://github.com/sa-si-dev/popover/blob/master/LICENSE)`;
 
 module.exports = (env, options) => {
+  const onStartEventOptions = {};
+
+  if (options.mode === 'production') {
+    onStartEventOptions.delete = ['dist'];
+  }
+
   const config = {
     target: 'es5',
 
@@ -33,9 +39,7 @@ module.exports = (env, options) => {
 
       new FileManagerPlugin({
         events: {
-          onStart: {
-            delete: ['dist'],
-          },
+          onStart: onStartEventOptions,
           onEnd: {
             delete: ['dist/styles.min.js'],
             copy: [{ source: 'dist', destination: 'docs/assets' }],