Apply review comments

* Add alpine intersect
* Move alpine and it's plugins to a folder
* Fix spinning wheel position
* Improve album title position

core/static/core/js/alpine/intersect.min.js

@@ -0,0 +1 @@
+(()=>{function o(e){e.directive("intersect",e.skipDuringClone((t,{value:i,expression:l,modifiers:n},{evaluateLater:r,cleanup:c})=>{let s=r(l),a={rootMargin:x(n),threshold:f(n)},u=new IntersectionObserver(d=>{d.forEach(h=>{h.isIntersecting!==(i==="leave")&&(s(),n.includes("once")&&u.disconnect())})},a);u.observe(t),c(()=>{u.disconnect()})}))}function f(e){if(e.includes("full"))return .99;if(e.includes("half"))return .5;if(!e.includes("threshold"))return 0;let t=e[e.indexOf("threshold")+1];return t==="100"?1:t==="0"?0:Number(`.${t}`)}function p(e){let t=e.match(/^(-?[0-9]+)(px|%)?$/);return t?t[1]+(t[2]||"px"):void 0}function x(e){let t="margin",i="0px 0px 0px 0px",l=e.indexOf(t);if(l===-1)return i;let n=[];for(let r=1;r<5;r++)n.push(p(e[l+r]||""));return n=n.filter(r=>r!==void 0),n.length?n.join(" ").trim():i}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(o)});})();

core/templates/core/base.jinja

@@ -29,7 +29,7 @@
       {% block additional_js %}{% endblock %}
 
       {# Alpine JS must be loaded after scripts that use it. #}
-      <script src="{{ static('core/js/alpinejs.min.js') }}" defer></script>
+      <script src="{{ static('core/js/alpine/alpinejs.min.js') }}" defer></script>
     {% endblock %}
   </head>
 

core/templates/core/user_pictures.jinja

@@ -10,6 +10,7 @@
     window.showSaveFilePicker = showSaveFilePicker; /* Export function to normal javascript */
   </script>
   <script defer type="text/javascript" src="{{ static('core/js/zipjs/zip-fs-full.min.js') }}"></script>
+  <script defer type="text/javascript" src="{{ static('core/js/alpine/intersect.min.js') }}"></script>
 {% endblock %}
 
 {% block title %}
@@ -17,48 +18,50 @@
 {% endblock %}
 
 {% block content %}
-  <main x-data="user_pictures" :aria-busy="loading">
+  <main x-data="user_pictures">
     {% if user.id == object.id %}
       <div x-show="pictures.length > 0" x-cloak>
         <button
-          :disabled="in_progress"
+          :disabled="is_downloading"
           class="btn btn-blue"
           @click="download_zip()"
         >
           <i class="fa fa-download"></i>
           {% trans %}Download all my pictures{% endtrans %}
         </button>
-        <progress x-ref="progress" x-show="in_progress"></progress>
+        <progress x-ref="progress" x-show="is_downloading"></progress>
       </div>
     {% endif %}
 
-    <template x-for="title in [...Object.keys(albums)]">
-      <section>
-        <h4 x-text="title"></h4>
-        <br />
-        <div class="photos">
-          <template x-for="picture in albums[title]">
-            <a :href="`/sas/picture/${picture.id}#pict`">
-              <div
-                class="photo"
-                :class="{not_moderated: !picture.is_moderated}"
-                :style="`background-image: url(${picture.thumb_url})`"
-              >
-                <template x-if="!picture.is_moderated">
-                  <div class="overlay">&nbsp;</div>
-                  <div class="text">{% trans %}To be moderated{% endtrans %}</div>
-                </template>
-                <template x-if="picture.is_moderated">
-                  <div class="text">&nbsp;</div>
-                </template>
+    <template x-for="[album, pictures] in Object.entries(albums)">
+      <section x-data="{ shown: false }" x-intersect:enter="shown = true">
+        <hgroup x-show="shown" x-transition x-cloak>
+          <br />
+          <h4 x-text="album"></h4>
+          <div class="photos">
+            <template x-for="picture in pictures">
+              <a :href="`/sas/picture/${picture.id}#pict`">
+                <div
+                  class="photo"
+                  :class="{not_moderated: !picture.is_moderated}"
+                  :style="`background-image: url(${picture.thumb_url})`"
+                >
+                  <template x-if="!picture.is_moderated">
+                    <div class="overlay">&nbsp;</div>
+                    <div class="text">{% trans %}To be moderated{% endtrans %}</div>
+                  </template>
+                  <template x-if="picture.is_moderated">
+                    <div class="text">&nbsp;</div>
+                  </template>
+                </div>
               </div>
-
-            </div>
-          </a>
-        </template>
+            </a>
+          </template>
+        </hgroup>
       </div>
     </section>
   </template>
+  <div class="photos" :aria-busy="loading"></div>
   </main>
 {% endblock content %}
 
@@ -81,7 +84,7 @@
 
     document.addEventListener("alpine:init", () => {
       Alpine.data("user_pictures", () => ({
-        in_progress: false,
+        is_downloading: false,
         loading: true,
         pictures: [],
         albums: {},
@@ -121,7 +124,7 @@
 
 
         async download_zip(){
-          this.in_progress = true;
+          this.is_downloading = true;
           const bar = this.$refs.progress;
           bar.value = 0;
           bar.max = this.pictures.length;
@@ -144,7 +147,7 @@
           }));
 
           await zipWriter.close();
-          this.in_progress = false;
+          this.is_downloading = false;
         }
       }))
     });