Skip to content

Commit c26d5e3

Browse files
author
FezVrasta
committed
refactor of Material.js
1 parent 5535e56 commit c26d5e3

8 files changed

Lines changed: 359 additions & 289 deletions

File tree

‎README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,37 @@ Variations are available for every icon, including the original Bootstrap icons.
9595
The syntax to add a Material icon is:
9696

9797
<i class="icon icon-material-favorite"></i>
98+
99+
# Material.js
100+
101+
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.
102+
103+
### Functions:
104+
105+
This plugin exposes some functions, them are:
106+
107+
`$.material.inits` is a shortcut to run all the following commands.
108+
`$.material.ripples()` will apply ripples.js to the default elements.
109+
`$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
110+
`$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
111+
`$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
112+
113+
### Apply Material.js only to specific elements:
114+
115+
Every function expects an optional value that will be used as selector for the function, for example
116+
`$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`.
117+
The functions that allows an optional selector are `$.material.ripples`, `$.material.input`, `$.material.checkbox` and `$.material.radio`.
118+
119+
You can even override the default values using the `$.material.options` function, the default values are:
120+
121+
$.material.options = {
122+
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
123+
"inputElements": "input.form-control, textarea.form-control, select.form-control",
124+
"checkboxElements": ".checkbox > label > input[type=checkbox]",
125+
"radioElements": ".radio > label > input[type=radio]"
126+
}
127+
128+
98129

99130
# Plugins
100131

‎dist/js/material.js‎

Lines changed: 98 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1-
/* globals ripples */
1+
/* globals jQuery, ripples */
22

3-
$(function (){
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+
};
412

5-
function isChar(evt) {
13+
function _isChar(evt) {
614
if (typeof evt.which == "undefined") {
715
return true;
816
} else if (typeof evt.which == "number" && evt.which > 0) {
@@ -11,90 +19,92 @@ $(function (){
1119
return false;
1220
}
1321

14-
if (typeof ripples == "object") {
15-
ripples.init( ".btn:not(.btn-link)," +
16-
".card-image," +
17-
".navbar a:not(.withoutripple)," +
18-
".nav-tabs a:not(.withoutripple)," +
19-
".withripple" );
20-
}
21-
22-
var initInputs = function() {
23-
// Add fake-checkbox to material checkboxes
24-
$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
25-
26-
// Add fake-radio to material radios
27-
$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
28-
29-
// Add elements for material inputs
30-
$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() {
31-
if ($(this).is(".bs-material")) { return; }
32-
$(this).wrap("<div class=form-control-wrapper></div>");
33-
$(this).after("<span class=material-input></span>");
34-
if ($(this).hasClass("floating-label")) {
35-
var placeholder = $(this).attr("placeholder");
36-
$(this).attr("placeholder", null).removeClass("floating-label");
37-
$(this).after("<div class=floating-label>" + placeholder + "</div>");
38-
}
39-
if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
40-
$(this).addClass("empty");
41-
}
22+
$.material = {
23+
"options": {
24+
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
25+
"inputElements": "input.form-control, textarea.form-control, select.form-control",
26+
"checkboxElements": ".checkbox > label > input[type=checkbox]",
27+
"radioElements": ".radio > label > input[type=radio]"
28+
},
29+
"checkbox": function(selector) {
30+
// Add fake-checkbox to material checkboxes
31+
$((selector) ? selector : this.options.checkboxElements)
32+
.filter(":notmdproc")
33+
.data("mdproc", true)
34+
.after("<span class=check></span>");
35+
},
36+
"radio": function(selector) {
37+
// Add fake-radio to material radios
38+
$((selector) ? selector : this.options.radioElements)
39+
.filter(":notmdproc")
40+
.data("mdproc", true)
41+
.after("<span class=circle></span><span class=check></span>");
42+
},
43+
"input": function(selector) {
44+
$((selector) ? selector : this.options.inputElements)
45+
.filter(":notmdproc")
46+
.data("mdproc", true)
47+
.each( function() {
48+
var $this = $(this);
49+
$this.wrap("<div class=form-control-wrapper></div>");
50+
$this.after("<span class=material-input></span>");
51+
if ($this.hasClass("floating-label")) {
52+
var placeholder = $this.attr("placeholder");
53+
$this.attr("placeholder", null).removeClass("floating-label");
54+
$this.after("<div class=floating-label>" + placeholder + "</div>");
55+
}
56+
if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
57+
$this.addClass("empty");
58+
}
59+
if ($this.parent().next().is("[type=file]")) {
60+
$this.parent().addClass("fileinput");
61+
var $input = $this.parent().next().detach();
62+
$this.after($input);
63+
}
64+
});
4265

43-
if ($(this).parent().next().is("[type=file]")) {
44-
$(this).parent().addClass("fileinput");
45-
var $input = $(this).parent().next().detach();
46-
$(this).after($input);
47-
}
48-
});
49-
50-
};
51-
initInputs();
52-
53-
// Support for "arrive.js" to dynamically detect creation of elements
54-
// include it before this script to take advantage of this feature
55-
// https://github.com/uzairfarooq/arrive/
56-
if (document.arrive) {
57-
document.arrive("input, textarea, select", function() {
58-
initInputs();
59-
});
60-
}
61-
62-
$(document).on("change", ".checkbox input", function() {
63-
$(this).blur();
64-
});
65-
66-
$(document).on("keydown", ".form-control", function(e) {
67-
var $this = $(this);
68-
if(isChar(e)) {
69-
$this.removeClass("empty");
70-
}
71-
});
72-
$(document).on("keyup", ".form-control", function() {
73-
var $this = $(this);
74-
if($this.val() === "") {
75-
$this.addClass("empty");
66+
$(document)
67+
.on("change", ".checkbox input", function() { $(this).blur(); })
68+
.on("keydown", ".form-control", function(e) {
69+
if(_isChar(e)) {
70+
$(this).removeClass("empty");
71+
}
72+
})
73+
.on("keyup change", ".form-control", function() {
74+
var $this = $(this);
75+
if($this.val() === "") {
76+
$this.addClass("empty");
77+
}
78+
})
79+
.on("focus", ".form-control-wrapper.fileinput", function() {
80+
$(this).find("input").addClass("focus");
81+
})
82+
.on("blur", ".form-control-wrapper.fileinput", function() {
83+
$(this).find("input").removeClass("focus");
84+
})
85+
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
86+
var value = "";
87+
$.each($(this)[0].files, function(i, file) {
88+
console.log(file);
89+
value += file.name + ", ";
90+
});
91+
value = value.substring(0, value.length - 2);
92+
if (value) {
93+
$(this).prev().removeClass("empty");
94+
} else {
95+
$(this).prev().addClass("empty");
96+
}
97+
$(this).prev().val(value);
98+
});
99+
},
100+
"ripples": function(selector) {
101+
ripples.init((selector) ? selector : this.options.withRipples);
102+
},
103+
"init": function() {
104+
this.ripples();
105+
this.input();
106+
this.checkbox();
107+
this.radio();
76108
}
77-
});
78-
79-
$(document)
80-
.on("focus", ".form-control-wrapper.fileinput", function() {
81-
$(this).find("input").addClass("focus");
82-
})
83-
.on("blur", ".form-control-wrapper.fileinput", function() {
84-
$(this).find("input").removeClass("focus");
85-
})
86-
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
87-
var value = "";
88-
$.each($(this)[0].files, function(i, file) {
89-
console.log(file);
90-
value += file.name + ", ";
91-
});
92-
value = value.substring(0, value.length - 2);
93-
if (value) {
94-
$(this).prev().removeClass("empty");
95-
} else {
96-
$(this).prev().addClass("empty");
97-
}
98-
$(this).prev().val(value);
99-
});
100-
});
109+
};
110+
})(jQuery);

‎dist/js/material.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2309,6 +2309,7 @@ <h4 class="modal-title">Source Code</h4>
23092309
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
23102310
<script>
23112311
$(function() {
2312+
$.material.init();
23122313
$(".slider").noUiSlider({
23132314
start: 40,
23142315
connect: "lower",

0 commit comments

Comments
 (0)