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.show_full_size.js | 140 +++++++++++++++++++++--------------------- 1 file changed, 71 insertions(+), 69 deletions(-) (limited to 'lib/gallery.show_full_size.js') 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); -- cgit v1.2.3 From 256822a1e8d387ef9cc29e354a36099dbab17992 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Fri, 21 Aug 2009 03:53:20 +0800 Subject: Refactor the _auto_fit method in gallery.show_full_size to a common method in gallery.common.js Signed-off-by: Tim Almdal --- lib/gallery.common.js | 25 +++++++++++++++++++++++++ lib/gallery.show_full_size.js | 39 +++++---------------------------------- 2 files changed, 30 insertions(+), 34 deletions(-) (limited to 'lib/gallery.show_full_size.js') diff --git a/lib/gallery.common.js b/lib/gallery.common.js index 06775d79..844e219b 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -125,5 +125,30 @@ ); }; + $.gallery_auto_fit_window = function(imageWidth, imageHeight) { + var size = $.gallery_get_viewport_size(); + var width = size.width() - 6, + height = size.height() - 6; + + var ratio = width / imageWidth; + imageWidth *= ratio; + imageHeight *= ratio; + + /* after scaling the width, check that the height fits */ + if (imageHeight > height) { + ratio = height / imageHeight; + imageWidth *= ratio; + imageHeight *= ratio; + } + + // handle the case where the calculation is almost zero (2.14e-14) + return { + top: Number((height - imageHeight) / 2), + left: Number((width - imageWidth) / 2), + width: Number(imageWidth), + height: Number(imageHeight) + }; + }; + })(jQuery); diff --git a/lib/gallery.show_full_size.js b/lib/gallery.show_full_size.js index c32195f6..2f365f0d 100644 --- a/lib/gallery.show_full_size.js +++ b/lib/gallery.show_full_size.js @@ -3,48 +3,19 @@ * @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; - } - - // 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 size = $.gallery_get_viewport_size(); $("body").append('
'); - var image_size = _auto_fit(image_width, image_height); + var image_size = $.gallery_auto_fit_window(image_width, image_height); $("body").append('
Date: Thu, 27 Aug 2009 15:22:27 -0700 Subject: Fix ticket #644 1) remove close button 2) extend the grey overlay to the document size 3) allow any keypress to close the fullize image 4) click on the fullsize will close --- lib/gallery.show_full_size.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'lib/gallery.show_full_size.js') diff --git a/lib/gallery.show_full_size.js b/lib/gallery.show_full_size.js index 2f365f0d..1f74e6e2 100644 --- a/lib/gallery.show_full_size.js +++ b/lib/gallery.show_full_size.js @@ -10,7 +10,7 @@ $("body").append('
'); @@ -27,10 +27,14 @@ '
'); - $("#gFullsize").append(''); - $("#gFullsizeClose").click(function() { + //$("#gFullsize").append(''); + $("#gFullsize").click(function() { + $("#gFullsizeOverlay*").remove(); + $("#gFullsize").remove(); + }); + $().bind("keypress", function() { $("#gFullsizeOverlay*").remove(); $("#gFullsize").remove(); }); -- cgit v1.2.3 From 5235c7a0b79d12305d99fdafe2710583f5368fcc Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Thu, 27 Aug 2009 15:37:18 -0700 Subject: Allow clicking on the overlay to close the fullsize and remove some debug code --- lib/gallery.show_full_size.js | 35 +++++++++++++++-------------------- 1 file changed, 15 insertions(+), 20 deletions(-) (limited to 'lib/gallery.show_full_size.js') diff --git a/lib/gallery.show_full_size.js b/lib/gallery.show_full_size.js index 1f74e6e2..7e826c32 100644 --- a/lib/gallery.show_full_size.js +++ b/lib/gallery.show_full_size.js @@ -27,27 +27,22 @@ ''); - //$("#gFullsize").append(''); - $("#gFullsize").click(function() { - $("#gFullsizeOverlay*").remove(); - $("#gFullsize").remove(); - }); + $().click(function() { + $("#gFullsizeOverlay*").remove(); + $("#gFullsize").remove(); + }); $().bind("keypress", function() { - $("#gFullsizeOverlay*").remove(); - $("#gFullsize").remove(); - }); + $("#gFullsizeOverlay*").remove(); + $("#gFullsize").remove(); + }); $(window).resize(function() { - $("#gFullsizeOverlay").width($(document).width()) - .height($(document).height()); - image_size = $.gallery_auto_fit_window(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); - }); + $("#gFullsizeOverlay").width($(document).width()).height($(document).height()); + image_size = $.gallery_auto_fit_window(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); -- cgit v1.2.3