Show recently tagged photos using js cards instead of iframe.

frontends/etiquette_flask/templates/tags.html

@@ -17,6 +17,7 @@
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/cards.js"></script>
     <script src="/static/js/editor.js"></script>
     <script src="/static/js/http.js"></script>
     <script src="/static/js/spinners.js"></script>
@@ -256,12 +257,7 @@
         {% if specific_tag %}
         <div id="hierarchy_recentphotos" class="panel">
             <h2><a href="/search?tag_musts={{specific_tag.name}}&orderby=tagged_at-desc">Recent photos</a></h2>
-            <iframe
+            <span class="spinner hidden">⌛</span>
-            class="embedded_search"
-            src="/search_embed?tag_musts={{specific_tag.name}}&orderby=tagged_at-desc&yield_albums=no&limit=10"
-            onload="return common.size_iframe_to_content(this);"
-            >
-            </iframe>
         </div> <!-- hierarchy_recentphotos -->
         {% endif %} <!-- if specific tag -->
     </div>
@@ -276,6 +272,30 @@ const easybake_button = document.getElementById('easybake_button');
 const message_area = document.getElementById('message_area');
 common.bind_box_to_button(easybake_input, easybake_button, false);
 
+// UI
+
+function search_recent_photos()
+{
+    const div = document.getElementById("hierarchy_recentphotos");
+    const spinner = div.querySelector(".spinner");
+    spinner.classList.remove("hidden");
+    function callback(response)
+    {
+        spinner.classList.add("hidden");
+        const count = response.data.results.length + (response.data.more_after_limit ? "+" : "");
+        div.querySelector("h2").prepend(count + " ");
+        for (const photo of response.data.results)
+        {
+            div.append(cards.photos.create(photo, "grid"));
+        }
+    }
+    const parameters = new URLSearchParams();
+    parameters.set("tag_musts", SPECIFIC_TAG);
+    parameters.set("orderby", "tagged_at-desc");
+    parameters.set("limit", "20");
+    api.photos.search(parameters, callback);
+}
+
 // BUTTON HANDLERS
 
 function add_child_form(event)
@@ -588,5 +608,14 @@ const rename_ed = new editor.Editor(
     rename_ed_on_save,
 );
 {% endif %}
+
+function on_pageload()
+{
+    if (SPECIFIC_TAG)
+    {
+        search_recent_photos();
+    }
+}
+document.addEventListener("DOMContentLoaded", on_pageload);
 </script>
 </html>