1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
$(document).ready(function(){
// Add Superfish menu class
$("#gSiteAdminMenu ul.gMenu").addClass("sf-menu sf-navbar");
// Superfish menu options
$('ul.sf-menu').superfish({
delay: 500,
animation: {
opacity:'show',
height:'show'
},
pathClass: 'current',
speed: 'fast'
});
/**
* 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").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);
}
|
