diff --git a/frontends/etiquette_flask/static/css/cards.css b/frontends/etiquette_flask/static/css/cards.css index 1746a96..13bdcac 100644 --- a/frontends/etiquette_flask/static/css/cards.css +++ b/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; } /* ########################################################################## */ diff --git a/frontends/etiquette_flask/static/js/cards.js b/frontends/etiquette_flask/static/js/cards.js index 9994e60..e4af7e0 100644 --- a/frontends/etiquette_flask/static/js/cards.js +++ b/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; } diff --git a/frontends/etiquette_flask/static/js/contextmenus.js b/frontends/etiquette_flask/static/js/contextmenus.js index 3f7358d..6040a75 100644 --- a/frontends/etiquette_flask/static/js/contextmenus.js +++ b/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"; } diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html index 8257e80..545672e 100644 --- a/frontends/etiquette_flask/templates/album.html +++ b/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) - { - api.albums.set_thumbnail_photo(ALBUM_ID, photo_id, common.refresh_or_alert); - } - toolbox.appendChild(button); + ; } + 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); + } + 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); @@ -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); } diff --git a/frontends/etiquette_flask/templates/cards.html b/frontends/etiquette_flask/templates/cards.html index 318d9ea..282dfcf 100644 --- a/frontends/etiquette_flask/templates/cards.html +++ b/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 #} {{tag_names_inner}} - - {# This button should be unhidden by any page that inserts toolbox items #} - -
-
{% endmacro %}