From d6f0eb80971cfe78630f78a88a744380cc874f12 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Tue, 17 Nov 2015 10:18:37 -0600 Subject: [PATCH] Added file input variation samples --- bootstrap-elements.html | 2 +- index.html | 32 ++++++++ less/_buttons.less | 6 +- less/_inputs.less | 16 ++-- scripts/material.js | 33 ++++---- test.html | 169 ++++++++++++++++++++++------------------ 6 files changed, 159 insertions(+), 99 deletions(-) diff --git a/bootstrap-elements.html b/bootstrap-elements.html index c42fb328..3d610d39 100644 --- a/bootstrap-elements.html +++ b/bootstrap-elements.html @@ -1909,7 +1909,7 @@
- +
diff --git a/index.html b/index.html index b11d4a67..d2950f23 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@
  • Radio Button
  • Toggle Button
  • Input
    • +
  • File Input
  • Navbar
  • Progress Bar
  • Slider
    • @@ -522,6 +523,37 @@ + +
    +

    File Input

    + +
    + + + +
    + +
    + + + +
    + +
    + + +
    + + + + +
    +
    +
    + +

    Navbar

    diff --git a/less/_buttons.less b/less/_buttons.less index ccf141d2..5afc20f2 100644 --- a/less/_buttons.less +++ b/less/_buttons.less @@ -54,7 +54,8 @@ } -.btn { +.btn, +.input-group-btn .btn { &.btn-flat { background: none; box-shadow: none; @@ -92,7 +93,8 @@ &:active { .shadow-z-1-hover(); } - &, .ripple-wrapper { + &, + .ripple-wrapper { border-radius: 100%; } &.btn-fab-mini { diff --git a/less/_inputs.less b/less/_inputs.less index 4815b57e..0516afba 100644 --- a/less/_inputs.less +++ b/less/_inputs.less @@ -265,14 +265,14 @@ select.form-control { // Input files (kinda hack) .form-group input[type=file] { opacity: 0; - //position: absolute; - //top: 0; - //right: 0; - //bottom: 0; - //left: 0; - //width: 100%; - //height: 100%; - //z-index: 100; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } // Ugly override of Bootstrap border diff --git a/scripts/material.js b/scripts/material.js index 0ac659a9..9f60fcb5 100644 --- a/scripts/material.js +++ b/scripts/material.js @@ -110,13 +110,17 @@ } else { // If it has a label, based on the way the css is written with the adjacent sibling selector `~`, - // we need the label to be *after* the input for it to work properly. - // See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector + // we need the label to be *after* the input for it to work properly. (we use these infrequently now that + // .is-focused and .is-empty is standardized on the .form-group. + // @see: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector + // Attach it to the same parent, regardless (not necessarily after input) which could cause problems, + // but this is up to the user. var $label = $formGroup.find("label.floating-label"); if($label.length > 0){ - console.debug("FIXME moving label"); // FIXME not sure we want to do this for input-groups + var $labelParent = $label.parent(); // likely the form-group, but may not be in the case of input-groups $label.detach(); - $input.after($label); + $labelParent.append($label); + //$input.after($label); } } @@ -129,10 +133,10 @@ $formGroup.append(""); // Support for file input - if ($formGroup.next().is("[type=file]")) { - $formGroup.addClass("fileinput"); - var $nextInput = $formGroup.next().detach(); - $input.after($nextInput); + if ($formGroup.find("input[type=file]").length > 0) { + $formGroup.addClass("is-fileinput"); + //var $nextInput = $formGroup.next().detach(); + //$input.after($nextInput); } }); }, @@ -169,26 +173,27 @@ $formGroup.addClass("has-error"); } }) - .on("focus", ".form-control, .form-group.fileinput", function() { + .on("focus", ".form-control, .form-group.is-fileinput", function() { $(this).closest(".form-group").addClass("is-focused"); // add class to form-group }) - .on("blur", ".form-control, .form-group.fileinput", function() { + .on("blur", ".form-control, .form-group.is-fileinput", function() { $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group }) - .on("change", ".form-group.fileinput [type=file]", function() { - var $this = $(this); + // set the fileinput readonly field with the name of the file + .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) { value += file.name + ", "; }); value = value.substring(0, value.length - 2); - var $formGroup = $this.closest(".form-group"); if (value) { $formGroup.removeClass("is-empty"); } else { $formGroup.addClass("is-empty"); } - $this.prev().val(value); + $formGroup.find("input.form-control[readonly]").val(value); }); }, "ripples": function(selector) { diff --git a/test.html b/test.html index f5049856..8209ff42 100644 --- a/test.html +++ b/test.html @@ -31,60 +31,77 @@
    -
    -
    -
    - Legend - + - - - - + + + + - -
    - -
    - $ - - - - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    + +
    +
    + + +
    + + +
    +
    +
    + + + + + + +
    + + + +
    + +
    + + + +
    + +
    + +
    + + + + +
    +
    + +
    @@ -98,36 +115,40 @@ - - - - - - - - - - - - + - - - - - - - - - - +$(".svert").noUiSlider({ +orientation: "vertical", +start: 40, +connect: "lower", +range: { +min: 0, +max: 100 +} +}); +}); + +--> - - - - +