From 52147cf6f857c4c54a2f3d753e72b27b5141d028 Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Mon, 3 Aug 2009 21:45:54 -0700 Subject: Combine the quick menu and the thumb menu into a single menu called the "context" menu. This new context menu is generated using the typical event processing system, like our other menus. The specialized quick CSS and JS is now gone, replaced by our generic menu handling code. It's all rolled together currently using the thumb_menu UI for easy packaging. All the CSS and JS is updated. NOTE: the non-dialog links (rotate, album_cover) have a broken UI because they return JSON which the quick.js code handled specially, but we don't handle properly now. I need to fix this. --- themes/default/js/ui.init.js | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 11cd06ed..d796cb67 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -32,7 +32,6 @@ $(document).ready(function() { $("#gMessage li").showMessage(); // Initialize dialogs - $(".gMenuLink").addClass("gDialogLink"); $("#gLoginLink").addClass("gDialogLink"); var dialogLinks = $(".gDialogLink"); for (var i=0; i < dialogLinks.length; i++) { @@ -57,9 +56,6 @@ $(document).ready(function() { if ($("#gAlbumGrid").length) { // Vertical align thumbnails/metadata in album grid $(".gItem").vAlign(); - $(".gQuick").ajaxStop(function(){ - $(".gItem").vAlign(); - }); } // Photo/Item item view only @@ -97,26 +93,19 @@ $(document).ready(function() { } ); - // Initialize thumbnail menus - // @todo Toggle between north and south caret's on hover - if ($("#gContent .gThumbMenu").length) { - $("#gContent .gThumbMenu li").addClass("ui-state-default"); - $("#gContent .gThumbMenu li a") - .not('[class]') - .addClass("gButtonLink ui-icon ui-icon-caret-l-n") - .css({ - height: "10px", - margin: "0", - padding: "0 0 3px 0" - }); - - $(".gThumbMenu ul").hide(); - $(".gThumbMenu").hover( + // Initialize context menus + if ($("#gContent .gContextMenu").length) { + $("#gContent .gContextMenu li").addClass("ui-state-default"); + $(".gContextMenu").parent().hover( function() { - $(this).find("ul").slideDown("fast"); + $(this).find(".gContextMenu").slideDown("fast"); + var dialogLinks = $(this).find(".gDialogLink"); + for (var i = 0; i < dialogLinks.length; i++) { + $(dialogLinks[i]).bind("click", handleDialogEvent); + } }, function() { - $(this).find("ul").slideUp("slow"); + $(this).find(".gContextMenu").slideUp("slow"); } ); } -- cgit v1.2.3 From 3a8837726a6618139813ea88b007909d32da752b Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Tue, 4 Aug 2009 23:52:36 -0600 Subject: White space fixes. --- themes/default/js/ui.init.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index d796cb67..6414cbcc 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -66,7 +66,9 @@ $(document).ready(function() { // Collapse comments form, insert button to expand if ($("#gAddCommentForm").length) { - var showCommentForm = '' + ADD_A_COMMENT + ''; + var showCommentForm = '' + + '' + ADD_A_COMMENT + ''; $("#gAddCommentForm").hide(); $("#gComments").prepend(showCommentForm); $(".showCommentForm").click(function(){ @@ -99,13 +101,13 @@ $(document).ready(function() { $(".gContextMenu").parent().hover( function() { $(this).find(".gContextMenu").slideDown("fast"); - var dialogLinks = $(this).find(".gDialogLink"); - for (var i = 0; i < dialogLinks.length; i++) { - $(dialogLinks[i]).bind("click", handleDialogEvent); - } + var dialogLinks = $(this).find(".gDialogLink"); + for (var i = 0; i < dialogLinks.length; i++) { + $(dialogLinks[i]).bind("click", handleDialogEvent); + } }, function() { - $(this).find(".gContextMenu").slideUp("slow"); + $(this).find(".gContextMenu").slideUp("slow"); } ); } -- cgit v1.2.3 From 828f6add509c26ee183b44b4ad4f927f34d04509 Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Fri, 7 Aug 2009 13:17:56 -0700 Subject: Remove stray js-breaking "#" symbol that I accidentally added in 63ddac5d --- themes/default/js/ui.init.js | 1 - 1 file changed, 1 deletion(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index f86c8df4..6a1b2b19 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -1,4 +1,3 @@ -# /** * Initialize jQuery UI and Plugin elements * -- cgit v1.2.3 From 6357f3332b9bc33b10c11dc93b83ba9e72eec109 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 8 Aug 2009 01:14:22 -0600 Subject: Added basic context menu affects and styles. Simplified some of the action labels in the menu. --- modules/digibug/helpers/digibug_event.php | 18 ++++----- modules/gallery/helpers/gallery.php | 30 ++++++++------- themes/default/css/screen.css | 64 ++++++++++++++++++++++++++----- themes/default/js/ui.init.js | 63 +++++++++++++++++++++++------- 4 files changed, 128 insertions(+), 47 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/modules/digibug/helpers/digibug_event.php b/modules/digibug/helpers/digibug_event.php index efe66a0f..93bc1747 100644 --- a/modules/digibug/helpers/digibug_event.php +++ b/modules/digibug/helpers/digibug_event.php @@ -28,19 +28,19 @@ class digibug_event_Core { static function photo_menu($menu, $theme) { $item = $theme->item(); - $menu->append( - Menu::factory("link") - ->id("digibug") - ->label(t("Print with Digibug")) - ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) - ->css_id("gDigibugLink")); + $menu->get("options_menu") + ->append(Menu::factory("link") + ->id("digibug") + ->label(t("Print with Digibug")) + ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) + ->css_id("gDigibugLink")); } static function context_menu($menu, $theme, $item) { + $item = $theme->item(); if ($item->type == "photo") { - $menu - ->append( - Menu::factory("link") + $menu->get("options_menu") + ->append(Menu::factory("link") ->id("digibug") ->label(t("Print with Digibug")) ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) diff --git a/modules/gallery/helpers/gallery.php b/modules/gallery/helpers/gallery.php index 085965a2..72e7aeeb 100644 --- a/modules/gallery/helpers/gallery.php +++ b/modules/gallery/helpers/gallery.php @@ -201,28 +201,30 @@ class gallery_Core { switch ($item->type) { case "movie": $edit_title = t("Edit this movie"); - $move_title = t("Move this movie to another album"); - $cover_title = t("Choose this movie as the album cover"); $delete_title = t("Delete this movie"); break; case "album": $edit_title = t("Edit this album"); - $move_title = t("Move this album to another album"); - $cover_title = t("Choose this album as the album cover"); $delete_title = t("Delete this album"); break; default: $edit_title = t("Edit this photo"); - $move_title = t("Move this photo to another album"); - $cover_title = t("Choose this photo as the album cover"); $delete_title = t("Delete this photo"); break; } + $cover_title = t("Choose as the album cover"); + $move_title = t("Move to another album"); $csrf = access::csrf_token(); - $menu->append(Menu::factory("dialog") + + $menu->append($options_menu = Menu::factory("submenu") + ->id("options") + ->label(t("Options")) + ->css_class("ui-icon-carat-1-n")); + + $options_menu->append(Menu::factory("dialog") ->id("edit") ->label($edit_title) ->css_clasS("ui-icon-pencil") @@ -230,22 +232,22 @@ class gallery_Core { if ($item->is_photo() && graphics::can("rotate")) { - $menu + $options_menu ->append(Menu::factory("link") ->id("rotate_ccw") - ->label(t("Rotate 90 degrees counter clockwise")) + ->label(t("Rotate 90° counter clockwise")) ->css_class("ui-icon-rotate-ccw") ->url(url::site("quick/rotate/$item->id/ccw?csrf=$csrf&page_type=$page_type"))) ->append(Menu::factory("link") ->id("rotate_cw") - ->label(t("Rotate 90 degrees clockwise")) + ->label(t("Rotate 90° clockwise")) ->css_class("ui-icon-rotate-cw") ->url(url::site("quick/rotate/$item->id/cw?csrf=$csrf&page_type=$page_type"))); } // Don't move photos from the photo page; we don't yet have a good way of redirecting after move if ($page_type == "album") { - $menu + $options_menu ->append(Menu::factory("dialog") ->id("move") ->label($move_title) @@ -264,11 +266,11 @@ class gallery_Core { } else { $disabledState = " "; } - $menu + $options_menu ->append(Menu::factory("link") ->id("make_album_cover") ->label($cover_title) - ->css_class($disabledState) + ->css_class("ui-icon-star") ->url( url::site("quick/make_album_cover/$item->id?csrf=$csrf&page_type=$page_type"))) ->append(Menu::factory("dialog") @@ -280,7 +282,7 @@ class gallery_Core { } if ($item->is_album()) { - $menu + $options_menu ->append(Menu::factory("dialog") ->id("add_item") ->label(t("Add a photo")) diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index eb092b83..1cb813f3 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -453,26 +453,32 @@ form .gError, #gContent #gAlbumGrid { margin: 1em 0; + position: relative; + z-index: 1; } #gContent #gAlbumGrid .gItem { - border: 1px solid #e8e8e8; - border-right-color: #ccc; - border-bottom-color: #ccc; + background-color: #fff; + border: 1px solid #fff; float: left; font-size: .7em; - height: 240px; + height: 220px; overflow: hidden; - padding: 15px 8px 30px 8px; + padding: .6em 8px; position: relative; text-align: center; width: 213px; + z-index: 1; } #gContent #gAlbumGrid .gItem h2 { margin: 5px 0; } +.gPhoto h2, .gItem .gMetadata { + display: none; +} + #gContent #gAlbumGrid .gAlbum { background-color: #e8e8e8; } @@ -485,6 +491,35 @@ form .gError, width: 16px; } +#gContent #gAlbumGrid #gHoverItem { + background-color: #fff; + border: 1px solid #000; + display: none; + height: auto; + margin-top: -1em; + margin-left: -.4em; + padding: 0; + position: absolute; + width: auto; + z-index: 100; +} + +#gContent #gAlbumGrid #gHoverItem .gItem { + float: none; + height: 210px; + margin: 0; + padding: 0 1em 3em; +} + +#gContent #gAlbumGrid #gHoverItem .gItem div { + margin-top: 1em !important; +} + +#gHoverItem .gItem h2, +#gHoverItem .gItem .gMetadata { + display: block; +} + /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { @@ -588,25 +623,34 @@ form .gError, /* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gContextMenu { +.gContextMenu { bottom: 0; + display: none; left: 0; position: absolute; width: 100%; - display: none; } -#gContent .gContextMenu li { +.gContextMenu li { border-left: none; border-right: none; border-bottom: none; } -#gContent .gContextMenu li li { +.gContextMenu li li { padding: .3em; } -#gContent .gContextMenu a:hover { + +#gHoverItem .gContextMenu { + display: block; +} + +#gHoverItem .gContextMenu li { + text-align: left; +} + +#gHoverItem .gContextMenu a:hover { text-decoration: none; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 6414cbcc..b3c1d514 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -96,21 +96,56 @@ $(document).ready(function() { ); // Initialize context menus - if ($("#gContent .gContextMenu").length) { - $("#gContent .gContextMenu li").addClass("ui-state-default"); - $(".gContextMenu").parent().hover( - function() { - $(this).find(".gContextMenu").slideDown("fast"); - var dialogLinks = $(this).find(".gDialogLink"); - for (var i = 0; i < dialogLinks.length; i++) { - $(dialogLinks[i]).bind("click", handleDialogEvent); + // @todo Switch Options icon to carat-1-s when menu's open + // @todo apply hover affect to links + $(".gItem").hover( + function(){ + var pos = $(this).position(); + var itemClasses = $(this).attr("class"); + var bgColor = $(this).css("background-color"); + var cont = $(this).parent(); + var iconSpan = ""; + $("#gHoverItem .ui-icon-carat-1-n").html(iconSpan + $("#gHoverItem .ui-icon-carat-1-n").html()); + + $("#gHoverItem").remove(); + cont.append("
" + + $(this).html() + "
"); + $("#gHoverItem").css("top", pos.top); + $("#gHoverItem").css("left", pos.left); + $("#gHoverItem").css("background-color", bgColor); + $("#gHoverItem").fadeIn("fast"); + $("#gHoverItem").hover( + function(){ + // Initialize context menus + $("#gContent .gContextMenu li").addClass("ui-state-default"); + $(".gContextMenu ul").hide(); + $(".gContextMenu").hover( + function() { + $(this).find("ul").slideDown("fast"); + var optLinks = $(this).find("a"); + for (var i = 0; i < optLinks.length; i++) { + var iconClass = $(optLinks[i]).attr("class").match(/ui-icon-.[^\s]*/); + iconSpan = ""; + $(optLinks[i]).html(iconSpan + $(optLinks[i]).html()); + if ($(optLinks[i]).hasClass("gDialogLink")) { + $(optLinks[i]).bind("click", handleDialogEvent); + } + } + $("#gContent .gContextMenu li a").addClass("gButtonLink ui-icon-left"); + }, + function() { + $(this).find("ul").slideUp("slow"); + } + ); + }, + function() { + $(this).hide(); } - }, - function() { - $(this).find(".gContextMenu").slideUp("slow"); - } - ); - } + ); + }, + function(){ + } + ); }); -- cgit v1.2.3 From 00098b4d1468b09ccbd5514c6b9634e92955a078 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 8 Aug 2009 11:59:32 -0600 Subject: Handle icon markup and styles in content menu before applying album grid hover affect. Dialog link's in context menu are broken currently --- themes/default/js/ui.init.js | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 2fc0dc75..91d90b45 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -53,8 +53,13 @@ $(document).ready(function() { if ($("#gAlbumGrid").length) { // Vertical align thumbnails/metadata in album grid $(".gItem").gallery_valign(); - $(".gQuick").ajaxStop(function(){ - $(".gItem").gallery_valign(); + // Apply styles to gContextMenu + $(".gContextMenu li").addClass("ui-state-default"); + $(".gContextMenu a").addClass("gButtonLink ui-icon-left"); + $(".gContextMenu a").prepend(""); + $(".gContextMenu a span").each(function() { + var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]*/).toString(); + $(this).addClass(iconClass); }); } @@ -96,7 +101,6 @@ $(document).ready(function() { ); // Initialize context menus - // @todo Switch Options icon to carat-1-s when menu's open // @todo apply hover affect to links $(".gItem").hover( function(){ @@ -104,9 +108,6 @@ $(document).ready(function() { var itemClasses = $(this).attr("class"); var bgColor = $(this).css("background-color"); var cont = $(this).parent(); - var iconSpan = ""; - $("#gHoverItem .ui-icon-carat-1-n").html(iconSpan + $("#gHoverItem .ui-icon-carat-1-n").html()); - $("#gHoverItem").remove(); cont.append("
" + $(this).html() + "
"); @@ -117,21 +118,12 @@ $(document).ready(function() { $("#gHoverItem").hover( function(){ // Initialize context menus - $("#gContent .gContextMenu li").addClass("ui-state-default"); $(".gContextMenu ul").hide(); $(".gContextMenu").hover( function() { $(this).find("ul").slideDown("fast"); - var optLinks = $(this).find("a"); - for (var i = 0; i < optLinks.length; i++) { - var iconClass = $(optLinks[i]).attr("class").match(/ui-icon-.[^\s]*/); - iconSpan = ""; - $(optLinks[i]).html(iconSpan + $(optLinks[i]).html()); - if ($(optLinks[i]).hasClass("gDialogLink")) { - $(optLinks[i]).bind("click", handleDialogEvent); - } - } - $("#gContent .gContextMenu li a").addClass("gButtonLink ui-icon-left"); + var dialogLinks = $(this).find(".gDialogLink"); + $(dialgoLinks).gallery_dialog(); }, function() { $(this).find("ul").slideUp("slow"); -- cgit v1.2.3 From 9fa4e8972596d015d4e4259aabb600c886d6381e Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 8 Aug 2009 20:39:19 -0600 Subject: Fixed typo. Dialog links still broken. Now, wiht more speling! --- themes/default/js/ui.init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 91d90b45..a8c558c5 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -123,7 +123,7 @@ $(document).ready(function() { function() { $(this).find("ul").slideDown("fast"); var dialogLinks = $(this).find(".gDialogLink"); - $(dialgoLinks).gallery_dialog(); + $(dialogLinks).gallery_dialog(); }, function() { $(this).find("ul").slideUp("slow"); -- cgit v1.2.3 From 2f4c4a3f706d98be7dd41f8fa7c9124314c515c8 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 9 Aug 2009 11:31:31 -0600 Subject: Rename resizeImage gallery_fit_image to follow convention. Move the function to gallery.common.js. --- lib/gallery.common.js | 21 ++++++++++++++++++++- themes/default/js/ui.init.js | 24 ++++-------------------- 2 files changed, 24 insertions(+), 21 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/lib/gallery.common.js b/lib/gallery.common.js index 7e6acad9..08656a83 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -12,7 +12,7 @@ if (container == null) { container = 'div'; } - $(this).html("<" + container + ">" + $(this).html() + ""); + $(this).html("<" + container + " class=\"gValign\">" + $(this).html() + ""); var el = $(this).children(container + ":first"); var elh = $(el).height(); var ph = $(this).height(); @@ -52,4 +52,23 @@ $(this).toggleClass("gLoading" + size); }); }; + + /** + * Reduce the width of an image if it's wider than its parent container + * @param elementID The image's container + */ + $.fn.gallery_fit_image = function() { + var photo = $(this).find("img").filter(function() { + return this.id.match(/gPhotoId-\d+/); + }); + var cont_width = $(this).width(); + var photo_width = photo.width(); + if (cont_width < photo_width) { + var proportion = cont_width / photo_width; + photo.width(cont_width); + photo.height(proportion * photo.height()); + } + }; + })(jQuery); + diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index a8c558c5..29680a48 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -58,16 +58,15 @@ $(document).ready(function() { $(".gContextMenu a").addClass("gButtonLink ui-icon-left"); $(".gContextMenu a").prepend(""); $(".gContextMenu a span").each(function() { - var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]*/).toString(); + var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]+/).toString(); $(this).addClass(iconClass); }); } - // Photo/Item item view only + // Photo/Item item view if ($("#gItem").length) { - // Ensure that sized image versions - // fit inside their container - sizedImage(); + // Ensure the resized image fits within its container + $("#gItem").gallery_fit_image(); // Collapse comments form, insert button to expand if ($("#gAddCommentForm").length) { @@ -140,18 +139,3 @@ $(document).ready(function() { ); }); - -/** - * Reduce width of sized photo if it's wider than its parent container - */ -function sizedImage() { - var containerWidth = $("#gItem").width(); - var oPhoto = $("#gItem img").filter(function() { - return this.id.match(/gPhotoId-/); - }); - if (containerWidth < oPhoto.width()) { - var proportion = containerWidth / oPhoto.width(); - oPhoto.width(containerWidth); - oPhoto.height(proportion * oPhoto.height()); - } -} -- cgit v1.2.3 From 1231e095c824ed9961b1156d89f6a1cae231f96f Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 9 Aug 2009 12:46:17 -0600 Subject: Keep image placement from shifting on hover, set gHoverItem height properly. --- themes/default/css/screen.css | 21 +++++++-------------- themes/default/js/ui.init.js | 38 +++++++++++++++++++++++++++++--------- 2 files changed, 36 insertions(+), 23 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 05d2977a..6a29e95f 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -475,7 +475,8 @@ form .gError, margin: 5px 0; } -.gPhoto h2, .gItem .gMetadata { +#gContent .gPhoto h2, +#gContent .gItem .gMetadata { display: none; } @@ -484,7 +485,7 @@ form .gError, } #gContent #gAlbumGrid .gAlbum h2 span { - background: transparent url('../images/ico-album.png') no-repeat top left !important; + background: transparent url('../images/ico-album.png') no-repeat top left; display: inline-block; height: 16px; margin-right: 5px; @@ -496,8 +497,6 @@ form .gError, border: 1px solid #000; display: none; height: auto; - margin-top: -1em; - margin-left: -.4em; padding: 0; position: absolute; width: auto; @@ -505,18 +504,11 @@ form .gError, } #gContent #gAlbumGrid #gHoverItem .gItem { - float: none; - height: 210px; - margin: 0; - padding: 0 1em 3em; -} - -#gContent #gAlbumGrid #gHoverItem .gItem div { - margin-top: 1em !important; + border: none; } -#gHoverItem .gItem h2, -#gHoverItem .gItem .gMetadata { +#gContent #gHoverItem .gItem h2, +#gContent #gHoverItem .gItem .gMetadata { display: block; } @@ -627,6 +619,7 @@ form .gError, bottom: 0; display: none; left: 0; + margin-top: 2em; position: absolute; width: 100%; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 29680a48..9d8acf28 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -86,7 +86,6 @@ $(document).ready(function() { duration: 1000, hash: true }); - } // Add hover state for buttons @@ -103,16 +102,30 @@ $(document).ready(function() { // @todo apply hover affect to links $(".gItem").hover( function(){ - var pos = $(this).position(); - var itemClasses = $(this).attr("class"); - var bgColor = $(this).css("background-color"); - var cont = $(this).parent(); + var position = $(this).position(); + var item_classes = $(this).attr("class"); + var bg_color = $(this).css("background-color"); + var container = $(this).parent(); $("#gHoverItem").remove(); - cont.append("
" + container.append("
" + $(this).html() + "
"); - $("#gHoverItem").css("top", pos.top); - $("#gHoverItem").css("left", pos.left); - $("#gHoverItem").css("background-color", bgColor); + $("#gHoverItem").css("top", position.top); + $("#gHoverItem").css("left", position.left); + $("#gHoverItem").css("background-color", bg_color); + + var v_align = $(this).find(".gValign"); + var title = $(this).find("h2"); + var meta = $(this).find(".gMetadata"); + var context = $(this).find(".gContextMenu"); + var context_label = $(this).find(".gContextMenu li:first"); + $("#gHoverItem .gItem").height( + $(v_align).gallery_height() + + $(title).gallery_height() + + $(meta).gallery_height() + + parseInt($(context).css("margin-top").replace("px","")) + + $(context_label).gallery_height() + ); + $("#gHoverItem").fadeIn("fast"); $("#gHoverItem").hover( function(){ @@ -138,4 +151,11 @@ $(document).ready(function() { } ); + $.fn.gallery_height = function() { + var ht = $(this).height(); + var mt = $(this).css("margin-top").replace("px",""); + var mb = $(this).css("margin-bottom").replace("px",""); + return ht + parseInt(mt) + parseInt(mb); + }; + }); -- cgit v1.2.3 From c85d9b41d9fdc7f6ca19386f5eedbd2dea119b46 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 9 Aug 2009 23:12:25 -0600 Subject: First stab at context menu for resize. It's quirky and needs work. --- themes/default/js/ui.init.js | 153 ++++++++++++++++++++++--------------------- 1 file changed, 78 insertions(+), 75 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 9d8acf28..3726d305 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -49,11 +49,8 @@ $(document).ready(function() { // Apply jQuery UI button css to submit inputs $("input[type=submit]:not(.gShortForm input)").addClass("ui-state-default ui-corner-all"); - // Album view only - if ($("#gAlbumGrid").length) { - // Vertical align thumbnails/metadata in album grid - $(".gItem").gallery_valign(); - // Apply styles to gContextMenu + // Apply styles and icon classes to gContextMenu + if ($(".gContextMenu").length) { $(".gContextMenu li").addClass("ui-state-default"); $(".gContextMenu a").addClass("gButtonLink ui-icon-left"); $(".gContextMenu a").prepend(""); @@ -63,10 +60,83 @@ $(document).ready(function() { }); } + // Album view only + if ($("#gAlbumGrid").length) { + // Vertical align thumbnails/metadata in album grid + $(".gItem").gallery_valign(); + + // Initialize context menus + $(".gItem").hover( + function(){ + var position = $(this).position(); + var item_classes = $(this).attr("class"); + var bg_color = $(this).css("background-color"); + var container = $(this).parent(); + $("#gHoverItem").remove(); + container.append("
" + + $(this).html() + "
"); + $("#gHoverItem").css("top", position.top); + $("#gHoverItem").css("left", position.left); + $("#gHoverItem").css("background-color", bg_color); + $.fn.gallery_hover_init(); + var v_align = $(this).find(".gValign"); + var title = $(this).find("h2"); + var meta = $(this).find(".gMetadata"); + var context = $(this).find(".gContextMenu"); + var context_label = $(this).find(".gContextMenu li:first"); + $("#gHoverItem .gItem").height( + $(v_align).gallery_height() + + $(title).gallery_height() + + $(meta).gallery_height() + + parseInt($(context).css("margin-top").replace("px","")) + + $(context_label).gallery_height() + ); + + $("#gHoverItem").fadeIn("fast"); + $("#gHoverItem").hover( + function(){ + // Initialize context menus + $(".gContextMenu ul").hide(); + $(".gContextMenu").hover( + function() { + $(this).find("ul").slideDown("fast"); + var dialogLinks = $(this).find(".gDialogLink"); + $(dialogLinks).gallery_dialog(); + }, + function() { + $(this).find("ul").slideUp("slow"); + } + ); + }, + function() { + $(this).hide(); + } + ); + } + ); + } + // Photo/Item item view if ($("#gItem").length) { // Ensure the resized image fits within its container - $("#gItem").gallery_fit_image(); + $("#gItem").gallery_fit_photo(); + + // Initialize context menus + var resize = $("#gItem").gallery_get_photo(); + $(resize).hover( + function(){ + $(".gContextMenu").hover( + function() { + $(this).find("ul").slideDown("fast"); + var dialogLinks = $(this).find(".gDialogLink"); + $(dialogLinks).gallery_dialog(); + }, + function() { + $(this).find("ul").slideUp("slow"); + } + ); + } + ); // Collapse comments form, insert button to expand if ($("#gAddCommentForm").length) { @@ -88,74 +158,7 @@ $(document).ready(function() { }); } - // Add hover state for buttons - $(".ui-state-default").hover( - function(){ - $(this).addClass("ui-state-hover"); - }, - function(){ - $(this).removeClass("ui-state-hover"); - } - ); - - // Initialize context menus - // @todo apply hover affect to links - $(".gItem").hover( - function(){ - var position = $(this).position(); - var item_classes = $(this).attr("class"); - var bg_color = $(this).css("background-color"); - var container = $(this).parent(); - $("#gHoverItem").remove(); - container.append("
" - + $(this).html() + "
"); - $("#gHoverItem").css("top", position.top); - $("#gHoverItem").css("left", position.left); - $("#gHoverItem").css("background-color", bg_color); - - var v_align = $(this).find(".gValign"); - var title = $(this).find("h2"); - var meta = $(this).find(".gMetadata"); - var context = $(this).find(".gContextMenu"); - var context_label = $(this).find(".gContextMenu li:first"); - $("#gHoverItem .gItem").height( - $(v_align).gallery_height() - + $(title).gallery_height() - + $(meta).gallery_height() - + parseInt($(context).css("margin-top").replace("px","")) - + $(context_label).gallery_height() - ); - - $("#gHoverItem").fadeIn("fast"); - $("#gHoverItem").hover( - function(){ - // Initialize context menus - $(".gContextMenu ul").hide(); - $(".gContextMenu").hover( - function() { - $(this).find("ul").slideDown("fast"); - var dialogLinks = $(this).find(".gDialogLink"); - $(dialogLinks).gallery_dialog(); - }, - function() { - $(this).find("ul").slideUp("slow"); - } - ); - }, - function() { - $(this).hide(); - } - ); - }, - function(){ - } - ); - - $.fn.gallery_height = function() { - var ht = $(this).height(); - var mt = $(this).css("margin-top").replace("px",""); - var mb = $(this).css("margin-bottom").replace("px",""); - return ht + parseInt(mt) + parseInt(mb); - }; + // Initialize button hover effect + $.fn.gallery_hover_init(); }); -- cgit v1.2.3 From cbba45fffc7368280e9529f55e108d0080175b6a Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Mon, 10 Aug 2009 23:05:05 -0700 Subject: Create the concept of an "ajax link" and use it for thumbnail rotation and album covers in the context menu. Notes: - This requires context_menu() to have a CSS selector that refers to the that we're operating on, otherwise we don't know how to find the thumbnail, etc. - Create Menu_Element_Ajax_Link which has an ajax_handler attribute that contains a snippet of JS that we're going to run when the ajax call returns. - Add $.gallery_replace_image in gallery.common.js - Add lib/gallery.ajax.js which can be used to ajaxify any link, and have ui.init.js in the themes call that on all .gAjaxLink elements. --- lib/gallery.ajax.js | 15 +++ lib/gallery.common.js | 4 + modules/gallery/helpers/gallery.php | 191 ++++++++++++++++-------------- modules/gallery/libraries/Menu.php | 34 ++++++ modules/gallery/libraries/Theme_View.php | 6 +- themes/admin_default/js/ui.init.js | 3 + themes/admin_default/views/admin.html.php | 1 + themes/default/js/ui.init.js | 9 +- themes/default/views/album.html.php | 2 +- themes/default/views/movie.html.php | 2 +- themes/default/views/page.html.php | 1 + themes/default/views/photo.html.php | 2 +- 12 files changed, 169 insertions(+), 101 deletions(-) create mode 100644 lib/gallery.ajax.js (limited to 'themes/default/js/ui.init.js') diff --git a/lib/gallery.ajax.js b/lib/gallery.ajax.js new file mode 100644 index 00000000..4f26745d --- /dev/null +++ b/lib/gallery.ajax.js @@ -0,0 +1,15 @@ +(function($) { + $.widget("ui.gallery_ajax", { + _init: function() { + this.element.click(function(event) { + eval("var ajax_handler = " + $(event.currentTarget).attr("ajax_handler")); + $.get($(event.currentTarget).attr("href"), function(data) { + eval("var data = " + data); + ajax_handler(data); + }); + event.preventDefault(); + return false; + }); + } + }); +})(jQuery); diff --git a/lib/gallery.common.js b/lib/gallery.common.js index fdb7a1cc..53c2fafb 100644 --- a/lib/gallery.common.js +++ b/lib/gallery.common.js @@ -104,5 +104,9 @@ ); }; + // Ajax handler for replacing an image, used in Ajax thumbnail rotation + $.gallery_replace_image = function(data, thumb) { + $(thumb).attr({src: data.src, width: data.width, height: data.height}); + }; })(jQuery); diff --git a/modules/gallery/helpers/gallery.php b/modules/gallery/helpers/gallery.php index 42097a99..c81af842 100644 --- a/modules/gallery/helpers/gallery.php +++ b/modules/gallery/helpers/gallery.php @@ -197,108 +197,117 @@ class gallery_Core { return $menu; } - static function context_menu($menu, $theme, $item) { - $page_type = $theme->page_type(); - switch ($item->type) { - case "movie": - $edit_title = t("Edit this movie"); - $delete_title = t("Delete this movie"); - break; - - case "album": - $edit_title = t("Edit this album"); - $delete_title = t("Delete this album"); - break; - - default: - $edit_title = t("Edit this photo"); - $delete_title = t("Delete this photo"); - break; - } - $cover_title = t("Choose as the album cover"); - $move_title = t("Move to another album"); - - $csrf = access::csrf_token(); - + static function context_menu($menu, $theme, $item, $thumb_css_selector) { $menu->append($options_menu = Menu::factory("submenu") ->id("options_menu") ->label(t("Options")) ->css_class("ui-icon-carat-1-n")); - $options_menu->append(Menu::factory("dialog") - ->id("edit") - ->label($edit_title) - ->css_class("ui-icon-pencil") - ->url(url::site("quick/form_edit/$item->id?page_type=$page_type"))); + if (access::can("edit", $item)) { + $page_type = $theme->page_type(); + switch ($item->type) { + case "movie": + $edit_title = t("Edit this movie"); + $delete_title = t("Delete this movie"); + break; + case "album": + $edit_title = t("Edit this album"); + $delete_title = t("Delete this album"); + break; - if ($item->is_photo() && graphics::can("rotate")) { - $options_menu - ->append(Menu::factory("link") - ->id("rotate_ccw") - ->label(t("Rotate 90° counter clockwise")) - ->css_class("ui-icon-rotate-ccw") - ->url(url::site("quick/rotate/$item->id/ccw?csrf=$csrf&page_type=$page_type"))) - ->append(Menu::factory("link") - ->id("rotate_cw") - ->label(t("Rotate 90° clockwise")) - ->css_class("ui-icon-rotate-cw") - ->url(url::site("quick/rotate/$item->id/cw?csrf=$csrf&page_type=$page_type"))); - } + default: + $edit_title = t("Edit this photo"); + $delete_title = t("Delete this photo"); + break; + } + $cover_title = t("Choose as the album cover"); + $move_title = t("Move to another album"); - // Don't move photos from the photo page; we don't yet have a good way of redirecting after move - if ($page_type == "album") { - $options_menu - ->append(Menu::factory("dialog") - ->id("move") - ->label($move_title) - ->css_class("ui-icon-folder-open") - ->url(url::site("move/browse/$item->id"))); - } + $csrf = access::csrf_token(); + + $options_menu->append(Menu::factory("dialog") + ->id("edit") + ->label($edit_title) + ->css_class("ui-icon-pencil") + ->url(url::site("quick/form_edit/$item->id?page_type=$page_type"))); - $parent = $item->parent(); - if (access::can("edit", $parent)) { - // We can't make this item the highlight if it's an album with no album cover, or if it's - // already the album cover. - if (($item->type == "album" && empty($item->album_cover_item_id)) || - ($item->type == "album" && $parent->album_cover_item_id == $item->album_cover_item_id) || - $parent->album_cover_item_id == $item->id) { - $disabledState = " ui-state-disabled"; - } else { - $disabledState = " "; + + if ($item->is_photo() && graphics::can("rotate")) { + $options_menu + ->append( + Menu::factory("ajax_link") + ->id("rotate_ccw") + ->label(t("Rotate 90° counter clockwise")) + ->css_class("ui-icon-rotate-ccw") + ->ajax_handler("function(data) { " . + "\$.gallery_replace_image(data, \$('$thumb_css_selector')) }") + ->url(url::site("quick/rotate/$item->id/ccw?csrf=$csrf&page_type=$page_type"))) + ->append( + Menu::factory("ajax_link") + ->id("rotate_cw") + ->label(t("Rotate 90° clockwise")) + ->css_class("ui-icon-rotate-cw") + ->ajax_handler("function(data) { " . + "\$.gallery_replace_image(data, \$('$thumb_css_selector')) }") + ->url(url::site("quick/rotate/$item->id/cw?csrf=$csrf&page_type=$page_type"))); + } + + // Don't move photos from the photo page; we don't yet have a good way of redirecting after + // move + if ($page_type == "album") { + $options_menu + ->append(Menu::factory("dialog") + ->id("move") + ->label($move_title) + ->css_class("ui-icon-folder-open") + ->url(url::site("move/browse/$item->id"))); } - $options_menu - ->append(Menu::factory("link") - ->id("make_album_cover") - ->label($cover_title) - ->css_class("ui-icon-star") - ->url( - url::site("quick/make_album_cover/$item->id?csrf=$csrf&page_type=$page_type"))) - ->append(Menu::factory("dialog") - ->id("delete") - ->label($delete_title) - ->css_class("ui-icon-trash") - ->css_id("gQuickDelete") - ->url(url::site("quick/form_delete/$item->id?csrf=$csrf&page_type=$page_type"))); - } - if ($item->is_album()) { - $options_menu - ->append(Menu::factory("dialog") - ->id("add_item") - ->label(t("Add a photo")) - ->css_class("add_item") - ->url(url::site("simple_uploader/app/$item->id"))) - ->append(Menu::factory("dialog") - ->id("add_album") - ->label(t("Add an album")) - ->css_class("add_album") - ->url(url::site("form/add/albums/$item->id?type=album"))) - ->append(Menu::factory("dialog") - ->id("edit_permissions") - ->label(t("Edit permissions")) - ->css_class("permissions") - ->url(url::site("permissions/browse/$item->id"))); + $parent = $item->parent(); + if (access::can("edit", $parent)) { + // We can't make this item the highlight if it's an album with no album cover, or if it's + // already the album cover. + if (($item->type == "album" && empty($item->album_cover_item_id)) || + ($item->type == "album" && $parent->album_cover_item_id == $item->album_cover_item_id) || + $parent->album_cover_item_id == $item->id) { + $disabledState = " ui-state-disabled"; + } else { + $disabledState = " "; + } + $options_menu + ->append(Menu::factory("ajax_link") + ->id("make_album_cover") + ->label($cover_title) + ->css_class("ui-icon-star") + ->ajax_handler("function(data) { window.location.reload() }") + ->url(url::site("quick/make_album_cover/$item->id?csrf=$csrf"))) + ->append(Menu::factory("dialog") + ->id("delete") + ->label($delete_title) + ->css_class("ui-icon-trash") + ->css_id("gQuickDelete") + ->url(url::site("quick/form_delete/$item->id?csrf=$csrf&page_type=$page_type"))); + } + + if ($item->is_album()) { + $options_menu + ->append(Menu::factory("dialog") + ->id("add_item") + ->label(t("Add a photo")) + ->css_class("add_item") + ->url(url::site("simple_uploader/app/$item->id"))) + ->append(Menu::factory("dialog") + ->id("add_album") + ->label(t("Add an album")) + ->css_class("add_album") + ->url(url::site("form/add/albums/$item->id?type=album"))) + ->append(Menu::factory("dialog") + ->id("edit_permissions") + ->label(t("Edit permissions")) + ->css_class("permissions") + ->url(url::site("permissions/browse/$item->id"))); + } } } } \ No newline at end of file diff --git a/modules/gallery/libraries/Menu.php b/modules/gallery/libraries/Menu.php index 263dc38d..07b2b2b8 100644 --- a/modules/gallery/libraries/Menu.php +++ b/modules/gallery/libraries/Menu.php @@ -96,6 +96,37 @@ class Menu_Element_Link extends Menu_Element { } } +/** + * Menu element that provides an AJAX link. + */ +class Menu_Element_Ajax_Link extends Menu_Element { + public $ajax_handler; + + /** + * Set the AJAX handler + * @chainable + */ + public function ajax_handler($ajax_handler) { + $this->ajax_handler = $ajax_handler; + return $this; + } + + public function __toString() { + if (isset($this->css_id) && !empty($this->css_id)) { + $css_id = " id=\"$this->css_id\""; + } else { + $css_id = ""; + } + if (isset($this->css_class) && !empty($this->css_class)) { + $css_class = " $this->css_class"; + } else { + $css_class = ""; + } + return "
  • url\" " . + "title=\"$this->label\" ajax_handler=\"$this->ajax_handler\">$this->label
  • "; + } +} + /** * Menu element that provides a pop-up dialog */ @@ -132,6 +163,9 @@ class Menu_Core extends Menu_Element { case "link": return new Menu_Element_Link($type); + case "ajax_link": + return new Menu_Element_Ajax_Link($type); + case "dialog": return new Menu_Element_Dialog($type); diff --git a/modules/gallery/libraries/Theme_View.php b/modules/gallery/libraries/Theme_View.php index a5f5db03..541bce88 100644 --- a/modules/gallery/libraries/Theme_View.php +++ b/modules/gallery/libraries/Theme_View.php @@ -111,15 +111,15 @@ class Theme_View_Core extends Gallery_View { return $menu->compact(); } - public function context_menu($item) { + public function context_menu($item, $thumbnail_css_selector) { $menu = Menu::factory("root") ->append(Menu::factory("submenu") ->id("context_menu") ->label(t("Options"))) ->css_class("gContextMenu"); - gallery::context_menu($menu, $this, $item); - module::event("context_menu", $menu, $this, $item); + gallery::context_menu($menu, $this, $item, $thumbnail_css_selector); + module::event("context_menu", $menu, $this, $item, $thumbnail_css_selector); return $menu->compact(); } diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js index e52f0c4c..daa6dd70 100644 --- a/themes/admin_default/js/ui.init.js +++ b/themes/admin_default/js/ui.init.js @@ -19,6 +19,9 @@ $(document).ready(function(){ // Initialize modal dialogs $(".gDialogLink").gallery_dialog(); + // Initialize ajax links + $(".gDialogLink").gallery_ajax(); + // Initialize panels $(".gPanelLink").gallery_panel(); diff --git a/themes/admin_default/views/admin.html.php b/themes/admin_default/views/admin.html.php index d27f9260..3f4128cb 100644 --- a/themes/admin_default/views/admin.html.php +++ b/themes/admin_default/views/admin.html.php @@ -25,6 +25,7 @@ + script("gallery.ajax.js") ?> script("gallery.dialog.js") ?> script("superfish/js/superfish.js") ?> script("jquery.dropshadow.js") ?> diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 3726d305..60482972 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -34,6 +34,7 @@ $(document).ready(function() { // Initialize dialogs $("#gLoginLink").addClass("gDialogLink"); $(".gDialogLink").gallery_dialog(); + $(".gAjaxLink").gallery_ajax(); // Initialize view menu if ($("#gViewMenu").length) { @@ -100,8 +101,8 @@ $(document).ready(function() { $(".gContextMenu").hover( function() { $(this).find("ul").slideDown("fast"); - var dialogLinks = $(this).find(".gDialogLink"); - $(dialogLinks).gallery_dialog(); + $(this).find(".gDialogLink").gallery_dialog(); + $(this).find(".gAjaxLink").gallery_ajax(); }, function() { $(this).find("ul").slideUp("slow"); @@ -128,8 +129,8 @@ $(document).ready(function() { $(".gContextMenu").hover( function() { $(this).find("ul").slideDown("fast"); - var dialogLinks = $(this).find(".gDialogLink"); - $(dialogLinks).gallery_dialog(); + $(this).find(".gDialogLink").gallery_dialog(); + $(this).find(".gAjaxLink").gallery_ajax(); }, function() { $(this).find("ul").slideUp("slow"); diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php index ce57458e..e2890482 100644 --- a/themes/default/views/album.html.php +++ b/themes/default/views/album.html.php @@ -19,7 +19,7 @@ thumb_img(array("class" => "gThumbnail")) ?> thumb_bottom($child) ?> - context_menu($child) ?> + context_menu($child, "#gItemId-{$child->id} .gThumbnail") ?>

    title) ?>

    diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php index 66282bae..2cb71b9e 100644 --- a/themes/default/views/page.html.php +++ b/themes/default/views/page.html.php @@ -53,6 +53,7 @@ + script("gallery.ajax.js") ?> script("gallery.dialog.js") ?> script("gallery.form.js") ?> script("superfish/js/superfish.js") ?> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index 453417dc..fa5def47 100644 --- a/themes/default/views/photo.html.php +++ b/themes/default/views/photo.html.php @@ -47,7 +47,7 @@ resize_bottom($item) ?> - context_menu($item) ?> + context_menu($item, "#gPhotoId-{$item->id}") ?>
    -- cgit v1.2.3 From bb6bf17076eff74ee490d17b510150d68f5faa54 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Tue, 11 Aug 2009 00:41:07 -0600 Subject: Move context menu to gallery.common, forgot to include in prior commit --- themes/default/js/ui.init.js | 31 ++++--------------------------- 1 file changed, 4 insertions(+), 27 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 60482972..ef7e43d9 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -34,7 +34,6 @@ $(document).ready(function() { // Initialize dialogs $("#gLoginLink").addClass("gDialogLink"); $(".gDialogLink").gallery_dialog(); - $(".gAjaxLink").gallery_ajax(); // Initialize view menu if ($("#gViewMenu").length) { @@ -96,18 +95,7 @@ $(document).ready(function() { $("#gHoverItem").fadeIn("fast"); $("#gHoverItem").hover( function(){ - // Initialize context menus - $(".gContextMenu ul").hide(); - $(".gContextMenu").hover( - function() { - $(this).find("ul").slideDown("fast"); - $(this).find(".gDialogLink").gallery_dialog(); - $(this).find(".gAjaxLink").gallery_ajax(); - }, - function() { - $(this).find("ul").slideUp("slow"); - } - ); + $(this).gallery_context_menu(); }, function() { $(this).hide(); @@ -124,20 +112,9 @@ $(document).ready(function() { // Initialize context menus var resize = $("#gItem").gallery_get_photo(); - $(resize).hover( - function(){ - $(".gContextMenu").hover( - function() { - $(this).find("ul").slideDown("fast"); - $(this).find(".gDialogLink").gallery_dialog(); - $(this).find(".gAjaxLink").gallery_ajax(); - }, - function() { - $(this).find("ul").slideUp("slow"); - } - ); - } - ); + $(resize).hover(function(){ + $(this).gallery_context_menu(); + }); // Collapse comments form, insert button to expand if ($("#gAddCommentForm").length) { -- cgit v1.2.3