git.roojs.org Git - bootswatch/blob - material-design/js/material.js

   1 /* globals jQuery */
   2
   3 (function($) {
   4   // Selector to select only not already processed elements
   5   $.expr[":"].notmdproc = function(obj){
   6     if ($(obj).data("mdproc")) {
   7       return false;
   8     } else {
   9       return true;
  10     }
  11   };
  12
  13   function _isChar(evt) {
  14     if (typeof evt.which == "undefined") {
  15       return true;
  16     } else if (typeof evt.which == "number" && evt.which > 0) {
  17       return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
  18     }
  19     return false;
  20   }
  21
  22   $.material =  {
  23     "options": {
  24       // These options set what will be started by $.material.init()
  25       "input": true,
  26       "ripples": true,
  27       "checkbox": true,
  28       "togglebutton": true,
  29       "radio": true,
  30       "arrive": true,
  31       "autofill": false,
  32
  33       "withRipples": [
  34         ".btn:not(.btn-link)",
  35         ".card-image",
  36         ".navbar a:not(.withoutripple)",
  37         ".dropdown-menu a",
  38         ".nav-tabs a:not(.withoutripple)",
  39         ".withripple",
  40         ".pagination li:not(.active, .disabled) a:not(.withoutripple)"
  41       ].join(","),
  42       "inputElements": "input.form-control, textarea.form-control, select.form-control",
  43       "checkboxElements": ".checkbox > label > input[type=checkbox]",
  44       "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
  45       "radioElements": ".radio > label > input[type=radio]"
  46     },
  47     "checkbox": function(selector) {
  48       // Add fake-checkbox to material checkboxes
  49       $((selector) ? selector : this.options.checkboxElements)
  50       .filter(":notmdproc")
  51       .data("mdproc", true)
  52       .after("<span class=checkbox-material><span class=check></span></span>");
  53     },
  54     "togglebutton": function(selector) {
  55       // Add fake-checkbox to material checkboxes
  56       $((selector) ? selector : this.options.togglebuttonElements)
  57       .filter(":notmdproc")
  58       .data("mdproc", true)
  59       .after("<span class=toggle></span>");
  60     },
  61     "radio": function(selector) {
  62       // Add fake-radio to material radios
  63       $((selector) ? selector : this.options.radioElements)
  64       .filter(":notmdproc")
  65       .data("mdproc", true)
  66       .after("<span class=circle></span><span class=check></span>");
  67     },
  68     "input": function(selector) {
  69       $((selector) ? selector : this.options.inputElements)
  70       .filter(":notmdproc")
  71       .data("mdproc", true)
  72       .each( function() {
  73         var $this = $(this);
  74
  75         if (!$(this).attr("data-hint") && !$this.hasClass("floating-label")) {
  76           return;
  77         }
  78         $this.wrap("<div class=form-control-wrapper></div>");
  79         $this.after("<span class=material-input></span>");
  80
  81         // Add floating label if required
  82         if ($this.hasClass("floating-label")) {
  83           var placeholder = $this.attr("placeholder");
  84           $this.attr("placeholder", null).removeClass("floating-label");
  85           $this.after("<div class=floating-label>" + placeholder + "</div>");
  86         }
  87
  88         // Add hint label if required
  89         if ($this.attr("data-hint")) {
  90           $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
  91         }
  92
  93         // Set as empty if is empty (damn I must improve this...)
  94         if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
  95           $this.addClass("empty");
  96         }
  97
  98         // Support for file input
  99         if ($this.parent().next().is("[type=file]")) {
 100           $this.parent().addClass("fileinput");
 101           var $input = $this.parent().next().detach();
 102           $this.after($input);
 103         }
 104       });
 105
 106       $(document)
 107       .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
 108       .on("keydown paste", ".form-control", function(e) {
 109         if(_isChar(e)) {
 110           $(this).removeClass("empty");
 111         }
 112       })
 113       .on("keyup change", ".form-control", function() {
 114         var $this = $(this);
 115         if ($this.val() === "" && (typeof $this[0].checkValidity != "undefined" && !$this[0].checkValidity())) {
 116           $this.addClass("empty");
 117         } else {
 118           $this.removeClass("empty");
 119         }
 120       })
 121       .on("focus", ".form-control-wrapper.fileinput", function() {
 122         $(this).find("input").addClass("focus");
 123       })
 124       .on("blur", ".form-control-wrapper.fileinput", function() {
 125         $(this).find("input").removeClass("focus");
 126       })
 127       .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
 128         var value = "";
 129         $.each($(this)[0].files, function(i, file) {
 130           value += file.name + ", ";
 131         });
 132         value = value.substring(0, value.length - 2);
 133         if (value) {
 134           $(this).prev().removeClass("empty");
 135         } else {
 136           $(this).prev().addClass("empty");
 137         }
 138         $(this).prev().val(value);
 139       });
 140     },
 141     "ripples": function(selector) {
 142       $((selector) ? selector : this.options.withRipples).ripples();
 143     },
 144     "autofill": function() {
 145
 146       // This part of code will detect autofill when the page is loading (username and password inputs for example)
 147       var loading = setInterval(function() {
 148         $("input[type!=checkbox]").each(function() {
 149           if ($(this).val() && $(this).val() !== $(this).attr("value")) {
 150             $(this).trigger("change");
 151           }
 152         });
 153       }, 100);
 154
 155       // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
 156       setTimeout(function() {
 157         clearInterval(loading);
 158       }, 10000);
 159       // Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
 160       var focused;
 161       $(document)
 162       .on("focus", "input", function() {
 163         var $inputs = $(this).parents("form").find("input").not("[type=file]");
 164         focused = setInterval(function() {
 165           $inputs.each(function() {
 166             if ($(this).val() !== $(this).attr("value")) {
 167               $(this).trigger("change");
 168             }
 169           });
 170         }, 100);
 171       })
 172       .on("blur", "input", function() {
 173         clearInterval(focused);
 174       });
 175     },
 176     "init": function() {
 177       if ($.fn.ripples && this.options.ripples) {
 178         this.ripples();
 179       }
 180       if (this.options.input) {
 181         this.input();
 182       }
 183       if (this.options.checkbox) {
 184         this.checkbox();
 185       }
 186       if (this.options.togglebutton) {
 187         this.togglebutton();
 188       }
 189       if (this.options.radio) {
 190         this.radio();
 191       }
 192       if (this.options.autofill) {
 193         this.autofill();
 194       }
 195
 196       if (document.arrive && this.options.arrive) {
 197         if ($.fn.ripples && this.options.ripples) {
 198           $(document).arrive(this.options.withRipples, function() {
 199             $.material.ripples($(this));
 200           });
 201         }
 202         if (this.options.input) {
 203           $(document).arrive(this.options.inputElements, function() {
 204             $.material.input($(this));
 205           });
 206         }
 207         if (this.options.checkbox) {
 208           $(document).arrive(this.options.checkboxElements, function() {
 209             $.material.checkbox($(this));
 210           });
 211         }
 212         if (this.options.radio) {
 213           $(document).arrive(this.options.radioElements, function() {
 214             $.material.radio($(this));
 215           });
 216         }
 217         if (this.options.togglebutton) {
 218           $(document).arrive(this.options.togglebuttonElements, function() {
 219             $.material.togglebutton($(this));
 220           });
 221         }
 222
 223       }
 224     }
 225   };
 226
 227 })(jQuery);