Refactor the gallery dialog into a jQuery widget

1 files changed, 124 insertions, 128 deletions

diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js
index 74c2f20e..7e0ba1b4 100644
--- a/lib/gallery.dialog.js
+++ b/lib/gallery.dialog.js
@@ -1,140 +1,136 @@
-/**
- * Fire openDialog() and prevent links from opening
- * @see openDialog()
- */
-function handleDialogEvent(event) {
-  var target = event.currentTarget;
-  if (!target) {
-    target = event.srcElement;
-  }
-  openDialog(target);
-  event.preventDefault();
-}
+(function($) {
+   $.widget("ui.galleryDialog",  {
+     _init: function() {
+       var self = this;
+       this.element.click(function(event){
+         event.preventDefault();
+         var element = event.currentTarget;
+         var sHref = $(element).attr("href");
+         var sTitle = $(element).attr("title");
+         var eDialog = '<div id="gDialog"></div>';
 
-function ajaxify_dialog() {
-  $("#gDialog form").ajaxForm({
-    dataType: "json",
-    success: function(data) {
-      if (data.form) {
-        $("#gDialog form").replaceWith(data.form);
-        ajaxify_dialog();
-        on_form_loaded();
-        if (typeof data.reset == 'function') {
-          eval(data.reset + '()');
-        }
-      }
-      if (data.result == "success") {
-	if (data.location) {
-          window.location = data.location;
-        } else {
-          window.location.reload();
-        }
-      }
-    }
-  });
-};
+         $("body").append(eDialog);
+
+         if (!self.options.close) {
+           self.options.close = self.closeDialog;
+         }
+         $("#gDialog").dialog(self.options);
 
-/**
- * Display modal dialogs, populate dialog with trigger link's href
- * @requires ui.core
- * @requires ui.draggable
- * @requires ui.resizable
- * @requires ui.dialog
- * @see handleDialogEvent()
- * @see showLoading()
- */
-function openDialog(element) {
-  var sHref = $(element).attr("href");
-  var sTitle = $(element).attr("title");
-  var eDialog = '<div id="gDialog"></div>';
-  var dialogWidth;
+         $("#gDialog").showLoading();
 
-  $("body").append(eDialog);
+         $.get(sHref, function(data) {
+           $("#gDialog").html(data).showLoading();
 
-  $("#gDialog").dialog({
-    autoOpen: false,
-    autoResize: true,
-    modal: true,
-    resizable: false,
-    close: closeDialog
-  });
+           if ($("#gDialog form").length) {
+             self._trigger("form_loaded", null, $("#gDialog form"));
+           }
+           self._layout();
 
-  showLoading("#gDialog");
+           $("#gDialog").dialog("open");
+           // Remove titlebar for progress dialogs or set title
+           if ($("#gDialog #gProgress").length) {
+             $(".ui-dialog-titlebar").remove();
+           } else if ($("#gDialog h1").length) {
+             $("#gDialog").dialog('option', 'title', $("#gDialog h1:eq(0)").html());
+           } else if ($("#gDialog fieldset legend").length) {
+             $("#gDialog").dialog('option', 'title', $("#gDialog fieldset legend:eq(0)").html());
+           }
 
-  $.get(sHref, function(data) {
-    showLoading("#gDialog");
-    $("#gDialog").html(data);
-    var dialogHeight = $("#gDialog").height();
-    var cssWidth = new String($("#gDialog form").css("width"));
-    var childWidth = cssWidth.replace(/[^0-9]/g,"");
-    if ($("#gDialog iframe").length) {
-      dialogWidth = $(window).width() - 100;
-      // Set the iframe width and height
-      $("#gDialog iframe").width("100%");
-      $("#gDialog iframe").height($(window).height() - 100);
-    } else if (childWidth == "" || childWidth > 300) {
-      dialogWidth = 500;
-    }
-    $("#gDialog").dialog('option', 'width', dialogWidth);
+           if ($("#gDialog form").length) {
+             self._ajaxify_dialog();
+           }
+         });
+         $("#gDialog").dialog("option", "self", self);
+         return false;
+       });
+     },
 
-    on_form_loaded();
+     destroy: function() {
+       if ($("#gDialog form").length) {
+         this._trigger("form_closing", null, $("#gDialog form"));
+       }
+       this._trigger("dialog_closing", null, $("#gDialog"));
 
-    $("#gDialog").dialog("open");
-    // Remove titlebar for progress dialogs or set title
-    if ($("#gDialog #gProgress").length) {
-      $(".ui-dialog-titlebar").remove();
-    } else if ($("#gDialog h1").length) {
-      $("#gDialog").dialog('option', 'title', $("#gDialog h1:eq(0)").html());
-    } else if ($("#gDialog fieldset legend").length) {
-      $("#gDialog").dialog('option', 'title', $("#gDialog fieldset legend:eq(0)").html());
-    }
+       $("#gDialog").dialog("destroy").remove();
+     },
+
+     _layout: function() {
+       var dialogWidth;
+       var dialogHeight = $("#gDialog").height();
+       var cssWidth = new String($("#gDialog form").css("width"));
+       var childWidth = cssWidth.replace(/[^0-9]/g,"");
+       if ($("#gDialog iframe").length) {
+         dialogWidth = $(window).width() - 100;
+         // Set the iframe width and height
+         $("#gDialog iframe").width("100%").height($(window).height() - 100);
+       } else if (childWidth == "" || childWidth > 300) {
+         dialogWidth = 500;
+       }
+       $("#gDialog").dialog('option', 'width', dialogWidth);
+     },
+
+     form_loaded: function event(event, ui) {
+       // Should be defined (and localized) in the theme
+       MSG_CANCEL = MSG_CANCEL || 'Cancel';
+       var eCancel = '<a href="#" class="gCancel">' + MSG_CANCEL + '</a>';
+       if ($("#gDialog .submit").length) {
+         $("#gDialog .submit").addClass("ui-state-default ui-corner-all");
+         $("#gDialog .submit").parent().append(eCancel);
+         $("#gDialog .gCancel").click(function(event) {
+           $("gDialog").dialog("close");
+           event.preventDefault();
+         });
+        }
+       $("#gDialog .ui-state-default").hover(
+         function() {
+           $(this).addClass("ui-state-hover");
+         },
+         function() {
+           $(this).removeClass("ui-state-hover");
+         }
+       );
+     },
 
-    ajaxify_dialog();
-  });
-  return false;
-}
+     closeDialog: function (event, ui) {
+       var self = $("#gDialog").dialog("option", "self");
+       self.destroy();
+     },
 
-function on_form_loaded() {
-  // Should be defined (and localized) in the theme
-  MSG_CANCEL = MSG_CANCEL || 'Cancel';
-  var eCancel = '<a href="javascript: closeDialog()" class="gCancel">' + MSG_CANCEL + '</a>';
-  if ($("#gDialog .submit").length) {
-    $("#gDialog .submit").addClass("ui-state-default ui-corner-all");
-    $("#gDialog .submit").parent().append(eCancel);
-  }
-  $("#gDialog").dialog("option", "form", $("#gDialog form"));
-  $("#gDialog .ui-state-default").hover(
-    function() {
-      $(this).addClass("ui-state-hover");
-    },
-    function() {
-      $(this).removeClass("ui-state-hover");
-    }
-  );
-}
+     _ajaxify_dialog: function() {
+       var self = this;
+       $("#gDialog form").ajaxForm({
+         dataType: "json",
+         success: function(data) {
+           if (data.form) {
+             $("#gDialog form").replaceWith(data.form);
+             self._ajaxify_dialog();
+             self._trigger("form_loaded", null, $("#gDialog form"));
+             if (typeof data.reset == 'function') {
+               eval(data.reset + '()');
+             }
+           }
+           if (data.result == "success") {
+	     if (data.location) {
+               window.location = data.location;
+             } else {
+               window.location.reload();
+             }
+           }
+         }
+       });
+     },
 
-function closeDialog() {
-  var form = $("#gDialog").dialog("option", "form");
-  if (form != null) {
-    $("#gDialog").dialog("option", "form").trigger("form_closing");
-  }
-  $("#gDialog").dialog("destroy").remove();
-}
+     form_closing: function(event, ui) {},
+     dialog_closing: function(event, ui) {}
+   });
 
-/**
- * Toggle the processing indicator, both large and small
- * @param elementID Target ID, including #, to apply .gLoadingSize
- */
-function showLoading(elementID) {
-  var size;
-  switch (elementID) {
-    case "#gDialog":
-    case "#gPanel":
-      size = "Large";
-      break;
-    default:
-      size = "Small";
-      break;
-  }
-  $(elementID).toggleClass("gLoading" + size);
-}
+   $.extend($.ui.galleryDialog,  {
+     defaults: {
+       autoOpen: false,
+       autoResize: true,
+       modal: true,
+       resizable: false,
+       position: "center"
+     }
+   });
+})(jQuery);