Split out re-used JavaScript for common functions (messages, valign), panel toggle, and forms to external files.

8 files changed, 169 insertions, 188 deletions

diff --git a/lib/gallery.common.js b/lib/gallery.common.js
new file mode 100644
index 00000000..bb2e75a2
--- /dev/null
+++ b/lib/gallery.common.js
@@ -0,0 +1,30 @@
+/**
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+(function () {
+  $.fn.showMessage = function(message) {
+    return this.each(function(i){
+      $(this).effect("highlight", {"color": "white"}, 3000);
+      $(this).animate({opacity: 1.0}, 6000);
+      $(this).fadeOut("slow");
+    });
+  };
+})(jQuery);
+
+// Vertically align a block element's content
+(function () {
+  $.fn.vAlign = function(container) {
+    return this.each(function(i){
+      if (container == null) {
+        container = 'div';
+      }
+      $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
+      var el = $(this).children(container + ":first");
+      var elh = $(el).height();
+      var ph = $(this).height();
+      var nh = (ph - elh) / 2;
+      $(el).css('margin-top', nh);
+    });
+  };
+})(jQuery);
diff --git a/lib/gallery.form.js b/lib/gallery.form.js
new file mode 100644
index 00000000..e69be326
--- /dev/null
+++ b/lib/gallery.form.js
@@ -0,0 +1,42 @@
+/**
+ * Handle initialization of all short forms
+ *
+ * @param shortForms array 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 formID string The form's ID, including #
+ */
+function shortFormInit(formID) {
+  $(formID).addClass("gShortForm");
+
+  // 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
+  if ($(inputID).val() == "") {
+    $(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);
+    }
+  });
+}
diff --git a/lib/gallery.panel.js b/lib/gallery.panel.js
new file mode 100644
index 00000000..6ac50615
--- /dev/null
+++ b/lib/gallery.panel.js
@@ -0,0 +1,64 @@
+/**
+ * Fire togglePanel() and prevent links from opening
+ * @see openDialog()
+ */
+function handlePanelEvent(event) {
+  togglePanel(event.currentTarget);
+  event.preventDefault();
+}
+
+function togglePanel(element, on_success) {
+  var parent = $(element).parent().parent();
+  var sHref = $(element).attr("href");
+  var parentClass = $(parent).attr("class");
+  var ePanel = "<tr id=\"gPanel\"><td colspan=\"6\"></td></tr>";
+
+  if ($("#gPanel").length) {
+    $("#gPanel").slideUp("slow");
+    $("#gPanel *").remove();
+    $("#gPanel").remove();
+    if ($(element).attr("orig_text")) {
+       $(element).children(".gButtonText").text($(element).attr("orig_text"));
+    }
+    console.log("Removing existing #gPanel");
+    //togglePanel(element, on_success);
+  } else {
+    console.log("Adding #gPanel");
+    $(parent).after(ePanel);
+    //showLoading("#here");
+    $("#gPanel td").html(sHref);
+    $("#gPanel").addClass(parentClass).show().slideDown("slow");
+    $.get(sHref, function(data) {
+      $("#gPanel td").html(data);
+      ajaxify_panel = function() {
+        $("#gPanel td form").ajaxForm({
+          dataType: "json",
+          success: function(data) {
+            if (data.form) {
+              $("#gPanel td form").replaceWith(data.form);
+              ajaxify_panel();
+            }
+            if (data.result == "success") {
+              if (on_success) {
+                on_success();
+              } else if (data.location) {
+                window.location = data.location;
+              } else {
+                window.location.reload();
+              }
+            }
+          }
+        });
+        if ($("#gPanel td").hasClass("gLoadingLarge")) {
+          showLoading("#gPanel td");
+        }
+      };
+      ajaxify_panel();
+      if ($(element).attr("open_text")) {
+        $(element).attr("orig_text", $(element).children(".gButtonText").text());
+        $(element).children(".gButtonText").text($(element).attr("open_text"));
+      }
+    });
+  }
+  return false;
+}
diff --git a/modules/user/views/admin_users.html.php b/modules/user/views/admin_users.html.php
index 4eef52f7..5e18dc57 100644
--- a/modules/user/views/admin_users.html.php
+++ b/modules/user/views/admin_users.html.php
@@ -1,4 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<script src="<?= url::file("lib/gallery.panel.js") ?>" type="text/javascript"></script>
 <script type="text/javascript">
   var add_user_to_group_url = "<?= url::site("admin/users/add_user_to_group/__USERID__/__GROUPID__?csrf=$csrf") ?>";
   $(document).ready(function(){
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js
index 441a7d65..3f062a27 100644
--- a/themes/admin_default/js/ui.init.js
+++ b/themes/admin_default/js/ui.init.js
@@ -1,9 +1,8 @@
 $(document).ready(function(){
-  // Add Superfish menu class
+  
+  // Initialize Superfish menus
   $("#gSiteAdminMenu ul.gMenu").addClass("sf-menu");
   $("ul.gMenu").addClass("sf-menu");
-
-  // Superfish menu options
   $("ul.sf-menu").superfish({
     delay: 500,
     animation: {
@@ -15,20 +14,26 @@ $(document).ready(function(){
   });
   $("#gSiteAdminMenu").css("display", "block");
 
-  // Apply modal dialogs
+  // Initialize status message effects
+  $("#gMessage li").showMessage();
+
+  // Initialize modal dialogs
   var dialogLinks = $(".gDialogLink");
   for (var i=0; i < dialogLinks.length; i++) {
     $(dialogLinks[i]).bind("click", handleDialogEvent);
   }
 
+  // Initialize panels
+  var panelLinks = $(".gPanelLink");
+  for (i=0; i<panelLinks.length; i++) {
+    $(panelLinks[i]).bind("click", handlePanelEvent);
+  }
+
   if ($("#gPhotoStream").length) {
     // Vertically align thumbs in photostream
     $(".gItem").vAlign();
   }
 
-  // Apply status message effect
-  $("#gMessage li").showMessage();
-
   // Apply jQuery UI button css to submit inputs
   $("input[type=submit]:not(.gShortForm input)").addClass("ui-state-default ui-corner-all");
 
@@ -41,12 +46,6 @@ $(document).ready(function(){
     $("#gAdminCommentsMenu ul li:last a").addClass("ui-corner-right");
   }
 
-  // Apply hide/show functionality on user admin view
-  var panelLinks = $(".gPanelLink");
-  for (i=0; i<panelLinks.length; i++) {
-    $(panelLinks[i]).bind("click", handlePanelEvent);
-  }
-
   // Round corners
   $(".gSelected").addClass("ui-corner-all");
   $(".gAvailable .gBlock").addClass("ui-corner-all");
@@ -65,91 +64,3 @@ $(document).ready(function(){
     }
   );
 });
-
-function handlePanelEvent(event) {
-  togglePanel(event.currentTarget);
-  event.preventDefault();
-}
-
-function togglePanel(element, on_success) {
-  var parent = $(element).parent().parent();
-  var sHref = $(element).attr("href");
-  var parentClass = $(parent).attr("class");
-  var ePanel = "<tr id=\"gPanel\"><td colspan=\"6\"></td></tr>";
-
-  if ($("#gPanel").length) {
-    $("#gPanel").slideUp("slow");
-    $("#gPanel *").remove();
-    $("#gPanel").remove();
-    if ($(element).attr("orig_text")) {
-       $(element).children(".gButtonText").text($(element).attr("orig_text"));
-    }
-    console.log("Removing existing #gPanel");
-    //togglePanel(element, on_success);
-  } else {
-    console.log("Adding #gPanel");
-    $(parent).after(ePanel);
-    //showLoading("#here");
-    $("#gPanel td").html(sHref);
-    $("#gPanel").addClass(parentClass).show().slideDown("slow");
-    $.get(sHref, function(data) {
-      $("#gPanel td").html(data);
-      ajaxify_panel = function() {
-        $("#gPanel td form").ajaxForm({
-          dataType: "json",
-          success: function(data) {
-            if (data.form) {
-              $("#gPanel td form").replaceWith(data.form);
-              ajaxify_panel();
-            }
-            if (data.result == "success") {
-              if (on_success) {
-                on_success();
-              } else if (data.location) {
-                window.location = data.location;
-              } else {
-                window.location.reload();
-              }
-            }
-          }
-        });
-        if ($("#gPanel td").hasClass("gLoadingLarge")) {
-          showLoading("#gPanel td");
-        }
-      };
-      ajaxify_panel();
-      if ($(element).attr("open_text")) {
-        $(element).attr("orig_text", $(element).children(".gButtonText").text());
-        $(element).children(".gButtonText").text($(element).attr("open_text"));
-      }
-    });
-  }
-  return false;
-}
-
-// Vertically align a block element's content
-(function () {
-  $.fn.vAlign = function(container) {
-    return this.each(function(i){
-      if (container == null) {
-        container = "div";
-      }
-      $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
-      var el = $(this).children(container + ":first");
-      var elh = $(el).height();
-      var ph = $(this).height();
-      var nh = (ph - elh) / 2;
-      $(el).css("margin-top", nh);
-    });
-  };
-})(jQuery);
-
-(function () {
-  $.fn.showMessage = function(message) {
-    return this.each(function(i){
-      $(this).effect("highlight", {"color": "white"}, 3000);
-      $(this).animate({opacity: 1.0}, 6000);
-      $(this).fadeOut("slow");
-    });
-  };
-})(jQuery);
diff --git a/themes/admin_default/views/admin.html.php b/themes/admin_default/views/admin.html.php
index 062c55c9..25d73169 100644
--- a/themes/admin_default/views/admin.html.php
+++ b/themes/admin_default/views/admin.html.php
@@ -23,6 +23,7 @@
     <script src="<?= url::file("lib/jquery.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/jquery.form.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/jquery-ui.js") ?>" type="text/javascript"></script>
+    <script src="<?= url::file("lib/gallery.common.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/gallery.dialog.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/superfish/js/superfish.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("js/jquery.dropshadow.js") ?>" type="text/javascript"></script>
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 47b7bcb9..ae6f1966 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -1,7 +1,8 @@
 /**
  * Initialize jQuery UI and Plugin elements
  *
- * @todo Standardize how elements requiring listeners are identified (class or id)
+ * @todo Standardize how elements requiring listeners are handled
+ *        http://docs.jquery.com/Events/live
  */
 
 var shortForms = new Array(
@@ -11,10 +12,9 @@ var shortForms = new Array(
 );
 
 $(document).ready(function() {
-  // Initialize menus
+  
+  // Initialize Superfish menus
   $("ul.gMenu").addClass("sf-menu");
-
-  // Superfish menu options
   $('ul.sf-menu').superfish({
     delay: 500,
     animation: {
@@ -25,13 +25,24 @@ $(document).ready(function() {
   });
   $("#gSiteMenu").css("display", "block");
 
-  // Round view menu buttons
+  // Initialize status message effects
+  $("#gMessage li").showMessage();
+
+  // Initialize dialogs
+  $(".gMenuLink").addClass("gDialogLink");
+  $("#gLoginLink").addClass("gDialogLink");
+  var dialogLinks = $(".gDialogLink");
+  for (var i=0; i < dialogLinks.length; i++) {
+    $(dialogLinks[i]).bind("click", handleDialogEvent);
+  }
+
+  // Initialize view menu
   if ($("#gViewMenu").length) {
     $("#gViewMenu ul").removeClass("gMenu").removeClass("sf-menu");
     $("#gViewMenu a").addClass("ui-icon");
   }
 
-  // Short forms
+  // Initialize short forms
   handleShortFormEvent(shortForms);
   $(".gShortForm input[type=text]").addClass("ui-corner-left");
   $(".gShortForm input[type=submit]").addClass("ui-state-default ui-corner-right");
@@ -45,9 +56,6 @@ $(document).ready(function() {
     $(".gItem").vAlign();
   }
 
-  // Apply status message effect
-  $("#gMessage li").showMessage();
-
   // Photo/Item item view only
   if ($("#gItem").length) {
     // Ensure that sized image versions
@@ -73,14 +81,6 @@ $(document).ready(function() {
 
   }
 
-  // Apply modal dialogs
-  $(".gMenuLink").addClass("gDialogLink");
-  $("#gLoginLink").addClass("gDialogLink");
-  var dialogLinks = $(".gDialogLink");
-  for (var i=0; i < dialogLinks.length; i++) {
-    $(dialogLinks[i]).bind("click", handleDialogEvent);
-  }
-
   // Add hover state for buttons
   $(".ui-state-default").hover(
     function(){
@@ -93,23 +93,6 @@ $(document).ready(function() {
 
 });
 
-// Vertically align a block element's content
-(function () {
-  $.fn.vAlign = function(container) {
-    return this.each(function(i){
-      if (container == null) {
-        container = 'div';
-      }
-      $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
-      var el = $(this).children(container + ":first");
-      var elh = $(el).height();
-      var ph = $(this).height();
-      var nh = (ph - elh) / 2;
-      $(el).css('margin-top', nh);
-    });
-  };
-})(jQuery);
-
 /**
  * Reduce width of sized photo if it's wider than its parent container
  */
@@ -124,56 +107,3 @@ function sizedImage() {
     oPhoto.height(proportion * oPhoto.height());
   }
 }
-
-/**
- * Handle initialization of all short forms
- *
- * @param shortForms array 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 formID string The form's ID, including #
- */
-function shortFormInit(formID) {
-  $(formID).addClass("gShortForm");
-
-  // 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
-  if ($(inputID).val() == "") {
-    $(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);
-    }
-  });
-
-  (function () {
-    $.fn.showMessage = function(message) {
-      return this.each(function(i){
-        $(this).effect("highlight", {"color": "white"}, 3000);
-        $(this).animate({opacity: 1.0}, 6000);
-        $(this).fadeOut("slow");
-      });
-    };
-  })(jQuery);
-}
diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php
index e9672dcb..fc61f52d 100644
--- a/themes/default/views/page.html.php
+++ b/themes/default/views/page.html.php
@@ -44,7 +44,9 @@
     <script src="<?= url::file("lib/jquery.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/jquery.form.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/jquery-ui.js") ?>" type="text/javascript"></script>
+    <script src="<?= url::file("lib/gallery.common.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/gallery.dialog.js") ?>" type="text/javascript"></script>
+    <script src="<?= url::file("lib/gallery.form.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/superfish/js/superfish.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("js/jquery.scrollTo.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("js/jquery.localscroll.js") ?>" type="text/javascript"></script>