mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 11:29:10 +03:00
Merge and dist
This commit is contained in:
Kevin Ross
commit
ba1ab80698
21
dist/css/bootstrap-material-design.css
vendored
21
dist/css/bootstrap-material-design.css
vendored
|
|
@ -811,6 +811,9 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
|
|||
.form-group.is-focused .checkbox label:focus {
|
||||
color: rgba(0,0,0, .54);
|
||||
}
|
||||
fieldset[disabled] .form-group.is-focused .checkbox label {
|
||||
color: rgba(0,0,0, 0.26);
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
|
@ -1236,6 +1239,9 @@ fieldset[disabled] .checkbox input[type=checkbox],
|
|||
.form-group.is-focused .togglebutton label:focus {
|
||||
color: rgba(0,0,0, .54);
|
||||
}
|
||||
fieldset[disabled] .form-group.is-focused .togglebutton label {
|
||||
color: rgba(0,0,0, 0.26);
|
||||
}
|
||||
.togglebutton label input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
|
@ -1309,6 +1315,9 @@ fieldset[disabled] .checkbox input[type=checkbox],
|
|||
.form-group.is-focused .radio label:focus {
|
||||
color: rgba(0,0,0, .54);
|
||||
}
|
||||
fieldset[disabled] .form-group.is-focused .radio label {
|
||||
color: rgba(0,0,0, 0.26);
|
||||
}
|
||||
.radio label span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -2962,9 +2971,9 @@ hr.on-light {
|
|||
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
height: 0;
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
-o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
|
||||
-o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
|
||||
-webkit-transform: translateY(200%);
|
||||
-ms-transform: translateY(200%);
|
||||
-o-transform: translateY(200%);
|
||||
|
|
@ -2974,9 +2983,9 @@ hr.on-light {
|
|||
padding: 14px 15px;
|
||||
margin-bottom: 20px;
|
||||
height: auto;
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
-o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
|
||||
-o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
|
|
|
|||
2
dist/css/bootstrap-material-design.css.map
vendored
2
dist/css/bootstrap-material-design.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-material-design.min.css
vendored
2
dist/css/bootstrap-material-design.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
137
dist/js/material.js
vendored
137
dist/js/material.js
vendored
|
|
@ -1,8 +1,8 @@
|
|||
/* globals jQuery */
|
||||
|
||||
(function($) {
|
||||
(function ($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
$.expr[":"].notmdproc = function (obj) {
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
|
|
@ -14,16 +14,41 @@
|
|||
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 && evt.which != 9;
|
||||
return (
|
||||
!evt.ctrlKey
|
||||
&& !evt.metaKey
|
||||
&& !evt.altKey
|
||||
&& evt.which != 8 // backspace
|
||||
&& evt.which != 9 // tab
|
||||
&& evt.which != 13 // enter
|
||||
&& evt.which != 16 // shift
|
||||
&& evt.which != 17 // ctrl
|
||||
&& evt.which != 20 // caps lock
|
||||
&& evt.which != 27 // escape
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function _addFormGroupFocus(element){
|
||||
$(element).closest(".form-group").addClass("is-focused");
|
||||
function _addFormGroupFocus(element) {
|
||||
var $element = $(element);
|
||||
if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
|
||||
$element.closest(".form-group").addClass("is-focused");
|
||||
}
|
||||
}
|
||||
|
||||
function _removeFormGroupFocus(element){
|
||||
function _toggleTypeFocus($input) {
|
||||
$input.closest('label').hover(function () {
|
||||
var $i = $(this).find('input');
|
||||
if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
|
||||
_addFormGroupFocus($i); // need to find the input so we can check disablement
|
||||
}
|
||||
}, function () {
|
||||
_removeFormGroupFocus($(this).find('input'));
|
||||
});
|
||||
}
|
||||
|
||||
function _removeFormGroupFocus(element) {
|
||||
$(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
}
|
||||
|
||||
|
|
@ -53,52 +78,43 @@
|
|||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
"checkbox": function (selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
var $input = $((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class='checkbox-material'><span class='check'></span></span>");
|
||||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
"togglebutton": function (selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
var $input = $((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class='toggle'></span>");
|
||||
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
$formGroup.find('label').hover(function() {
|
||||
_addFormGroupFocus(this);
|
||||
}, function() {
|
||||
_removeFormGroupFocus(this);
|
||||
});
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"radio": function(selector) {
|
||||
"radio": function (selector) {
|
||||
// Add fake-radio to material radios
|
||||
var $input = $((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class='circle'></span><span class='check'></span>");
|
||||
|
||||
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
$formGroup.find('label').hover(function() {
|
||||
_addFormGroupFocus(this);
|
||||
}, function() {
|
||||
_removeFormGroupFocus(this);
|
||||
});
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"input": function(selector) {
|
||||
"input": function (selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
.each(function () {
|
||||
var $input = $(this);
|
||||
|
||||
// Requires form-group standard markup (will add it if necessary)
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
if($formGroup.length === 0){
|
||||
if ($formGroup.length === 0) {
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
}
|
||||
|
|
@ -114,7 +130,7 @@
|
|||
"input-lg": "form-group-lg",
|
||||
"input-sm": "form-group-sm"
|
||||
};
|
||||
$.each( legacySizes, function( legacySize, standardSize ) {
|
||||
$.each(legacySizes, function (legacySize, standardSize) {
|
||||
if ($input.hasClass(legacySize)) {
|
||||
$input.removeClass(legacySize);
|
||||
$formGroup.addClass(standardSize);
|
||||
|
|
@ -127,7 +143,7 @@
|
|||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
var id = $input.attr("id");
|
||||
var forAttribute = "";
|
||||
if(id) {
|
||||
if (id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$formGroup.addClass("label-floating");
|
||||
|
|
@ -148,24 +164,19 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
"attachInputEventHandlers": function() {
|
||||
"attachInputEventHandlers": function () {
|
||||
var validate = this.options.validate;
|
||||
|
||||
// checkboxes didn't appear to bubble to the document, so we'll bind these directly
|
||||
$(".form-group .checkbox label").hover(function() {
|
||||
_addFormGroupFocus(this);
|
||||
}, function() {
|
||||
_removeFormGroupFocus(this);
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
.on("change", ".checkbox input[type=checkbox]", function () {
|
||||
$(this).blur();
|
||||
})
|
||||
.on("keydown paste", ".form-control", function (e) {
|
||||
if (_isChar(e)) {
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
.on("keyup change", ".form-control", function () {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
|
@ -183,7 +194,7 @@
|
|||
//
|
||||
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
|
||||
// BUT, I've left it here for backwards compatibility.
|
||||
if(validate) {
|
||||
if (validate) {
|
||||
if (isValid) {
|
||||
$formGroup.removeClass("has-error");
|
||||
}
|
||||
|
|
@ -192,17 +203,17 @@
|
|||
}
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function() {
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function () {
|
||||
_addFormGroupFocus(this);
|
||||
})
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function() {
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function () {
|
||||
_removeFormGroupFocus(this);
|
||||
})
|
||||
// make sure empty is added back when there is a programmatic value change.
|
||||
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
|
||||
.on("change", ".form-group input", function() {
|
||||
.on("change", ".form-group input", function () {
|
||||
var $input = $(this);
|
||||
if($input.attr("type") == "file") {
|
||||
if ($input.attr("type") == "file") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -215,11 +226,11 @@
|
|||
}
|
||||
})
|
||||
// set the fileinput readonly field with the name of the file
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function() {
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function () {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = "";
|
||||
$.each(this.files, function(i, file) {
|
||||
$.each(this.files, function (i, file) {
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
|
|
@ -231,13 +242,13 @@
|
|||
$formGroup.find("input.form-control[readonly]").val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
"ripples": function (selector) {
|
||||
$((selector) ? selector : this.options.withRipples).ripples();
|
||||
},
|
||||
"autofill": function() {
|
||||
"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() {
|
||||
var loading = setInterval(function () {
|
||||
$("input[type!=checkbox]").each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.val() && $this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
|
|
@ -246,18 +257,18 @@
|
|||
}, 100);
|
||||
|
||||
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
clearInterval(loading);
|
||||
}, 10000);
|
||||
},
|
||||
"attachAutofillEventHandlers": function() {
|
||||
"attachAutofillEventHandlers": function () {
|
||||
// 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() {
|
||||
.on("focus", "input", function () {
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function() {
|
||||
$inputs.each(function() {
|
||||
focused = setInterval(function () {
|
||||
$inputs.each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
|
|
@ -265,11 +276,11 @@
|
|||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", ".form-group input", function() {
|
||||
.on("blur", ".form-group input", function () {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
"init": function(options) {
|
||||
"init": function (options) {
|
||||
this.options = $.extend({}, this.options, options);
|
||||
var $document = $(document);
|
||||
|
||||
|
|
@ -296,27 +307,27 @@
|
|||
|
||||
if (document.arrive && this.options.arrive) {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
$document.arrive(this.options.withRipples, function() {
|
||||
$document.arrive(this.options.withRipples, function () {
|
||||
$.material.ripples($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.input) {
|
||||
$document.arrive(this.options.inputElements, function() {
|
||||
$document.arrive(this.options.inputElements, function () {
|
||||
$.material.input($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
$document.arrive(this.options.checkboxElements, function() {
|
||||
$document.arrive(this.options.checkboxElements, function () {
|
||||
$.material.checkbox($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.radio) {
|
||||
$document.arrive(this.options.radioElements, function() {
|
||||
$document.arrive(this.options.radioElements, function () {
|
||||
$.material.radio($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
$document.arrive(this.options.togglebuttonElements, function() {
|
||||
$document.arrive(this.options.togglebuttonElements, function () {
|
||||
$.material.togglebutton($(this));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@ h5, h6{
|
|||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
color: @brand-primary;
|
||||
color: @link-color;
|
||||
|
||||
& .material-icons {
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ h5, h6{
|
|||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
color: $brand-primary;
|
||||
color: $link-color;
|
||||
|
||||
& .material-icons {
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@
|
|||
&:focus {
|
||||
color: $mdb-label-color-toggle-focus;
|
||||
}
|
||||
|
||||
// correct the above focus color for disabled items
|
||||
fieldset[disabled] & {
|
||||
color: $mdb-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
// Animation
|
||||
height: 0;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
// Animation
|
||||
height: auto;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"laxbreak": true,
|
||||
"bitwise": true,
|
||||
"camelcase": true,
|
||||
"curly": true,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/* globals jQuery */
|
||||
|
||||
(function($) {
|
||||
(function ($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
$.expr[":"].notmdproc = function (obj) {
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
|
|
@ -14,7 +14,8 @@
|
|||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
return !evt.ctrlKey
|
||||
return (
|
||||
!evt.ctrlKey
|
||||
&& !evt.metaKey
|
||||
&& !evt.altKey
|
||||
&& evt.which != 8 // backspace
|
||||
|
|
@ -23,30 +24,31 @@
|
|||
&& evt.which != 16 // shift
|
||||
&& evt.which != 17 // ctrl
|
||||
&& evt.which != 20 // caps lock
|
||||
&& evt.which != 27; // escape
|
||||
&& evt.which != 27 // escape
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function _addFormGroupFocus(element){
|
||||
function _addFormGroupFocus(element) {
|
||||
var $element = $(element);
|
||||
if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
|
||||
$element.closest(".form-group").addClass("is-focused");
|
||||
}
|
||||
}
|
||||
|
||||
function _toggleTypeFocus($input){
|
||||
$input.closest('label').hover(function() {
|
||||
function _toggleTypeFocus($input) {
|
||||
$input.closest('label').hover(function () {
|
||||
var $i = $(this).find('input');
|
||||
if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
|
||||
_addFormGroupFocus($i); // need to find the input so we can check disablement
|
||||
}
|
||||
}, function() {
|
||||
}, function () {
|
||||
_removeFormGroupFocus($(this).find('input'));
|
||||
});
|
||||
}
|
||||
|
||||
function _removeFormGroupFocus(element){
|
||||
function _removeFormGroupFocus(element) {
|
||||
$(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
"checkbox": function (selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
var $input = $((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
|
|
@ -85,7 +87,7 @@
|
|||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
"togglebutton": function (selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
var $input = $((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
|
|
@ -94,7 +96,7 @@
|
|||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"radio": function(selector) {
|
||||
"radio": function (selector) {
|
||||
// Add fake-radio to material radios
|
||||
var $input = $((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
|
|
@ -103,16 +105,16 @@
|
|||
|
||||
_toggleTypeFocus($input);
|
||||
},
|
||||
"input": function(selector) {
|
||||
"input": function (selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
.each(function () {
|
||||
var $input = $(this);
|
||||
|
||||
// Requires form-group standard markup (will add it if necessary)
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
if($formGroup.length === 0){
|
||||
if ($formGroup.length === 0) {
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
}
|
||||
|
|
@ -128,7 +130,7 @@
|
|||
"input-lg": "form-group-lg",
|
||||
"input-sm": "form-group-sm"
|
||||
};
|
||||
$.each( legacySizes, function( legacySize, standardSize ) {
|
||||
$.each(legacySizes, function (legacySize, standardSize) {
|
||||
if ($input.hasClass(legacySize)) {
|
||||
$input.removeClass(legacySize);
|
||||
$formGroup.addClass(standardSize);
|
||||
|
|
@ -141,7 +143,7 @@
|
|||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
var id = $input.attr("id");
|
||||
var forAttribute = "";
|
||||
if(id) {
|
||||
if (id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$formGroup.addClass("label-floating");
|
||||
|
|
@ -162,17 +164,19 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
"attachInputEventHandlers": function() {
|
||||
"attachInputEventHandlers": function () {
|
||||
var validate = this.options.validate;
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
.on("change", ".checkbox input[type=checkbox]", function () {
|
||||
$(this).blur();
|
||||
})
|
||||
.on("keydown paste", ".form-control", function (e) {
|
||||
if (_isChar(e)) {
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
.on("keyup change", ".form-control", function () {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
|
@ -190,7 +194,7 @@
|
|||
//
|
||||
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
|
||||
// BUT, I've left it here for backwards compatibility.
|
||||
if(validate) {
|
||||
if (validate) {
|
||||
if (isValid) {
|
||||
$formGroup.removeClass("has-error");
|
||||
}
|
||||
|
|
@ -199,17 +203,17 @@
|
|||
}
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function() {
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function () {
|
||||
_addFormGroupFocus(this);
|
||||
})
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function() {
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function () {
|
||||
_removeFormGroupFocus(this);
|
||||
})
|
||||
// make sure empty is added back when there is a programmatic value change.
|
||||
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
|
||||
.on("change", ".form-group input", function() {
|
||||
.on("change", ".form-group input", function () {
|
||||
var $input = $(this);
|
||||
if($input.attr("type") == "file") {
|
||||
if ($input.attr("type") == "file") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -222,11 +226,11 @@
|
|||
}
|
||||
})
|
||||
// set the fileinput readonly field with the name of the file
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function() {
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function () {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = "";
|
||||
$.each(this.files, function(i, file) {
|
||||
$.each(this.files, function (i, file) {
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
|
|
@ -238,13 +242,13 @@
|
|||
$formGroup.find("input.form-control[readonly]").val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
"ripples": function (selector) {
|
||||
$((selector) ? selector : this.options.withRipples).ripples();
|
||||
},
|
||||
"autofill": function() {
|
||||
"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() {
|
||||
var loading = setInterval(function () {
|
||||
$("input[type!=checkbox]").each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.val() && $this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
|
|
@ -253,18 +257,18 @@
|
|||
}, 100);
|
||||
|
||||
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
clearInterval(loading);
|
||||
}, 10000);
|
||||
},
|
||||
"attachAutofillEventHandlers": function() {
|
||||
"attachAutofillEventHandlers": function () {
|
||||
// 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() {
|
||||
.on("focus", "input", function () {
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function() {
|
||||
$inputs.each(function() {
|
||||
focused = setInterval(function () {
|
||||
$inputs.each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.val() !== $this.attr("value")) {
|
||||
$this.trigger("change");
|
||||
|
|
@ -272,11 +276,11 @@
|
|||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", ".form-group input", function() {
|
||||
.on("blur", ".form-group input", function () {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
"init": function(options) {
|
||||
"init": function (options) {
|
||||
this.options = $.extend({}, this.options, options);
|
||||
var $document = $(document);
|
||||
|
||||
|
|
@ -303,27 +307,27 @@
|
|||
|
||||
if (document.arrive && this.options.arrive) {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
$document.arrive(this.options.withRipples, function() {
|
||||
$document.arrive(this.options.withRipples, function () {
|
||||
$.material.ripples($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.input) {
|
||||
$document.arrive(this.options.inputElements, function() {
|
||||
$document.arrive(this.options.inputElements, function () {
|
||||
$.material.input($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
$document.arrive(this.options.checkboxElements, function() {
|
||||
$document.arrive(this.options.checkboxElements, function () {
|
||||
$.material.checkbox($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.radio) {
|
||||
$document.arrive(this.options.radioElements, function() {
|
||||
$document.arrive(this.options.radioElements, function () {
|
||||
$.material.radio($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
$document.arrive(this.options.togglebuttonElements, function() {
|
||||
$document.arrive(this.options.togglebuttonElements, function () {
|
||||
$.material.togglebutton($(this));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user