From 4996435adba9cd3659bf4f792df9a865fdd60e30 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Wed, 11 Nov 2015 11:53:16 -0600
Subject: [PATCH] fixed input-groups and variations

---
 bootstrap-elements.html | 21 +++++++++----
 less/_inputs.less       | 46 ++++++++++++++++++++-------
 scripts/material.js     | 19 ++++++-----
 test.html               | 70 ++++++++++++++++++++++++++++-------------
 4 files changed, 106 insertions(+), 50 deletions(-)

diff --git a/bootstrap-elements.html b/bootstrap-elements.html
index 69679512..c42fb328 100644
--- a/bootstrap-elements.html
+++ b/bootstrap-elements.html
@@ -2017,14 +2017,23 @@
           </div>
 
           <div class="form-group">
-            <label class="control-label">Input addons</label>
-
+            <label class="control-label" for="addon1">Input addons</label>
             <div class="input-group">
               <span class="input-group-addon">$</span>
-              <input type="text" class="form-control">
-                                    <span class="input-group-btn">
-                                        <button class="btn btn-primary" type="button">Button</button>
-                                    </span>
+              <input type="text" id="addon1" class="form-control">
+              <span class="input-group-btn">
+                  <button class="btn btn-primary" type="button">Button</button>
+              </span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label class="control-label floating-label" for="addon2">Floating label addon <small>(right only)</small></label>
+            <div class="input-group">
+              <input type="text" id="addon2" class="form-control">
+              <span class="input-group-btn">
+                  <button class="btn btn-primary" type="button">Button</button>
+              </span>
             </div>
           </div>
         </form>
diff --git a/less/_inputs.less b/less/_inputs.less
index b8ffdd25..3ad0889a 100644
--- a/less/_inputs.less
+++ b/less/_inputs.less
@@ -221,6 +221,14 @@ select.form-control {
   }
 }
 
+.input-group-button-variation(@vertical-padding) {
+  .input-group-btn {
+    .btn {
+      margin: 0 0 @vertical-padding 0;
+    }
+  }
+}
+
 .input-group {
   .form-group {
     .form-control {
@@ -228,28 +236,42 @@ select.form-control {
     }
     margin-right: 5px;
     margin-left: 5px;
+
+    // sm margin
+    &.form-group-sm {
+      .input-group-button-variation(@md-input-padding-small-vertical);
+    }
+
+    // lg margin
+    &.form-group-lg {
+      .input-group-button-variation(@md-input-padding-large-vertical);
+    }
   }
+
+  // default margin
+  .input-group-button-variation(@md-input-padding-base-vertical);
+
+  .input-group-btn {
+    padding: 0 12px; // match addon spacing
+  }
+
   .input-group-addon {
     border: 0;
     background: transparent;
   }
-  .input-group-btn .btn {
-    border-radius: 4px;
-    margin: 0;
-  }
 }
 
 // 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 95dad6e3..0ac659a9 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -72,12 +72,11 @@
       .each( function() {
         var $input = $(this);
 
-        // Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper)
-        var $formGroup = $input.parent(".form-group");
+        // 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){
-          //console.debug("Generating form-group for input", $this);
           $input.wrap("<div class='form-group'></div>");
-          $formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
+          $formGroup = $input.closest(".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
@@ -115,6 +114,7 @@
           //  See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
           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
             $label.detach();
             $input.after($label);
           }
@@ -141,12 +141,12 @@
       .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
       .on("keydown paste", ".form-control", function(e) {
         if(_isChar(e)) {
-          $(this).parent(".form-group").removeClass("is-empty");
+          $(this).closest(".form-group").removeClass("is-empty");
         }
       })
       .on("keyup change", ".form-control", function() {
         var $input = $(this);
-        var $formGroup = $input.parent(".form-group");
+        var $formGroup = $input.closest(".form-group");
         var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
 
         if ($input.val() === "" && isValid) {
@@ -170,10 +170,10 @@
         }
       })
       .on("focus", ".form-control, .form-group.fileinput", function() {
-        $(this).parent().addClass("is-focused"); // add class to form-group
+        $(this).closest(".form-group").addClass("is-focused"); // add class to form-group
       })
       .on("blur", ".form-control, .form-group.fileinput", function() {
-        $(this).parent().removeClass("is-focused"); // remove class from form-group
+        $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
       })
       .on("change", ".form-group.fileinput [type=file]", function() {
         var $this = $(this);
@@ -182,7 +182,7 @@
           value += file.name + ", ";
         });
         value = value.substring(0, value.length - 2);
-        var $formGroup = $this.parent(".form-group");
+        var $formGroup = $this.closest(".form-group");
         if (value) {
           $formGroup.removeClass("is-empty");
         } else {
@@ -215,7 +215,6 @@
       var focused;
       $(document)
       .on("focus", "input", function() {
-        console.log($(this).parent());
         var $inputs = $(this).parents("form").find("input").not("[type=file]");
         focused = setInterval(function() {
           $inputs.each(function() {
diff --git a/test.html b/test.html
index 742fcaa2..f5049856 100644
--- a/test.html
+++ b/test.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>Material Design for Bootstrap</title>
+  <title>TEST Material Design for Bootstrap</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
@@ -31,32 +31,58 @@
 
 <div class="container-fluid">
 
-  <h2>Input - static labels
-    <small>form-group sizing</small>
-  </h2>
+  <div class="well bs-component">
+    <form class="form-horizontal">
+      <fieldset>
+        <legend>Legend</legend>
 
-  <div class="form-group form-group-sm">
-    <label for="i1" class="control-label">Static label</label>
-    <input type="email" class="form-control" id="i1" placeholder="Placeholder text">
+  <!--<div class="form-group">-->
+    <!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
 
-    <p class="help-block hint">This is a hint</p>
-  </div>
+    <!--<div class="col-lg-10">-->
+      <!--<input type="text" readonly class="form-control floating-label" placeholder="Browse...">-->
+      <!--<input type="file" id="inputFile" multiple>-->
+    <!--</div>-->
+  <!--</div>-->
 
-  <div class="form-group">
-    <label for="i2" class="control-label">Static label</label>
-    <input type="email" class="form-control" id="i2" placeholder="Placeholder text">
 
-    <p class="help-block hint">This is a hint</p>
-  </div>
-  
-  <div class="form-group form-group-lg">
-    <label for="i3" class="control-label">Static label</label>
-    <input type="email" class="form-control" id="i3" placeholder="Placeholder text">
+        <div class="form-group">
+          <label class="control-label floating-label" for="addon2">Input addons with floating label</label>
+          <div class="input-group">
+            <span class="input-group-addon">$</span>
+            <input type="text" id="addon2" class="form-control">
+              <span class="input-group-btn">
+                  <button class="btn btn-primary" type="button">Button</button>
+              </span>
+          </div>
+        </div>
 
-    <p class="help-block hint">This is a hint</p>
-  </div>
-  
-  
+        <!--<h2>File inputs</h2>-->
+
+        <!--<div class="form-group">-->
+          <!--<label class="control-label floating-label" for="faddon1">Input group with file</label>-->
+          <!--<div class="input-group">-->
+            <!--<span class="input-group-addon"><i class="mdi-editor-attach-file"></i></span>-->
+            <!--<input type="text" class="form-control" id="faddon1">-->
+          <!--</div>-->
+        <!--</div>-->
+        
+        
+        
+        <!--<div class="form-group">-->
+          <!--<label for="f1" class="control-label floating-label">Browse...(floating label)</label>-->
+          <!--<input type="file" id="f1" class="form-control">-->
+          <!--<p class="help-block">Example block-level help text here.</p>-->
+        <!--</div>-->
+
+        <!--<div class="form-group">-->
+          <!--<label for="f2" class="form-control">Browse...(static label)</label>-->
+          <!--<input type="file" id="f2" class="form-control">-->
+          <!--<p class="help-block">Example block-level help text here.</p>-->
+        <!--</div>-->
+        </fieldset>
+      </form>
+    </div>
 </div>