Add CSS clipboard_size; and other clip hook improvements.

Any element with class clipboard_size will have its text updated;
Removed the call to on_pageload from save_ because it redundantly
causes a load. Separate those update hooks.

README.md

@@ -84,7 +84,6 @@ If you are interested in helping, please raise an issue before making any pull r
 - Fix album size cache when photo reload metadata and generally improve that validation.
 - Better bookmark url validation.
 - Create a textbox which gives autocomplete tag names.
-- Allow any div to get the clipboard size. Update via classname instead of ID.
 
 ### To do list: User permissions
 Here are some thoughts about the kinds of features that need to exist within the permission system. I don't know how I'll actually manage it just yet. Possibly a `permissions` table in the database with `user_id | permission` where `permission` is some reliably-formatted string.

frontends/etiquette_flask/static/photoclipboard.js

@@ -33,7 +33,7 @@ function save_photo_clipboard()
     console.log("Saving photo clipboard");
     var serialized = JSON.stringify(Array.from(photo_clipboard));
     localStorage.setItem("photo_clipboard", serialized);
-    on_storage();
+    update_pagestate();
 
     for (var index = 0; index < on_clipboard_save_hooks.length; index += 1)
     {
@@ -135,7 +135,18 @@ function on_photo_select(event)
 
 // Tray management /////////////////////////////////////////////////////////////////////////////////
 
-function toggle_clipboard_tray_collapsed()
+function clipboard_tray_collapse()
+{
+    var tray_body = document.getElementById("clipboard_tray_body");
+    tray_body.classList.add("hidden");
+}
+function clipboard_tray_uncollapse()
+{
+    var tray_body = document.getElementById("clipboard_tray_body");
+    tray_body.classList.remove("hidden");
+    update_clipboard_tray();
+}
+function clipboard_tray_collapse_toggle()
 {
     /*
     Show or hide the clipboard.
@@ -143,12 +154,11 @@ function toggle_clipboard_tray_collapsed()
     var tray_body = document.getElementById("clipboard_tray_body");
     if (tray_body.classList.contains("hidden") && photo_clipboard.size > 0)
     {
-        tray_body.classList.remove("hidden");
+        clipboard_tray_uncollapse();
-        update_clipboard_tray();
     }
     else
     {
-        tray_body.classList.add("hidden");
+        clipboard_tray_collapse();
     }
 }
 
@@ -162,7 +172,7 @@ function on_tray_delete_button(event)
     photo_clipboard.delete(photo_id);
     if (photo_clipboard.size == 0)
     {
-        toggle_clipboard_tray_collapsed();
+        clipboard_tray_collapse();
     }
     save_photo_clipboard();
 }
@@ -170,8 +180,7 @@ function on_tray_delete_button(event)
 function update_clipboard_tray()
 {
     /*
-    Update the clipboard's title bar to the correct number of items and rebuild
+    Rebuild the rows if the tray is open.
-    the rows if the tray is open.
     */
     var clipboard_tray = document.getElementById("clipboard_tray");
     if (clipboard_tray === null)
@@ -179,12 +188,6 @@ function update_clipboard_tray()
         return;
     }
 
-    var tray_button = document.getElementById("clipboard_tray_expandbutton");
-    if (tray_button !== null)
-    {
-        tray_button.innerText = "Clipboard: " + photo_clipboard.size + " items";
-    }
-
     var tray_lines = document.getElementById("clipboard_tray_lines");
     if (!clipboard_tray.classList.contains("hidden"))
     {
@@ -214,14 +217,27 @@ function update_clipboard_tray()
     }
 }
 
+function update_clipboard_count()
+{
+    var elements = document.getElementsByClassName("clipboard_count");
+    for (var index = 0; index < elements.length; index += 1)
+    {
+        elements[index].innerText = photo_clipboard.size;
+    }
+}
 function on_storage()
 {
     /*
     Receive storage events from other tabs and update our state to match.
     */
     load_photo_clipboard();
-    apply_check_all();
+    update_pagestate();
+}
+function update_pagestate()
+{
+    update_clipboard_count();
     update_clipboard_tray();
+    apply_check_all();
 }
 function on_pageload()
 {

frontends/etiquette_flask/templates/clipboard.html

@@ -11,6 +11,10 @@
     <script src="/static/photoclipboard.js"></script>
 
 <style>
+#content_body
+{
+    flex-direction: column;
+}
 </style>
 </head>
 
@@ -18,6 +22,7 @@
 <body>
     {{header.make_header(session=session)}}
     <div id="content_body">
+        <span>The clipboard contains <span class="clipboard_count">0</span> items</span>
         <div id="photo_card_holder">
         </div>
     </div>
@@ -97,5 +102,6 @@ function myhook()
 }
 
 on_clipboard_load_hooks.push(myhook);
+on_clipboard_save_hooks.push(myhook);
 </script>
 </html>

frontends/etiquette_flask/templates/clipboard_tray.html

@@ -3,8 +3,8 @@
     <button
     id="clipboard_tray_expandbutton"
     class="yellow_button"
-    onclick="toggle_clipboard_tray_collapsed()"
+    onclick="clipboard_tray_collapse_toggle()"
-    >Clipboard: 0 items</button>
+    >Clipboard: <span class="clipboard_count">0</span> items</button>
     <div id="clipboard_tray_body" class="hidden">
         <div id="clipboard_tray_toolbox">
             <a target="_blank" href="/clipboard">Full clipboard</a>