ripple-effects
Version:
customizable ripple effect with one line of code
9 lines (8 loc) • 4.76 kB
JavaScript
/*!
* ripple-effects
* customizable ripple effect with one line of code
*
* @version v1.0.2
* @author Cris Fandiño <sircnujnuj@gmail.com>
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ripple=t()}(this,(function(){"use strict";function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function n(n){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?t(Object(r),!0).forEach((function(t){e(n,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function o(e){return/^-+/.test(e)?e:/([^\-]+)([A-Z])/g.test(e)?e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()})):e.toLowerCase()}function r(e,t){var n=e instanceof Element?e:document.createElement(e);if(!t)return n;for(var o in t){var r=t[o];if(/^on([A-Z][a-z A-Z])+/.test(o)){var a=o.toLowerCase().substr(2);n.addEventListener(a,r)}else switch(o){case"style":i(n,r);break;case"appendTo":if(!r)break;r.appendChild(n);break;case"appendChild":n.appendChild(r);break;case"dataset":n.dataset[r[0]]=r[1]||"";break;default:n[o]=r}}return n}function i(e,t){if("string"==typeof t)return getComputedStyle(e).getPropertyValue(o(t));for(var n in t)e.style.setProperty(o(n),t[n])}function a(e,t){return r(e,t),{on:function(t,n,o){t.split(" ").forEach((function(t){e.addEventListener(t,n,o)}))},off:function(t,n){t.split(" ").forEach((function(t){e.removeEventListener(t,n)}))}}}function s(e){return["hr","br","img","col","input","embed","area","base","keygen","source","track","wbr"].indexOf(e.tagName.toLowerCase())>-1}function c(e){var t,n={top:0,left:0};return t=(e&&e.ownerDocument).documentElement,void 0!==e.getBoundingClientRect&&(n=e.getBoundingClientRect()),{top:n.top+window.pageYOffset-t.clientTop,left:n.left+window.pageXOffset-t.clientLeft}}function u(e){for(var t=[],n=0;n<e.length;n++)t.push(e[n]);return t}function f(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document,n=e instanceof HTMLCollection||e instanceof NodeList;return n?u(e):e instanceof Element?[e]:u(t.querySelectorAll(e))}var l=Object.freeze({__proto__:null,tag:r,styles:i,edit:a,isSelfTag:s,offset:c,elementToArray:f}),p={background:"rgb(150,150,150)",opacity:.5,zIndex:99,duration:700,timing:"ease",outDuration:800},d=r,h=a,g=c,b=f,y=s,m=i;function v(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"_",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t=n(n({},p),t),r=o.background,i=o.opacity,a=o.zIndex,s=o.duration,c=o.timing,u=o.height,f=o.width,l=o.triggerOnChild,v=void 0===l||l,w=o.triggerExcept,O=void 0===w?"_":w,_=o.outDuration,P="ontouchstart"in window;function j(e){if(!(b(O,this).indexOf(e.target)>-1)&&(e.target===this||v)){var t,n;"static"===m(this,"position").toLowerCase()&&(this.style.position="relative");var o=g(this).top,l=g(this).left;try{if(e.touches[1])return;n=e.touches[0].pageX-l,t=e.touches[0].pageY-o}catch(r){n=e.pageX-l,t=e.pageY-o}var p=this.offsetWidth,y=this.offsetHeight,w=d("div",{appendTo:this,className:"ripleParent__",style:{zIndex:a,height:y+"px",width:p+"px",borderRadius:m(this,"borderRadius"),clipPath:m(this,"clipPath"),transition:"opacity ".concat(_,"ms linear")}});d("div",{appendTo:w,className:"riple__",style:{top:t+"px",left:n+"px",opacity:i,width:f||p*Math.PI+"px",height:u||p*Math.PI+"px",background:r,animation:"ripple__ ".concat(s,"ms ").concat(c," both")}});var j=P?"touchend touchcancel":"mouseleave mouseup";h(this).on(j,(function e(){var t=this;w.style.opacity=0,setTimeout((function(){return t.removeChild(w)}),_),h(this).off(j,e)}))}}var x=b(e),C=P?"touchstart":"mousedown";return x.forEach((function(e){if(y(e))return console.error("Ripple is not allowed on self closing tag you need to wrap it");h(e).on(C,j)})),{destroy:function(){x.forEach((function(e){return h(e).off(C,j)}))}}}return d("style",{innerHTML:".ripleParent__{pointer-events:none;overflow:hidden;background:transparent;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.riple__{border-radius:50%;position: absolute;will-change:transform; pointer-events:none;}@keyframes ripple__{0%{transform: translate(-50%,-50%) scale(0);}100%{transform: translate(-50%,-50%) scale(1);}}",appendTo:document.head}),v.utils=l,v}));