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. --- modules/gallery/libraries/Menu.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'modules/gallery/libraries/Menu.php') diff --git a/modules/gallery/libraries/Menu.php b/modules/gallery/libraries/Menu.php index a39b59a5..263dc38d 100644 --- a/modules/gallery/libraries/Menu.php +++ b/modules/gallery/libraries/Menu.php @@ -91,7 +91,7 @@ class Menu_Element_Link extends Menu_Element { } else { $css_class = ""; } - return "
  • url\" " . + return "
  • url\" " . "title=\"$this->label\">$this->label
    • "; } } @@ -111,7 +111,7 @@ class Menu_Element_Dialog extends Menu_Element { } else { $css_class = ""; } - return "
  • url\" " . + return "
  • url\" " . "title=\"$this->label\">$this->label
    • "; } } -- 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 'modules/gallery/libraries/Menu.php') 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) ?>