Improve photo contextmenu, reuse a single contextmenu element for all.

frontends/etiquette_flask/static/css/cards.css

@@ -283,7 +283,7 @@
     grid-area: toolbutton;
 }
 
-.photo_card_tools
+.photo_card_contextmenu
 {
     display: none;
     background-color: var(--color_secondary);
@@ -291,10 +291,10 @@
     z-index: 1;
     width: max-content;
 }
-.photo_card_tools.open_contextmenu
+.photo_card_contextmenu.open_contextmenu
 {
     display: initial;
-    position: fixed;
+    position: absolute;
 }
 
 /* ########################################################################## */

frontends/etiquette_flask/static/js/cards.js

@@ -244,17 +244,6 @@ function create(photo, view)
     photo_card_tags.innerText = tag_names_inner;
     photo_card.appendChild(photo_card_tags);
 
-    const toolbutton = document.createElement("button");
-    toolbutton.className = "photo_card_toolbutton hidden";
-    toolbutton.onclick = "return cards.photos.show_tools(event);";
-    photo_card.appendChild(toolbutton);
-
-    const photo_card_tools = document.createElement("div");
-    photo_card_tools.classList.add("photo_card_tools");
-    photo_card_tools.classList.add("contextmenu");
-    photo_card_tools.onclick = "event.stopPropagation(); return;";
-    photo_card.appendChild(photo_card_tools);
-
     if (photo_clipboard)
     {
         const clipboard_checkbox = photo_clipboard.give_checkbox(photo_card);
@@ -284,18 +273,51 @@ function drag_drop(event)
 {
 }
 
-cards.photos.show_tools =
-function show_tools(event)
+cards.photos.photo_contextmenu = null;
+cards.photos.set_contextmenu =
+function set_contextmenu(element, build_function)
 {
+    element.classList.add("photo_card_contextmenu");
+    element.classList.add("contextmenu");
+    element.onclick = "event.stopPropagation(); return;";
+    cards.photos.photo_contextmenu = element;
+    cards.photos.build_photo_contextmenu = build_function;
+    contextmenus.hide_open_menus();
+}
+
+cards.photos.right_clicked_photo = null;
+cards.photos.photo_rightclick =
+function photo_rightclick(event)
+{
+    if (["A", "IMG"].includes(event.target.tagName))
+    {
+        return true;
+    }
+    if (cards.photos.photo_contextmenu === null)
+    {
+        return true;
+    }
+    if (event.ctrlKey || event.shiftKey || event.altKey)
+    {
+        return true;
+    }
+    const photo_card = event.target.closest(".photo_card");
+    if (! photo_card)
+    {
+        cards.photos.right_clicked_photo = null;
+        contextmenus.hide_open_menus();
+        return true;
+    }
+    if (contextmenus.menu_is_open())
+    {
+        contextmenus.hide_open_menus();
+    }
+    cards.photos.right_clicked_photo = photo_card;
+    const menu = cards.photos.photo_contextmenu;
+    cards.photos.build_photo_contextmenu(photo_card, menu);
+    setTimeout(() => {contextmenus.show_menu(event, menu);}, 0);
     event.stopPropagation();
     event.preventDefault();
-    const photo_card = event.target.closest(".photo_card");
-    const toolbox = photo_card.getElementsByClassName("photo_card_tools")[0];
-    if (toolbox.childElementCount === 0)
-    {
-        return;
-    }
-    contextmenus.show_menu(event, toolbox);
     return false;
 }
 

frontends/etiquette_flask/static/js/contextmenus.js

@@ -36,7 +36,7 @@ function show_menu(event, menu)
     const over_right = Math.max(0, event.clientX + menu.offsetWidth - html.clientWidth);
     const over_bottom = Math.max(0, event.clientY + menu.offsetHeight - html.clientHeight);
     const left = event.clientX - over_right;
-    const top = event.clientY - over_bottom;
+    const top = event.pageY - over_bottom;
     menu.style.left = left + "px";
     menu.style.top = top + "px";
 }

frontends/etiquette_flask/templates/album.html

@@ -442,28 +442,29 @@ function add_album_datalist_on_load(datalist)
 }
 album_autocomplete.on_load_hooks.push(add_album_datalist_on_load);
 
-function add_photo_toolbox_entries()
+function prepare_photo_contextmenu()
 {
-    const photo_cards = document.getElementsByClassName("photo_card");
-    for (const photo_card of photo_cards)
+    function build_photo_contextmenu(photo, menu)
     {
-        const photo_id = photo_card.dataset.id;
-        const toolbox = photo_card.getElementsByClassName("photo_card_tools")[0];
-        const toolbutton = photo_card.getElementsByClassName("photo_card_toolbutton")[0];
-        toolbutton.classList.remove("hidden");
-        const button = document.createElement("button");
-        button.innerText = "Set as Album thumbnail";
-        button.onclick = function(event)
+        ;
+    }
+    const menu = document.createElement("div");
+    const set_thumbnail_button = document.createElement("button");
+    set_thumbnail_button.innerText = "Set as Album thumbnail";
+    set_thumbnail_button.onclick = function(event)
     {
+        const photo_id = cards.photos.right_clicked_photo.dataset.id;
         api.albums.set_thumbnail_photo(ALBUM_ID, photo_id, common.refresh_or_alert);
     }
-        toolbox.appendChild(button);
-    }
+    menu.appendChild(set_thumbnail_button);
+    document.body.appendChild(menu);
+    cards.photos.set_contextmenu(menu, build_photo_contextmenu);
 }
+
 function on_pageload()
 {
     photo_clipboard.register_hotkeys();
-    add_photo_toolbox_entries();
+    prepare_photo_contextmenu();
 }
 document.addEventListener("DOMContentLoaded", on_pageload);
 </script>
@@ -474,11 +475,7 @@ document.addEventListener("DOMContentLoaded", on_pageload);
 
 function create_album_form(event)
 {
-    const title = event.target.input_source.value;
-    if (! title)
-    {
-        title = undefined;
-    }
+    const title = event.target.input_source.value.trim() || undefined;
     const parent_id = ALBUM_ID;
     api.albums.create(title, parent_id, api.albums.callback_follow);
 }

frontends/etiquette_flask/templates/cards.html

@@ -146,6 +146,7 @@ class="photo_card photo_card_{{view}} photo_card_unselected {%if photo.searchhid
 ondragstart="return cards.photos.drag_start(event);"
 ondragend="return cards.photos.drag_end(event);"
 ondragover="return cards.photos.drag_over(event);"
+oncontextmenu="return cards.photos.photo_rightclick(event);"
 ondrop="return cards.photos.drag_drop(event);"
 draggable="true"
 >
@@ -177,11 +178,6 @@ draggable="true"
     {% endif %}{# if grid #}
 
     <span class="photo_card_tags" title="{{tag_names_title}}">{{tag_names_inner}}</span>
-
-    {# This button should be unhidden by any page that inserts toolbox items #}
-    <button class="photo_card_toolbutton hidden" onclick="return cards.photos.show_tools(event);"></button>
-    <div class="photo_card_tools" onclick="event.stopPropagation(); return;">
-    </div>
 </div>
 
 {% endmacro %}