diff --git a/.gitignore b/.gitignore
index d39c5fb..b76b067 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@ tests/
# Apple stuff
.DS_Store
+.idea/
diff --git a/dist/waves.css b/dist/waves.css
index 5572ae0..e629a71 100644
--- a/dist/waves.css
+++ b/dist/waves.css
@@ -1,5 +1,5 @@
/*!
- * Waves v0.7.6
+ * Waves v0.8.0
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
@@ -95,7 +95,7 @@
}
.waves-button-input {
margin: 0;
- padding: 0.85em 1.1em;
+ padding: 0em;
}
.waves-input-wrapper {
border-radius: 0.2em;
diff --git a/dist/waves.js b/dist/waves.js
index a528981..ad5eab9 100644
--- a/dist/waves.js
+++ b/dist/waves.js
@@ -1,5 +1,5 @@
/*!
- * Waves v0.7.6
+ * Waves v0.8.0
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
@@ -106,6 +106,10 @@
// Effect delay (check for scroll before showing effect)
delay: 200,
+
+ // Selector to find element to apply effect to.
+ // Can contain multiple classes (like ".btn, .nav a")
+ elementSelector: ".waves-effect",
show: function(e, element, velocity) {
@@ -211,14 +215,16 @@
var parent = element.parentNode;
// If input already have parent just pass through
- if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
+ if (parent.tagName.toLowerCase() === 'span' && parent.classList.contains('waves-effect')) {
return;
}
// Put element class and style to the specified parent
- var wrapper = document.createElement('i');
- wrapper.className = element.className + ' waves-input-wrapper';
- element.className = 'waves-button-input';
+ var wrapper = document.createElement('span');
+
+ // Disable transitions while modifying styles
+ wrapper.style.transition = 'none';
+ element.style.transition = 'none';
// Put element as child
parent.replaceChild(wrapper, element);
@@ -229,9 +235,18 @@
var color = elementStyle.color;
var backgroundColor = elementStyle.backgroundColor;
- wrapper.setAttribute('style', 'color:' + color + ';background:' + backgroundColor);
- element.setAttribute('style', 'background-color:rgba(0,0,0,0);');
+ wrapper.style.color = color;
+ wrapper.style.background = backgroundColor;
+ element.style.background = 'transparent';
+
+ wrapper.className = element.className + ' waves-input-wrapper';
+ element.className = 'waves-button-input';
+ // Clear transition overrride
+ setTimeout(function() {
+ wrapper.style.transition = '';
+ element.style.transition = '';
+ }, 0);
},
// Wrap ![]()
tag so it can perform the effect
@@ -240,12 +255,12 @@
var parent = element.parentNode;
// If input already have parent just pass through
- if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
+ if (parent.tagName.toLowerCase() === 'span' && parent.classList.contains('waves-effect')) {
return;
}
// Put element as child
- var wrapper = document.createElement('i');
+ var wrapper = document.createElement('span');
parent.replaceChild(wrapper, element);
wrapper.appendChild(element);
@@ -358,6 +373,18 @@
}
};
+ /**
+ * Browser-compatible version of Element.matches().
+ */
+ function matches(element, selector) {
+ var match = document.documentElement.matches ||
+ document.documentElement.matchesSelector ||
+ document.documentElement.webkitMatchesSelector ||
+ document.documentElement.mozMatchesSelector ||
+ document.documentElement.msMatchesSelector ||
+ document.documentElement.oMatchesSelector;
+ return match.call(element, selector);
+ }
/**
* Delegated click handler for .waves-effect element.
@@ -372,12 +399,12 @@
var element = null;
var target = e.target || e.srcElement;
- while (target.parentElement) {
- if ( (!(target instanceof SVGElement)) && target.classList.contains('waves-effect')) {
+ while (target.parentNode) {
+ if ( (!(target instanceof SVGElement)) && matches(target, Effect.elementSelector)) {
element = target;
break;
}
- target = target.parentElement;
+ target = target.parentNode;
}
return element;
@@ -388,12 +415,6 @@
*/
function showEffect(e) {
- // Disable effect if element has "disabled" property on it
- // In some cases, the event is not triggered by the current element
- // if (e.target.getAttribute('disabled') !== null) {
- // return;
- // }
-
var element = getWavesEffectElement(e);
if (element !== null) {
@@ -477,23 +498,45 @@
Effect.delay = options.delay;
}
+ if ('elementSelector' in options) {
+ Effect.elementSelector = options.elementSelector;
+ }
+
+ if (!window.WavesReady) {
+ window.WavesReady = true;
+ if (isTouchAvailable) {
+ body.addEventListener('touchstart', showEffect, false);
+ body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
+ body.addEventListener('touchend', TouchHandler.registerEvent, false);
+ }
+
+ body.addEventListener('mousedown', showEffect, false);
+ }
+ };
+
+ Waves.destroy = function() {
+
+ var body = document.body;
+
if (isTouchAvailable) {
- body.addEventListener('touchstart', showEffect, false);
- body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
- body.addEventListener('touchend', TouchHandler.registerEvent, false);
+ body.removeEventListener('touchstart', showEffect, false);
+ body.removeEventListener('touchcancel', TouchHandler.registerEvent, false);
+ body.removeEventListener('touchend', TouchHandler.registerEvent, false);
}
- body.addEventListener('mousedown', showEffect, false);
+ body.removeEventListener('mousedown', showEffect, false);
+ delete window.WavesReady;
+
};
/**
- * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
+ * Toggle (Attach/Detach) Waves to dynamically loaded inputs, or add .waves-effect and other
* waves classes to a set of elements. Set drag to true if the ripple mouseover
* or skimming effect should be applied to the elements.
*/
- Waves.attach = function(elements, classes) {
-
+ function toggleWaves(elements, classes, type) {
+
elements = getWavesElements(elements);
if (toString.call(classes) === '[object Array]') {
@@ -511,13 +554,43 @@
if (['input', 'img'].indexOf(tagName) !== -1) {
TagWrapper[tagName](element);
- element = element.parentElement;
+ element = element.parentNode;
}
+
+ if (type === 'attach') {
+
+ if (element.className.indexOf(classes) === -1) {
+ element.className += ' '+classes;
+ }
- if (element.className.indexOf('waves-effect') === -1) {
- element.className += ' waves-effect' + classes;
+ if (!element.classList.contains('waves-effect')) {
+ element.classList.add('waves-effect');
+ }
+
}
+
+ if (type === 'detach') {
+
+ if (element.className.indexOf(classes) !== -1) {
+ element.className = element.className.replace(new RegExp(classes, 'g'), '');
+ }
+
+ if (element.classList.contains('waves-effect')) {
+ element.classList.remove('waves-effect');
+ }
+
+ }
+
}
+
+ }
+
+ Waves.attach = function(elements, classes) {
+ return toggleWaves(elements, classes, 'attach');
+ };
+
+ Waves.detach = function(elements, classes) {
+ return toggleWaves(elements, classes, 'detach');
};
@@ -558,7 +631,11 @@
mousedown.pageX = centre.x;
mousedown.pageY = centre.y;
-
+
+ if ('duration' in options) {
+ Effect.duration = options.duration;
+ }
+
Effect.show(mousedown, element);
if (options.wait >= 0 && options.wait !== null) {
diff --git a/dist/waves.min.css b/dist/waves.min.css
index 8dd7658..1901e75 100644
--- a/dist/waves.min.css
+++ b/dist/waves.min.css
@@ -1,7 +1,7 @@
/*!
- * Waves v0.7.6
+ * Waves v0.8.0
* 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 */.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button-input,.waves-button:hover,.waves-button:visited{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:rgba(0,0,0,0);font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:.85em 1.1em}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}
\ No newline at end of file
+ * https://github.com/fians/Waves/blob/master/LICENSE */.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button-input,.waves-button:hover,.waves-button:visited{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:rgba(0,0,0,0);font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:0}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}
\ No newline at end of file
diff --git a/dist/waves.min.js b/dist/waves.min.js
index f368448..077a940 100644
--- a/dist/waves.min.js
+++ b/dist/waves.min.js
@@ -1,2 +1,10 @@
-!function(t,e){"use strict";"function"==typeof define&&define.amd?define([],function(){return t.Waves=e.call(t),t.Waves}):"object"==typeof exports?module.exports=e.call(t):t.Waves=e.call(t)}("object"==typeof global?global:this,function(){"use strict";function t(t){return null!==t&&t===t.window}function e(e){return t(e)?e:9===e.nodeType&&e.defaultView}function n(t){var e=typeof t;return"function"===e||"object"===e&&!!t}function o(t){return n(t)&&t.nodeType>0}function a(t){var e=f.call(t);return"[object String]"===e?d(t):n(t)&&/^\[object (Array|HTMLCollection|NodeList|Object)\]$/.test(e)&&t.hasOwnProperty("length")?t:o(t)?[t]:[]}function i(t){var n,o,a={top:0,left:0},i=t&&t.ownerDocument;return n=i.documentElement,void 0!==t.getBoundingClientRect&&(a=t.getBoundingClientRect()),o=e(i),{top:a.top+o.pageYOffset-n.clientTop,left:a.left+o.pageXOffset-n.clientLeft}}function r(t){var e="";for(var n in t)t.hasOwnProperty(n)&&(e+=n+":"+t[n]+";");return e}function s(t,e,n){if(n){n.classList.remove("waves-rippling");var o=n.getAttribute("data-x"),a=n.getAttribute("data-y"),i=n.getAttribute("data-scale"),s=n.getAttribute("data-translate"),u=350-(Date.now()-Number(n.getAttribute("data-hold")));u<0&&(u=0),"mousemove"===t.type&&(u=150);var c="mousemove"===t.type?2500:v.duration;setTimeout(function(){var t={top:a+"px",left:o+"px",opacity:"0","-webkit-transition-duration":c+"ms","-moz-transition-duration":c+"ms","-o-transition-duration":c+"ms","transition-duration":c+"ms","-webkit-transform":i+" "+s,"-moz-transform":i+" "+s,"-ms-transform":i+" "+s,"-o-transform":i+" "+s,transform:i+" "+s};n.setAttribute("style",r(t)),setTimeout(function(){try{e.removeChild(n)}catch(t){return!1}},c)},u)}}function u(t){if(!1===h.allowEvent(t))return null;for(var e=null,n=t.target||t.srcElement;n.parentElement;){if(!(n instanceof SVGElement)&&n.classList.contains("waves-effect")){e=n;break}n=n.parentElement}return e}function c(t){var e=u(t);if(null!==e){if(e.disabled||e.getAttribute("disabled")||e.classList.contains("disabled"))return;if(h.registerEvent(t),"touchstart"===t.type&&v.delay){var n=!1,o=setTimeout(function(){o=null,v.show(t,e)},v.delay),a=function(a){o&&(clearTimeout(o),o=null,v.show(t,e)),n||(n=!0,v.hide(a,e)),r()},i=function(t){o&&(clearTimeout(o),o=null),a(t),r()};e.addEventListener("touchmove",i,!1),e.addEventListener("touchend",a,!1),e.addEventListener("touchcancel",a,!1);var r=function(){e.removeEventListener("touchmove",i),e.removeEventListener("touchend",a),e.removeEventListener("touchcancel",a)}}else v.show(t,e),m&&(e.addEventListener("touchend",v.hide,!1),e.addEventListener("touchcancel",v.hide,!1)),e.addEventListener("mouseup",v.hide,!1),e.addEventListener("mouseleave",v.hide,!1)}}var l=l||{},d=document.querySelectorAll.bind(document),f=Object.prototype.toString,m="ontouchstart"in window,v={duration:750,delay:200,show:function(t,e,n){if(2===t.button)return!1;e=e||this;var o=document.createElement("div");o.className="waves-ripple waves-rippling",e.appendChild(o);var a=i(e),s=0,u=0;"touches"in t&&t.touches.length?(s=t.touches[0].pageY-a.top,u=t.touches[0].pageX-a.left):(s=t.pageY-a.top,u=t.pageX-a.left),u=u>=0?u:0,s=s>=0?s:0;var c="scale("+e.clientWidth/100*3+")",l="translate(0,0)";n&&(l="translate("+n.x+"px, "+n.y+"px)"),o.setAttribute("data-hold",Date.now()),o.setAttribute("data-x",u),o.setAttribute("data-y",s),o.setAttribute("data-scale",c),o.setAttribute("data-translate",l);var d={top:s+"px",left:u+"px"};o.classList.add("waves-notransition"),o.setAttribute("style",r(d)),o.classList.remove("waves-notransition"),d["-webkit-transform"]=c+" "+l,d["-moz-transform"]=c+" "+l,d["-ms-transform"]=c+" "+l,d["-o-transform"]=c+" "+l,d.transform=c+" "+l,d.opacity="1";var f="mousemove"===t.type?2500:v.duration;d["-webkit-transition-duration"]=f+"ms",d["-moz-transition-duration"]=f+"ms",d["-o-transition-duration"]=f+"ms",d["transition-duration"]=f+"ms",o.setAttribute("style",r(d))},hide:function(t,e){for(var n=(e=e||this).getElementsByClassName("waves-rippling"),o=0,a=n.length;o=0&&null!==e.wait){var d={type:"mouseup",button:1};setTimeout(function(t,e){return function(){v.hide(t,e)}}(d,o),e.wait)}},l.calm=function(t){for(var e={type:"mouseup",button:1},n=0,o=(t=a(t)).length;n0}function e(a){var b=o.call(a);return"[object String]"===b?n(a):c(a)&&/^\[object (Array|HTMLCollection|NodeList|Object)\]$/.test(b)&&a.hasOwnProperty("length")?a:d(a)?[a]:[]}function f(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,void 0!==a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function g(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function h(a,b,c){if(c){c.classList.remove("waves-rippling");var d=c.getAttribute("data-x"),e=c.getAttribute("data-y"),f=c.getAttribute("data-scale"),h=c.getAttribute("data-translate"),i=Date.now()-Number(c.getAttribute("data-hold")),j=350-i;j<0&&(j=0),"mousemove"===a.type&&(j=150);var k="mousemove"===a.type?2500:q.duration;setTimeout(function(){var a={top:e+"px",left:d+"px",opacity:"0","-webkit-transition-duration":k+"ms","-moz-transition-duration":k+"ms","-o-transition-duration":k+"ms","transition-duration":k+"ms","-webkit-transform":f+" "+h,"-moz-transform":f+" "+h,"-ms-transform":f+" "+h,"-o-transform":f+" "+h,transform:f+" "+h};c.setAttribute("style",g(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},k)},j)}}function i(a,b){return(document.documentElement.matches||document.documentElement.matchesSelector||document.documentElement.webkitMatchesSelector||document.documentElement.mozMatchesSelector||document.documentElement.msMatchesSelector||document.documentElement.oMatchesSelector).call(a,b)}function j(a){if(!1===s.allowEvent(a))return null;for(var b=null,c=a.target||a.srcElement;c.parentNode;){if(!(c instanceof SVGElement)&&i(c,q.elementSelector)){b=c;break}c=c.parentNode}return b}function k(a){var b=j(a);if(null!==b){if(b.disabled||b.getAttribute("disabled")||b.classList.contains("disabled"))return;if(s.registerEvent(a),"touchstart"===a.type&&q.delay){var c=!1,d=setTimeout(function(){d=null,q.show(a,b)},q.delay),e=function(e){d&&(clearTimeout(d),d=null,q.show(a,b)),c||(c=!0,q.hide(e,b)),g()},f=function(a){d&&(clearTimeout(d),d=null),e(a),g()};b.addEventListener("touchmove",f,!1),b.addEventListener("touchend",e,!1),b.addEventListener("touchcancel",e,!1);var g=function(){b.removeEventListener("touchmove",f),b.removeEventListener("touchend",e),b.removeEventListener("touchcancel",e)}}else q.show(a,b),p&&(b.addEventListener("touchend",q.hide,!1),b.addEventListener("touchcancel",q.hide,!1)),b.addEventListener("mouseup",q.hide,!1),b.addEventListener("mouseleave",q.hide,!1)}}function l(a,b,c){a=e(a),"[object Array]"===o.call(b)&&(b=b.join(" ")),b=b?" "+b:"";for(var d,f,g=0,h=a.length;g=0?i:0,h=h>=0?h:0;var j="scale("+b.clientWidth/100*3+")",k="translate(0,0)";c&&(k="translate("+c.x+"px, "+c.y+"px)"),d.setAttribute("data-hold",Date.now()),d.setAttribute("data-x",i),d.setAttribute("data-y",h),d.setAttribute("data-scale",j),d.setAttribute("data-translate",k);var l={top:h+"px",left:i+"px"};d.classList.add("waves-notransition"),d.setAttribute("style",g(l)),d.classList.remove("waves-notransition"),l["-webkit-transform"]=j+" "+k,l["-moz-transform"]=j+" "+k,l["-ms-transform"]=j+" "+k,l["-o-transform"]=j+" "+k,l.transform=j+" "+k,l.opacity="1";var m="mousemove"===a.type?2500:q.duration;l["-webkit-transition-duration"]=m+"ms",l["-moz-transition-duration"]=m+"ms",l["-o-transition-duration"]=m+"ms",l["transition-duration"]=m+"ms",d.setAttribute("style",g(l))},hide:function(a,b){b=b||this;for(var c=b.getElementsByClassName("waves-rippling"),d=0,e=c.length;d=0&&null!==b.wait){var m={type:"mouseup",button:1};setTimeout(l(m,d),b.wait)}},m.calm=function(a){a=e(a);for(var b={type:"mouseup",button:1},c=0,d=a.length;c tag so it can perform the effect
@@ -240,12 +255,12 @@
var parent = element.parentNode;
// If input already have parent just pass through
- if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
+ if (parent.tagName.toLowerCase() === 'span' && parent.classList.contains('waves-effect')) {
return;
}
// Put element as child
- var wrapper = document.createElement('i');
+ var wrapper = document.createElement('span');
parent.replaceChild(wrapper, element);
wrapper.appendChild(element);
@@ -358,6 +373,18 @@
}
};
+ /**
+ * Browser-compatible version of Element.matches().
+ */
+ function matches(element, selector) {
+ var match = document.documentElement.matches ||
+ document.documentElement.matchesSelector ||
+ document.documentElement.webkitMatchesSelector ||
+ document.documentElement.mozMatchesSelector ||
+ document.documentElement.msMatchesSelector ||
+ document.documentElement.oMatchesSelector;
+ return match.call(element, selector);
+ }
/**
* Delegated click handler for .waves-effect element.
@@ -372,12 +399,12 @@
var element = null;
var target = e.target || e.srcElement;
- while (target.parentElement) {
- if ( (!(target instanceof SVGElement)) && target.classList.contains('waves-effect')) {
+ while (target.parentNode) {
+ if ( (!(target instanceof SVGElement)) && matches(target, Effect.elementSelector)) {
element = target;
break;
}
- target = target.parentElement;
+ target = target.parentNode;
}
return element;
@@ -388,12 +415,6 @@
*/
function showEffect(e) {
- // Disable effect if element has "disabled" property on it
- // In some cases, the event is not triggered by the current element
- // if (e.target.getAttribute('disabled') !== null) {
- // return;
- // }
-
var element = getWavesEffectElement(e);
if (element !== null) {
@@ -477,23 +498,45 @@
Effect.delay = options.delay;
}
+ if ('elementSelector' in options) {
+ Effect.elementSelector = options.elementSelector;
+ }
+
+ if (!window.WavesReady) {
+ window.WavesReady = true;
+ if (isTouchAvailable) {
+ body.addEventListener('touchstart', showEffect, false);
+ body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
+ body.addEventListener('touchend', TouchHandler.registerEvent, false);
+ }
+
+ body.addEventListener('mousedown', showEffect, false);
+ }
+ };
+
+ Waves.destroy = function() {
+
+ var body = document.body;
+
if (isTouchAvailable) {
- body.addEventListener('touchstart', showEffect, false);
- body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
- body.addEventListener('touchend', TouchHandler.registerEvent, false);
+ body.removeEventListener('touchstart', showEffect, false);
+ body.removeEventListener('touchcancel', TouchHandler.registerEvent, false);
+ body.removeEventListener('touchend', TouchHandler.registerEvent, false);
}
- body.addEventListener('mousedown', showEffect, false);
+ body.removeEventListener('mousedown', showEffect, false);
+ delete window.WavesReady;
+
};
/**
- * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
+ * Toggle (Attach/Detach) Waves to dynamically loaded inputs, or add .waves-effect and other
* waves classes to a set of elements. Set drag to true if the ripple mouseover
* or skimming effect should be applied to the elements.
*/
- Waves.attach = function(elements, classes) {
-
+ function toggleWaves(elements, classes, type) {
+
elements = getWavesElements(elements);
if (toString.call(classes) === '[object Array]') {
@@ -511,13 +554,43 @@
if (['input', 'img'].indexOf(tagName) !== -1) {
TagWrapper[tagName](element);
- element = element.parentElement;
+ element = element.parentNode;
}
+
+ if (type === 'attach') {
+
+ if (element.className.indexOf(classes) === -1) {
+ element.className += ' '+classes;
+ }
- if (element.className.indexOf('waves-effect') === -1) {
- element.className += ' waves-effect' + classes;
+ if (!element.classList.contains('waves-effect')) {
+ element.classList.add('waves-effect');
+ }
+
}
+
+ if (type === 'detach') {
+
+ if (element.className.indexOf(classes) !== -1) {
+ element.className = element.className.replace(new RegExp(classes, 'g'), '');
+ }
+
+ if (element.classList.contains('waves-effect')) {
+ element.classList.remove('waves-effect');
+ }
+
+ }
+
}
+
+ }
+
+ Waves.attach = function(elements, classes) {
+ return toggleWaves(elements, classes, 'attach');
+ };
+
+ Waves.detach = function(elements, classes) {
+ return toggleWaves(elements, classes, 'detach');
};
@@ -558,7 +631,11 @@
mousedown.pageX = centre.x;
mousedown.pageY = centre.y;
-
+
+ if ('duration' in options) {
+ Effect.duration = options.duration;
+ }
+
Effect.show(mousedown, element);
if (options.wait >= 0 && options.wait !== null) {
diff --git a/src/less/waves.less b/src/less/waves.less
index e026324..c1311b6 100644
--- a/src/less/waves.less
+++ b/src/less/waves.less
@@ -1,5 +1,5 @@
/*!
- * Waves v0.7.6
+ * Waves v0.8.0
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
@@ -113,7 +113,7 @@
.waves-button-input {
margin: 0;
- padding: 0.85em 1.1em;
+ padding: 0em;
}
.waves-input-wrapper {
diff --git a/src/sass/waves.sass b/src/sass/waves.sass
index 60d985c..2167d6a 100644
--- a/src/sass/waves.sass
+++ b/src/sass/waves.sass
@@ -1,5 +1,5 @@
/*!
- * Waves v0.7.6
+ * Waves v0.8.0
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
@@ -110,7 +110,7 @@
.waves-button-input
margin: 0
- padding: 0.85em 1.1em
+ padding: 0em
.waves-input-wrapper
border-radius: 0.2em
diff --git a/src/scss/waves.scss b/src/scss/waves.scss
index 8aa98f3..4d18499 100644
--- a/src/scss/waves.scss
+++ b/src/scss/waves.scss
@@ -1,5 +1,5 @@
/*!
- * Waves v0.7.6
+ * Waves v0.8.0
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
@@ -113,7 +113,7 @@
.waves-button-input {
margin: 0;
- padding: 0.85em 1.1em;
+ padding: 0em;
}
.waves-input-wrapper {