Drop .gShortForm in favor of using specific form ids (gSearchForm, gAddTagForm). This maintains styles when forms are are reloaded into the DOM. Haven't figured out how to fire shortFormInit() when a form is reloaded into the DOM, as gAddTagForm is :(

2 files changed, 59 insertions, 36 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 1b2e8001..ffb7a8b0 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -14,7 +14,6 @@
  * 8)  jQuery and jQuery UI
  *
  * @todo Group Credits and gLoginMenu seperator styles
- * @todo Drop .gShortForm in favor of styling specific IDs (gSearchForm, gAddTagForm)
  * @todo Apply :hover bg image to #gViewMenu (will clear fix correct this?)
  * @todo Refactor form layout styles to reserve room for validation messages in default state. This 
  *       will eliminate layout shifts when validation messages are displayed.
@@ -281,21 +280,26 @@ li.gError select {
 
 /* Inline layout (forms, lists) ~~~~~~~~~~ */
 
-.gShortForm li {
+#gHeader #gSearchForm li,
+#gSidebar #gAddTagForm li {
   float: left;
   padding: .4em .5em;
 }
 
-.gShortForm legend,
-.gShortForm label {
+#gHeader #gSearchForm legend,
+#gHeader #gSearchForm  label,
+#gSidebar #gAddTagForm legend,
+#gSidebar #gAddTagForm  label {
   display: none;
 }
 
-.gShortForm fieldset {
+#gHeader #gSearchForm fieldset,
+#gSidebar #gAddTagForm fieldset {
   border: none;
 }
 
-.gShortForm input[type="text"] {
+#gHeader #gSearchForm input[type="text"],
+#gSidebar #gAddTagForm input[type="text"] {
   width: 10em;
 }
 
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index cb9fa07c..c282ce74 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -1,6 +1,14 @@
 /**
  * Initialize jQuery UI and Plugin elements
+ * 
+ * @todo Standardize how elements requiring listeners are identified (class or id)
  */
+
+var shortForms = new Array(
+  "#gSearchForm",
+  "#gAddTagForm"
+);
+
 $("document").ready(function() {
 
   // Vertical align thumbnails/metadata in album grid
@@ -49,36 +57,8 @@ $("document").ready(function() {
   };
 
   // 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);
-      }
-    });
-  };
-
+  handleShortFormEvent(shortForms);
+  
 });
 
 // Vertically align a block element's content
@@ -179,6 +159,45 @@ function openDialog(element) {
 }
 
 /**
+ * Handle initialization of all short forms
+ *
+ * @param array shortForms Array of short form IDs
+ */
+function handleShortFormEvent(shortForms) {
+  for (var i in shortForms) {      
+    shortFormInit(shortForms[i]);
+  }
+}
+ 
+/**
+ * Initialize a short form. Short forms may contain only one text input.
+ *
+ * @param string formID The form's ID, including #
+ */
+function shortFormInit(formID) {
+  // Get the input ID and it's label text
+  var labelValue = $(formID + " label:first").html();
+  var inputID = "#" + $(formID + " input[type='text']:first").attr("id");
+ 
+  // Set the input value equal to label text
+  $(inputID).val(labelValue);
+  
+  // Attach event listeners to the input
+  $(inputID).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);
+    }
+  });
+}
+
+/**
  * Toggle the processing indicator, both large and small
  *
  * @param element ID to which to apply the loading class, including #