voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
voussoir 2022-08-03 18:40:36 -07:00
parent df5870502a
commit c159dbbc0f
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
5 changed files with 64 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontends/etiquette_flask/static/css/cards.css
View file

@ -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;
}
/* ########################################################################## */

62
frontends/etiquette_flask/static/js/cards.js
View file

@ -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;
}

2
frontends/etiquette_flask/static/js/contextmenus.js
View file

@ -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";
}

37
frontends/etiquette_flask/templates/album.html
View file

@ -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);
</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);
}

6
frontends/etiquette_flask/templates/cards.html
View file

@ -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 %}