From f6f608ea4efc9da1abe608b97d54c0246f9ea1bf Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Fri, 6 Nov 2015 11:04:07 -0600
Subject: [PATCH] Allow elements without form-group for backward compatibility,
 since it seems feasible at this point.

---
 index.html          | 11 ++++++-----
 scripts/material.js | 41 +++++++++++++++++++++++------------------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index e54d71aa..61104959 100644
--- a/index.html
+++ b/index.html
@@ -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>
 
diff --git a/scripts/material.js b/scripts/material.js
index 8795c30b..4508fe27 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -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);
         }
       });
     },