Apply review comments

* Add alpine intersect
* Move alpine and it's plugins to a folder
* Fix spinning wheel position
* Improve album title position
This commit is contained in:
Antoine Bartuccio 2024-08-10 14:49:02 +02:00
parent 0eeaf1ce21
commit a2b5f929dd
4 changed files with 34 additions and 30 deletions

View File

@ -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)});})();

View File

@ -29,7 +29,7 @@
{% block additional_js %}{% endblock %} {% block additional_js %}{% endblock %}
{# Alpine JS must be loaded after scripts that use it. #} {# 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 %} {% endblock %}
</head> </head>

View File

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