123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- /* 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;
- }
- return false;
- }
- $.material = {
- "options": {
- // These options set what will be started by $.material.init()
- "input": true,
- "ripples": true,
- "checkbox": true,
- "togglebutton": true,
- "radio": true,
- "arrive": true,
- "autofill": true,
- "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(selector) {
- // Add fake-checkbox to material checkboxes
- $((selector) ? selector : this.options.checkboxElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .after("<span class=ripple></span><span class=check></span>");
- },
- "togglebutton": function(selector) {
- // Add fake-checkbox to material checkboxes
- $((selector) ? selector : this.options.togglebuttonElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .after("<span class=toggle></span>");
- },
- "radio": function(selector) {
- // Add fake-radio to material radios
- $((selector) ? selector : this.options.radioElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .after("<span class=circle></span><span class=check></span>");
- },
- "input": function(selector) {
- $((selector) ? selector : this.options.inputElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .each( function() {
- var $this = $(this);
- $this.wrap("<div class=form-control-wrapper></div>");
- $this.after("<span class=material-input></span>");
- // Add floating label if required
- if ($this.hasClass("floating-label")) {
- var placeholder = $this.attr("placeholder");
- $this.attr("placeholder", null).removeClass("floating-label");
- $this.after("<div class=floating-label>" + placeholder + "</div>");
- }
- // Add hint label if required
- if ($this.attr("data-hint")) {
- $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
- }
- // Set as empty if is empty (damn I must improve this...)
- if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
- $this.addClass("empty");
- }
- // Support for file input
- 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[type=checkbox]", function() { $(this).blur(); })
- .on("keydown paste", ".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");
- } else {
- $this.removeClass("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({"target": (selector) ? selector : this.options.withRipples});
- },
- "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() {
- 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);
- // 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").not("[type=file]");
- focused = setInterval(function() {
- $inputs.each(function() {
- if ($(this).val() !== $(this).attr("value")) {
- $(this).trigger("change");
- }
- });
- }, 100);
- })
- .on("blur", "input", function() {
- clearInterval(focused);
- });
- },
- "init": function() {
- if ($.ripples && this.options.ripples) {
- this.ripples();
- }
- if (this.options.input) {
- this.input();
- }
- if (this.options.checkbox) {
- this.checkbox();
- }
- if (this.options.togglebutton) {
- this.togglebutton();
- }
- if (this.options.radio) {
- this.radio();
- }
- if (this.options.autofill) {
- this.autofill();
- }
- if (document.arrive && this.options.arrive) {
- $(document).arrive(this.options.inputElements, function() {
- $.material.input($(this));
- });
- $(document).arrive(this.options.checkboxElements, function() {
- $.material.checkbox($(this));
- });
- $(document).arrive(this.options.radioElements, function() {
- $.material.radio($(this));
- });
- $(document).arrive(this.options.togglebuttonElements, function() {
- $.material.togglebutton($(this));
- });
- }
- }
- };
- })(jQuery);
|