stian/gallery3
1
0
Fork 0
mirror of https://github.com/Pathduck/gallery3.git synced 2026-06-01 01:09:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor the gallery dialog into a jQuery widget

Browse Source 
Signed-off-by: Bharat Mediratta <bharat@menalto.com>
This commit is contained in:
Tim Almdal
2009-08-07 23:58:57 +08:00
committed by Bharat Mediratta
parent 1591c3871a
commit a302a9c3fa
8 changed files with 161 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
lib/gallery.common.js
View File

@@ -2,17 +2,15 @@
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
(function () {
(function ($) {
$.fn.showMessage = function(message) {
return this.each(function(i){
$(this).effect("highlight", {"color": "white"}, 3000);
$(this).animate({opacity: 1.0}, 6000);
});
};
})(jQuery);
// Vertically align a block element's content
(function () {
$.fn.vAlign = function(container) {
return this.each(function(i){
if (container == null) {
@@ -26,10 +24,8 @@
$(el).css('margin-top', nh);
});
};
})(jQuery);
// Get the viewport size
(function () {
$.getViewportSize = function() {
return {
width : function() {
@@ -40,4 +36,25 @@
}
};
};
/**
* Toggle the processing indicator, both large and small
* @param elementID Target ID, including #, to apply .gLoadingSize
*/
$.fn.showLoading = function() {
return this.each(function(i){
var size;
switch ($(this).attr("id")) {
case "#gDialog":
case "#gPanel":
size = "Large";
break;
default:
size = "Small";
break;
}
$(this).toggleClass("gLoading" + size);
});
};
})(jQuery);

264
lib/gallery.dialog.js
View File

@@ -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 + '()');
$("body").append(eDialog);
if (!self.options.close) {
self.options.close = self.closeDialog;
}
$("#gDialog").dialog(self.options);
$("#gDialog").showLoading();
$.get(sHref, function(data) {
$("#gDialog").html(data).showLoading();
if ($("#gDialog form").length) {
self._trigger("form_loaded", null, $("#gDialog form"));
}
self._layout();
$("#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());
}
if ($("#gDialog form").length) {
self._ajaxify_dialog();
}
});
$("#gDialog").dialog("option", "self", self);
return false;
});
},
destroy: function() {
if ($("#gDialog form").length) {
this._trigger("form_closing", null, $("#gDialog form"));
}
this._trigger("dialog_closing", null, $("#gDialog"));
$("#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();
});
}
}
if (data.result == "success") {
if (data.location) {
window.location = data.location;
} else {
window.location.reload();
}
}
}
});
};
$("#gDialog .ui-state-default").hover(
function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
}
);
},
/**
* 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;
closeDialog: function (event, ui) {
var self = $("#gDialog").dialog("option", "self");
self.destroy();
},
$("body").append(eDialog);
_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();
}
}
}
});
},
$("#gDialog").dialog({
autoOpen: false,
autoResize: true,
modal: true,
resizable: false,
close: closeDialog
});
form_closing: function(event, ui) {},
dialog_closing: function(event, ui) {}
});
showLoading("#gDialog");
$.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);
on_form_loaded();
$("#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());
}
ajaxify_dialog();
});
return false;
}
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");
}
);
}
function closeDialog() {
var form = $("#gDialog").dialog("option", "form");
if (form != null) {
$("#gDialog").dialog("option", "form").trigger("form_closing");
}
$("#gDialog").dialog("destroy").remove();
}
/**
* 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);

2
modules/gallery/views/after_install.html.php
View File

@@ -16,7 +16,7 @@
title="<?= t("Edit Your Profile") ?>"
id="gAfterInstallChangePasswordLink" class="gButtonLink ui-state-default ui-corners-all"><?= t("Change Password Now") ?></a>
<script>
$("#gAfterInstallChangePasswordLink").bind("click", handleDialogEvent);
$("#gAfterInstallChangePasswordLink").galleryDialog();
</script>
</p>

5
modules/server_add/views/server_add_tree_dialog.html.php
View File

@@ -34,7 +34,7 @@
<?= t("Add") ?>
</button>
<button class="ui-state-default ui-corner-all" onclick="closeDialog(); window.location.reload();">
<button id="gServerCloseButton" class="ui-state-default ui-corner-all">
<?= t("Close") ?>
</button>
</span>
@@ -48,6 +48,9 @@
progressbar("value", 0);
$("#gProgress").slideDown("fast", function() { start_add() });
});
$("#gServerCloseButton").click(function(event) {
$("#gDialog").dialog("close");
});
});
</script>

2
modules/tag/js/tag.js
View File

@@ -23,7 +23,7 @@ function closeEditInPlaceForms() {
$("#gRenameTagForm").parent().html($("#gRenameTagForm").parent().data("revert"));
li.height("");
$(".gEditable", li).bind("click", editInPlace);
$(".gDialogLink", li).bind("click", handleDialogEvent);
$(".gDialogLink", li).galleryDialog();
}
}

2
modules/user/views/admin_users.html.php
View File

@@ -28,7 +28,7 @@
{},
function(data) {
$("#group-" + group_id).html(data);
$("#group-" + group_id + " .gDialogLink").bind("click", handleDialogEvent);
$("#group-" + group_id + " .gDialogLink").galleryDialog());
});
}

2
themes/admin_default/js/ui.init.js
View File

@@ -17,7 +17,7 @@ $(document).ready(function(){
$("#gMessage li").showMessage();
// Initialize modal dialogs
$(".gDialogLink").bind("click", handleDialogEvent);
$(".gDialogLink").galleryDialog();
// Initialize panels
$(".gPanelLink").galleryPanel();

2
themes/default/js/ui.init.js
View File

@@ -34,7 +34,7 @@ $(document).ready(function() {
// Initialize dialogs
$(".gMenuLink").addClass("gDialogLink");
$("#gLoginLink").addClass("gDialogLink");
$(".gDialogLink").bind("click", handleDialogEvent);
$(".gDialogLink").galleryDialog();
// Initialize view menu
if ($("#gViewMenu").length) {