mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +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>
<div class="form-group"> <div class="form-group">
<label for="i2" class="not-floating">Floating label</label> <label for="i2" class="floating-label">Floating label</label>
<input type="email" class="form-control" id="i2" placeholder="Placeholder text"> <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> <span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
</div> </div>
<div class="form-group"> <!--<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"> <!-- Exercise backwards compatibility without form-group -->
</div> <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> <h2>Textarea</h2>

41
scripts/material.js
View File

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