From a302a9c3fa7ec8d11373dc5eeb9c94400a255b1a Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Fri, 7 Aug 2009 23:58:57 +0800 Subject: Refactor the gallery dialog into a jQuery widget Signed-off-by: Bharat Mediratta --- lib/gallery.common.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'lib/gallery.common.js') diff --git a/lib/gallery.common.js b/lib/gallery.common.js index 1eaa6db2..e063462e 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -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); -- cgit v1.2.3 From 30b77b5714c66f1f73fb98b61f1b17e2c84ece53 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sat, 8 Aug 2009 01:33:11 +0800 Subject: Forgot this file on the gallery dialog commit Signed-off-by: Bharat Mediratta --- lib/gallery.common.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib/gallery.common.js') diff --git a/lib/gallery.common.js b/lib/gallery.common.js index e063462e..50652532 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -10,7 +10,7 @@ }); }; -// Vertically align a block element's content + // Vertically align a block element's content $.fn.vAlign = function(container) { return this.each(function(i){ if (container == null) { @@ -25,7 +25,7 @@ }); }; -// Get the viewport size + // Get the viewport size $.getViewportSize = function() { return { width : function() { -- cgit v1.2.3 From a5137f59722bcb4867ed4c863b34ddb71d7df3d9 Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Fri, 7 Aug 2009 11:17:07 -0700 Subject: Remove boilerplate comment. --- lib/gallery.common.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'lib/gallery.common.js') diff --git a/lib/gallery.common.js b/lib/gallery.common.js index 50652532..7fced304 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -1,7 +1,3 @@ -/** - * To change this template, choose Tools | Templates - * and open the template in the editor. - */ (function ($) { $.fn.showMessage = function(message) { return this.each(function(i){ -- cgit v1.2.3 From e4eec71efa5f7b1902155a34f8655cebe523c358 Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Fri, 7 Aug 2009 11:53:40 -0700 Subject: Rename gallery.common.js functions to conform to our naming standards and have some basic namespacing: showMessage --> gallery_show_message vAlign --> gallery_valign showLoading --> gallery_show_loading Convert gallery.show_full_size.js to be a jQuery function and give it a namespace: show_full_size --> gallery_show_full_size --- lib/gallery.common.js | 9 +-- lib/gallery.dialog.js | 4 +- lib/gallery.show_full_size.js | 140 ++++++++++++++++++----------------- modules/organize/js/organize.js | 2 +- modules/organize/js/organize_init.js | 2 +- themes/admin_default/js/ui.init.js | 4 +- themes/default/js/ui.init.js | 6 +- themes/default/views/photo.html.php | 2 +- 8 files changed, 85 insertions(+), 84 deletions(-) (limited to 'lib/gallery.common.js') diff --git a/lib/gallery.common.js b/lib/gallery.common.js index 7fced304..7e6acad9 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -1,5 +1,5 @@ (function ($) { - $.fn.showMessage = function(message) { + $.fn.gallery_show_message = function(message) { return this.each(function(i){ $(this).effect("highlight", {"color": "white"}, 3000); $(this).animate({opacity: 1.0}, 6000); @@ -7,7 +7,7 @@ }; // Vertically align a block element's content - $.fn.vAlign = function(container) { + $.fn.gallery_valign = function(container) { return this.each(function(i){ if (container == null) { container = 'div'; @@ -22,7 +22,7 @@ }; // Get the viewport size - $.getViewportSize = function() { + $.gallery_get_viewport_size = function() { return { width : function() { return $(window).width(); @@ -37,7 +37,7 @@ * Toggle the processing indicator, both large and small * @param elementID Target ID, including #, to apply .gLoadingSize */ - $.fn.showLoading = function() { + $.fn.gallery_show_loading = function() { return this.each(function(i){ var size; switch ($(this).attr("id")) { @@ -52,5 +52,4 @@ $(this).toggleClass("gLoading" + size); }); }; - })(jQuery); diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js index 04ab44de..51ebb21a 100644 --- a/lib/gallery.dialog.js +++ b/lib/gallery.dialog.js @@ -16,10 +16,10 @@ } $("#gDialog").dialog(self.options); - $("#gDialog").showLoading(); + $("#gDialog").gallery_show_loading(); $.get(sHref, function(data) { - $("#gDialog").html(data).showLoading(); + $("#gDialog").html(data).gallery_show_loading(); if ($("#gDialog form").length) { self._trigger("form_loaded", null, $("#gDialog form")); diff --git a/lib/gallery.show_full_size.js b/lib/gallery.show_full_size.js index 8b271db9..c32195f6 100644 --- a/lib/gallery.show_full_size.js +++ b/lib/gallery.show_full_size.js @@ -1,76 +1,78 @@ -/** - * @todo Move inline CSS out to external style sheet (theme style sheet) - */ -var show_full_size = function(image_url, image_width, image_height) { - /* - * Calculate the size of the image panel based on the size of the image and the size of the - * window. Scale the image so the entire panel fits in the view port. - */ - function _auto_fit(imageWidth, imageHeight) { - // ui-dialog gives a padding of 2 pixels - var windowWidth = $(window).width() - 10; - var windowHeight = $(window).height() - 10; +(function($) { + /** + * @todo Move inline CSS out to external style sheet (theme style sheet) + */ + $.gallery_show_full_size = function(image_url, image_width, image_height) { + /* + * Calculate the size of the image panel based on the size of the image and the size of the + * window. Scale the image so the entire panel fits in the view port. + */ + function _auto_fit(imageWidth, imageHeight) { + // ui-dialog gives a padding of 2 pixels + var windowWidth = $(window).width() - 10; + var windowHeight = $(window).height() - 10; - /* If the width is greater then scale the image width first */ - if (imageWidth > windowWidth) { - var ratio = windowWidth / imageWidth; - imageWidth *= ratio; - imageHeight *= ratio; - } - /* after scaling the width, check that the height fits */ - if (imageHeight > windowHeight) { - var ratio = windowHeight / imageHeight; - imageWidth *= ratio; - imageHeight *= ratio; - } + /* If the width is greater then scale the image width first */ + if (imageWidth > windowWidth) { + var ratio = windowWidth / imageWidth; + imageWidth *= ratio; + imageHeight *= ratio; + } + /* after scaling the width, check that the height fits */ + if (imageHeight > windowHeight) { + var ratio = windowHeight / imageHeight; + imageWidth *= ratio; + imageHeight *= ratio; + } - // handle the case where the calculation is almost zero (2.14e-14) - return { - top: Number((windowHeight - imageHeight) / 2), - left: Number((windowWidth - imageWidth) / 2), - width: Number(imageWidth), - height: Number(imageHeight) - }; - } + // handle the case where the calculation is almost zero (2.14e-14) + return { + top: Number((windowHeight - imageHeight) / 2), + left: Number((windowWidth - imageWidth) / 2), + width: Number(imageWidth), + height: Number(imageHeight) + }; + } - var width = $(document).width(); - var height = $(document).height(); + var width = $(document).width(); + var height = $(document).height(); - $("body").append('
'); + $("body").append('
'); - var image_size = _auto_fit(image_width, image_height); + var image_size = _auto_fit(image_width, image_height); - $("body").append('
' + - '
'); + $("body").append('
' + + '
'); - $("#gFullsize").append(''); - $("#gFullsizeClose").click(function() { - $("#gFullsizeOverlay*").remove(); - $("#gFullsize").remove(); - }); - $(window).resize(function() { - $("#gFullsizeOverlay").width($(document).width()); - $("#gFullsizeOverlay").height($(document).height()); - image_size = _auto_fit(image_width, image_height); - $("#gFullsize").height(image_size.height); - $("#gFullsize").width(image_size.width); - $("#gFullsize").css("top", image_size.top); - $("#gFullsize").css("left", image_size.left); - $("#gFullSizeImage").height(image_size.height); - $("#gFullSizeImage").width(image_size.width); - }); -}; + $("#gFullsize").append(''); + $("#gFullsizeClose").click(function() { + $("#gFullsizeOverlay*").remove(); + $("#gFullsize").remove(); + }); + $(window).resize(function() { + $("#gFullsizeOverlay").width($(document).width()) + .height($(document).height()); + image_size = _auto_fit(image_width, image_height); + $("#gFullsize").height(image_size.height) + .width(image_size.width) + .css("top", image_size.top) + .css("left", image_size.left); + $("#gFullSizeImage").height(image_size.height) + .width(image_size.width); + }); + }; +})(jQuery); diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index f10cbcc9..31657d3a 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -391,7 +391,7 @@ function organize_dialog_init() { $(".gBranchText").droppable(treeDroppable); $(".gBranchText").click(organizeOpenFolder); retrieveMicroThumbs(item_id); - //showLoading("#gDialog"); + //$.gallery_show_loading("#gDialog"); $("#gMicroThumbPanel").droppable(thumbDroppable); $("#gMicroThumbPanel").selectable(selectable); diff --git a/modules/organize/js/organize_init.js b/modules/organize/js/organize_init.js index ed036fdb..30bc78dd 100644 --- a/modules/organize/js/organize_init.js +++ b/modules/organize/js/organize_init.js @@ -17,7 +17,7 @@ $("document").ready(function() { zIndex: 75 }); - //showLoading("#gDialog"); + //$.gallery_show_loading("#gDialog"); $.get(href, function(data) { $("#gDialog").html(data); diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js index 89dd5b47..e52f0c4c 100644 --- a/themes/admin_default/js/ui.init.js +++ b/themes/admin_default/js/ui.init.js @@ -14,7 +14,7 @@ $(document).ready(function(){ $("#gSiteAdminMenu").css("display", "block"); // Initialize status message effects - $("#gMessage li").showMessage(); + $("#gMessage li").gallery_show_message(); // Initialize modal dialogs $(".gDialogLink").gallery_dialog(); @@ -24,7 +24,7 @@ $(document).ready(function(){ if ($("#gPhotoStream").length) { // Vertically align thumbs in photostream - $(".gItem").vAlign(); + $(".gItem").gallery_valign(); } // Apply jQuery UI button css to submit inputs diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 4b876c66..b8ad68db 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -29,7 +29,7 @@ $(document).ready(function() { $("#gSiteMenu").css("display", "block"); // Initialize status message effects - $("#gMessage li").showMessage(); + $("#gMessage li").gallery_show_message(); // Initialize dialogs $(".gMenuLink").addClass("gDialogLink"); @@ -53,9 +53,9 @@ $(document).ready(function() { // Album view only if ($("#gAlbumGrid").length) { // Vertical align thumbnails/metadata in album grid - $(".gItem").vAlign(); + $(".gItem").gallery_valign(); $(".gQuick").ajaxStop(function(){ - $(".gItem").vAlign(); + $(".gItem").gallery_valign(); }); } diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index bf4d9da3..48472170 100644 --- a/themes/default/views/photo.html.php +++ b/themes/default/views/photo.html.php @@ -5,7 +5,7 @@