v-ripple-directive
Version:
Vue.js directive for ripple effect
2 lines (1 loc) • 2.18 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).VRipple={})}(this,(function(t){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var o,n={event:"click"},i={bind:function(t,e){r(t,e)},update:function(t,e){var i=e.oldValue;if(i){var c=i.event||n.event;t.removeEventListener(c,o),r(t,e)}}};function r(t,i){var r=i.value,c=n.event;if(r){if("object"!==e(r))throw new Error("v-ripple expects object as a value");c=r.event||c}t.addEventListener(c,o=function(t){return function(t,e){var o,n,i=t.currentTarget,r=i.getBoundingClientRect(),c=r.top,d=r.left,f=t.pageY,a=t.pageX;o=f?f-c-window.pageYOffset:i.offsetHeight/2;n=a?a-d:i.offsetWidth/2;var l=Math.min(i.offsetHeight,i.offsetWidth),p=getComputedStyle(i),u=p.position,s={};s.top=p["border-top-width"],s.right=p["border-right-width"],s.bottom=p["border-bottom-width"],s.left=p["border-left-width"],"static"===u&&(i.style.position="relative");var v=function(t,e,o){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"div",i=document.createElement(n);i.classList.add("v-ripple__wave");var r=i.style;return r.width="".concat(t,"px"),r.height="".concat(t,"px"),r.left="".concat(e-t/2,"px"),r.top="".concat(o-t/2,"px"),i}(l,n,o),h=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"div",e=document.createElement(t);return e.classList.add("v-ripple"),e}();h.style.top="-".concat(p["border-top-width"]),h.style.right="-".concat(p["border-right-width"]),h.style.bottom="-".concat(p["border-bottom-width"]),h.style.left="-".concat(p["border-left-width"]),h.appendChild(v),e&&function(t,e){var o=t.style;Object.keys(e).forEach((function(t){o.setProperty("--v-ripple-".concat(t),e[t])}))}(h,e);i.appendChild(h),h.addEventListener("animationend",(function(){return h.remove()}))}(t,r)})}var c={install:function(t){t.directive("ripple",i)}};t.default=c,t.directive=i,Object.defineProperty(t,"__esModule",{value:!0})}));