Add photo_card.photo_card_tools infra for contextual tools.

I'm not satisfied with the appearance of the toolbutton just yet,
but we can revise that later.

frontends/etiquette_flask/static/css/cards.css

@@ -282,6 +282,28 @@
     font-size: 11px;
 }
 
+.photo_card_toolbutton
+{
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 16px;
+    height: 16px;
+}
+.photo_card_grid .photo_card_tools
+{
+    display: none;
+    background-color: var(--color_secondary);
+    border: 2px solid var(--color_shadow);
+    z-index: 1;
+    width: max-content;
+}
+.photo_card_grid .photo_card_tools.open_contextmenu
+{
+    display: initial;
+    position: absolute;
+}
+
 /* ########################################################################## */
 /* ########################################################################## */
 /* ########################################################################## */

frontends/etiquette_flask/static/js/cards.js

@@ -0,0 +1,28 @@
+const cards = {};
+
+/******************************************************************************/
+cards.albums = {};
+
+/******************************************************************************/
+cards.bookmarks = {};
+
+/******************************************************************************/
+cards.photos = {};
+
+cards.photos.show_tools =
+function show_tools(event)
+{
+    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;
+}
+
+/******************************************************************************/
+cards.tags = {};

frontends/etiquette_flask/static/js/contextmenus.js

@@ -0,0 +1,32 @@
+const contextmenus = {};
+
+contextmenus.hide_open_menus =
+function hide_open_menus()
+{
+    const elements = document.getElementsByClassName("open_contextmenu");
+    while (elements.length > 0)
+    {
+        elements[0].classList.remove("open_contextmenu");
+    }
+}
+
+contextmenus.show_menu =
+function show_menu(event, element)
+{
+    contextmenus.hide_open_menus();
+    console.log(event);
+    element.classList.add("open_contextmenu");
+    const html = document.documentElement;
+    const over_right = Math.max(0, event.clientX + element.offsetWidth - html.clientWidth);
+    const over_bottom = Math.max(0, event.clientY + element.offsetHeight - html.clientHeight);
+    const left = event.target.offsetLeft + event.offsetX - over_right;
+    const top = event.target.offsetTop + event.offsetY - over_bottom;
+    element.style.left = left + "px";
+    element.style.top = top + "px";
+}
+
+function on_pageload()
+{
+    document.body.addEventListener("click", contextmenus.hide_open_menus);
+}
+document.addEventListener("DOMContentLoaded", on_pageload);

frontends/etiquette_flask/templates/cards.html

@@ -150,6 +150,10 @@ class="photo_card photo_card_{{view}} photo_card_unselected {%if photo.searchhid
     {% endif %}{# if grid #}
 
     <span class="photo_card_tags" title="{{tag_names_title}}">{{tag_names_inner}}</span>
+
+    <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 %}