mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
added support for mobile devices to ripples.js
This commit is contained in:
FezVrasta
parent
7af50af643
commit
2a610b1cfe
58
dist/js/ripples.js
vendored
58
dist/js/ripples.js
vendored
|
|
@ -20,29 +20,43 @@ window.ripples = {
|
|||
rippleStartTime = 500;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
var bind = function(events, selector, callback) {
|
||||
if (typeof events === "string") {
|
||||
events = [events];
|
||||
}
|
||||
events.forEach(function(event) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var rippleStart = function(e, target) {
|
||||
var rippleStart = function(e, target, callback) {
|
||||
|
||||
// Init variables
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
// Mouse pos in most cases
|
||||
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
|
||||
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
_rippleOpacity = 0.1,
|
||||
refreshElementStyle;
|
||||
|
||||
|
||||
// If multitouch is detected or some other black magic suff is happening...
|
||||
if (e.touches) {
|
||||
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
|
||||
}
|
||||
|
||||
console.log(mousePos);
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
|
|
@ -88,6 +102,9 @@ window.ripples = {
|
|||
// Let know to other functions that this element has finished the animation
|
||||
$ripple.dataset.animating = 0;
|
||||
document.dispatchEvent(rippleEnd);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
}, rippleStartTime);
|
||||
|
||||
|
|
@ -105,12 +122,12 @@ window.ripples = {
|
|||
|
||||
// Helper, need to know if mouse is up or down
|
||||
var mouseDown = false;
|
||||
document.body.onmousedown = function() {
|
||||
bind(["mousedown", "touchstart"], "*", function() {
|
||||
mouseDown = true;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
});
|
||||
bind(["mouseup", "touchend"], "*", function() {
|
||||
mouseDown = false;
|
||||
};
|
||||
});
|
||||
|
||||
// Append ripple wrapper if not exists already
|
||||
var rippleInit = function(e, target) {
|
||||
|
|
@ -119,20 +136,25 @@ window.ripples = {
|
|||
var $rippleWrapper = document.createElement("div");
|
||||
$rippleWrapper.className = "ripple-wrapper";
|
||||
target.appendChild($rippleWrapper);
|
||||
if (window.ontouchstart === null) {
|
||||
rippleStart(e, $rippleWrapper, function() {
|
||||
// FIXME: ugly fix for first touchstart event on mobile devices...
|
||||
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var $ripplecache;
|
||||
|
||||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mouseover", withRipple, rippleInit);
|
||||
bind(["mouseover", "touchstart"], withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click
|
||||
if (e.which === 1 || e.which === 2) {
|
||||
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click and touch click
|
||||
if (e.which === 0 || e.which === 1 || e.which === 2) {
|
||||
rippleStart(e, $ripple);
|
||||
}
|
||||
});
|
||||
|
|
@ -148,7 +170,7 @@ window.ripples = {
|
|||
});
|
||||
|
||||
// Destroy ripple when mouse is not holded anymore if the ripple still exists
|
||||
bind("mouseup", ".ripple-wrapper", function() {
|
||||
bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
|
||||
var $ripple = $ripplecache;
|
||||
if ($ripple && $ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
|
|
|
|||
2
dist/js/ripples.min.js
vendored
2
dist/js/ripples.min.js
vendored
|
|
@ -1 +1 @@
|
|||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g}),m=.1;i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;");var n=window.getComputedStyle(f).color;n=n.replace("rgb","rgba").replace(")",", "+m+")"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on";var o=[g.getAttribute("style"),"background-color: "+n,"-ms-transform: "+k,"-moz-transform"+k,"-webkit-transform"+k,"transform: "+k];g.setAttribute("style",o.join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<link href="dist/css/ripples.min.css" rel="stylesheet">
|
||||
<link href="dist/css/material-wfont.min.css" rel="stylesheet">
|
||||
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
|
||||
.infobox .btn-sup { color: rgba(0,0,0,0.5); font-weight: bold; font-size: 15px; line-height: 30px; }
|
||||
|
|
|
|||
|
|
@ -20,29 +20,43 @@ window.ripples = {
|
|||
rippleStartTime = 500;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
var bind = function(events, selector, callback) {
|
||||
if (typeof events === "string") {
|
||||
events = [events];
|
||||
}
|
||||
events.forEach(function(event) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var rippleStart = function(e, target) {
|
||||
var rippleStart = function(e, target, callback) {
|
||||
|
||||
// Init variables
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
// Mouse pos in most cases
|
||||
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
|
||||
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
_rippleOpacity = 0.1,
|
||||
refreshElementStyle;
|
||||
|
||||
|
||||
// If multitouch is detected or some other black magic suff is happening...
|
||||
if (e.touches) {
|
||||
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
|
||||
}
|
||||
|
||||
console.log(mousePos);
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
|
|
@ -88,6 +102,9 @@ window.ripples = {
|
|||
// Let know to other functions that this element has finished the animation
|
||||
$ripple.dataset.animating = 0;
|
||||
document.dispatchEvent(rippleEnd);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
}, rippleStartTime);
|
||||
|
||||
|
|
@ -105,12 +122,12 @@ window.ripples = {
|
|||
|
||||
// Helper, need to know if mouse is up or down
|
||||
var mouseDown = false;
|
||||
document.body.onmousedown = function() {
|
||||
bind(["mousedown", "touchstart"], "*", function() {
|
||||
mouseDown = true;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
});
|
||||
bind(["mouseup", "touchend"], "*", function() {
|
||||
mouseDown = false;
|
||||
};
|
||||
});
|
||||
|
||||
// Append ripple wrapper if not exists already
|
||||
var rippleInit = function(e, target) {
|
||||
|
|
@ -119,20 +136,25 @@ window.ripples = {
|
|||
var $rippleWrapper = document.createElement("div");
|
||||
$rippleWrapper.className = "ripple-wrapper";
|
||||
target.appendChild($rippleWrapper);
|
||||
if (window.ontouchstart === null) {
|
||||
rippleStart(e, $rippleWrapper, function() {
|
||||
// FIXME: ugly fix for first touchstart event on mobile devices...
|
||||
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var $ripplecache;
|
||||
|
||||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mouseover", withRipple, rippleInit);
|
||||
bind(["mouseover", "touchstart"], withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click
|
||||
if (e.which === 1 || e.which === 2) {
|
||||
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click and touch click
|
||||
if (e.which === 0 || e.which === 1 || e.which === 2) {
|
||||
rippleStart(e, $ripple);
|
||||
}
|
||||
});
|
||||
|
|
@ -148,7 +170,7 @@ window.ripples = {
|
|||
});
|
||||
|
||||
// Destroy ripple when mouse is not holded anymore if the ripple still exists
|
||||
bind("mouseup", ".ripple-wrapper", function() {
|
||||
bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
|
||||
var $ripple = $ripplecache;
|
||||
if ($ripple && $ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
|
|
|
|||
|
|
@ -20,29 +20,43 @@ window.ripples = {
|
|||
rippleStartTime = 500;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
var bind = function(events, selector, callback) {
|
||||
if (typeof events === "string") {
|
||||
events = [events];
|
||||
}
|
||||
events.forEach(function(event) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var rippleStart = function(e, target) {
|
||||
var rippleStart = function(e, target, callback) {
|
||||
|
||||
// Init variables
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
// Mouse pos in most cases
|
||||
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
|
||||
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
_rippleOpacity = 0.1,
|
||||
refreshElementStyle;
|
||||
|
||||
|
||||
// If multitouch is detected or some other black magic suff is happening...
|
||||
if (e.touches) {
|
||||
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
|
||||
}
|
||||
|
||||
console.log(mousePos);
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
|
|
@ -88,6 +102,9 @@ window.ripples = {
|
|||
// Let know to other functions that this element has finished the animation
|
||||
$ripple.dataset.animating = 0;
|
||||
document.dispatchEvent(rippleEnd);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
}, rippleStartTime);
|
||||
|
||||
|
|
@ -105,12 +122,12 @@ window.ripples = {
|
|||
|
||||
// Helper, need to know if mouse is up or down
|
||||
var mouseDown = false;
|
||||
document.body.onmousedown = function() {
|
||||
bind(["mousedown", "touchstart"], "*", function() {
|
||||
mouseDown = true;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
});
|
||||
bind(["mouseup", "touchend"], "*", function() {
|
||||
mouseDown = false;
|
||||
};
|
||||
});
|
||||
|
||||
// Append ripple wrapper if not exists already
|
||||
var rippleInit = function(e, target) {
|
||||
|
|
@ -119,20 +136,25 @@ window.ripples = {
|
|||
var $rippleWrapper = document.createElement("div");
|
||||
$rippleWrapper.className = "ripple-wrapper";
|
||||
target.appendChild($rippleWrapper);
|
||||
if (window.ontouchstart === null) {
|
||||
rippleStart(e, $rippleWrapper, function() {
|
||||
// FIXME: ugly fix for first touchstart event on mobile devices...
|
||||
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var $ripplecache;
|
||||
|
||||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mouseover", withRipple, rippleInit);
|
||||
bind(["mouseover", "touchstart"], withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click
|
||||
if (e.which === 1 || e.which === 2) {
|
||||
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click and touch click
|
||||
if (e.which === 0 || e.which === 1 || e.which === 2) {
|
||||
rippleStart(e, $ripple);
|
||||
}
|
||||
});
|
||||
|
|
@ -148,7 +170,7 @@ window.ripples = {
|
|||
});
|
||||
|
||||
// Destroy ripple when mouse is not holded anymore if the ripple still exists
|
||||
bind("mouseup", ".ripple-wrapper", function() {
|
||||
bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
|
||||
var $ripple = $ripplecache;
|
||||
if ($ripple && $ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
|
|
|
|||
2
template/material/js/ripples.min.js
vendored
2
template/material/js/ripples.min.js
vendored
|
|
@ -1 +1 @@
|
|||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g}),m=.1;i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;");var n=window.getComputedStyle(f).color;n=n.replace("rgb","rgba").replace(")",", "+m+")"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on";var o=[g.getAttribute("style"),"background-color: "+n,"-ms-transform: "+k,"-moz-transform"+k,"-webkit-transform"+k,"transform: "+k];g.setAttribute("style",o.join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user