;(function(window) { 'use strict'; var Waves = Waves || {}; var $$ = document.querySelectorAll.bind(document); // Find exact position of element function isWindow(obj) { return obj !== null && obj === obj.window; } function getWindow(elem) { return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; } function offset(elem) { var docElem, win, box = {top: 0, left: 0}, doc = elem && elem.ownerDocument; docElem = doc.documentElement; if (typeof elem.getBoundingClientRect !== typeof undefined) { box = elem.getBoundingClientRect(); } win = getWindow(doc); return { top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft }; } function convertStyle(obj) { var style = ''; for (var a in obj) { if (obj.hasOwnProperty(a)) { style += (a + ':' + obj[a] + ';'); } } return style; } var Effect = { // Effect delay duration: 750, show: function(e, element) { // Disable right click if (e.button === 2) { return false; } var el = element || this; // Create ripple var ripple = document.createElement('div'); ripple.className = 'waves-ripple'; el.appendChild(ripple); // Get click coordinate and element witdh var pos = offset(el); var relativeY = (e.pageY - pos.top); var relativeX = (e.pageX - pos.left); var scale = 'scale('+((el.clientWidth / 100) * 10)+')'; // Support for touch devices if ('touches' in e) { relativeY = (e.touches[0].pageY - pos.top); relativeX = (e.touches[0].pageX - pos.left); } // Attach data to element ripple.setAttribute('data-hold', Date.now()); ripple.setAttribute('data-scale', scale); ripple.setAttribute('data-x', relativeX); ripple.setAttribute('data-y', relativeY); // Set ripple position var rippleStyle = { 'top': relativeY+'px', 'left': relativeX+'px' }; ripple.className = ripple.className + ' waves-notransition'; ripple.setAttribute('style', convertStyle(rippleStyle)); ripple.className = ripple.className.replace('waves-notransition', ''); // Scale the ripple rippleStyle['-webkit-transform'] = scale; rippleStyle['-moz-transform'] = scale; rippleStyle['-ms-transform'] = scale; rippleStyle['-o-transform'] = scale; rippleStyle.transform = scale; rippleStyle.opacity = '1'; rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms'; rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms'; rippleStyle['-o-transition-duration'] = Effect.duration + 'ms'; rippleStyle['transition-duration'] = Effect.duration + 'ms'; rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'; rippleStyle['-moz-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'; rippleStyle['-o-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'; rippleStyle['transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'; ripple.setAttribute('style', convertStyle(rippleStyle)); }, hide: function(e) { TouchHandler.touchup(e); var el = this; var width = el.clientWidth * 1.4; // Get first ripple var ripple = null; var ripples = el.getElementsByClassName('waves-ripple'); if (ripples.length > 0) { ripple = ripples[ripples.length - 1]; } else { return false; } var relativeX = ripple.getAttribute('data-x'); var relativeY = ripple.getAttribute('data-y'); var scale = ripple.getAttribute('data-scale'); // Get delay beetween mousedown and mouse leave var diff = Date.now() - Number(ripple.getAttribute('data-hold')); var delay = 350 - diff; if (delay < 0) { delay = 0; } // Fade out ripple after delay setTimeout(function() { var style = { 'top': relativeY+'px', 'left': relativeX+'px', 'opacity': '0', // Duration '-webkit-transition-duration': Effect.duration + 'ms', '-moz-transition-duration': Effect.duration + 'ms', '-o-transition-duration': Effect.duration + 'ms', 'transition-duration': Effect.duration + 'ms', '-webkit-transform': scale, '-moz-transform': scale, '-ms-transform': scale, '-o-transform': scale, 'transform': scale, }; ripple.setAttribute('style', convertStyle(style)); setTimeout(function() { try { el.removeChild(ripple); } catch(e) { return false; } }, Effect.duration); }, delay); }, // Little hack to make can perform waves effect wrapInput: function(elements) { for (var a = 0; a < elements.length; a++) { var el = elements[a]; if (el.tagName.toLowerCase() === 'input') { var parent = el.parentNode; // If input already have parent just pass through if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) { continue; } // Put element class and style to the specified parent var wrapper = document.createElement('i'); wrapper.className = el.className + ' waves-input-wrapper'; var elementStyle = el.getAttribute('style'); if (!elementStyle) { elementStyle = ''; } wrapper.setAttribute('style', elementStyle); el.className = 'waves-button-input'; el.removeAttribute('style'); // Put element as child parent.replaceChild(wrapper, el); wrapper.appendChild(el); } } } }; /** * Disable mousedown event for 500ms during and after touch */ var TouchHandler = { /* uses an integer rather than bool so there's no issues with * needing to clear timeouts if another touch event occurred * within the 500ms. Cannot mouseup between touchstart and * touchend, nor in the 500ms after touchend. */ touches: 0, allowEvent: function(e) { var allow = true; if (e.type === 'touchstart') { TouchHandler.touches += 1; //push } else if (e.type === 'touchend' || e.type === 'touchcancel') { setTimeout(function() { if (TouchHandler.touches > 0) { TouchHandler.touches -= 1; //pop after 500ms } }, 500); } else if (e.type === 'mousedown' && TouchHandler.touches > 0) { allow = false; } return allow; }, touchup: function(e) { TouchHandler.allowEvent(e); } }; /** * Delegated click handler for .waves-effect element. * returns null when .waves-effect element not in "click tree" */ function getWavesEffectElement(e) { if (TouchHandler.allowEvent(e) === false) { return null; } var element = null; var target = e.target || e.srcElement; while (target.parentElement !== null) { if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) { element = target; break; } else if (target.classList.contains('waves-effect')) { element = target; break; } target = target.parentElement; } return element; } /** * Bubble the click and show effect if .waves-effect elem was found */ function showEffect(e) { var element = getWavesEffectElement(e); if (element !== null) { Effect.show(e, element); if ('ontouchstart' in window) { element.addEventListener('touchend', Effect.hide, false); element.addEventListener('touchcancel', Effect.hide, false); } element.addEventListener('mouseup', Effect.hide, false); element.addEventListener('mouseleave', Effect.hide, false); } } Waves.displayEffect = function(options) { options = options || {}; if ('duration' in options) { Effect.duration = options.duration; } //Wrap input inside tag Effect.wrapInput($$('.waves-effect')); if ('ontouchstart' in window) { document.body.addEventListener('touchstart', showEffect, false); } document.body.addEventListener('mousedown', showEffect, false); }; /** * Attach Waves to an input element (or any element which doesn't * bubble mouseup/mousedown events). * Intended to be used with dynamically loaded forms/inputs, or * where the user doesn't want a delegated click handler. */ Waves.attach = function(element) { //FUTURE: automatically add waves classes and allow users // to specify them with an options param? Eg. light/classic/button if (element.tagName.toLowerCase() === 'input') { Effect.wrapInput([element]); element = element.parentElement; } if ('ontouchstart' in window) { element.addEventListener('touchstart', showEffect, false); } element.addEventListener('mousedown', showEffect, false); }; window.Waves = Waves; document.addEventListener('DOMContentLoaded', function() { Waves.displayEffect(); }, false); })(window); /*ripple hover effect*/ /* globals jQuery */ (function ($) { // Selector to select only not already processed elements $.expr[":"].notmdproc = function (obj) { if ($(obj).data("mdproc")) { return false; } else { return true; } }; function _isChar(evt) { if (typeof evt.which == "undefined") { return true; } else if (typeof evt.which == "number" && evt.which > 0) { return ( !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 // backspace && evt.which != 9 // tab && evt.which != 13 // enter && evt.which != 16 // shift && evt.which != 17 // ctrl && evt.which != 20 // caps lock && evt.which != 27 // escape ); } return false; } function _addFormGroupFocus(element) { var $element = $(element); if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox?? $element.closest(".form-group").addClass("is-focused"); } } function _toggleDisabledState($element, state) { var $target; if ($element.hasClass('checkbox-inline') || $element.hasClass('radio-inline')) { $target = $element; } else { $target = $element.closest('.checkbox').length ? $element.closest('.checkbox') : $element.closest('.radio'); } return $target.toggleClass('disabled', state); } function _toggleTypeFocus($input) { var disabledToggleType = false; if ($input.is($.material.options.checkboxElements) || $input.is($.material.options.radioElements)) { disabledToggleType = true; } $input.closest('label').hover(function () { var $i = $(this).find('input'); var isDisabled = $i.prop('disabled'); // hack because the _addFormGroupFocus() wasn't identifying the property on chrome if (disabledToggleType) { _toggleDisabledState($(this), isDisabled); } if (!isDisabled) { _addFormGroupFocus($i); // need to find the input so we can check disablement } }, function () { _removeFormGroupFocus($(this).find('input')); }); } function _removeFormGroupFocus(element) { $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group } $.material = { "options": { // These options set what will be started by $.material.init() "validate": true, "input": true, "ripples": true, "checkbox": true, "togglebutton": true, "radio": true, "arrive": true, "autofill": false, "withRipples": [ ".btn:not(.btn-link)", ".card-image", ".navbar a:not(.withoutripple)", ".dropdown-menu a", ".nav-tabs a:not(.withoutripple)", ".withripple", ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)" ].join(","), "inputElements": "input.form-control, textarea.form-control, select.form-control", "checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]", "togglebuttonElements": ".togglebutton > label > input[type=checkbox]", "radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]" }, "checkbox": function (selector) { // Add fake-checkbox to material checkboxes var $input = $((selector) ? selector : this.options.checkboxElements) .filter(":notmdproc") .data("mdproc", true) .after(""); _toggleTypeFocus($input); }, "togglebutton": function (selector) { // Add fake-checkbox to material checkboxes var $input = $((selector) ? selector : this.options.togglebuttonElements) .filter(":notmdproc") .data("mdproc", true) .after(""); _toggleTypeFocus($input); }, "radio": function (selector) { // Add fake-radio to material radios var $input = $((selector) ? selector : this.options.radioElements) .filter(":notmdproc") .data("mdproc", true) .after(""); _toggleTypeFocus($input); }, "input": function (selector) { $((selector) ? selector : this.options.inputElements) .filter(":notmdproc") .data("mdproc", true) .each(function () { var $input = $(this); // Requires form-group standard markup (will add it if necessary) var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) { $input.wrap("
"); $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work) } // Legacy - Add hint label if using the old shorthand data-hint attribute on the input if ($input.attr("data-hint")) { $input.after("

" + $input.attr("data-hint") + "

"); $input.removeAttr("data-hint"); } // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants) var legacySizes = { "input-lg": "form-group-lg", "input-sm": "form-group-sm" }; $.each(legacySizes, function (legacySize, standardSize) { if ($input.hasClass(legacySize)) { $input.removeClass(legacySize); $formGroup.addClass(standardSize); } }); // Legacy - Add label-floating if using old shorthand if ($input.hasClass("floating-label")) { var placeholder = $input.attr("placeholder"); $input.attr("placeholder", null).removeClass("floating-label"); var id = $input.attr("id"); var forAttribute = ""; if (id) { forAttribute = "for='" + id + "'"; } $formGroup.addClass("label-floating"); $input.after(""); } // Set as empty if is empty (damn I must improve this...) if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") { $formGroup.addClass("is-empty"); } // Support for file input if ($formGroup.find("input[type=file]").length > 0) { $formGroup.addClass("is-fileinput"); } }); }, "attachInputEventHandlers": function () { var validate = this.options.validate; $(document) .on("keydown paste", ".form-control", function (e) { if (_isChar(e)) { $(this).closest(".form-group").removeClass("is-empty"); } }) .on("keyup change", ".form-control", function () { var $input = $(this); var $formGroup = $input.closest(".form-group"); var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity()); if ($input.val() === "") { $formGroup.addClass("is-empty"); } else { $formGroup.removeClass("is-empty"); } // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/ // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter // the form-group on change. // // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code. // BUT, I've left it here for backwards compatibility. if (validate) { if (isValid) { $formGroup.removeClass("has-error"); } else { $formGroup.addClass("has-error"); } } }) .on("focus", ".form-control, .form-group.is-fileinput", function () { _addFormGroupFocus(this); }) .on("blur", ".form-control, .form-group.is-fileinput", function () { _removeFormGroupFocus(this); }) // make sure empty is added back when there is a programmatic value change. // NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change') .on("change", ".form-group input", function () { var $input = $(this); if ($input.attr("type") == "file") { return; } var $formGroup = $input.closest(".form-group"); var value = $input.val(); if (value) { $formGroup.removeClass("is-empty"); } else { $formGroup.addClass("is-empty"); } }) // set the fileinput readonly field with the name of the file .on("change", ".form-group.is-fileinput input[type='file']", function () { var $input = $(this); var $formGroup = $input.closest(".form-group"); var value = ""; $.each(this.files, function (i, file) { value += file.name + ", "; }); value = value.substring(0, value.length - 2); if (value) { $formGroup.removeClass("is-empty"); } else { $formGroup.addClass("is-empty"); } $formGroup.find("input.form-control[readonly]").val(value); }); }, "ripples": function (selector) { $((selector) ? selector : this.options.withRipples).ripples(); }, "autofill": function () { // This part of code will detect autofill when the page is loading (username and password inputs for example) var loading = setInterval(function () { $("input[type!=checkbox]").each(function () { var $this = $(this); if ($this.val() && $this.val() !== $this.attr("value")) { $this.trigger("change"); } }); }, 100); // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them setTimeout(function () { clearInterval(loading); }, 10000); }, "attachAutofillEventHandlers": function () { // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus) var focused; $(document) .on("focus", "input", function () { var $inputs = $(this).parents("form").find("input").not("[type=file]"); focused = setInterval(function () { $inputs.each(function () { var $this = $(this); if ($this.val() !== $this.attr("value")) { $this.trigger("change"); } }); }, 100); }) .on("blur", ".form-group input", function () { clearInterval(focused); }); }, "init": function (options) { this.options = $.extend({}, this.options, options); var $document = $(document); if ($.fn.ripples && this.options.ripples) { this.ripples(); } if (this.options.input) { this.input(); this.attachInputEventHandlers(); } if (this.options.checkbox) { this.checkbox(); } if (this.options.togglebutton) { this.togglebutton(); } if (this.options.radio) { this.radio(); } if (this.options.autofill) { this.autofill(); this.attachAutofillEventHandlers(); } if (document.arrive && this.options.arrive) { if ($.fn.ripples && this.options.ripples) { $document.arrive(this.options.withRipples, function () { $.material.ripples($(this)); }); } if (this.options.input) { $document.arrive(this.options.inputElements, function () { $.material.input($(this)); }); } if (this.options.checkbox) { $document.arrive(this.options.checkboxElements, function () { $.material.checkbox($(this)); }); } if (this.options.radio) { $document.arrive(this.options.radioElements, function () { $.material.radio($(this)); }); } if (this.options.togglebutton) { $document.arrive(this.options.togglebuttonElements, function () { $.material.togglebutton($(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){c.find(".ripple-container").length||c.append('
');var e=c.children(".ripple-container"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("
");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,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,b){return Math.max(a.outerWidth(),a.outerHeight())/b.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(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return 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,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.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