From 7b757d3bf4c1537959055e724fbe9f305798f47a Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Sun, 19 Oct 2014 23:55:37 -0200
Subject: [PATCH 01/10] fixed identation

---
 jvfloat.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index f36245b..03d25e2 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -3,30 +3,30 @@
  * modified on: 18/09/2014
  */
 
-(function($) {
+(function ($) {
   'use strict';
-  
+
   // Init Plugin Functions
   $.fn.jvFloat = function () {
     // Check input type - filter submit buttons.
-    return this.filter('input:not([type=submit]), textarea, select').each(function() {
+    return this.filter('input:not([type=submit]), textarea, select').each(function () {
       function getPlaceholderText($el) {
         var text = $el.attr('placeholder');
 
         if (typeof text == 'undefined') {
-            text = $el.attr('title');
+          text = $el.attr('title');
         }
 
         return text;
       }
-      function setState () {
+
+      function setState() {
         // change span.placeHolder to span.placeHolder.active
         var currentValue = $el.val();
 
         if (currentValue == null) {
           currentValue = '';
-        }
-        else if ($el.is('select')) {
+        } else if ($el.is('select')) {
           var placeholderValue = getPlaceholderText($el);
 
           if (placeholderValue == currentValue) {
@@ -36,13 +36,15 @@
 
         placeholder.toggleClass('active', currentValue !== '');
       }
-      function generateUIDNotMoreThan1million () {
+
+      function generateUIDNotMoreThan1million() {
         var id = '';
         do {
-          id = ('0000' + (Math.random()*Math.pow(36,4) << 0).toString(36)).substr(-4);
+          id = ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).substr(-4);
         } while (!!$('#' + id).length);
         return id;
       }
+
       function createIdOnElement($el) {
         var id = generateUIDNotMoreThan1million();
         $el.prop('id', id);
@@ -51,11 +53,13 @@
       // Wrap the input in div.jvFloat
       var $el = $(this).wrap('<div class=jvFloat>');
       var forId = $el.attr('id');
-      if (!forId) { forId = createIdOnElement($el);}
+      if (!forId) {
+        forId = createIdOnElement($el);
+      }
       // Store the placeholder text in span.placeHolder
       // added `required` input detection and state
       var required = $el.attr('required') || '';
-      
+
       // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) 
       // to allow better positioning of the element for multiline text area inputs
       var placeholder = '';
@@ -71,5 +75,5 @@
       $el.bind('keyup blur', setState);
     });
   };
-// Make Zeptojs & jQuery Compatible
+  // Make Zeptojs & jQuery Compatible
 })(window.jQuery || window.Zepto || window.$);

From 375eb5edc1a173af0c2a5ddaf91fa4755ac6e1ca Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 00:01:04 -0200
Subject: [PATCH 02/10] given names to functions for better debug

---
 jvfloat.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index 03d25e2..5991eac 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -3,13 +3,13 @@
  * modified on: 18/09/2014
  */
 
-(function ($) {
+(function _jv_float_module($) {
   'use strict';
 
   // Init Plugin Functions
-  $.fn.jvFloat = function () {
+  $.fn.jvFloat = function _jv_float_plugin() {
     // Check input type - filter submit buttons.
-    return this.filter('input:not([type=submit]), textarea, select').each(function () {
+    return this.filter('input:not([type=submit]), textarea, select').each(function _jv_float_each() {
       function getPlaceholderText($el) {
         var text = $el.attr('placeholder');
 

From 8c2e124e7e8a7c5dee1a29607d452d5dfa524523 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 00:12:50 -0200
Subject: [PATCH 03/10] generate a global ID and make less access to DOM
 [!!$(#...)] ;

---
 jvfloat.js | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index 5991eac..0347de7 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -3,9 +3,11 @@
  * modified on: 18/09/2014
  */
 
-(function _jv_float_module($) {
+(function _jv_float_module($, window) {
   'use strict';
 
+  var namespace = 'jv_float';
+
   // Init Plugin Functions
   $.fn.jvFloat = function _jv_float_plugin() {
     // Check input type - filter submit buttons.
@@ -37,16 +39,20 @@
         placeholder.toggleClass('active', currentValue !== '');
       }
 
-      function generateUIDNotMoreThan1million() {
-        var id = '';
-        do {
-          id = ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).substr(-4);
-        } while (!!$('#' + id).length);
-        return id;
+      /**
+       * Generate a unique id
+       * @return {string} id generated
+       */
+      function generate_id() {
+        // if window don't have UUID, create with 1, else append one each time
+        !('JVFLOAT_UUID' in window) ? window.JVFLOAT_UUID = 1 : window.JVFLOAT_UUID += 1;
+
+        return [namespace, window.JVFLOAT_UUID].join('__');
+
       }
 
       function createIdOnElement($el) {
-        var id = generateUIDNotMoreThan1million();
+        var id = generate_id();
         $el.prop('id', id);
         return id;
       }
@@ -76,4 +82,4 @@
     });
   };
   // Make Zeptojs & jQuery Compatible
-})(window.jQuery || window.Zepto || window.$);
+})(window.jQuery || window.Zepto || window.$, window);

From 6ac029a535267fffc191a43a565f0a37d13c572a Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 00:14:19 -0200
Subject: [PATCH 04/10] 'window.jquery' and 'window.$' is same function

---
 jvfloat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jvfloat.js b/jvfloat.js
index 0347de7..7194c42 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -82,4 +82,4 @@
     });
   };
   // Make Zeptojs & jQuery Compatible
-})(window.jQuery || window.Zepto || window.$, window);
+})(window.jQuery || window.Zepto, window);

From 22b7a2305931060efc06329dc192f63afded1675 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 02:06:36 -0200
Subject: [PATCH 05/10] removed confused variables names, like placeholder to
 describe a label. Created placeholder by native attributes (it's more fast).
 Organized variables at top

---
 jvfloat.js | 40 ++++++++++++++++------------------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index 7194c42..a4eedde 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -12,15 +12,20 @@
   $.fn.jvFloat = function _jv_float_plugin() {
     // Check input type - filter submit buttons.
     return this.filter('input:not([type=submit]), textarea, select').each(function _jv_float_each() {
-      function getPlaceholderText($el) {
-        var text = $el.attr('placeholder');
+      var $el = $(this),
+        el = $el[0], // native element
+        placeholder = el.getAttribute("placeholder") || el.getAttribute("title"), // get placeholder with native function
+        forId = $el.attr('id'),
 
-        if (typeof text == 'undefined') {
-          text = $el.attr('title');
-        }
+        // added `required` input detection and state
+        required = $el.attr('required') || '';
 
-        return text;
-      }
+      // Wrap the input in div.jvFloat
+      $el.wrap('<div class=jvFloat>');
+
+      // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) 
+      // to allow better positioning of the element for multiline text area inputs
+      var $label = '';
 
       function setState() {
         // change span.placeHolder to span.placeHolder.active
@@ -29,14 +34,12 @@
         if (currentValue == null) {
           currentValue = '';
         } else if ($el.is('select')) {
-          var placeholderValue = getPlaceholderText($el);
-
-          if (placeholderValue == currentValue) {
+          if (placeholder == currentValue) {
             currentValue = '';
           }
         }
 
-        placeholder.toggleClass('active', currentValue !== '');
+        $label.toggleClass('active', currentValue !== '');
       }
 
       /**
@@ -56,25 +59,14 @@
         $el.prop('id', id);
         return id;
       }
-      // Wrap the input in div.jvFloat
-      var $el = $(this).wrap('<div class=jvFloat>');
-      var forId = $el.attr('id');
       if (!forId) {
         forId = createIdOnElement($el);
       }
-      // Store the placeholder text in span.placeHolder
-      // added `required` input detection and state
-      var required = $el.attr('required') || '';
-
-      // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) 
-      // to allow better positioning of the element for multiline text area inputs
-      var placeholder = '';
-      var placeholderText = getPlaceholderText($el);
 
       if ($(this).is('textarea')) {
-        placeholder = $('<label class="placeHolder ' + ' textarea ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
+        $label = $('<label class="placeHolder ' + ' textarea ' + required + '" for="' + forId + '">' + placeholder + '</label>').insertBefore($el);
       } else {
-        placeholder = $('<label class="placeHolder ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
+        $label = $('<label class="placeHolder ' + required + '" for="' + forId + '">' + placeholder + '</label>').insertBefore($el);
       }
       // checks to see if inputs are pre-populated and adds active to span.placeholder
       setState();

From e1a51e7f45380023a430c8dc49804aef687dcd30 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 02:13:34 -0200
Subject: [PATCH 06/10] change "$label" to use jQuery creation method

---
 jvfloat.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index a4eedde..7564eaa 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -25,7 +25,7 @@
 
       // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) 
       // to allow better positioning of the element for multiline text area inputs
-      var $label = '';
+      var $label = null;
 
       function setState() {
         // change span.placeHolder to span.placeHolder.active
@@ -59,15 +59,18 @@
         $el.prop('id', id);
         return id;
       }
-      if (!forId) {
-        forId = createIdOnElement($el);
+      if (!el.getAttribute('id')) {
+        el.setAttribute('id', createIdOnElement($el));
       }
 
-      if ($(this).is('textarea')) {
-        $label = $('<label class="placeHolder ' + ' textarea ' + required + '" for="' + forId + '">' + placeholder + '</label>').insertBefore($el);
-      } else {
-        $label = $('<label class="placeHolder ' + required + '" for="' + forId + '">' + placeholder + '</label>').insertBefore($el);
-      }
+      $label = $('<label>', {
+        "class": 'placeHolder ' + (el.tagName == 'TEXTAREA' ? 'textarea' : '') + required,
+        "for": el.getAttribute('id'),
+        "text": placeholder
+      });
+
+      $label.insertBefore($el);
+
       // checks to see if inputs are pre-populated and adds active to span.placeholder
       setState();
       $el.bind('keyup blur', setState);

From 97bde8f08c8a76111d1ad37514331d5e03a35697 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 02:17:04 -0200
Subject: [PATCH 07/10] remove unnecessary function to fix the element's id

---
 jvfloat.js | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index 7564eaa..3ca2ad3 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -27,6 +27,8 @@
       // to allow better positioning of the element for multiline text area inputs
       var $label = null;
 
+      generate_id();
+
       function setState() {
         // change span.placeHolder to span.placeHolder.active
         var currentValue = $el.val();
@@ -43,24 +45,18 @@
       }
 
       /**
-       * Generate a unique id
-       * @return {string} id generated
+       * Generate a unique id if element not has one
        */
       function generate_id() {
-        // if window don't have UUID, create with 1, else append one each time
-        !('JVFLOAT_UUID' in window) ? window.JVFLOAT_UUID = 1 : window.JVFLOAT_UUID += 1;
 
-        return [namespace, window.JVFLOAT_UUID].join('__');
+        if (!el.getAttribute('id')) {
 
-      }
+          // if window don't have UUID, create with 1, else append one each time
+          !('JVFLOAT_UUID' in window) ? window.JVFLOAT_UUID = 1 : window.JVFLOAT_UUID += 1;
 
-      function createIdOnElement($el) {
-        var id = generate_id();
-        $el.prop('id', id);
-        return id;
-      }
-      if (!el.getAttribute('id')) {
-        el.setAttribute('id', createIdOnElement($el));
+          el.setAttribute('id', [namespace, window.JVFLOAT_UUID].join('__'));
+
+        }
       }
 
       $label = $('<label>', {

From 9b6b251612471effc64a9f380bc21c683e6f2bb0 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 02:33:39 -0200
Subject: [PATCH 08/10] use "tagName" to check if is supported element,
 "filter" is more slow

---
 jvfloat.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/jvfloat.js b/jvfloat.js
index 3ca2ad3..6677c7d 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -11,14 +11,18 @@
   // Init Plugin Functions
   $.fn.jvFloat = function _jv_float_plugin() {
     // Check input type - filter submit buttons.
-    return this.filter('input:not([type=submit]), textarea, select').each(function _jv_float_each() {
-      var $el = $(this),
+    return this.each(function _jv_float_each() {
+      var
+        $el = $(this),
         el = $el[0], // native element
         placeholder = el.getAttribute("placeholder") || el.getAttribute("title"), // get placeholder with native function
-        forId = $el.attr('id'),
-
         // added `required` input detection and state
-        required = $el.attr('required') || '';
+        required = el.getAttribute('required') || '';
+
+      // use tagName to define supported elements
+      if (!(~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName)) || el.getAttribute('type') == 'submit') {
+        return false;
+      }
 
       // Wrap the input in div.jvFloat
       $el.wrap('<div class=jvFloat>');

From f61bb8e8ec40020b043f9592bc73f55bea0bfc43 Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 02:44:58 -0200
Subject: [PATCH 09/10] added a way to use with pre-existing html model

---
 demo/index.html |  7 ++++++-
 jvfloat.js      | 49 +++++++++++++++++++++++++++++++++----------------
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 89e0b0e..6e85768 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -14,6 +14,11 @@
     <input type="text" placeholder="Username">
     <input type="text" placeholder="Required" required>
     <input type="text" placeholder="Has ID" id="testid">
+    <div class='jvFloat'>
+      <!-- i have a correct html model -->
+      <label></label>
+      <input type="text" placeholder="Has ID" id="testid">
+    </div>
     <textarea placeholder="Textarea!"></textarea>
     <textarea placeholder="Textarea with id!" id="textarea"></textarea>
     <input type="submit">
@@ -21,4 +26,4 @@
 <script>
 	$('input, textarea').jvFloat();
 </script>
-</html>
\ No newline at end of file
+</html>
diff --git a/jvfloat.js b/jvfloat.js
index 6677c7d..d66f34e 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -12,26 +12,48 @@
   $.fn.jvFloat = function _jv_float_plugin() {
     // Check input type - filter submit buttons.
     return this.each(function _jv_float_each() {
+      // create basic variables
       var
         $el = $(this),
-        el = $el[0], // native element
+        el = $el[0]; // native element
+
+      // use tagName to define supported elements, if unsuported, break
+      if (!(~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName)) || el.getAttribute('type') == 'submit') {
+        return false;
+      }
+
+      // fix properties
+      generate_id();
+
+      // generate complete base structure
+      var
+        $parent = $el.parent('div.jvFloat'),
+        $label = $parent.find('label.placeHolder[for="' + el.getAttribute('id') + '"]'),
         placeholder = el.getAttribute("placeholder") || el.getAttribute("title"), // get placeholder with native function
         // added `required` input detection and state
         required = el.getAttribute('required') || '';
 
-      // use tagName to define supported elements
-      if (!(~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName)) || el.getAttribute('type') == 'submit') {
-        return false;
+      // if parent div don't exists, create it
+      if ($parent.length == 0) {
+        // Wrap the input in div.jvFloat
+        $parent = $el.wrap('<div class=jvFloat>').parent('.jvFloat');
       }
 
-      // Wrap the input in div.jvFloat
-      $el.wrap('<div class=jvFloat>');
+      // if label for element don't exists, create it
+      if ($label.length == 0) {
 
-      // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) 
-      // to allow better positioning of the element for multiline text area inputs
-      var $label = null;
+        // adds a different class tag for text areas (.jvFloat .placeHolder.textarea) 
+        // to allow better positioning of the element for multiline text area inputs
+        $label = $('<label>', {
+          "class": 'placeHolder ' + (el.tagName == 'TEXTAREA' ? 'textarea' : '') + required,
+          "for": el.getAttribute('id'),
+          "text": placeholder
+        });
+
+        $parent.prepend($label);
+
+      }
 
-      generate_id();
 
       function setState() {
         // change span.placeHolder to span.placeHolder.active
@@ -63,13 +85,8 @@
         }
       }
 
-      $label = $('<label>', {
-        "class": 'placeHolder ' + (el.tagName == 'TEXTAREA' ? 'textarea' : '') + required,
-        "for": el.getAttribute('id'),
-        "text": placeholder
-      });
 
-      $label.insertBefore($el);
+
 
       // checks to see if inputs are pre-populated and adds active to span.placeholder
       setState();

From af6909f0ce618753ecd04eec858fd7880d17cafa Mon Sep 17 00:00:00 2001
From: Luis Felipe <luis.kaufmann.silva@gmail.com>
Date: Mon, 20 Oct 2014 13:36:03 -0200
Subject: [PATCH 10/10] added "visible" class name when element has content

---
 demo/index.html | 10 ++++++++--
 jvfloat.css     |  4 ++++
 jvfloat.js      | 25 +++++++++++--------------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 6e85768..ee8e195 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -14,9 +14,15 @@
     <input type="text" placeholder="Username">
     <input type="text" placeholder="Required" required>
     <input type="text" placeholder="Has ID" id="testid">
+    <input type="text" placeholder="Has ID" value='ll'>
+    <select name="my_select" title='My select'>
+      <option value="" selected> My select </option>
+      <option value="01">AA</option>
+      <option value="02">BB</option>
+    </select>
     <div class='jvFloat'>
       <!-- i have a correct html model -->
-      <label></label>
+      <label class=''></label>
       <input type="text" placeholder="Has ID" id="testid">
     </div>
     <textarea placeholder="Textarea!"></textarea>
@@ -24,6 +30,6 @@
     <input type="submit">
 </body>
 <script>
-	$('input, textarea').jvFloat();
+	$('input, textarea, select').jvFloat();
 </script>
 </html>
diff --git a/jvfloat.css b/jvfloat.css
index 41107cd..cdc7cfc 100644
--- a/jvfloat.css
+++ b/jvfloat.css
@@ -52,6 +52,10 @@
 	transition: transform 100ms, opacity 120ms, visibility 120ms;
 	opacity: 1;
 }
+.jvFloat .placeHolder.visible {
+	color: #333333;
+}
+
 /* End CSS3 */
 
 /* Legacy browser */
diff --git a/jvfloat.js b/jvfloat.js
index d66f34e..1f7686e 100644
--- a/jvfloat.js
+++ b/jvfloat.js
@@ -55,19 +55,19 @@
       }
 
 
-      function setState() {
+      function setState(ev) {
         // change span.placeHolder to span.placeHolder.active
-        var currentValue = $el.val();
-
-        if (currentValue == null) {
-          currentValue = '';
-        } else if ($el.is('select')) {
-          if (placeholder == currentValue) {
-            currentValue = '';
-          }
+        var currentValue = $el.val() || '',
+          toggle = currentValue !== '';
+
+        if (ev && ev.type == 'blur' || !ev) {
+          $label.toggleClass('visible', toggle);
+        } else if (ev.type == 'keyup') {
+          $label.removeClass('visible');
+
         }
 
-        $label.toggleClass('active', currentValue !== '');
+        $label.toggleClass('active', toggle);
       }
 
       /**
@@ -85,12 +85,9 @@
         }
       }
 
-
-
-
       // checks to see if inputs are pre-populated and adds active to span.placeholder
       setState();
-      $el.bind('keyup blur', setState);
+      $el.bind('keyup blur change', setState);
     });
   };
   // Make Zeptojs & jQuery Compatible