From 29774f2524fd301f0e127efe45d7e2d90f3d4310 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Tue, 5 Jan 2021 01:24:03 -0800
Subject: [PATCH] Add the clipboard checkbox on pageload, not in server
 response.

With the recent addition of search_embed iframes on other pages, we
had photo cards appearing but the photo_clipboard module was not
imported thus the checkboxes did nothing. I don't want to import
photo_clipboard onto every single page, I'd rather they click through
to the full search UI. Otherwise every single page will have the tray
and often not a good enough reason for it.
So, since the functionality of the checkbox is completely reliant on
the photo_clipboard.js module anyway, there's no reason not to have it
generated by that module.
---
 .../static/js/photo_clipboard.js              | 28 ++++++++++++++++---
 .../etiquette_flask/templates/photo.html      |  1 +
 .../etiquette_flask/templates/photo_card.html |  1 -
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontends/etiquette_flask/static/js/photo_clipboard.js b/frontends/etiquette_flask/static/js/photo_clipboard.js
index 98abada..256df84 100644
--- a/frontends/etiquette_flask/static/js/photo_clipboard.js
+++ b/frontends/etiquette_flask/static/js/photo_clipboard.js
@@ -54,6 +54,21 @@ function save_clipboard()
 
 // Card management /////////////////////////////////////////////////////////////////////////////////
 
+photo_clipboard.give_checkbox =
+function give_checkbox(photo_card)
+{
+    // There are some UIs where photo cards appear
+    const checkbox = document.createElement("input")
+    checkbox.type = "checkbox";
+    checkbox.className = "photo_clipboard_selector_checkbox";
+    checkbox.onclick = function(event)
+    {
+        return photo_clipboard.on_photo_select(event);
+    }
+    photo_card.appendChild(checkbox);
+    return checkbox;
+}
+
 photo_clipboard.apply_check =
 function apply_check(checkbox)
 {
@@ -104,12 +119,17 @@ photo_clipboard.apply_check_all =
 function apply_check_all()
 {
     /*
-    Run through all the photo cards on the page and set their checkbox to the
-    correct value.
+    Run through all the photo cards, give them their checkbox if they don't
+    already have it, and check it if that photo is on the clipboard.
     */
-    const checkboxes = document.getElementsByClassName("photo_clipboard_selector_checkbox");
-    for (const checkbox of checkboxes)
+    const cards = document.getElementsByClassName("photo_card");
+    for (const card of cards)
     {
+        let checkbox = card.getElementsByClassName("photo_clipboard_selector_checkbox")[0];
+        if (! checkbox)
+        {
+            checkbox = photo_clipboard.give_checkbox(card);
+        }
         photo_clipboard.apply_check(checkbox);
     }
 }
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index af9381b..e315c34 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -607,6 +607,7 @@ function autofocus_add_tag_box()
 function on_pageload()
 {
     autofocus_add_tag_box();
+    photo_clipboard.apply_check(document.getElementById("clipboard_checkbox"));
 }
 document.addEventListener("DOMContentLoaded", on_pageload);
 </script>
diff --git a/frontends/etiquette_flask/templates/photo_card.html b/frontends/etiquette_flask/templates/photo_card.html
index 09b8220..5616c0b 100644
--- a/frontends/etiquette_flask/templates/photo_card.html
+++ b/frontends/etiquette_flask/templates/photo_card.html
@@ -29,7 +29,6 @@
     data-id="{{photo.id}}"
     class="photo_card photo_card_{{view}} photo_card_unselected {%if photo.searchhidden%}photo_card_searchhidden{%endif%}"
 >
-    <input type="checkbox" class="photo_clipboard_selector_checkbox" onclick="return photo_clipboard.on_photo_select(event);"/>
     <div class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></div>
     <span class="photo_card_metadata">
         {{- metadata_inner|safe -}}