Refactor common dialog JS code out into lib/gallery.dialog.js

5 files changed, 109 insertions, 215 deletions

diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js
new file mode 100644
index 00000000..0da04757
--- /dev/null
+++ b/lib/gallery.dialog.js
@@ -0,0 +1,104 @@
+/**
+ * Fire openDialog() and prevent links from opening
+ *
+ * @see openDialog()
+ */
+function handleDialogEvent(event) {
+  openDialog(event.data.element);
+  event.preventDefault();
+}
+
+/**
+ * Display modal dialogs, populate dialog with trigger link's title and href
+ *
+ * @requires ui.core
+ * @requires ui.draggable
+ * @requires ui.resizable
+ * @requires ui.dialog
+ * @see handleDialogEvent()
+ *
+ * @todo Set ui-dialog-buttonpane button values equal to the original form button value
+ * @todo Display loading animation on form submit
+ */
+function openDialog(element) {
+  var sHref = $(element).attr("href");
+  var sTitle = $(element).attr("title");
+  var eDialog = '<div id="gDialog"></div>';
+
+  $("body").append(eDialog);
+  var buttons = {};
+  buttons["Submit"] = function() {
+    $("#gDialog form").ajaxForm({
+      dataType: "json",
+      success: function(data) {
+        if (data.form) {
+          $("#gDialog form").replaceWith(data.form);
+        }
+        if (data.result == "success") {
+          $("#gDialog").dialog("close");
+          if (data.location) {
+            window.location = data.location;
+          } else {
+            window.location.reload();
+          }
+        }
+      }
+    }).submit();
+  };
+  buttons["Reset"] = function() {
+    $("#gDialog form").resetForm();
+  };
+
+  $("#gDialog").dialog({
+    autoResize: false,
+    draggable: true,
+    height: $(window).height() - 40,
+    modal: true,
+    overlay: {
+      opacity: 0.7,
+      background: "black"
+    },
+    resizable: true,
+    title: sTitle,
+    width: 600,
+    buttons: buttons,
+    close: function (event, ui) {
+      $("#gDialog").dialog('destroy').remove();
+    }
+  });
+  loading("#gDialog");
+  $(".ui-dialog-content").height(400);
+  $("#gDialog").html(sHref);
+  $.get(sHref, function(data) {
+    loading("#gDialog");
+    $("#gDialog").html(data).hide().fadeIn();
+    // Get dialog and it's contents' height
+    var contentHt =  $(".ui-dialog-titlebar").height()
+        + $(".ui-dialog-content form").height()
+        + $(".ui-dialog-buttonpane").height()
+        + 60;
+    // Resize height if content's shorter than dialog
+    if (contentHt < $("#gDialog").data("height.dialog")) {
+      $(".ui-dialog").animate({height: contentHt});
+    };
+  });
+  return false;
+}
+
+/**
+ * Toggle the processing indicator, both large and small
+ *
+ * @param element ID to which to apply the loading class, including #
+ */
+function loading(element) {
+  var size;
+  switch (element) {
+    case "#gDialog":
+      size = "Large";
+      break;
+    default:
+      size = "Small";
+      break;
+  }
+  $(element).toggleClass("gLoading" + size);
+}
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js
index 748fde7f..49a18669 100644
--- a/themes/admin_default/js/ui.init.js
+++ b/themes/admin_default/js/ui.init.js
@@ -22,111 +22,3 @@ $(document).ready(function(){
     $(dialogLinks[i]).bind("click", {element: dialogLinks[i]}, handleDialogEvent);
   };
 });
-
-/**
- * Fire openDialog() and prevent links from opening
- *
- * @see openDialog()
- */
-function handleDialogEvent(event) {
-  openDialog(event.data.element);
-  event.preventDefault();
-}
-
-/**
- * Display modal dialogs, populate dialog with trigger link's title and href
- *
- * @requires ui.core
- * @requires ui.draggable
- * @requires ui.resizable
- * @requires ui.dialog
- * @see handleDialogEvent()
- *
- * @todo Set dialog attributes dynamically (width, height, drag, resize)
- * @todo Set ui-dialog-buttonpane button values equal to the original form button value
- * @todo Display loading animation on form submit
- */
-function openDialog(element) {
-  var sHref = $(element).attr("href");
-  var sTitle = $(element).attr("title");
-  var eDialog = '<div id="gDialog"></div>';
-
-  $("body").append(eDialog);
-  var buttons = {};
-  buttons["Submit"] = function() {
-    $("#gDialog form").ajaxForm({
-      dataType: "json",
-      success: function(data) {
-	if (data.form) {
-          $("#gDialog form").replaceWith(data.form);
-	}
-	if (data.result == "success") {
-          $("#gDialog").dialog("close");
-	  if (data.location) {
-	    window.location = data.location;
-	  } else {
-	    window.location.reload();
-	  }
-	}
-      }
-    }).submit();
-  };
-  buttons["Reset"] = function() {
-    $("#gDialog form").resetForm();
-  };
-
-  $("#gDialog").dialog({
-    autoResize: false,
-    draggable: true,
-    height: $(window).height() - 40,
-    modal: true,
-    overlay: {
-      opacity: 0.7,
-      background: "black"
-    },
-    resizable: true,
-    title: sTitle,
-    width: 600,
-    buttons: buttons,
-    close: function (event, ui) {
-      $("#gDialog").dialog('destroy').remove();
-    }
-  });
-  loading("#gDialog");
-  $(".ui-dialog-content").height(400);
-  $("#gDialog").html(sHref);
-  $.get(sHref, function(data) {
-    loading("#gDialog");
-    $("#gDialog").html(data).hide().fadeIn();
-    // Get dialog and it's contents' height
-    var contentHt =  $(".ui-dialog-titlebar").height()
-        + $(".ui-dialog-content form").height()
-        + $(".ui-dialog-buttonpane").height()
-        + 60;
-    // Resize height if content's shorter than dialog
-    if (contentHt < $("#gDialog").data("height.dialog")) {
-      $(".ui-dialog").animate({height: contentHt});
-    };
-  });
-  return false;
-}
-
-
-/**
- * Toggle the processing indicator, both large and small
- *
- * @param element ID to which to apply the loading class, including #
- * @param size Either Large or Small
- */
-function loading(element) {
-  var size;
-  switch (element) {
-  	case "#gDialog":
-  		size = "Large";
-  		break;
-  	default:
-		size = "Small";
-		break;
-  }
-  $(element).toggleClass("gLoading" + size);
-}
diff --git a/themes/admin_default/views/admin.html.php b/themes/admin_default/views/admin.html.php
index a6311a31..541d4e35 100644
--- a/themes/admin_default/views/admin.html.php
+++ b/themes/admin_default/views/admin.html.php
@@ -18,9 +18,10 @@
     <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.dialog.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("js/superfish.js") ?>" type="text/javascript"></script>
-    <?= $theme->admin_head() ?>
     <script src="<?= $theme->url("js/ui.init.js") ?>" type="text/javascript"></script>
+    <?= $theme->admin_head() ?>
   </head>
 
   <body>
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index d64db1ee..32ee0979 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -76,93 +76,6 @@ function sizedImage() {
 }
 
 /**
- * Fire openDialog() and prevent links from opening
- *
- * @see openDialog()
- */
-function handleDialogEvent(event) {
-  openDialog(event.data.element);
-  event.preventDefault();
-}
-
-/**
- * Display modal dialogs, populate dialog with trigger link's title and href
- *
- * @requires ui.core
- * @requires ui.draggable
- * @requires ui.resizable
- * @requires ui.dialog
- * @see handleDialogEvent()
- *
- * @todo Set ui-dialog-buttonpane button values equal to the original form button value
- * @todo Display loading animation on form submit
- */
-function openDialog(element) {
-  var sHref = $(element).attr("href");
-  var sTitle = $(element).attr("title");
-  var eDialog = '<div id="gDialog"></div>';
-
-  $("body").append(eDialog);
-  var buttons = {};
-  buttons["Submit"] = function() {
-    $("#gDialog form").ajaxForm({
-      dataType: "json",
-      success: function(data) {
-        if (data.form) {
-          $("#gDialog form").replaceWith(data.form);
-        }
-        if (data.result == "success") {
-          $("#gDialog").dialog("close");
-          if (data.location) {
-            window.location = data.location;
-          } else {
-            window.location.reload();
-          }
-        }
-      }
-    }).submit();
-  };
-  buttons["Reset"] = function() {
-    $("#gDialog form").resetForm();
-  };
-
-  $("#gDialog").dialog({
-    autoResize: false,
-    draggable: true,
-    height: $(window).height() - 40,
-    modal: true,
-    overlay: {
-      opacity: 0.7,
-      background: "black"
-    },
-    resizable: true,
-    title: sTitle,
-    width: 600,
-    buttons: buttons,
-    close: function (event, ui) {
-      $("#gDialog").dialog('destroy').remove();
-    }
-  });
-  loading("#gDialog");
-  $(".ui-dialog-content").height(400);
-  $("#gDialog").html(sHref);
-  $.get(sHref, function(data) {
-    loading("#gDialog");
-    $("#gDialog").html(data).hide().fadeIn();
-    // Get dialog and it's contents' height
-    var contentHt =  $(".ui-dialog-titlebar").height()
-        + $(".ui-dialog-content form").height()
-        + $(".ui-dialog-buttonpane").height()
-        + 60;
-    // Resize height if content's shorter than dialog
-    if (contentHt < $("#gDialog").data("height.dialog")) {
-      $(".ui-dialog").animate({height: contentHt});
-    };
-  });
-  return false;
-}
-
-/**
  * Handle initialization of all short forms
  *
  * @param array shortForms Array of short form IDs
@@ -201,20 +114,3 @@ function shortFormInit(formID) {
   });
 }
 
-/**
- * Toggle the processing indicator, both large and small
- *
- * @param element ID to which to apply the loading class, including #
- */
-function loading(element) {
-  var size;
-  switch (element) {
-    case "#gDialog":
-      size = "Large";
-      break;
-    default:
-      size = "Small";
-      break;
-  }
-  $(element).toggleClass("gLoading" + size);
-}
diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php
index 86b1e922..cab2df92 100644
--- a/themes/default/views/page.html.php
+++ b/themes/default/views/page.html.php
@@ -24,10 +24,11 @@
     <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.listen.js") ?>" type="text/javascript"></script>
+    <script src="<?= url::file("lib/jquery-ui.js") ?>" type="text/javascript"></script>
+    <script src="<?= url::file("lib/gallery.dialog.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("js/superfish.js") ?>" type="text/javascript"></script>
-    <?= $theme->head() ?>
-    <?= html::script("lib/jquery-ui.js") ?>
     <script src="<?= $theme->url("js/ui.init.js") ?>" type="text/javascript"></script>
+    <?= $theme->head() ?>
   </head>
 
   <body>