From 3c05b95620f46c7042471371a3cab9d87f7da75e Mon Sep 17 00:00:00 2001
From: Chad Kieffer <chad@2tbsp.com>
Date: Wed, 17 Dec 2008 00:45:52 +0000
Subject: Added JS to set/reset simple forms' input values to their
 corresponding labels' value. Labels should always be used with visible
 inputs. Use this to style and control short form input display and behavior.

---
 modules/search/views/search_link.html.php |  6 +++---
 themes/default/css/screen.css             | 25 ++++++++++++-------------
 themes/default/js/ui.init.js              | 31 +++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/modules/search/views/search_link.html.php b/modules/search/views/search_link.html.php
index 983742a3..2aa2d83b 100644
--- a/modules/search/views/search_link.html.php
+++ b/modules/search/views/search_link.html.php
@@ -2,11 +2,11 @@
 <form id="gSearchForm">
   <ul>
     <li>
-      <label for="search"><?= _("Search") ?></label>
-      <input type="text" name="search" value="<?= _("Search Gallery ...") ?>"/>
+      <label for="gSearch"><?= _("Search the gallery") ?></label>
+      <input type="text" name="search" id="gSearch"/>
     </li>
     <li>
-      <input type="submit" value="<?= _("search") ?>" />
+      <input type="submit" value="<?= _("Go") ?>" />
     </li>
   </ul>
 </form>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 9527debe..b24e7353 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -391,29 +391,28 @@ li.gError select {
 
 /* Inline layout (forms, lists) ~~~~~~~~~~ */
 
-#gHeader #gSearchForm li,
-#gSidebar #gAddTagForm li {
+.gShortForm li {
   float: left;
   padding: .4em .5em;
 }
 
-#gHeader #gSearchForm input[type="text"],
-#gSidebar #gAddTagForm input[type="text"] {
-  width: 10em;
+.gShortForm legend,
+.gShortForm label {
+  display: none;
 }
 
-#gHeader #gSearchForm {
-  float: right;
-  margin-right: 20px;
+
+.gShortForm fieldset {
+  border: none;
 }
 
-#gHeader #gSearchForm label,
-#gSidebar #gAddTagForm legend {
-  display: none;
+.gShortForm input[type="text"] {
+  width: 10em;
 }
 
-#gSidebar #gAddTagForm fieldset {
-  border: none;
+#gHeader #gSearchForm {
+  float: right;
+  margin-right: 20px;
 }
 
 /* Credits ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 5c75fb02..a7eb7931 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -42,6 +42,37 @@ $("document").ready(function() {
     $(dialogLinks[i]).bind("click", {element: dialogLinks[i]}, handleDialogEvent);
   };
   
+  // Declare which forms are short forms
+  $("#gHeader #gSearchForm").addClass("gShortForm");
+  $("#gSidebar #gAddTagForm").addClass("gShortForm");
+  
+  // Get the short forms
+  var shortForms = $(".gShortForm");
+  
+  // Set up short form behavior
+  for (var i=0; i < shortForms.length; i++) {
+    // Set variables
+    var shortFormID = "#" + $(shortForms[i]).attr("id");
+    var shortInputID = "#" + $(shortFormID + " input:first").attr("id");
+    var shortLabelValue = $(shortFormID + " label:first").html();
+    
+    // Set default input value equal to label text
+    $(shortInputID).val(shortLabelValue);
+    
+    // Attach event listeners to inputs
+    $(shortInputID).bind("focus blur", function(e){
+      var eLabelVal = $(this).siblings("label").html();
+      var eInputVal = $(this).val();
+      // Empty input value if it equals it's label
+      if (eLabelVal == eInputVal) {
+        $(this).val("");
+      // Reset the input value if it's empty
+      } else if ($(this).val() == "") {
+        $(this).val(eLabelVal);
+      }
+    });
+  };
+  
 });
 
 /**
-- 
cgit v1.2.3