From 212464f788529e9897b6e75669e1a0b20966182b Mon Sep 17 00:00:00 2001
From: Aaron Maturen <aaron.maturen@gmail.com>
Date: Wed, 23 May 2012 21:59:07 -0400
Subject: [PATCH] added inline labels

---
 css/style.css                 |   4 +-
 hooks/search.php              |  18 +++-
 js/jquery.infieldlabel.min.js | 153 ++++++++++++++++++++++++++++++++++
 3 files changed, 173 insertions(+), 2 deletions(-)
 create mode 100644 js/jquery.infieldlabel.min.js

diff --git a/css/style.css b/css/style.css
index 27fc678..34649b8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,5 @@
 .ResourcePanel {margin:5px;}
 .ResourcePanelSmall {margin:5px;}
-.chosen .ResourcePanel, .chosen .ResourcePanelSmall{border:5px solid hotPink; margin:1px 0;}
\ No newline at end of file
+.chosen .ResourcePanel, .chosen .ResourcePanelSmall{border:5px solid hotPink; margin:1px 0;}
+form#manipulateKeywords p { position:relative }
+form#manipulateKeywords label  { position:absolute; top:4px; left:4px; color:#ccc; cursor:text;}
\ No newline at end of file
diff --git a/hooks/search.php b/hooks/search.php
index 51ec74f..aa9d801 100644
--- a/hooks/search.php
+++ b/hooks/search.php
@@ -11,7 +11,12 @@ function HookInline_keywordsSearchSearchbarbottomtoolbar()
                 <p><?php echo $lang['keywordstoresource']; ?></p>
                 
                 <form id="manipulateKeywords">
-                  <input id="newKeywordsForSelectedResources" class="SearchWidth"/>
+                  <span class="wrap">
+                    <p>
+                        <label for='newKeywordsForSelectedResources'>Keywords</label>
+                        <input id='newKeywordsForSelectedResources' class='SearchWidth'/>
+                    </p>
+                  </span>
                   <input type="button" id="selectAllResourceButton" value="<?php echo $lang["selectall"]; ?>">
                   <input type="button" id="clearSelectedResourceButton" value="<?php echo $lang["unselectall"]; ?>">
                   <input type="button" id="submitSelectedResourceButton" value="<?php echo $lang["addkeywords"]; ?>">
@@ -26,8 +31,19 @@ function HookInline_keywordsSearchAdditionalheaderjs()
         global $baseurl, $inline_keywords_usertype, $inline_keywords_background_colour;
     if(checkperm($inline_keywords_usertype))
         { ?>
+            <script src="../plugins/inline_keywords/js/jquery.infieldlabel.min.js" type="text/javascript" charset="utf-8"></script>
             <script type='text/javascript'>
                 jQuery(document).ready(function() {
+                    jQuery('form#manipulateKeywords :text').focus(function(event){
+                        jQuery(this).siblings('label').fadeOut('fast');
+                    });
+
+                    jQuery('form#manipulateKeywords :text').blur(function(event){
+                        if(jQuery(this).val() === ""){
+                            jQuery(this).siblings('label').fadeIn('fast');                            
+                        }
+                    });
+                    
                     jQuery('.ResourcePanelShell, .ResourcePanelShellSmall').on('click', function(event) {
                         if(!(event.originalEvent.srcElement instanceof HTMLImageElement )){
                             //console.log(event.originalEvent.srcElement instance of HTMLImageElement);
diff --git a/js/jquery.infieldlabel.min.js b/js/jquery.infieldlabel.min.js
new file mode 100644
index 0000000..4b97340
--- /dev/null
+++ b/js/jquery.infieldlabel.min.js
@@ -0,0 +1,153 @@
+/**
+ * @license In-Field Label jQuery Plugin
+ * http://fuelyourcoding.com/scripts/infield.html
+ *
+ * Copyright (c) 2009-2010 Doug Neiner
+ * Dual licensed under the MIT and GPL licenses.
+ * Uses the same license as jQuery, see:
+ * http://docs.jquery.com/License
+ *
+ * @version 0.1.2
+ */
+(function (jQuery) {
+
+  jQuery.InFieldLabels = function (label, field, options) {
+    // To avoid scope issues, use 'base' instead of 'this'
+    // to reference this class from internal events and functions.
+    var base = this;
+  
+    // Access to jQuery and DOM versions of each element
+    base.jQuerylabel = jQuery(label);
+    base.label  = label;
+
+    base.jQueryfield = jQuery(field);
+    base.field  = field;
+
+    base.jQuerylabel.data("InFieldLabels", base);
+    base.showing = true;
+
+    base.init = function () {
+      // Merge supplied options with default options
+      base.options = jQuery.extend({}, jQuery.InFieldLabels.defaultOptions, options);
+
+      // Check if the field is already filled in
+      if (base.jQueryfield.val() !== "") {
+        base.jQuerylabel.hide();
+        base.showing = false;
+      }
+
+      base.jQueryfield.focus(function () {
+        base.fadeOnFocus();
+      }).blur(function () {
+        base.checkForEmpty(true);
+      }).bind('keydown.infieldlabel', function (e) {
+        // Use of a namespace (.infieldlabel) allows us to
+        // unbind just this method later
+        base.hideOnChange(e);
+      }).bind('paste', function (e) {
+        // Since you can not paste an empty string we can assume
+        // that the fieldis not empty and the label can be cleared.
+        base.setOpacity(0.0);
+      }).change(function (e) {
+        base.checkForEmpty();
+      }).bind('onPropertyChange', function () {
+        base.checkForEmpty();
+      });
+    };
+
+    // If the label is currently showing
+    // then fade it down to the amount
+    // specified in the settings
+    base.fadeOnFocus = function () {
+      if (base.showing) {
+        base.setOpacity(base.options.fadeOpacity);
+      }
+    };
+
+    base.setOpacity = function (opacity) {
+      base.jQuerylabel.stop().animate({ opacity: opacity }, base.options.fadeDuration);
+      base.showing = (opacity > 0.0);
+    };
+
+    // Checks for empty as a fail safe
+    // set blur to true when passing from
+    // the blur event
+    base.checkForEmpty = function (blur) {
+      if (base.jQueryfield.val() === "") {
+        base.prepForShow();
+        base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
+      } else {
+        base.setOpacity(0.0);
+      }
+    };
+
+    base.prepForShow = function (e) {
+      if (!base.showing) {
+        // Prepare for a animate in...
+        base.jQuerylabel.css({opacity: 0.0}).show();
+
+        // Reattach the keydown event
+        base.jQueryfield.bind('keydown.infieldlabel', function (e) {
+          base.hideOnChange(e);
+        });
+      }
+    };
+
+    base.hideOnChange = function (e) {
+      if (
+          (e.keyCode === 16) || // Skip Shift
+          (e.keyCode === 9) // Skip Tab
+        ) {
+        return; 
+      }
+
+      if (base.showing) {
+        base.jQuerylabel.hide();
+        base.showing = false;
+      }
+
+      // Remove keydown event to save on CPU processing
+      base.jQueryfield.unbind('keydown.infieldlabel');
+    };
+
+    // Run the initialization method
+    base.init();
+  };
+
+  jQuery.InFieldLabels.defaultOptions = {
+    fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
+    fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
+  };
+
+
+  jQuery.fn.inFieldLabels = function (options) {
+    return this.each(function () {
+      // Find input or textarea based on for= attribute
+      // The for attribute on the label must contain the ID
+      // of the input or textarea element
+      var for_attr = jQuery(this).attr('for'), jQueryfield;
+      if (!for_attr) {
+        return; // Nothing to attach, since the for field wasn't used
+      }
+
+      // Find the referenced input or textarea element
+      jQueryfield = jQuery(
+        "input#" + for_attr + "[type='text']," + 
+        "input#" + for_attr + "[type='search']," + 
+        "input#" + for_attr + "[type='tel']," + 
+        "input#" + for_attr + "[type='url']," + 
+        "input#" + for_attr + "[type='email']," + 
+        "input#" + for_attr + "[type='password']," + 
+        "textarea#" + for_attr
+      );
+
+      if (jQueryfield.length === 0) {
+        return; // Again, nothing to attach
+      } 
+
+      // Only create object for input[text], input[password], or textarea
+      (new jQuery.InFieldLabels(this, jQueryfield[0], options));
+    });
+  };
+
+}(jQuery));
\ No newline at end of file