diff --git a/bower.json b/bower.json index a0d07b2c..add4afcc 100644 --- a/bower.json +++ b/bower.json @@ -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", diff --git a/dist/js/ripples.js b/dist/js/ripples.js index cc72e924..f262a2ba 100644 --- a/dist/js/ripples.js +++ b/dist/js/ripples.js @@ -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() { diff --git a/dist/js/ripples.min.js b/dist/js/ripples.min.js index c256e09b..864cde15 100644 --- a/dist/js/ripples.min.js +++ b/dist/js/ripples.min.js @@ -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)})}}; \ No newline at end of file +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)})}}; \ No newline at end of file diff --git a/index.html b/index.html index c5df16a5..c72d7696 100644 --- a/index.html +++ b/index.html @@ -522,457 +522,168 @@
+ +

Arrow icons

+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+

Web application icons

+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Chat

+
+
+
+
+
+
+
+
+
+
+

Keyboard icons

+
+
-
-
+
-
-
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+

Smartphone icons

+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -984,198 +695,384 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+

Application icons

+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
+
+
+ +
+

Not yet categorized icons

+
+
diff --git a/less/_alerts.less b/less/_alerts.import.less similarity index 100% rename from less/_alerts.less rename to less/_alerts.import.less diff --git a/less/_animations.less b/less/_animations.import.less similarity index 100% rename from less/_animations.less rename to less/_animations.import.less diff --git a/less/_buttons.less b/less/_buttons.import.less similarity index 100% rename from less/_buttons.less rename to less/_buttons.import.less diff --git a/less/_checkboxes.less b/less/_checkboxes.import.less similarity index 100% rename from less/_checkboxes.less rename to less/_checkboxes.import.less diff --git a/less/_checkboxes_old.less b/less/_checkboxes_old.import.less similarity index 100% rename from less/_checkboxes_old.less rename to less/_checkboxes_old.import.less diff --git a/less/_icons-material-design.less b/less/_icons-material-design.import.less similarity index 100% rename from less/_icons-material-design.less rename to less/_icons-material-design.import.less diff --git a/less/_icons.less b/less/_icons.import.less similarity index 100% rename from less/_icons.less rename to less/_icons.import.less diff --git a/less/_inputs.less b/less/_inputs.import.less similarity index 100% rename from less/_inputs.less rename to less/_inputs.import.less diff --git a/less/_lists.less b/less/_lists.import.less similarity index 100% rename from less/_lists.less rename to less/_lists.import.less diff --git a/less/_mixins.less b/less/_mixins.import.less similarity index 100% rename from less/_mixins.less rename to less/_mixins.import.less diff --git a/less/_navbar.less b/less/_navbar.import.less similarity index 100% rename from less/_navbar.less rename to less/_navbar.import.less diff --git a/less/_plugin-nouislider.less b/less/_plugin-nouislider.import.less similarity index 100% rename from less/_plugin-nouislider.less rename to less/_plugin-nouislider.import.less diff --git a/less/_plugin-selectize.less b/less/_plugin-selectize.import.less similarity index 100% rename from less/_plugin-selectize.less rename to less/_plugin-selectize.import.less diff --git a/less/_plugin-snackbarjs.less b/less/_plugin-snackbarjs.import.less similarity index 100% rename from less/_plugin-snackbarjs.less rename to less/_plugin-snackbarjs.import.less diff --git a/less/_popups.less b/less/_popups.import.less similarity index 100% rename from less/_popups.less rename to less/_popups.import.less diff --git a/less/_progress.less b/less/_progress.import.less similarity index 100% rename from less/_progress.less rename to less/_progress.import.less diff --git a/less/_radios.less b/less/_radios.import.less similarity index 100% rename from less/_radios.less rename to less/_radios.import.less diff --git a/less/_shadows.less b/less/_shadows.import.less similarity index 100% rename from less/_shadows.less rename to less/_shadows.import.less diff --git a/less/_tabs.less b/less/_tabs.import.less similarity index 100% rename from less/_tabs.less rename to less/_tabs.import.less diff --git a/less/_variables.less b/less/_variables.import.less similarity index 100% rename from less/_variables.less rename to less/_variables.import.less diff --git a/less/_welljumbo.less b/less/_welljumbo.import.less similarity index 100% rename from less/_welljumbo.less rename to less/_welljumbo.import.less diff --git a/less/material.less b/less/material.less index e7db8aa9..069ea0d6 100644 --- a/less/material.less +++ b/less/material.less @@ -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"; diff --git a/sass/_alerts.scss b/sass/_alerts.import.scss similarity index 100% rename from sass/_alerts.scss rename to sass/_alerts.import.scss diff --git a/sass/_animations.scss b/sass/_animations.import.scss similarity index 100% rename from sass/_animations.scss rename to sass/_animations.import.scss diff --git a/sass/_buttons.scss b/sass/_buttons.import.scss similarity index 100% rename from sass/_buttons.scss rename to sass/_buttons.import.scss diff --git a/sass/_cards.scss b/sass/_cards.import.scss similarity index 99% rename from sass/_cards.scss rename to sass/_cards.import.scss index 69f4e7b0..5122af1a 100644 --- a/sass/_cards.scss +++ b/sass/_cards.import.scss @@ -127,4 +127,4 @@ } .card-material-lightgrey { @include card-variant($lightgrey, darken(#FFFFFF, 10%), darken($lightgrey, 10%)); -} \ No newline at end of file +} diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.import.scss similarity index 100% rename from sass/_checkboxes.scss rename to sass/_checkboxes.import.scss diff --git a/sass/_icons.scss b/sass/_icons.import.scss similarity index 100% rename from sass/_icons.scss rename to sass/_icons.import.scss diff --git a/sass/_inputs.scss b/sass/_inputs.import.scss similarity index 100% rename from sass/_inputs.scss rename to sass/_inputs.import.scss diff --git a/sass/_lists.scss b/sass/_lists.import.scss similarity index 100% rename from sass/_lists.scss rename to sass/_lists.import.scss diff --git a/sass/_mixins.scss b/sass/_mixins.import.scss similarity index 99% rename from sass/_mixins.scss rename to sass/_mixins.import.scss index 66714175..31e4e889 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.import.scss @@ -29,4 +29,4 @@ @mixin icon-variant($color) { color: $color; -} \ No newline at end of file +} diff --git a/sass/_navbar.scss b/sass/_navbar.import.scss similarity index 100% rename from sass/_navbar.scss rename to sass/_navbar.import.scss diff --git a/sass/_plugin-nouislider.scss b/sass/_plugin-nouislider.import.scss similarity index 100% rename from sass/_plugin-nouislider.scss rename to sass/_plugin-nouislider.import.scss diff --git a/sass/_plugin-snackbarjs.scss b/sass/_plugin-snackbarjs.import.scss similarity index 100% rename from sass/_plugin-snackbarjs.scss rename to sass/_plugin-snackbarjs.import.scss diff --git a/sass/_popups.scss b/sass/_popups.import.scss similarity index 100% rename from sass/_popups.scss rename to sass/_popups.import.scss diff --git a/sass/_progress.scss b/sass/_progress.import.scss similarity index 100% rename from sass/_progress.scss rename to sass/_progress.import.scss diff --git a/sass/_radios.scss b/sass/_radios.import.scss similarity index 100% rename from sass/_radios.scss rename to sass/_radios.import.scss diff --git a/sass/_shadows.scss b/sass/_shadows.import.scss similarity index 100% rename from sass/_shadows.scss rename to sass/_shadows.import.scss diff --git a/sass/_tabs.scss b/sass/_tabs.import.scss similarity index 100% rename from sass/_tabs.scss rename to sass/_tabs.import.scss diff --git a/sass/_variables.scss b/sass/_variables.import.scss similarity index 100% rename from sass/_variables.scss rename to sass/_variables.import.scss diff --git a/sass/_welljumbo.scss b/sass/_welljumbo.import.scss similarity index 100% rename from sass/_welljumbo.scss rename to sass/_welljumbo.import.scss diff --git a/sass/material.scss b/sass/material.scss index 11601a42..2eb126fb 100644 --- a/sass/material.scss +++ b/sass/material.scss @@ -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"; diff --git a/scripts/ripples.js b/scripts/ripples.js index cc72e924..f262a2ba 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -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() { diff --git a/template/material/js/ripples.js b/template/material/js/ripples.js index cc72e924..0b1878f7 100644 --- a/template/material/js/ripples.js +++ b/template/material/js/ripples.js @@ -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() { diff --git a/template/material/js/ripples.min.js b/template/material/js/ripples.min.js index c256e09b..864cde15 100644 --- a/template/material/js/ripples.min.js +++ b/template/material/js/ripples.min.js @@ -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)})}}; \ No newline at end of file +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)})}}; \ No newline at end of file