/* globals jQuery, ripples */ (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; } return false; } $.material = { "options": { "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]", "radioElements": ".radio > label > input[type=radio]" }, "checkbox": function(selector) { // Add fake-checkbox to material checkboxes $((selector) ? selector : this.options.checkboxElements) .filter(":notmdproc") .data("mdproc", true) .after(""); }, "radio": function(selector) { // Add fake-radio to material radios $((selector) ? selector : this.options.radioElements) .filter(":notmdproc") .data("mdproc", true) .after(""); }, "input": function(selector) { $((selector) ? selector : this.options.inputElements) .filter(":notmdproc") .data("mdproc", true) .each( function() { var $this = $(this); $this.wrap("
"); $this.after(""); if ($this.hasClass("floating-label")) { var placeholder = $this.attr("placeholder"); $this.attr("placeholder", null).removeClass("floating-label"); $this.after("
" + placeholder + "
"); } if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") { console.log("enter empty"); $this.addClass("empty"); } if ($this.parent().next().is("[type=file]")) { $this.parent().addClass("fileinput"); var $input = $this.parent().next().detach(); $this.after($input); } }); $(document) .on("change", ".checkbox input", function() { $(this).blur(); }) .on("keydown", ".form-control", function(e) { if(_isChar(e)) { $(this).removeClass("empty"); } }) .on("keyup change", ".form-control", function() { var $this = $(this); if($this.val() === "") { $this.addClass("empty"); } }) .on("focus", ".form-control-wrapper.fileinput", function() { $(this).find("input").addClass("focus"); }) .on("blur", ".form-control-wrapper.fileinput", function() { $(this).find("input").removeClass("focus"); }) .on("change", ".form-control-wrapper.fileinput [type=file]", function() { var value = ""; $.each($(this)[0].files, function(i, file) { console.log(file); value += file.name + ", "; }); value = value.substring(0, value.length - 2); if (value) { $(this).prev().removeClass("empty"); } else { $(this).prev().addClass("empty"); } $(this).prev().val(value); }); }, "ripples": function(selector) { ripples.init((selector) ? selector : this.options.withRipples); }, "init": function() { this.ripples(); this.input(); this.checkbox(); this.radio(); if (document.arrive) { document.arrive("input, textarea, select", function() { $.material.init(); }); } // Detect 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").each(function() { if ($(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); // Now we just 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"); focused = setInterval(function() { $inputs.each(function() { if ($(this).val() !== $(this).attr("value")) { $(this).trigger("change"); } }); }, 100); }) .on("blur", "input", function() { clearInterval(focused); }); })(); } }; })(jQuery);