mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-11 16:52:18 +03:00
Merge branch 'gh-pages' of https://github.com/FezVrasta/bootstrap-material-design into gh-pages
This commit is contained in:
FezVrasta
commit
2ce1058a62
|
|
@ -8,7 +8,9 @@
|
|||
"description": "Material Design theme for Bootstrap 3",
|
||||
"main": [
|
||||
"dist/css/material.css",
|
||||
"dist/js/material.js"
|
||||
"dist/js/material.js",
|
||||
"dist/css/ripples.css",
|
||||
"dist/js/ripples.js"
|
||||
],
|
||||
"ignore": [
|
||||
"test",
|
||||
|
|
|
|||
43
dist/js/ripples.js
vendored
43
dist/js/ripples.js
vendored
|
|
@ -31,35 +31,50 @@ window.ripples = {
|
|||
var rippleStart = function(e, target) {
|
||||
|
||||
// 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},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
__rippleOpacity__ = 0.05,
|
||||
targetColor,
|
||||
rgbArr,
|
||||
refreshElementStyle;
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
$ripple.className = "ripple";
|
||||
|
||||
// Move ripple to the mouse position
|
||||
$ripple.className = "ripple";
|
||||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked targets text color, this will be applied to the ripple as background-color.
|
||||
targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
|
||||
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
|
||||
// Not sure if regexp is quicker...
|
||||
rgbArr = targetColor.split(',');
|
||||
rgbArr.pop();
|
||||
rgbArr.push(" " + __rippleOpacity__ + ")")
|
||||
targetColor = rgbArr.join(',');
|
||||
|
||||
|
||||
// Insert new ripple into ripple wrapper
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
// Make sure the ripple has the class applied (ugly hack but it works)
|
||||
refreshElementStyle = window.getComputedStyle($ripple).opacity;
|
||||
|
||||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// + "background-color: " + targetColor + ";"
|
||||
// Set scale value, background-color and opacity to ripple and animate it
|
||||
$ripple.className = "ripple ripple-on";
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
|
||||
|
||||
// This function is called when the animation is finished
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
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="transform:scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g});i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on",g.setAttribute("style",g.getAttribute("style")+["-ms-"+k,"-moz-"+k,"-webkit-"+k,k].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;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){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,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},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;1!=a.dataset.animating&&g(a)})}};
|
||||
1033
index.html
1033
index.html
File diff suppressed because it is too large
Load Diff
|
|
@ -1,11 +1,11 @@
|
|||
// Material Theme 0.0.1
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import "_variables.less";
|
||||
@import "_mixins.less";
|
||||
@import "_icons-material-design.less";
|
||||
@import "_animations.less";
|
||||
@import "_shadows.less";
|
||||
@import "_variables.import.less";
|
||||
@import "_mixins.import.less";
|
||||
@import "_icons-material-design.import.less";
|
||||
@import "_animations.import.less";
|
||||
@import "_shadows.import.less";
|
||||
|
||||
body {
|
||||
background-color: #EEEEEE;
|
||||
|
|
@ -22,19 +22,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
@import "_welljumbo.less";
|
||||
@import "_welljumbo.import.less";
|
||||
|
||||
// Buttons
|
||||
@import "_buttons.less";
|
||||
@import "_buttons.import.less";
|
||||
|
||||
// Checkboxes
|
||||
@import "_checkboxes.less";
|
||||
@import "_checkboxes.import.less";
|
||||
|
||||
// Radios
|
||||
@import "_radios.less";
|
||||
@import "_radios.import.less";
|
||||
|
||||
// Text inputs
|
||||
@import "_inputs.less";
|
||||
@import "_inputs.import.less";
|
||||
|
||||
legend {
|
||||
border-bottom: 0;
|
||||
|
|
@ -56,10 +56,10 @@ legend {
|
|||
}
|
||||
|
||||
// Lists
|
||||
@import "_lists.less";
|
||||
@import "_lists.import.less";
|
||||
|
||||
// Navbar
|
||||
@import "_navbar.less";
|
||||
@import "_navbar.import.less";
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
|
|
@ -77,10 +77,10 @@ legend {
|
|||
}
|
||||
|
||||
// Alerts
|
||||
@import "_alerts.less";
|
||||
@import "_alerts.import.less";
|
||||
|
||||
// Progress bar
|
||||
@import "_progress.less";
|
||||
@import "_progress.import.less";
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
|
|
@ -99,14 +99,14 @@ legend {
|
|||
color: @btn-info;
|
||||
}
|
||||
|
||||
@import "_tabs.less";
|
||||
@import "_tabs.import.less";
|
||||
|
||||
@import "_popups.less";
|
||||
@import "_popups.import.less";
|
||||
|
||||
@import "_icons.less";
|
||||
@import "_icons.import.less";
|
||||
|
||||
|
||||
// External plugins
|
||||
@import "_plugin-snackbarjs.less";
|
||||
@import "_plugin-nouislider.less";
|
||||
@import "_plugin-selectize.less";
|
||||
@import "_plugin-snackbarjs.import.less";
|
||||
@import "_plugin-nouislider.import.less";
|
||||
@import "_plugin-selectize.import.less";
|
||||
|
|
|
|||
2
sass/_cards.scss → sass/_cards.import.scss
vendored
2
sass/_cards.scss → sass/_cards.import.scss
vendored
|
|
@ -127,4 +127,4 @@
|
|||
}
|
||||
.card-material-lightgrey {
|
||||
@include card-variant($lightgrey, darken(#FFFFFF, 10%), darken($lightgrey, 10%));
|
||||
}
|
||||
}
|
||||
2
sass/_mixins.scss → sass/_mixins.import.scss
vendored
2
sass/_mixins.scss → sass/_mixins.import.scss
vendored
|
|
@ -29,4 +29,4 @@
|
|||
|
||||
@mixin icon-variant($color) {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
// Material Theme 0.0.1
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import "_variables.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_animations.scss";
|
||||
@import "_shadows.scss";
|
||||
@import "_variables.import.scss";
|
||||
@import "_mixins.import.scss";
|
||||
@import "_animations.import.scss";
|
||||
@import "_shadows.import.scss";
|
||||
|
||||
body {
|
||||
background-color: #EEEEEE;
|
||||
|
|
@ -21,19 +21,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
@import "_welljumbo.scss";
|
||||
@import "_welljumbo.import.scss";
|
||||
|
||||
// Buttons
|
||||
@import "_buttons.scss";
|
||||
@import "_buttons.import.scss";
|
||||
|
||||
// Checkboxes
|
||||
@import "_checkboxes.scss";
|
||||
@import "_checkboxes.import.scss";
|
||||
|
||||
// Radios
|
||||
@import "_radios.scss";
|
||||
@import "_radios.import.scss";
|
||||
|
||||
// Text inputs
|
||||
@import "_inputs.scss";
|
||||
@import "_inputs.import.scss";
|
||||
|
||||
legend {
|
||||
border-bottom: 0;
|
||||
|
|
@ -55,10 +55,10 @@ legend {
|
|||
}
|
||||
|
||||
// Lists
|
||||
@import "_lists.scss";
|
||||
@import "_lists.import.scss";
|
||||
|
||||
// Navbar
|
||||
@import "_navbar.scss";
|
||||
@import "_navbar.import.scss";
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
|
|
@ -76,13 +76,13 @@ legend {
|
|||
}
|
||||
|
||||
// Alerts
|
||||
@import "_alerts.scss";
|
||||
@import "_alerts.import.scss";
|
||||
|
||||
// Progress bar
|
||||
@import "_progress.scss";
|
||||
@import "_progress.import.scss";
|
||||
|
||||
// Panels
|
||||
@import "_cards.scss";
|
||||
@import "_cards.import.scss";
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
|
|
@ -101,13 +101,13 @@ legend {
|
|||
color: $btn-info;
|
||||
}
|
||||
|
||||
@import "_tabs.scss";
|
||||
@import "_tabs.import.scss";
|
||||
|
||||
@import "_popups.scss";
|
||||
@import "_popups.import.scss";
|
||||
|
||||
@import "_icons.scss";
|
||||
@import "_icons.import.scss";
|
||||
|
||||
|
||||
// External plugins
|
||||
@import "_plugin-snackbarjs.scss";
|
||||
@import "_plugin-nouislider.scss";
|
||||
@import "_plugin-snackbarjs.import.scss";
|
||||
@import "_plugin-nouislider.import.scss";
|
||||
|
|
|
|||
|
|
@ -31,35 +31,50 @@ window.ripples = {
|
|||
var rippleStart = function(e, target) {
|
||||
|
||||
// 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},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
__rippleOpacity__ = 0.05,
|
||||
targetColor,
|
||||
rgbArr,
|
||||
refreshElementStyle;
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
$ripple.className = "ripple";
|
||||
|
||||
// Move ripple to the mouse position
|
||||
$ripple.className = "ripple";
|
||||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked targets text color, this will be applied to the ripple as background-color.
|
||||
targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
|
||||
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
|
||||
// Not sure if regexp is quicker...
|
||||
rgbArr = targetColor.split(',');
|
||||
rgbArr.pop();
|
||||
rgbArr.push(" " + __rippleOpacity__ + ")")
|
||||
targetColor = rgbArr.join(',');
|
||||
|
||||
|
||||
// Insert new ripple into ripple wrapper
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
// Make sure the ripple has the class applied (ugly hack but it works)
|
||||
refreshElementStyle = window.getComputedStyle($ripple).opacity;
|
||||
|
||||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// + "background-color: " + targetColor + ";"
|
||||
// Set scale value, background-color and opacity to ripple and animate it
|
||||
$ripple.className = "ripple ripple-on";
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
|
||||
|
||||
// This function is called when the animation is finished
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
|
|
@ -31,35 +31,50 @@ window.ripples = {
|
|||
var rippleStart = function(e, target) {
|
||||
|
||||
// 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},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
__rippleOpacity__ = 0.05,
|
||||
targetColor,
|
||||
rgbArr,
|
||||
refreshElementStyle;
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
$ripple.className = "ripple";
|
||||
|
||||
// Move ripple to the mouse position
|
||||
$ripple.className = "ripple";
|
||||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked targets text color, this will be applied to the ripple.
|
||||
targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
|
||||
// This changes the last value of the rgba value (opacity) to the constant __rippleOpacity__
|
||||
// Not sure if regexp is quicker...
|
||||
rgbArr = targetColor.split(',');
|
||||
rgbArr.pop();
|
||||
rgbArr.push(" " + __rippleOpacity__ + ")")
|
||||
targetColor = rgbArr.join(',');
|
||||
|
||||
|
||||
// Insert new ripple into ripple wrapper
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
// Make sure the ripple has the class applied (ugly hack but it works)
|
||||
refreshElementStyle = window.getComputedStyle($ripple).opacity;
|
||||
|
||||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// + "background-color: " + targetColor + ";"
|
||||
// Set scale value, background-color and opacity to ripple and animate it
|
||||
$ripple.className = "ripple ripple-on";
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
|
||||
|
||||
// This function is called when the animation is finished
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
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="transform:scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g});i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on",g.setAttribute("style",g.getAttribute("style")+["-ms-"+k,"-moz-"+k,"-webkit-"+k,k].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;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){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,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},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;1!=a.dataset.animating&&g(a)})}};
|
||||
Loading…
Reference in New Issue
Block a user