mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 18:07:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed legacy floating labels

Browse Source
This commit is contained in:
Kevin Ross 2015-11-10 14:31:56 -06:00
parent 8a6457acc0
commit 9526778842
6 changed files with 142 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -351,7 +351,7 @@ module.exports = function (grunt) {
}, },
watch: { watch: {
html: { html: {
files: ["index.html", "bootstrap-elements.html"], files: ["index.html", "bootstrap-elements.html", "test.html"],
tasks: ["htmllint", "bootlint"] tasks: ["htmllint", "bootlint"]
}, },
js: { js: {

24
dist/js/material.js vendored
View File

@ -76,7 +76,14 @@
var $formGroup = $input.parent(".form-group"); var $formGroup = $input.parent(".form-group");
if($formGroup.length === 0){ if($formGroup.length === 0){
//console.debug("Generating form-group for input", $this); //console.debug("Generating form-group for input", $this);
$formGroup = $input.wrap("<div class='form-group'></div>"); $input.wrap("<div class='form-group'></div>");
$formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
}
// 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>");
$input.removeAttr("data-hint");
} }
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo"> // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
@ -88,7 +95,7 @@
if(id) { if(id) {
forAttribute = "for='" + id + "'"; forAttribute = "for='" + id + "'";
} }
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>"); $input.after("<label " + forAttribute + "class='control-label floating-label'>" + placeholder + "</label>");
} }
else { else {
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`, // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
@ -101,11 +108,6 @@
} }
} }
// 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...) // Set as empty if is empty (damn I must improve this...)
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") { if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
$formGroup.addClass("is-empty"); $formGroup.addClass("is-empty");
@ -145,6 +147,9 @@
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/ // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
// the form-group on change. // the form-group on change.
//
// 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(isValid){ if(isValid){
$formGroup.removeClass("has-error"); $formGroup.removeClass("has-error");
} }
@ -152,12 +157,11 @@
$formGroup.addClass("has-error"); $formGroup.addClass("has-error");
} }
}) })
.on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() { .on("focus", ".form-control, .form-group.fileinput", function() {
$(this).parent().addClass("is-focused"); // add class to form-group $(this).parent().addClass("is-focused"); // add class to form-group
}) })
.on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() { .on("blur", ".form-control, .form-group.fileinput", function() {
$(this).parent().removeClass("is-focused"); // remove class from form-group $(this).parent().removeClass("is-focused"); // remove class from form-group
// .is(":invalid"))
}) })
.on("change", ".form-group.fileinput [type=file]", function() { .on("change", ".form-group.fileinput [type=file]", function() {
var $this = $(this); var $this = $(this);

26
index.html
View File

@ -415,20 +415,20 @@
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p> <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
</div> </div>
<h2>Input - floating labels <!--<h2>Input - floating labels-->
<small>input sizing</small> <!--<small>input sizing</small>-->
</h2> <!--</h2>-->
<div class="form-group form-group-lg"> <!--<div class="form-group form-group-lg">-->
<label for="i7" class="control-label floating-label">Floating label input-sm</label> <!--<label for="i7" class="control-label floating-label">Floating label input-sm</label>-->
<input type="email" class="form-control input-sm" id="i7"> <!--<input type="email" class="form-control input-sm" id="i7">-->
<span class="help-block hint">This is a hint</span> <!--<span class="help-block hint">This is a hint</span>-->
</div> <!--</div>-->
<div class="form-group"> <!--<div class="form-group">-->
<label for="i9" class="control-label floating-label">Floating label input-lg</label> <!--<label for="i9" class="control-label floating-label">Floating label input-lg</label>-->
<input type="email" class="form-control input-lg" id="i9"> <!--<input type="email" class="form-control input-lg" id="i9">-->
<span class="help-block hint">This is a hint</span> <!--<span class="help-block hint">This is a hint</span>-->
</div> <!--</div>-->
<h2>Input - Legacy</h2> <h2>Input - Legacy</h2>
<!-- Exercise backwards compatibility without form-group --> <!-- Exercise backwards compatibility without form-group -->

54
less/_inputs.less
View File

@ -44,31 +44,15 @@
font-weight: normal; font-weight: normal;
}); });
//&::-moz-placeholder { &,
// color: @input-placeholder-color; fieldset[disabled] & {
// font-size: @md-input-font-size-base;
// font-weight: normal;
//}
//&:-ms-input-placeholder {
// color: @input-placeholder-color;
// font-size: @md-input-font-size-base;
// font-weight: normal;
//}
//&::-webkit-input-placeholder {
// color: @input-placeholder-color;
// font-size: @md-input-font-size-base;
// font-weight: normal;
//}
fieldset[disabled] &,
& {
&:textarea { &:textarea {
height: 40px; height: 40px;
} }
&, &,
.form-group.is-focused & { .form-group.is-focused & {
//padding: 0;
float: none; float: none;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
@ -182,26 +166,28 @@ select.form-control {
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
// this is for input-sm and input-lg directly on input. Recommended way is form-group-sm and form-group-lg instead. // this is for input-sm and input-lg directly on input. Recommended way is form-group-sm and form-group-lg instead.
.input-size-floating-label(@name, @size) { //.input-size-floating-label(@name, @size) {
.form-control.@{name} ~ & { // .form-control.@{name} ~ & {
font-size: @size; // font-size: @size;
top: 7px; // top: 7px;
} // }
//
.form-group.is-focused .form-control.@{name} ~ .form-group.is-focused &, // .form-group.is-focused .form-control.@{name} ~ .form-group.is-focused &,
.form-group.is-empty .form-control.@{name} ~ .form-group.is-empty & { // .form-group.is-empty .form-control.@{name} ~ .form-group.is-empty & {
top: @floating-label-size-ratio * -@size; // top: @floating-label-size-ratio * -@size;
font-size: @floating-label-size-ratio * @size; // font-size: @floating-label-size-ratio * @size;
} // }
} //}
// Do not nest label.floating-label inside .form-group - it messes with ~ selector // Do not nest label.floating-label inside .form-group - it messes with ~ selector
label.control-label.floating-label { label.control-label.floating-label {
@label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
font-size: @md-input-font-size-base; // Input sizes font-size: @md-input-font-size-base; // Input sizes
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
left: 0px; left: 0px;
top: -1 * @md-input-padding-base-vertical; // place the floating label to look like a placeholder with input padding top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
transition: 0.3s ease all; transition: 0.3s ease all;
.form-group.is-focused & { .form-group.is-focused & {
@ -213,12 +199,12 @@ label.control-label.floating-label {
// sizing // sizing
.form-group.is-focused &, .form-group.is-focused &,
.form-group:not(.is-empty) & { .form-group:not(.is-empty) & {
top: -1 * (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!! top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
font-size: @md-input-label-font-size-base; font-size: @md-input-label-font-size-base;
} }
.input-size-floating-label(input-sm, @md-input-font-size-small); //.input-size-floating-label(input-sm, @md-input-font-size-small);
.input-size-floating-label(input-lg, @md-input-font-size-large); //.input-size-floating-label(input-lg, @md-input-font-size-large);
} }
.input-group { .input-group {

16
scripts/material.js
View File

@ -76,7 +76,14 @@
var $formGroup = $input.parent(".form-group"); var $formGroup = $input.parent(".form-group");
if($formGroup.length === 0){ if($formGroup.length === 0){
//console.debug("Generating form-group for input", $this); //console.debug("Generating form-group for input", $this);
$formGroup = $input.wrap("<div class='form-group'></div>"); $input.wrap("<div class='form-group'></div>");
$formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
}
// 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>");
$input.removeAttr("data-hint");
} }
// Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo"> // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
@ -88,7 +95,7 @@
if(id) { if(id) {
forAttribute = "for='" + id + "'"; forAttribute = "for='" + id + "'";
} }
$input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>"); $input.after("<label " + forAttribute + "class='control-label floating-label'>" + placeholder + "</label>");
} }
else { else {
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`, // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
@ -101,11 +108,6 @@
} }
} }
// 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...) // Set as empty if is empty (damn I must improve this...)
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") { if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
$formGroup.addClass("is-empty"); $formGroup.addClass("is-empty");

85
test.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<title>Material Design for Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.css" rel="stylesheet">
<link href="dist/css/ripples.css" rel="stylesheet">
<!-- Dropdown.js -->
<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
<!-- Page style -->
<link href="index.css" rel="stylesheet">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Input - Legacy</h2>
<!-- Exercise backwards compatibility without form-group -->
<input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy data-hint attribute on the input">
</div>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.js"></script>
<script src="dist/js/ripples.js"></script>
<script>
$.material.init();
</script>
<!-- Sliders -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>-->
<!--<script>-->
<!--$(function () {-->
<!--$.material.init();-->
<!--$(".shor").noUiSlider({-->
<!--start: 40,-->
<!--connect: "lower",-->
<!--range: {-->
<!--min: 0,-->
<!--max: 100-->
<!--}-->
<!--});-->
<!--$(".svert").noUiSlider({-->
<!--orientation: "vertical",-->
<!--start: 40,-->
<!--connect: "lower",-->
<!--range: {-->
<!--min: 0,-->
<!--max: 100-->
<!--}-->
<!--});-->
<!--});-->
<!--</script>-->
<!-- Dropdown.js -->
<!--<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>-->
<!--<script>-->
<!--$("#dropdown-menu select").dropdown();-->
<!--</script>-->
</body>
</html>