mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-11 12:17:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

Allow elements without form-group for backward compatibility, since it seems feasible at this point.

Browse Source
This commit is contained in:
Kevin Ross 2015-11-06 11:04:07 -06:00
parent 0caa191354
commit f6f608ea4e
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -500,14 +500,15 @@
</div>
<div class="form-group">
<label for="i2" class="not-floating">Floating label</label>
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
<label for="i2" class="floating-label">Floating label</label>
<input type="email" class="form-control" id="i2">
<span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
</div>
<div class="form-group">
<input type="text" class="form-control floating-label" placeholder="old floating label" data-hint="This is a hint using a <code>data-hint</code> attribute on the input">
</div>
<!--<div class="form-group">-->
<!-- Exercise backwards compatibility without form-group -->
<input type="text" class="form-control floating-label" placeholder="Legacy floating label" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
<!--</div>-->
<h2>Textarea</h2>

41
scripts/material.js
View File

@ -70,43 +70,48 @@
.filter(":notmdproc")
.data("mdproc", true)
.each( function() {
var $this = $(this);
var $input = $(this);
// Now using/requiring form-group (instead of the old div.form-control-wrapper)
var formGroup = $this.parent(".form-group");
// Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper)
var formGroup = $input.parent(".form-group");
if(formGroup.length === 0){
console.error("Expected form-group for input", $this);
//console.debug("Generating form-group for input", $this);
formGroup = $input.wrap("<div class='form-group'></div>");
}
//if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
// return;
//}
$this.after("<span class=material-input></span>");
$input.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>");
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
if ($input.hasClass("floating-label")) {
var placeholder = $input.attr("placeholder");
$input.attr("placeholder", null).removeClass("floating-label");
var id = $input.attr("id");
var forAttribute = "";
if(id) {
forAttribute = "for='" + id + "'";
}
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
}
// Add hint label if using the shorthand data-hint attribute on the input
if ($this.attr("data-hint")) {
$this.after("<p class='help-block hint'>" + $this.attr("data-hint") + "</p>");
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
if ($input.attr("data-hint")) {
$input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
}
// Set as empty if is empty (damn I must improve this...)
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
$this.addClass("empty");
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
$input.addClass("empty");
}
// Support for file input
if (formGroup.next().is("[type=file]")) {
formGroup.addClass("fileinput");
var $input = formGroup.next().detach();
$this.after($input);
var $nextInput = formGroup.next().detach();
$input.after($nextInput);
}
});
},