From c26d5e3ce17eb41aa00628e1d26a178b589a824b Mon Sep 17 00:00:00 2001
From: FezVrasta <fez@tekhy.net>
Date: Sat, 18 Oct 2014 18:12:02 +0200
Subject: [PATCH] refactor of Material.js

---
 README.md                            |  31 +++++
 dist/js/material.js                  | 186 ++++++++++++++-------------
 dist/js/material.min.js              |   2 +-
 index.html                           |   1 +
 scripts/material.js                  | 186 ++++++++++++++-------------
 template/index.html                  |  55 ++++----
 template/material/js/material.js     | 185 +++++++++++++-------------
 template/material/js/material.min.js |   2 +-
 8 files changed, 359 insertions(+), 289 deletions(-)

diff --git a/README.md b/README.md
index 24f8e054..1e10031b 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,37 @@ Variations are available for every icon, including the original Bootstrap icons.
 The syntax to add a Material icon is:
 
      <i class="icon icon-material-favorite"></i>
+     
+# Material.js
+
+Material.js is a jQuery plugin that add some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
+
+### Functions:
+
+This plugin exposes some functions, them are:
+
+`$.material.inits` is a shortcut to run all the following commands.  
+`$.material.ripples()` will apply ripples.js to the default elements.  
+`$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).  
+`$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.  
+`$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter. 
+
+### Apply Material.js only to specific elements:
+
+  Every function expects an optional value that will be used as selector for the function, for example
+  `$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`.  
+  The functions that allows an optional selector are `$.material.ripples`, `$.material.input`, `$.material.checkbox` and `$.material.radio`.  
+  
+  You can even override the default values using the `$.material.options` function, the default values are:
+  
+    $.material.options = {
+        "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
+        "inputElements": "input.form-control, textarea.form-control, select.form-control",
+        "checkboxElements": ".checkbox > label > input[type=checkbox]",
+        "radioElements": ".radio > label > input[type=radio]"
+    }
+    
+
 
 # Plugins
 
diff --git a/dist/js/material.js b/dist/js/material.js
index 4bcd2f95..883ac2c5 100644
--- a/dist/js/material.js
+++ b/dist/js/material.js
@@ -1,8 +1,16 @@
-/* globals ripples */
+/* globals jQuery, ripples */
 
-$(function (){
+(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) {
+    function _isChar(evt) {
         if (typeof evt.which == "undefined") {
             return true;
         } else if (typeof evt.which == "number" && evt.which > 0) {
@@ -11,90 +19,92 @@ $(function (){
         return false;
     }
 
-    if (typeof ripples == "object") {
-        ripples.init( ".btn:not(.btn-link)," +
-                     ".card-image," +
-                     ".navbar a:not(.withoutripple)," +
-                     ".nav-tabs a:not(.withoutripple)," +
-                     ".withripple" );
-    }
-
-    var initInputs = function() {
-        // Add fake-checkbox to material checkboxes
-        $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
-
-        // Add fake-radio to material radios
-        $(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
-
-        // Add elements for material inputs
-        $("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() {
-            if ($(this).is(".bs-material")) { return; }
-            $(this).wrap("<div class=form-control-wrapper></div>");
-            $(this).after("<span class=material-input></span>");
-            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>");
-            }
-            if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
-                $(this).addClass("empty");
-            }
-
-            if ($(this).parent().next().is("[type=file]")) {
-                $(this).parent().addClass("fileinput");
-                var $input = $(this).parent().next().detach();
-                $(this).after($input);
-            }
-        });
+    $.material =  {
+        "options": {
+            "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
+            "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("<span class=check></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>");
+                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>");
+                }
+                if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+                    $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();
+        }
     };
-    initInputs();
-
-    // Support for "arrive.js" to dynamically detect creation of elements
-    // include it before this script to take advantage of this feature
-    // https://github.com/uzairfarooq/arrive/
-    if (document.arrive) {
-        document.arrive("input, textarea, select", function() {
-            initInputs();
-        });
-    }
-
-    $(document).on("change", ".checkbox input", function() {
-        $(this).blur();
-    });
-
-    $(document).on("keydown", ".form-control", function(e) {
-        var $this = $(this);
-        if(isChar(e)) {
-            $this.removeClass("empty");
-        }
-    });
-    $(document).on("keyup", ".form-control", function() {
-        var $this = $(this);
-        if($this.val() === "") {
-            $this.addClass("empty");
-        }
-    });
-
-    $(document)
-    .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);
-    });
-});
+})(jQuery);
diff --git a/dist/js/material.min.js b/dist/js/material.min.js
index 1658d559..240af563 100644
--- a/dist/js/material.min.js
+++ b/dist/js/material.min.js
@@ -1 +1 @@
-$(function(){function a(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var b=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};b(),document.arrive&&document.arrive("input, textarea, select",function(){b()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keydown",".form-control",function(b){var c=$(this);a(b)&&c.removeClass("empty")}),$(document).on("keyup",".form-control",function(){var a=$(this);""===a.val()&&a.addClass("empty")}),$(document).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 a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
+!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:{withRipples:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > 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=check></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.is(":empty")||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",function(){a(this).blur()}).on("keydown",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&b.addClass("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(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio()}}}(jQuery);
diff --git a/index.html b/index.html
index fbe2e930..3b1bbc03 100644
--- a/index.html
+++ b/index.html
@@ -2309,6 +2309,7 @@
         <script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
         <script>
             $(function() {
+                $.material.init();
                 $(".slider").noUiSlider({
                     start: 40,
                     connect: "lower",
diff --git a/scripts/material.js b/scripts/material.js
index 4bcd2f95..883ac2c5 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -1,8 +1,16 @@
-/* globals ripples */
+/* globals jQuery, ripples */
 
-$(function (){
+(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) {
+    function _isChar(evt) {
         if (typeof evt.which == "undefined") {
             return true;
         } else if (typeof evt.which == "number" && evt.which > 0) {
@@ -11,90 +19,92 @@ $(function (){
         return false;
     }
 
-    if (typeof ripples == "object") {
-        ripples.init( ".btn:not(.btn-link)," +
-                     ".card-image," +
-                     ".navbar a:not(.withoutripple)," +
-                     ".nav-tabs a:not(.withoutripple)," +
-                     ".withripple" );
-    }
-
-    var initInputs = function() {
-        // Add fake-checkbox to material checkboxes
-        $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
-
-        // Add fake-radio to material radios
-        $(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
-
-        // Add elements for material inputs
-        $("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() {
-            if ($(this).is(".bs-material")) { return; }
-            $(this).wrap("<div class=form-control-wrapper></div>");
-            $(this).after("<span class=material-input></span>");
-            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>");
-            }
-            if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
-                $(this).addClass("empty");
-            }
-
-            if ($(this).parent().next().is("[type=file]")) {
-                $(this).parent().addClass("fileinput");
-                var $input = $(this).parent().next().detach();
-                $(this).after($input);
-            }
-        });
+    $.material =  {
+        "options": {
+            "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
+            "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("<span class=check></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>");
+                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>");
+                }
+                if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+                    $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();
+        }
     };
-    initInputs();
-
-    // Support for "arrive.js" to dynamically detect creation of elements
-    // include it before this script to take advantage of this feature
-    // https://github.com/uzairfarooq/arrive/
-    if (document.arrive) {
-        document.arrive("input, textarea, select", function() {
-            initInputs();
-        });
-    }
-
-    $(document).on("change", ".checkbox input", function() {
-        $(this).blur();
-    });
-
-    $(document).on("keydown", ".form-control", function(e) {
-        var $this = $(this);
-        if(isChar(e)) {
-            $this.removeClass("empty");
-        }
-    });
-    $(document).on("keyup", ".form-control", function() {
-        var $this = $(this);
-        if($this.val() === "") {
-            $this.addClass("empty");
-        }
-    });
-
-    $(document)
-    .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);
-    });
-});
+})(jQuery);
diff --git a/template/index.html b/template/index.html
index f2d1df7d..cda56a8d 100644
--- a/template/index.html
+++ b/template/index.html
@@ -1,42 +1,47 @@
 <html>
 
-<head>
+    <head>
 
-    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-    <link href="material/css/ripples.min.css" rel="stylesheet">
-    <link href="material/css/material-wfont.min.css" rel="stylesheet">
+        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+        <link href="material/css/ripples.min.css" rel="stylesheet">
+        <link href="material/css/material-wfont.min.css" rel="stylesheet">
 
-</head>
+    </head>
 
-<body>
+    <body>
 
-    <!-- Your site -->
+        <!-- Your site -->
 
-    <h1>You can add your site here.</h1>
+        <h1>You can add your site here.</h1>
 
-    <h2>To ensure that material-design theme is working, check out the buttons below.</h2>
+        <h2>To ensure that material-design theme is working, check out the buttons below.</h2>
 
-    <h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
+        <h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
 
 
-    <p class="bs-component">
-        <a href="javascript:void(0)" class="btn btn-default">Default</a>
-        <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
-        <a href="javascript:void(0)" class="btn btn-success">Success</a>
-        <a href="javascript:void(0)" class="btn btn-info">Info</a>
-        <a href="javascript:void(0)" class="btn btn-warning">Warning</a>
-        <a href="javascript:void(0)" class="btn btn-danger">Danger</a>
-        <a href="javascript:void(0)" class="btn btn-link">Link</a>
-    </p>
+        <p class="bs-component">
+            <a href="javascript:void(0)" class="btn btn-default">Default</a>
+            <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
+            <a href="javascript:void(0)" class="btn btn-success">Success</a>
+            <a href="javascript:void(0)" class="btn btn-info">Info</a>
+            <a href="javascript:void(0)" class="btn btn-warning">Warning</a>
+            <a href="javascript:void(0)" class="btn btn-danger">Danger</a>
+            <a href="javascript:void(0)" class="btn btn-link">Link</a>
+        </p>
 
-    <!-- Your site ends -->
+        <!-- Your site ends -->
 
-    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
-    <script src="material/js/ripples.min.js"></script>
-    <script src="material/js/material.min.js"></script>
+        <script src="material/js/ripples.min.js"></script>
+        <script src="material/js/material.min.js"></script>
+        <script>
+            $(document).ready(function() {
+                $.material.init();
+            });
+        </script>
 
-</body>
+    </body>
 
 </html>
diff --git a/template/material/js/material.js b/template/material/js/material.js
index 4bcd2f95..4a395a66 100644
--- a/template/material/js/material.js
+++ b/template/material/js/material.js
@@ -1,8 +1,16 @@
-/* globals ripples */
+/* globals jQuery, ripples */
 
-$(function (){
+(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) {
+    function _isChar(evt) {
         if (typeof evt.which == "undefined") {
             return true;
         } else if (typeof evt.which == "number" && evt.which > 0) {
@@ -11,90 +19,95 @@ $(function (){
         return false;
     }
 
-    if (typeof ripples == "object") {
-        ripples.init( ".btn:not(.btn-link)," +
-                     ".card-image," +
-                     ".navbar a:not(.withoutripple)," +
-                     ".nav-tabs a:not(.withoutripple)," +
-                     ".withripple" );
-    }
-
-    var initInputs = function() {
-        // Add fake-checkbox to material checkboxes
-        $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
-
-        // Add fake-radio to material radios
-        $(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
-
-        // Add elements for material inputs
-        $("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() {
-            if ($(this).is(".bs-material")) { return; }
-            $(this).wrap("<div class=form-control-wrapper></div>");
-            $(this).after("<span class=material-input></span>");
-            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>");
-            }
-            if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
-                $(this).addClass("empty");
-            }
-
-            if ($(this).parent().next().is("[type=file]")) {
-                $(this).parent().addClass("fileinput");
-                var $input = $(this).parent().next().detach();
-                $(this).after($input);
-            }
-        });
+    $.material =  {
+        "options": {
+            "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
+            "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("<span class=check></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>");
+                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>");
+                }
+                if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
+                    $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();
+        }
     };
-    initInputs();
+})(jQuery);
 
-    // Support for "arrive.js" to dynamically detect creation of elements
-    // include it before this script to take advantage of this feature
-    // https://github.com/uzairfarooq/arrive/
-    if (document.arrive) {
-        document.arrive("input, textarea, select", function() {
-            initInputs();
-        });
-    }
+//$.material.init();
 
-    $(document).on("change", ".checkbox input", function() {
-        $(this).blur();
-    });
-
-    $(document).on("keydown", ".form-control", function(e) {
-        var $this = $(this);
-        if(isChar(e)) {
-            $this.removeClass("empty");
-        }
-    });
-    $(document).on("keyup", ".form-control", function() {
-        var $this = $(this);
-        if($this.val() === "") {
-            $this.addClass("empty");
-        }
-    });
-
-    $(document)
-    .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);
-    });
-});
diff --git a/template/material/js/material.min.js b/template/material/js/material.min.js
index 1658d559..240af563 100644
--- a/template/material/js/material.min.js
+++ b/template/material/js/material.min.js
@@ -1 +1 @@
-$(function(){function a(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var b=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};b(),document.arrive&&document.arrive("input, textarea, select",function(){b()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keydown",".form-control",function(b){var c=$(this);a(b)&&c.removeClass("empty")}),$(document).on("keyup",".form-control",function(){var a=$(this);""===a.val()&&a.addClass("empty")}),$(document).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 a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
+!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:{withRipples:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > 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=check></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.is(":empty")||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",function(){a(this).blur()}).on("keydown",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&b.addClass("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(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio()}}}(jQuery);