From d66294f0d418a9802d322b964a19b5f675330ca8 Mon Sep 17 00:00:00 2001 From: sa-si-dev Date: Sun, 17 Jul 2022 20:04:49 +0530 Subject: [PATCH] bug fixes and features update --- docs/properties.md | 1 + package.json | 2 +- src/popover.js | 60 ++++++++++++++++++++++------------ src/sass/partials/popover.scss | 8 ++--- src/utils/dom-utils.js | 10 +++++- webpack.config.js | 10 ++++-- 6 files changed, 62 insertions(+), 29 deletions(-) diff --git a/docs/properties.md b/docs/properties.md index cb4351c..0e54c55 100644 --- 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 index 0490832..de7a54b 100644 --- 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 index c78246c..2982063 100755 --- 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 index b9c0dc9..9ace17a 100644 --- 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,7 +52,7 @@ } &.position-top { - .pop-comp-arrow { + & > .pop-comp-arrow { margin-left: -$arrowHalfSize; left: 0; bottom: -#{$arrowSize - 1px}; @@ -60,7 +60,7 @@ } &.position-right { - .pop-comp-arrow { + & > .pop-comp-arrow { margin-top: -$arrowHalfSize; top: 0; left: -#{$arrowSize - 1px}; @@ -68,7 +68,7 @@ } &.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 index bcfd582..4506cf6 100644 --- 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 index 8ec6fd2..42d757e 100644 --- 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' }],