diff options
| -rw-r--r-- | themes/admin_default/js/ui.init.js | 118 |
1 files changed, 117 insertions, 1 deletions
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js index c3295ee2..3e90b0b1 100644 --- a/themes/admin_default/js/ui.init.js +++ b/themes/admin_default/js/ui.init.js @@ -2,7 +2,7 @@ $(document).ready(function(){ // Add Superfish menu class $("#gSiteAdminMenu ul.gMenu").addClass("sf-menu sf-navbar"); - + // Superfish menu options $('ul.sf-menu').superfish({ delay: 500, @@ -15,4 +15,120 @@ $(document).ready(function(){ }); $('.ui-accordion-container').accordion(); + + /** + * Attach event listeners to open modal dialogs + */ + var dialogLinks = $(".gDialogLink"); + for (var i=0; i < dialogLinks.length; i++) { + $(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").reset(); + }; + + $("#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); +} |