full color palette + ripples.js (WIP)

This commit is contained in:
FezVrasta 2014-12-29 14:33:55 +01:00
parent c03c4ddf56
commit fcd35da52b
22 changed files with 1554 additions and 780 deletions

View File

@ -1,6 +1,12 @@
# Changelog
## v 0.2.1dev
## v 0.3.0 dev
- Implemented full color palette from Material Design specifications (thanks @korgan00)
- Reformat of ripples.js (thanks @grvcoelho)
## v 0.2.1
- Fixed well sizes
- Fixed $.ripple that needed two clicks to effectively "click" an element
@ -16,5 +22,5 @@
- New demo page
- Primary color is now a subtle teal to follow the Material Design specifications.
- Ripples.js is now completely rewritten with jQuery.
- Fixed thousand of bugs.
- Fixed thousands of bugs.

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

899
dist/css/material.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -20,12 +20,17 @@
margin-top: -10px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.05);
transform: scale(1);
transform-origin: 50%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
opacity: 0;
pointer-events: none;
}
.ripple.ripple-on {
transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 0.1;
}

View File

@ -1 +1 @@
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,YAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;EACA,sBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,cAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}

View File

@ -1,3 +1,2 @@
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{transition:opacity .1s linear 0s!important;opacity:0}
/*# sourceMappingURL=ripples.min.css.map */

View File

@ -1 +1 @@
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CAAA,sBAAA,CAAA,kBACA,CAAA,4BAAA,CAAA,wBAAA,CAAA,oBACA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CAAA,4EACA,CAAA,UAAA,CAAA,kBAAA,2CAGA,CAAA,SACA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.15;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,UAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}

2
dist/js/material.js vendored
View File

@ -135,7 +135,7 @@
});
},
"ripples": function(selector) {
$.ripples({"target": (selector) ? selector : this.options.withRipples});
$((selector) ? selector : this.options.withRipples).ripples();
},
"autofill": function() {

View File

@ -1,2 +1,2 @@
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!0,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a.ripples({target:b?b:this.options.withRipples})},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
//# sourceMappingURL=material.min.js.map
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!0,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
//# sourceMappingURL=material.min.js.map

View File

@ -1 +1 @@
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","wrap","hasClass","placeholder","attr","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","console","log","name","substring","length","prev","target","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","jQuery"],"mappings":"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"}
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","wrap","hasClass","placeholder","attr","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","console","log","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","jQuery"],"mappings":"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"}

425
dist/js/ripples.js vendored
View File

@ -1,167 +1,330 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals jQuery, navigator */
(function($) {
(function($, window, document, undefined) {
// Detect if the browser supports transitions
$.support.transition = (function(){
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
support = (
thisStyle.transition !== undefined ||
thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.MsTransition !== undefined ||
thisStyle.OTransition !== undefined
);
return support;
})();
"use strict";
$.ripples = function(options) {
// Default options
var defaultOptions = {
"target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
};
/**
* Define the name of the plugin
*/
var ripples = "ripples";
function isTouch() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
/**
* Get an instance of the plugin
*/
var self = null;
// Fade out the ripple and then destroy it
function rippleOut(ripple) {
// Unbind events from ripple
ripple.off();
// Start the out animation
if ($.support.transition) {
ripple.addClass("ripple-out");
} else {
ripple.animate({
"opacity": 0
}, 100, function() {
ripple.trigger("transitionend");
});
}
// This function is called when the transition "out" ends
ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
ripple.remove();
});
}
// Apply custom options
options = $.extend(defaultOptions, options);
/**
* Define the defaults of the plugin
*/
var defaults = {};
$(document)
.on("mousedown touchstart", options.target, function(e) {
if (isTouch() && e.type == "mousedown") {
/**
* Create the main plugin function
*/
function Ripples(element, options) {
self = this;
this.element = $(element);
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = ripples;
this.init();
}
/**
* Initialize the plugin
*/
Ripples.prototype.init = function() {
var $element = this.element;
$element.on("mousedown touchstart", function(event) {
/**
* Verify if the user is just touching on a device and return if so
*/
if(self.isTouch() && event.type === "mousedown") {
return false;
}
var element = $(this);
// If the ripple wrapper does not exists, create it
if (!$(this).find(".ripple-wrapper").length) {
$(this).append("<div class=ripple-wrapper></div>");
/**
* Verify if the current element already has a ripple wrapper element and
* creates if it doesn't
*/
if(!($element.find(".ripple-wrapper").length)) {
$element.append("<div class=\"ripple-wrapper\"></div>");
}
var wrapper = $(this).find(".ripple-wrapper");
/**
* Find the ripple wrapper
*/
var $wrapper = $element.children(".ripple-wrapper");
var wrapperOffset = wrapper.offset(),
relX,
relY;
if (!isTouch()) {
// Get the mouse position relative to the ripple wrapper
relX = e.pageX - wrapperOffset.left;
relY = e.pageY - wrapperOffset.top;
} else {
// Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
e = e.originalEvent;
if (e.touches.length === 1) {
relX = e.touches[0].pageX - wrapperOffset.left;
relY = e.touches[0].pageY - wrapperOffset.top;
} else {
return;
}
/**
* Get relY and relX positions
*/
var relY = self.getRelY($wrapper, event);
var relX = self.getRelX($wrapper, event);
/**
* If relY and/or relX are false, return the event
*/
if(!relY && !relX) {
return;
}
// Meet the new ripple
var ripple = $("<div></div>");
// Add to it the ripple class
ripple.addClass("ripple");
// Position it in the right place
ripple.css({"left": relX, "top": relY});
// Set the background color of the ripple
ripple.css({"background-color": ($(this).data("ripple-color")) ? $(this).data("ripple-color") : window.getComputedStyle($(this)[0]).color});
// Spawn it
wrapper.append(ripple);
// Make sure the ripple has the styles applied (ugly hack but it works)
(function() { return window.getComputedStyle(ripple[0]).opacity; })();
// Set the new size
var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
/**
* Get the ripple color
*/
var rippleColor = self.getRipplesColor();
// Decide if use CSS transitions or jQuery transitions
if ($.support.transition) {
// Start the transition
ripple.css({
"-ms-transform": "scale(" + size + ")",
"-moz-transform": "scale(" + size + ")",
"-webkit-transform": "scale(" + size + ")",
"transform": "scale(" + size + ")"
});
ripple.addClass("ripple-on");
ripple.data("animating", "on");
ripple.data("mousedown", "on");
} else {
// Start the transition
ripple.animate({
"width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
"height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
"margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
"margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
"opacity": 0.2
}, 500, function() {
ripple.trigger("transitionend");
});
}
/**
* Create the ripple element
*/
var $ripple = $("<div></div>");
// This function is called when the transition "on" ends
$ripple
.addClass("ripple")
.css({
"left": relX,
"top": relY,
"background-color": rippleColor
});
/**
* Append the ripple to the wrapper
*/
$wrapper.append($ripple);
/**
* Make sure the ripple has the styles applied (ugly hack but it works)
*/
(function() { return window.getComputedStyle($ripple[0]).opacity; })();
/**
* Turn on the ripple animation
*/
self.rippleOn($ripple);
/**
* Call the rippleEnd function when the transition "on" ends
*/
setTimeout(function() {
ripple.data("animating", "off");
if (ripple.data("mousedown") == "off") {
rippleOut(ripple);
}
self.rippleEnd($ripple);
}, 500);
// On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
element.on("mouseup mouseleave touchend", function() {
ripple.data("mousedown", "off");
// If the transition "on" is finished then we can destroy the ripple with transition "out"
if (ripple.data("animating") == "off") {
rippleOut(ripple);
/**
* Detect when the user leaves the element
*/
$element.on("mouseup mouseleave touchend", function() {
$ripple.data("mousedown", "off");
if($ripple.data("animating") === "off") {
self.rippleOut($ripple);
}
});
});
};
$.fn.ripples = function() {
$.ripples({"target": $(this)});
/**
* Get the new size based on the element height/width and the ripple width
*/
Ripples.prototype.getNewSize = function($ripple) {
var $element = this.element;
return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
};
})(jQuery);
/**
* Get the relX
*/
Ripples.prototype.getRelX = function($wrapper, event) {
var wrapperOffset = $wrapper.offset();
if(!self.isTouch()) {
/**
* Get the mouse position relative to the ripple wrapper
*/
return event.pageX - wrapperOffset.left;
} else {
/**
* Make sure the user is using only one finger and then get the touch
* position relative to the ripple wrapper
*/
event = event.originalEvent;
if(event.touches.length !== 1) {
return event.touches[0].pageX - wrapperOffset.left;
}
return false;
}
};
/**
* Get the relY
*/
Ripples.prototype.getRelY = function($wrapper, event) {
var wrapperOffset = $wrapper.offset();
if(!self.isTouch()) {
/**
* Get the mouse position relative to the ripple wrapper
*/
return event.pageY - wrapperOffset.top;
} else {
/**
* Make sure the user is using only one finger and then get the touch
* position relative to the ripple wrapper
*/
event = event.originalEvent;
if(event.touches.length !== 1) {
return event.touches[0].pageY - wrapperOffset.top;
}
return false;
}
};
/**
* Get the ripple color
*/
Ripples.prototype.getRipplesColor = function() {
var $element = this.element;
console.log($element);
var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
console.log(color);
return color;
};
/**
* Verify if the client browser has transistion support
*/
Ripples.prototype.hasTransitionSupport = function() {
var thisBody = document.body || document.documentElement;
var thisStyle = thisBody.style;
var support = (
thisStyle.transition !== undefined ||
thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.MsTransition !== undefined ||
thisStyle.OTransition !== undefined
);
return support;
};
/**
* Verify if the client is using a mobile device
*/
Ripples.prototype.isTouch = function() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
};
/**
* End the animation of the ripple
*/
Ripples.prototype.rippleEnd = function($ripple) {
$ripple.data("animating", "off");
if($ripple.data("mousedown") === "off") {
self.rippleOut($ripple);
}
};
/**
* Turn off the ripple effect
*/
Ripples.prototype.rippleOut = function($ripple) {
$ripple.off();
if(self.hasTransitionSupport()) {
$ripple.addClass("ripple-out");
} else {
$ripple.animate({"opacity": 0}, 100, function() {
$ripple.trigger("transitionend");
});
}
$ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
$ripple.remove();
});
};
/**
* Turn on the ripple effect
*/
Ripples.prototype.rippleOn = function($ripple) {
var size = self.getNewSize($ripple);
var $element = this.element;
if(self.hasTransitionSupport()) {
$ripple
.css({
"-ms-transform": "scale(" + size + ")",
"-moz-transform": "scale(" + size + ")",
"-webkit-transform": "scale(" + size + ")",
"transform": "scale(" + size + ")"
})
.addClass("ripple-on")
.data("animating", "on")
.data("mousedown", "on");
} else {
$ripple.animate({
"width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
"height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
"margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
"margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
"opacity": 0.2
}, 500, function() {
$ripple.trigger("transitionend");
});
}
};
/**
* Create the jquery plugin function
*/
$.fn.ripples = function(options) {
return this.each(function() {
if(!$.data(this, "plugin_" + ripples)) {
$.data(this, "plugin_" + ripples, new Ripples(this, options));
}
});
};
})(jQuery, window, document);

View File

@ -1,2 +1,2 @@
!function(a){a.support.transition=function(){var a=document.body||document.documentElement,b=a.style,c=void 0!==b.transition||void 0!==b.WebkitTransition||void 0!==b.MozTransition||void 0!==b.MsTransition||void 0!==b.OTransition;return c}(),a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(b){b.off(),a.support.transition?b.addClass("ripple-out"):b.animate({opacity:0},100,function(){b.trigger("transitionend")}),b.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){b.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":a(this).data("ripple-color")?a(this).data("ripple-color"):window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;a.support.transition?(j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on")):j.animate({width:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),height:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-left":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-top":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),opacity:.2},500,function(){j.trigger("transitionend")}),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(g.isTouch()&&"mousedown"===d.type)return!1;c.find(".ripple-wrapper").length||c.append('<div class="ripple-wrapper"></div>');var e=c.children(".ripple-wrapper"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}})},e.prototype.getNewSize=function(a){var b=this.element;return Math.max(b.outerWidth(),b.outerHeight())/a.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1!==b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1!==b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(){var a=this.element;console.log(a);var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return console.log(c),c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a){var b=g.getNewSize(a),c=this.element;g.hasTransitionSupport()?a.css({"-ms-transform":"scale("+b+")","-moz-transform":"scale("+b+")","-webkit-transform":"scale("+b+")",transform:"scale("+b+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):a.animate({width:2*Math.max(c.outerWidth(),c.outerHeight()),height:2*Math.max(c.outerWidth(),c.outerHeight()),"margin-left":-1*Math.max(c.outerWidth(),c.outerHeight()),"margin-top":-1*Math.max(c.outerWidth(),c.outerHeight()),opacity:.2},500,function(){a.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
//# sourceMappingURL=ripples.min.js.map

View File

@ -1 +1 @@
{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","support","transition","thisBody","document","body","documentElement","thisStyle","style","undefined","WebkitTransition","MozTransition","MsTransition","OTransition","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","animate","opacity","trigger","on","remove","defaultOptions","target","extend","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","data","window","getComputedStyle","color","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","setTimeout","fn","jQuery"],"mappings":"CAGA,SAAUA,GAGRA,EAAEC,QAAQC,WAAa,WACrB,GAAIC,GAAWC,SAASC,MAAQD,SAASE,gBACrCC,EAAYJ,EAASK,MACrBP,EAC2BQ,SAAzBF,EAAUL,YACqBO,SAA/BF,EAAUG,kBACkBD,SAA5BF,EAAUI,eACiBF,SAA3BF,EAAUK,cACgBH,SAA1BF,EAAUM,WAEhB,OAAOZ,MAGTD,EAAEc,QAAU,SAASC,GAQnB,QAASC,KACP,MAAO,iEAAiEC,KAAKC,UAAUC,WAKzF,QAASC,GAAUC,GAGjBA,EAAOC,MAGHtB,EAAEC,QAAQC,WACZmB,EAAOE,SAAS,cAEhBF,EAAOG,SACLC,QAAW,GACV,IAAK,WACNJ,EAAOK,QAAQ,mBAKnBL,EAAOM,GAAG,mEAAoE,WAC5EN,EAAOO,WA7BX,GAAIC,IACFC,OAAU,gHAkCZf,GAAUf,EAAE+B,OAAOF,EAAgBd,GAGnCf,EAAEI,UACDuB,GAAG,uBAAwBZ,EAAQe,OAAQ,SAASE,GACnD,GAAIhB,KAAuB,aAAVgB,EAAEC,KACjB,OAAO,CAGT,IAAIC,GAAUlC,EAAEmC,KAGXnC,GAAEmC,MAAMC,KAAK,mBAAmBC,QACnCrC,EAAEmC,MAAMG,OAAO,mCAGjB,IAIIC,GACAC,EALAC,EAAUzC,EAAEmC,MAAMC,KAAK,mBAGvBM,EAAgBD,EAAQE,QAG5B,IAAK3B,IAIE,CAGL,GADAgB,EAAIA,EAAEY,cACmB,IAArBZ,EAAEa,QAAQR,OAIZ,MAHAE,GAAOP,EAAEa,QAAQ,GAAGC,MAAQJ,EAAcK,KAC1CP,EAAOR,EAAEa,QAAQ,GAAGG,MAAQN,EAAcO,QAP5CV,GAAOP,EAAEc,MAAQJ,EAAcK,KAC/BP,EAAOR,EAAEgB,MAAQN,EAAcO,GAajC,IAAI5B,GAASrB,EAAE,cAGfqB,GAAOE,SAAS,UAGhBF,EAAO6B,KAAKH,KAAQR,EAAMU,IAAOT,IAGjCnB,EAAO6B,KAAKC,mBAAqBnD,EAAEmC,MAAMiB,KAAK,gBAAmBpD,EAAEmC,MAAMiB,KAAK,gBAAkBC,OAAOC,iBAAiBtD,EAAEmC,MAAM,IAAIoB,QAGpId,EAAQH,OAAOjB,GAGf,WAAc,MAAOgC,QAAOC,iBAAiBjC,EAAO,IAAII,UAGxD,IAAI+B,GAAQC,KAAKC,IAAI1D,EAAEmC,MAAMwB,aAAc3D,EAAEmC,MAAMyB,eAAiBvC,EAAOsC,aAAgB,GAIvF3D,GAAEC,QAAQC,YAEZmB,EAAO6B,KACLW,gBAAiB,SAAWL,EAAO,IACnCM,iBAAkB,SAAWN,EAAO,IACpCO,oBAAqB,SAAWP,EAAO,IACvCQ,UAAa,SAAWR,EAAO,MAEjCnC,EAAOE,SAAS,aAChBF,EAAO+B,KAAK,YAAa,MACzB/B,EAAO+B,KAAK,YAAa,OAGzB/B,EAAOG,SACLyC,MAAiE,EAAxDR,KAAKC,IAAI1D,EAAEmC,MAAMwB,aAAc3D,EAAEmC,MAAMyB,eAChDM,OAAkE,EAAxDT,KAAKC,IAAI1D,EAAEmC,MAAMwB,aAAc3D,EAAEmC,MAAMyB,eACjDO,cAAuE,GAAxDV,KAAKC,IAAI1D,EAAEmC,MAAMwB,aAAc3D,EAAEmC,MAAMyB,eACtDQ,aAAsE,GAAxDX,KAAKC,IAAI1D,EAAEmC,MAAMwB,aAAc3D,EAAEmC,MAAMyB,eACrDnC,QAAW,IACV,IAAK,WACNJ,EAAOK,QAAQ,mBAKnB2C,WAAW,WACThD,EAAO+B,KAAK,YAAa,OACO,OAA5B/B,EAAO+B,KAAK,cACdhC,EAAUC,IAEX,KAGHa,EAAQP,GAAG,8BAA+B,WACxCN,EAAO+B,KAAK,YAAa,OAEO,OAA5B/B,EAAO+B,KAAK,cACdhC,EAAUC,QAQlBrB,EAAEsE,GAAGxD,QAAU,WACbd,EAAEc,SAASgB,OAAU9B,EAAEmC,UAGxBoC"}
{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","console","log","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"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"}

View File

@ -1118,7 +1118,7 @@
#dropdown-menu .sample {
width: 200px;
}
#dropdown-menu .form-control-wrapper {
#dropdown-menu .form-group {
margin: 30px 0;
}
</style>

View File

@ -135,7 +135,7 @@
});
},
"ripples": function(selector) {
$.ripples({"target": (selector) ? selector : this.options.withRipples});
$((selector) ? selector : this.options.withRipples).ripples();
},
"autofill": function() {

View File

@ -2,7 +2,7 @@
/* globals jQuery, navigator */
(function($, window, document, undefined) {
"use strict";
/**
@ -57,7 +57,7 @@
/**
* Verify if the current element already has a ripple wrapper element and
* creates if it doesn"t
* creates if it doesn't
*/
if(!($element.find(".ripple-wrapper").length)) {
$element.append("<div class=\"ripple-wrapper\"></div>");
@ -65,7 +65,7 @@
/**
* Find the ripple wrapper
* Find the ripple wrapper
*/
var $wrapper = $element.children(".ripple-wrapper");
@ -97,12 +97,12 @@
var $ripple = $("<div></div>");
$ripple
.addClass("ripple")
.css({
"left": relX,
"top": relY,
"background-color": rippleColor
});
.addClass("ripple")
.css({
"left": relX,
"top": relY,
"background-color": rippleColor
});
/**
@ -169,14 +169,14 @@
return event.pageX - wrapperOffset.left;
} else {
/**
* Make sure the user is using only one finger and then get the touch
* Make sure the user is using only one finger and then get the touch
* position relative to the ripple wrapper
*/
event = event.originalEvent;
if(event.touches.length !== 1) {
return event.touches[0].pageX - wrapperOffset.left;
}
}
return false;
}
@ -186,7 +186,7 @@
/**
* Get the relY
*/
Ripples.prototype.getRelY = function($wrapper, event) {
Ripples.prototype.getRelY = function($wrapper, event) {
var wrapperOffset = $wrapper.offset();
if(!self.isTouch()) {
@ -196,14 +196,14 @@
return event.pageY - wrapperOffset.top;
} else {
/**
* Make sure the user is using only one finger and then get the touch
* Make sure the user is using only one finger and then get the touch
* position relative to the ripple wrapper
*/
event = event.originalEvent;
if(event.touches.length !== 1) {
return event.touches[0].pageY - wrapperOffset.top;
}
}
return false;
}
@ -216,7 +216,10 @@
Ripples.prototype.getRipplesColor = function() {
var $element = this.element;
console.log($element);
var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
console.log(color);
return color;
};
@ -230,10 +233,10 @@
var thisStyle = thisBody.style;
var support = (
thisStyle.transition !== undefined ||
thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.MsTransition !== undefined ||
thisStyle.transition !== undefined ||
thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.MsTransition !== undefined ||
thisStyle.OTransition !== undefined
);
@ -290,15 +293,15 @@
if(self.hasTransitionSupport()) {
$ripple
.css({
"-ms-transform": "scale(" + size + ")",
"-moz-transform": "scale(" + size + ")",
"-webkit-transform": "scale(" + size + ")",
"transform": "scale(" + size + ")"
})
.addClass("ripple-on")
.data("animating", "on")
.data("mousedown", "on");
.css({
"-ms-transform": "scale(" + size + ")",
"-moz-transform": "scale(" + size + ")",
"-webkit-transform": "scale(" + size + ")",
"transform": "scale(" + size + ")"
})
.addClass("ripple-on")
.data("animating", "on")
.data("mousedown", "on");
} else {
$ripple.animate({
"width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
@ -314,7 +317,7 @@
/**
* Create the jquery plugin function
* Create the jquery plugin function
*/
$.fn.ripples = function(options) {
return this.each(function() {