popper-plugin - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/popper.min.js

 /*!
- * Popper v1.0.0
+ * Popper v1.0.1
  * https://sa-si-dev.github.io/popper
  * Licensed under MIT (https://github.com/sa-si-dev/popper/blob/master/LICENSE)
- */!function(){"use strict";function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return e(t,o);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return e(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,i=new Array(e);o<e;o++)i[o]=t[o];return i}function o(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var i=function(){function e(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e)}var i,r,n;return i=e,n=[{key:"addClass",value:function(o,i){o&&(i=i.split(" "),e.getElements(o).forEach((function(e){var o;(o=e.classList).add.apply(o,t(i))})))}},{key:"removeClass",value:function(o,i){o&&(i=i.split(" "),e.getElements(o).forEach((function(e){var o;(o=e.classList).remove.apply(o,t(i))})))}},{key:"getElements",value:function(t){if(t)return void 0===t.forEach&&(t=[t]),t}},{key:"getMoreVisibleSides",value:function(t){if(!t)return{};var e=t.getBoundingClientRect(),o=window.innerWidth,i=window.innerHeight,r=e.left,n=e.top;return{horizontal:r>o-r-e.width?"left":"right",vertical:n>i-n-e.height?"top":"bottom"}}},{key:"getAbsoluteCoords",value:function(t){if(t){var e=t.getBoundingClientRect(),o=window.pageXOffset,i=window.pageYOffset;return{width:e.width,height:e.height,top:e.top+i,right:e.right+o,bottom:e.bottom+i,left:e.left+o}}}},{key:"getCoords",value:function(t){return t?t.getBoundingClientRect():{}}},{key:"getData",value:function(t,e,o){if(t){var i=t?t.dataset[e]:"";return"number"===o?i=parseFloat(i)||0:"true"===i?i=!0:"false"===i&&(i=!1),i}}},{key:"setData",value:function(t,e,o){t&&(t.dataset[e]=o)}},{key:"setStyle",value:function(t,e,o){t&&(t.style[e]=o)}},{key:"show",value:function(t){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"block";e.setStyle(t,"display",o)}},{key:"hide",value:function(t){e.setStyle(t,"display","none")}},{key:"getHideableParentOffset",value:function(t){var o=e.getHideableParent(t),i=window.scrollX,r=window.scrollY;if(o){var n=e.getAbsoluteCoords(o);i+=n.left,r+=n.top}return{x:i,y:r}}},{key:"getHideableParent",value:function(t){for(var e,o=t.parentElement;o;){var i=getComputedStyle(o).overflow;if(-1!==i.indexOf("scroll")||-1!==i.indexOf("auto")){e=o;break}o=o.parentElement}return e}}],(r=null)&&o(i.prototype,r),n&&o(i,n),e}();function r(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var n=["top","bottom","left","right"].map((function(t){return"position-".concat(t)})),a={top:"rotate(180deg)",left:"rotate(90deg)",right:"rotate(-90deg)"},s=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);try{this.setProps(e),this.init()}catch(t){console.warn("Couldn't initiate popper"),console.error(t)}}var e,o,s;return e=t,(o=[{key:"init",value:function(){var t=this.$popperEle;t&&this.$triggerEle&&(i.setStyle(t,"zIndex",this.zIndex),this.setPosition())}},{key:"setProps",value:function(t){var e=(t=this.setDefaultProps(t)).position?t.position.toLowerCase():"auto";if(this.$popperEle=t.$popperEle,this.$triggerEle=t.$triggerEle,this.$arrowEle=t.$arrowEle,this.margin=parseFloat(t.margin),this.offset=parseFloat(t.offset),this.enterDelay=parseFloat(t.enterDelay),this.exitDelay=parseFloat(t.exitDelay),this.showDuration=parseFloat(t.showDuration),this.hideDuration=parseFloat(t.hideDuration),this.transitionDistance=parseFloat(t.transitionDistance),this.zIndex=parseFloat(t.zIndex),this.afterShowCallback=t.afterShow,this.afterHideCallback=t.afterHide,this.hasArrow=!!this.$arrowEle,-1!==e.indexOf(" ")){var o=e.split(" ");this.position=o[0],this.secondaryPosition=o[1]}else this.position=e}},{key:"setDefaultProps",value:function(t){return Object.assign({position:"auto",margin:8,offset:5,enterDelay:0,exitDelay:0,showDuration:300,hideDuration:200,transitionDistance:10,zIndex:1},t)}},{key:"setPosition",value:function(){i.show(this.$popperEle,"inline-flex");var t,e,o,r=window.innerWidth,s=window.innerHeight,l=i.getAbsoluteCoords(this.$popperEle),p=i.getAbsoluteCoords(this.$triggerEle),f=l.left,u=l.top,h=p.left,c=p.top,d=c-u,y=h-f,g=y,m=d,v=l.width,w=l.height,E=p.width,b=p.height,D=this.position,$=this.secondaryPosition,k=E/2-v/2,x=b/2-w/2,C=this.margin,S=this.transitionDistance,T=i.getHideableParentOffset(this.$popperEle),P=T.y-u,A=s+P,O=T.x-f,H=r+O,F=this.offset;F&&(P+=F,A-=F,O+=F,H-=F),"auto"===D&&(D=i.getMoreVisibleSides(this.$triggerEle).vertical);var I={top:{top:m-w-C,left:g+k},bottom:{top:m+b+C,left:g+k},right:{top:m+x,left:g+E+C},left:{top:m+x,left:g-v-C}},j=I[D];if(m=j.top,g=j.left,$&&("top"===$?m=d:"bottom"===$?m=d+b-w:"left"===$?g=y:"right"===$&&(g=y+E-v)),g<O?"left"===D?o="right":g=O:g+v>H&&("right"===D?o="left":g=H-v),m<P?"top"===D?o="bottom":m=P:m+w>A&&("bottom"===D?o="top":m=A-w),o){var z=I[o];"top"===(D=o)||"bottom"===D?m=z.top:"left"!==D&&"right"!==D||(g=z.left)}"top"===D?(t=m+S,e=g):"right"===D?(t=m,e=g-S):"left"===D?(t=m,e=g+S):(t=m-S,e=g);var L="translate3d(".concat(e,"px, ").concat(t,"px, 0)");if(i.setStyle(this.$popperEle,"transform",L),i.setData(this.$popperEle,"fromLeft",e),i.setData(this.$popperEle,"fromTop",t),i.setData(this.$popperEle,"top",m),i.setData(this.$popperEle,"left",g),i.removeClass(this.$popperEle,n.join(" ")),i.addClass(this.$popperEle,"position-".concat(D)),this.hasArrow){var B=0,M=0,R=g+f,W=m+u,V=this.$arrowEle.offsetWidth/2,X=a[D]||"";"top"===D||"bottom"===D?(B=E/2+h-R)<V?B=V:B>v-V&&(B=v-V):"left"!==D&&"right"!==D||((M=b/2+c-W)<V?M=V:M>w-V&&(M=w-V)),i.setStyle(this.$arrowEle,"transform","translate3d(".concat(B,"px, ").concat(M,"px, 0) ").concat(X))}i.hide(this.$popperEle)}},{key:"resetPosition",value:function(){i.setStyle(this.$popperEle,"transform","none"),this.setPosition()}},{key:"show",value:function(t){var e=this;clearTimeout(this.exitDelayTimeout),clearTimeout(this.hideDurationTimeout),t&&this.resetPosition(),this.enterDelayTimeout=setTimeout((function(){var t=i.getData(e.$popperEle,"left"),o=i.getData(e.$popperEle,"top"),r="translate3d(".concat(t,"px, ").concat(o,"px, 0)"),n=e.showDuration;i.show(e.$popperEle,"inline-flex"),i.getCoords(e.$popperEle),i.setStyle(e.$popperEle,"transitionDuration",n+"ms"),i.setStyle(e.$popperEle,"transform",r),i.setStyle(e.$popperEle,"opacity",1),e.showDurationTimeout=setTimeout((function(){"function"==typeof e.afterShowCallback&&e.afterShowCallback(e)}),n)}),this.enterDelay)}},{key:"hide",value:function(){var t=this;clearTimeout(this.enterDelayTimeout),clearTimeout(this.showDurationTimeout),this.exitDelayTimeout=setTimeout((function(){if(t.$popperEle){var e=i.getData(t.$popperEle,"fromLeft"),o=i.getData(t.$popperEle,"fromTop"),r="translate3d(".concat(e,"px, ").concat(o,"px, 0)"),n=t.hideDuration;i.setStyle(t.$popperEle,"transitionDuration",n+"ms"),i.setStyle(t.$popperEle,"transform",r),i.setStyle(t.$popperEle,"opacity",0),t.hideDurationTimeout=setTimeout((function(){i.hide(t.$popperEle),"function"==typeof t.afterHideCallback&&t.afterHideCallback(t)}),n)}}),this.exitDelay)}}])&&r(e.prototype,o),s&&r(e,s),t}();window.PopperComponent=s}();
+ */!function(){"use strict";function t(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return e(t,o);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return e(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,i=new Array(e);o<e;o++)i[o]=t[o];return i}function o(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var i=function(){function e(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e)}var i,r,n;return i=e,n=[{key:"addClass",value:function(o,i){o&&(i=i.split(" "),e.getElements(o).forEach((function(e){var o;(o=e.classList).add.apply(o,t(i))})))}},{key:"removeClass",value:function(o,i){o&&(i=i.split(" "),e.getElements(o).forEach((function(e){var o;(o=e.classList).remove.apply(o,t(i))})))}},{key:"getElements",value:function(t){if(t)return void 0===t.forEach&&(t=[t]),t}},{key:"getMoreVisibleSides",value:function(t){if(!t)return{};var e=t.getBoundingClientRect(),o=window.innerWidth,i=window.innerHeight,r=e.left,n=e.top;return{horizontal:r>o-r-e.width?"left":"right",vertical:n>i-n-e.height?"top":"bottom"}}},{key:"getAbsoluteCoords",value:function(t){if(t){var e=t.getBoundingClientRect(),o=window.pageXOffset,i=window.pageYOffset;return{width:e.width,height:e.height,top:e.top+i,right:e.right+o,bottom:e.bottom+i,left:e.left+o}}}},{key:"getCoords",value:function(t){return t?t.getBoundingClientRect():{}}},{key:"getData",value:function(t,e,o){if(t){var i=t?t.dataset[e]:"";return"number"===o?i=parseFloat(i)||0:"true"===i?i=!0:"false"===i&&(i=!1),i}}},{key:"setData",value:function(t,e,o){t&&(t.dataset[e]=o)}},{key:"setStyle",value:function(t,e,o){t&&(t.style[e]=o)}},{key:"show",value:function(t){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"block";e.setStyle(t,"display",o)}},{key:"hide",value:function(t){e.setStyle(t,"display","none")}},{key:"getHideableParentOffset",value:function(t){var o=e.getHideableParent(t),i=window.scrollX,r=window.scrollY;if(o){var n=e.getAbsoluteCoords(o);i+=n.left,r+=n.top}return{x:i,y:r}}},{key:"getHideableParent",value:function(t){for(var e,o=t.parentElement;o;){var i=getComputedStyle(o).overflow;if(-1!==i.indexOf("scroll")||-1!==i.indexOf("auto")){e=o;break}o=o.parentElement}return e}}],(r=null)&&o(i.prototype,r),n&&o(i,n),e}();function r(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var n=["top","bottom","left","right"].map((function(t){return"position-".concat(t)})),a={top:"rotate(180deg)",left:"rotate(90deg)",right:"rotate(-90deg)"},s=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);try{this.setProps(e),this.init()}catch(t){console.warn("Couldn't initiate popper"),console.error(t)}}var e,o,s;return e=t,(o=[{key:"init",value:function(){var t=this.$popperEle;t&&this.$triggerEle&&(i.setStyle(t,"zIndex",this.zIndex),this.setPosition())}},{key:"setProps",value:function(t){var e=(t=this.setDefaultProps(t)).position?t.position.toLowerCase():"auto";if(this.$popperEle=t.$popperEle,this.$triggerEle=t.$triggerEle,this.$arrowEle=t.$arrowEle,this.margin=parseFloat(t.margin),this.offset=parseFloat(t.offset),this.enterDelay=parseFloat(t.enterDelay),this.exitDelay=parseFloat(t.exitDelay),this.showDuration=parseFloat(t.showDuration),this.hideDuration=parseFloat(t.hideDuration),this.transitionDistance=parseFloat(t.transitionDistance),this.zIndex=parseFloat(t.zIndex),this.afterShowCallback=t.afterShow,this.afterHideCallback=t.afterHide,this.hasArrow=!!this.$arrowEle,-1!==e.indexOf(" ")){var o=e.split(" ");this.position=o[0],this.secondaryPosition=o[1]}else this.position=e}},{key:"setDefaultProps",value:function(t){return Object.assign({position:"auto",margin:8,offset:5,enterDelay:0,exitDelay:0,showDuration:300,hideDuration:200,transitionDistance:10,zIndex:1},t)}},{key:"setPosition",value:function(){i.show(this.$popperEle,"inline-flex");var t,e,o,r=window.innerWidth,s=window.innerHeight,l=i.getAbsoluteCoords(this.$popperEle),p=i.getAbsoluteCoords(this.$triggerEle),f=l.left,u=l.top,h=p.left,c=p.top,d=c-u,y=h-f,g=y,m=d,v=l.width,w=l.height,E=p.width,b=p.height,D=this.position,$=this.secondaryPosition,k=E/2-v/2,x=b/2-w/2,S=this.margin,C=this.transitionDistance,P=i.getHideableParentOffset(this.$popperEle),T=P.y-u,A=s+T,O=P.x-f,H=r+O,F=this.offset;F&&(T+=F,A-=F,O+=F,H-=F),"auto"===D&&(D=i.getMoreVisibleSides(this.$triggerEle).vertical);var I={top:{top:m-w-S,left:g+k},bottom:{top:m+b+S,left:g+k},right:{top:m+x,left:g+E+S},left:{top:m+x,left:g-v-S}},j=I[D];if(m=j.top,g=j.left,$&&("top"===$?m=d:"bottom"===$?m=d+b-w:"left"===$?g=y:"right"===$&&(g=y+E-v)),g<O?"left"===D?o="right":g=O:g+v>H&&("right"===D?o="left":g=H-v),m<T?"top"===D?o="bottom":m=T:m+w>A&&("bottom"===D?o="top":m=A-w),o){var z=I[o];"top"===(D=o)||"bottom"===D?m=z.top:"left"!==D&&"right"!==D||(g=z.left)}"top"===D?(t=m+C,e=g):"right"===D?(t=m,e=g-C):"left"===D?(t=m,e=g+C):(t=m-C,e=g);var L="translate3d(".concat(e,"px, ").concat(t,"px, 0)");if(i.setStyle(this.$popperEle,"transform",L),i.setData(this.$popperEle,"fromLeft",e),i.setData(this.$popperEle,"fromTop",t),i.setData(this.$popperEle,"top",m),i.setData(this.$popperEle,"left",g),i.removeClass(this.$popperEle,n.join(" ")),i.addClass(this.$popperEle,"position-".concat(D)),this.hasArrow){var B=0,M=0,R=g+f,W=m+u,V=this.$arrowEle.offsetWidth/2,X=a[D]||"";"top"===D||"bottom"===D?(B=E/2+h-R)<V?B=V:B>v-V&&(B=v-V):"left"!==D&&"right"!==D||((M=b/2+c-W)<V?M=V:M>w-V&&(M=w-V)),i.setStyle(this.$arrowEle,"transform","translate3d(".concat(B,"px, ").concat(M,"px, 0) ").concat(X))}i.hide(this.$popperEle)}},{key:"resetPosition",value:function(){i.setStyle(this.$popperEle,"transform","none"),this.setPosition()}},{key:"show",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=e.resetPosition,r=e.data;clearTimeout(this.exitDelayTimeout),clearTimeout(this.hideDurationTimeout),o&&this.resetPosition(),this.enterDelayTimeout=setTimeout((function(){var e=i.getData(t.$popperEle,"left"),o=i.getData(t.$popperEle,"top"),n="translate3d(".concat(e,"px, ").concat(o,"px, 0)"),a=t.showDuration;i.show(t.$popperEle,"inline-flex"),i.getCoords(t.$popperEle),i.setStyle(t.$popperEle,"transitionDuration",a+"ms"),i.setStyle(t.$popperEle,"transform",n),i.setStyle(t.$popperEle,"opacity",1),t.showDurationTimeout=setTimeout((function(){"function"==typeof t.afterShowCallback&&t.afterShowCallback(r)}),a)}),this.enterDelay)}},{key:"hide",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=e.data;clearTimeout(this.enterDelayTimeout),clearTimeout(this.showDurationTimeout),this.exitDelayTimeout=setTimeout((function(){if(t.$popperEle){var e=i.getData(t.$popperEle,"fromLeft"),r=i.getData(t.$popperEle,"fromTop"),n="translate3d(".concat(e,"px, ").concat(r,"px, 0)"),a=t.hideDuration;i.setStyle(t.$popperEle,"transitionDuration",a+"ms"),i.setStyle(t.$popperEle,"transform",n),i.setStyle(t.$popperEle,"opacity",0),t.hideDurationTimeout=setTimeout((function(){i.hide(t.$popperEle),"function"==typeof t.afterHideCallback&&t.afterHideCallback(o)}),a)}}),this.exitDelay)}},{key:"updatePosition",value:function(){i.setStyle(this.$popperEle,"transitionDuration","0ms"),this.resetPosition();var t=i.getData(this.$popperEle,"left"),e=i.getData(this.$popperEle,"top");i.show(this.$popperEle,"inline-flex"),i.setStyle(this.$popperEle,"transform","translate3d(".concat(t,"px, ").concat(e,"px, 0)"))}}])&&r(e.prototype,o),s&&r(e,s),t}();window.PopperComponent=s}();

package.json

 {
   "name": "popper-plugin",
-  "version": "1.0.0",
-  "description": "A javascript plugin for popper",
+  "version": "1.0.1",
+  "description": "A javascript plugin for popper which could be used to positioning tooltip or popover",
   "scripts": {
@@ -6,0 +6,0 @@ "start": "webpack --mode development --watch",

README.md

@@ -43,1 +43,30 @@ # Popper Plugin
 | afterHide | Function | | Callback function to trigger after hide |
+
+## Methods
+
+### show()
+
+```js
+/**
+ * @prop {boolean} [resetPosition] - Recalculate position before show
+ * @prop {object} [data] - Any custom data which would be passed to afterShow callback function call
+ */
+samplePopper.show({});
+```
+
+### hide()
+
+```js
+/**
+ * @prop {object} [data] - Any custom data which would be passed to afterHide callback function call
+ */
+samplePopper.hide({});
+```
+
+### updatePosition()
+
+To recalculate the position of the popper element. Which colud be used when scrolling the parent element.
+
+```js
+samplePopper.updatePosition();
+```

src/popper.js

@@ -293,3 +293,7 @@ import { DomUtils } from './utils/dom-utils';
 
-  show(resetPosition) {
+  /**
+   * @prop {boolean} [resetPosition] - Recalculate position before show
+   * @prop {object} [data] - Any custom data which would be passed to afterShow callback function call
+   */
+  show({ resetPosition, data } = {}) {
     clearTimeout(this.exitDelayTimeout);
@@ -319,3 +323,3 @@ clearTimeout(this.hideDurationTimeout);
         if (typeof this.afterShowCallback === 'function') {
-          this.afterShowCallback(this);
+          this.afterShowCallback(data);
         }
@@ -326,3 +330,6 @@ }, showDuration);
 
-  hide() {
+  /**
+   * @prop {object} [data] - Any custom data which would be passed to afterHide callback function call
+   */
+  hide({ data } = {}) {
     clearTimeout(this.enterDelayTimeout);
@@ -346,3 +353,3 @@ clearTimeout(this.showDurationTimeout);
           if (typeof this.afterHideCallback === 'function') {
-            this.afterHideCallback(this);
+            this.afterHideCallback(data);
           }
@@ -353,4 +360,16 @@ }, hideDuration);
   }
+
+  updatePosition() {
+    DomUtils.setStyle(this.$popperEle, 'transitionDuration', '0ms');
+
+    this.resetPosition();
+
+    let left = DomUtils.getData(this.$popperEle, 'left');
+    let top = DomUtils.getData(this.$popperEle, 'top');
+
+    DomUtils.show(this.$popperEle, 'inline-flex');
+    DomUtils.setStyle(this.$popperEle, 'transform', `translate3d(${left}px, ${top}px, 0)`);
+  }
 }
 
 window.PopperComponent = Popper;

webpack.config.js

@@ -6,3 +6,3 @@ const path = require('path');
 
-const banner = `Popper v1.0.0
+const banner = `Popper v1.0.1
 https://sa-si-dev.github.io/popper
@@ -22,2 +22,3 @@ Licensed under MIT (https://github.com/sa-si-dev/popper/blob/master/LICENSE)`;
       path: path.resolve(__dirname, 'dist'),
+      chunkFormat: 'array-push',
     },
@@ -24,0 +25,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29427

increased by6.66%

Lines of code

505

increased by3.27%

Number of lines in readme file

72

increased by67.44%

No dependency changes