vue-waves-effect
Version:
Waves effect directive for Vue. Based on Waves.
10 lines • 10.1 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vueWavesEffect"]=t():e["vueWavesEffect"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({8875:function(e,t,n){var r,o,i;(function(n,a){o=[],r=a,i="function"===typeof r?r.apply(t,o):r,void 0===i||(e.exports=i)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,r,o,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,u=i.exec(p.stack)||a.exec(p.stack),c=u&&u[1]||!1,s=u&&u[2]||!1,l=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");c===l&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=n.replace(r,"$1").trim());for(var f=0;f<d.length;f++){if("interactive"===d[f].readyState)return d[f];if(d[f].src===c)return d[f];if(c===l&&d[f].innerHTML&&d[f].innerHTML.trim()===o)return d[f]}return null}}return e}))},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}e.exports=n},c9d5:function(e,t,n){(function(n){var r,o;
/*!
* Waves v0.7.6
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/(function(n,i){"use strict";r=[],o=function(){return n.Waves=i.call(n),n.Waves}.apply(t,r),void 0===o||(e.exports=o)})("object"===typeof n?n:this,(function(){"use strict";var e=e||{},t=document.querySelectorAll.bind(document),n=Object.prototype.toString,r="ontouchstart"in window;function o(e){return null!==e&&e===e.window}function i(e){return o(e)?e:9===e.nodeType&&e.defaultView}function a(e){var t=typeof e;return"function"===t||"object"===t&&!!e}function u(e){return a(e)&&e.nodeType>0}function c(e){var r=n.call(e);return"[object String]"===r?t(e):a(e)&&/^\[object (Array|HTMLCollection|NodeList|Object)\]$/.test(r)&&e.hasOwnProperty("length")?e:u(e)?[e]:[]}function s(e){var t,n,r={top:0,left:0},o=e&&e.ownerDocument;return t=o.documentElement,"undefined"!==typeof e.getBoundingClientRect&&(r=e.getBoundingClientRect()),n=i(o),{top:r.top+n.pageYOffset-t.clientTop,left:r.left+n.pageXOffset-t.clientLeft}}function l(e){var t="";for(var n in e)e.hasOwnProperty(n)&&(t+=n+":"+e[n]+";");return t}var d={duration:750,delay:200,show:function(e,t,n){if(2===e.button)return!1;t=t||this;var r=document.createElement("div");r.className="waves-ripple waves-rippling",t.appendChild(r);var o=s(t),i=0,a=0;"touches"in e&&e.touches.length?(i=e.touches[0].pageY-o.top,a=e.touches[0].pageX-o.left):(i=e.pageY-o.top,a=e.pageX-o.left),a=a>=0?a:0,i=i>=0?i:0;var u="scale("+t.clientWidth/100*3+")",c="translate(0,0)";n&&(c="translate("+n.x+"px, "+n.y+"px)"),r.setAttribute("data-hold",Date.now()),r.setAttribute("data-x",a),r.setAttribute("data-y",i),r.setAttribute("data-scale",u),r.setAttribute("data-translate",c);var f={top:i+"px",left:a+"px"};r.classList.add("waves-notransition"),r.setAttribute("style",l(f)),r.classList.remove("waves-notransition"),f["-webkit-transform"]=u+" "+c,f["-moz-transform"]=u+" "+c,f["-ms-transform"]=u+" "+c,f["-o-transform"]=u+" "+c,f.transform=u+" "+c,f.opacity="1";var p="mousemove"===e.type?2500:d.duration;f["-webkit-transition-duration"]=p+"ms",f["-moz-transition-duration"]=p+"ms",f["-o-transition-duration"]=p+"ms",f["transition-duration"]=p+"ms",r.setAttribute("style",l(f))},hide:function(e,t){t=t||this;for(var n=t.getElementsByClassName("waves-rippling"),o=0,i=n.length;o<i;o++)p(e,t,n[o]);r&&(t.removeEventListener("touchend",d.hide),t.removeEventListener("touchcancel",d.hide)),t.removeEventListener("mouseup",d.hide),t.removeEventListener("mouseleave",d.hide)}},f={input:function(e){var t=e.parentNode;if("i"!==t.tagName.toLowerCase()||!t.classList.contains("waves-effect")){var n=document.createElement("i");n.className=e.className+" waves-input-wrapper",e.className="waves-button-input",t.replaceChild(n,e),n.appendChild(e);var r=window.getComputedStyle(e,null),o=r.color,i=r.backgroundColor;n.setAttribute("style","color:"+o+";background:"+i),e.setAttribute("style","background-color:rgba(0,0,0,0);")}},img:function(e){var t=e.parentNode;if("i"!==t.tagName.toLowerCase()||!t.classList.contains("waves-effect")){var n=document.createElement("i");t.replaceChild(n,e),n.appendChild(e)}}};function p(e,t,n){if(n){n.classList.remove("waves-rippling");var r=n.getAttribute("data-x"),o=n.getAttribute("data-y"),i=n.getAttribute("data-scale"),a=n.getAttribute("data-translate"),u=Date.now()-Number(n.getAttribute("data-hold")),c=350-u;c<0&&(c=0),"mousemove"===e.type&&(c=150);var s="mousemove"===e.type?2500:d.duration;setTimeout((function(){var u={top:o+"px",left:r+"px",opacity:"0","-webkit-transition-duration":s+"ms","-moz-transition-duration":s+"ms","-o-transition-duration":s+"ms","transition-duration":s+"ms","-webkit-transform":i+" "+a,"-moz-transform":i+" "+a,"-ms-transform":i+" "+a,"-o-transform":i+" "+a,transform:i+" "+a};n.setAttribute("style",l(u)),setTimeout((function(){try{t.removeChild(n)}catch(e){return!1}}),s)}),c)}}var m={touches:0,allowEvent:function(e){var t=!0;return/^(mousedown|mousemove)$/.test(e.type)&&m.touches&&(t=!1),t},registerEvent:function(e){var t=e.type;"touchstart"===t?m.touches+=1:/^(touchend|touchcancel)$/.test(t)&&setTimeout((function(){m.touches&&(m.touches-=1)}),500)}};function v(e){if(!1===m.allowEvent(e))return null;var t=null,n=e.target||e.srcElement;while(n.parentElement){if(!(n instanceof SVGElement)&&n.classList.contains("waves-effect")){t=n;break}n=n.parentElement}return t}function h(e){var t=v(e);if(null!==t){if(t.disabled||t.getAttribute("disabled")||t.classList.contains("disabled"))return;if(m.registerEvent(e),"touchstart"===e.type&&d.delay){var n=!1,o=setTimeout((function(){o=null,d.show(e,t)}),d.delay),i=function(r){o&&(clearTimeout(o),o=null,d.show(e,t)),n||(n=!0,d.hide(r,t)),u()},a=function(e){o&&(clearTimeout(o),o=null),i(e),u()};t.addEventListener("touchmove",a,!1),t.addEventListener("touchend",i,!1),t.addEventListener("touchcancel",i,!1);var u=function(){t.removeEventListener("touchmove",a),t.removeEventListener("touchend",i),t.removeEventListener("touchcancel",i)}}else d.show(e,t),r&&(t.addEventListener("touchend",d.hide,!1),t.addEventListener("touchcancel",d.hide,!1)),t.addEventListener("mouseup",d.hide,!1),t.addEventListener("mouseleave",d.hide,!1)}}return e.init=function(e){var t=document.body;e=e||{},"duration"in e&&(d.duration=e.duration),"delay"in e&&(d.delay=e.delay),r&&(t.addEventListener("touchstart",h,!1),t.addEventListener("touchcancel",m.registerEvent,!1),t.addEventListener("touchend",m.registerEvent,!1)),t.addEventListener("mousedown",h,!1)},e.attach=function(e,t){var r,o;e=c(e),"[object Array]"===n.call(t)&&(t=t.join(" ")),t=t?" "+t:"";for(var i=0,a=e.length;i<a;i++)r=e[i],o=r.tagName.toLowerCase(),-1!==["input","img"].indexOf(o)&&(f[o](r),r=r.parentElement),-1===r.className.indexOf("waves-effect")&&(r.className+=" waves-effect"+t)},e.ripple=function(e,t){e=c(e);var n=e.length;if(t=t||{},t.wait=t.wait||0,t.position=t.position||null,n)for(var r,o,i,a={},u=0,l={type:"mousedown",button:1},f=function(e,t){return function(){d.hide(e,t)}};u<n;u++)if(r=e[u],o=t.position||{x:r.clientWidth/2,y:r.clientHeight/2},i=s(r),a.x=i.left+o.x,a.y=i.top+o.y,l.pageX=a.x,l.pageY=a.y,d.show(l,r),t.wait>=0&&null!==t.wait){var p={type:"mouseup",button:1};setTimeout(f(p,r),t.wait)}},e.calm=function(e){e=c(e);for(var t={type:"mouseup",button:1},n=0,r=e.length;n<r;n++)d.hide(t,e[n])},e.displayEffect=function(t){console.error("Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect"),e.init(t)},e}))}).call(this,n("c8ba"))},ded2:function(e,t,n){},fb15:function(e,t,n){"use strict";if(n.r(t),"undefined"!==typeof window){var r=window.document.currentScript,o=n("8875");r=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}n("ded2");var a=n("c9d5"),u={name:"waves",config:{},install(e,t){e.mixin({created:function(){a.init(t)}}),e.directive("waves",{inserted(e,t,n,r){const o=Object.keys(t.modifiers).map((function(e){return"waves-"+e}));a.attach(e,o)},bind(e,t,n,r){"hover"===t.arg&&e.addEventListener("mouseenter",(function(){"IMG"===e.tagName||"INPUT"===e.tagName?a.ripple(e.parentElement,{wait:0}):a.ripple(e,{wait:0})}))},unbind(e,t,n,r){try{document.querySelectorAll(".waves-ripple").forEach(e=>e.remove())}catch(o){console.log(o)}},componentUpdated(e,t,n,r){try{document.querySelectorAll(".waves-ripple").forEach(e=>e.remove())}catch(o){console.log(o)}}})}},c=u;t["default"]=c}})["default"]}));
//# sourceMappingURL=vueWavesEffect.umd.min.js.map