ajaxify album loading in the SAS

This commit is contained in:
imperosol
2025-02-21 16:44:56 +01:00
parent 218aab1af3
commit 60db7e2516
4 changed files with 65 additions and 21 deletions

View File

@ -53,28 +53,43 @@
{% endif %}
{% endif %}
{% if children_albums|length > 0 %}
<h4>{% trans %}Albums{% endtrans %}</h4>
<div class="albums">
{% for a in children_albums %}
{{ display_album(a, is_sas_admin) }}
{% endfor %}
{% if show_albums %}
<div x-data="albums({ parentId: {{ album.id }} })" class="margin-bottom">
<h4>{% trans %}Albums{% endtrans %}</h4>
<div class="albums" :aria-busy="loading">
<template x-for="album in albums" :key="album.id">
<a :href="album.sas_url">
<div
x-data="{thumbUrl: album.thumbnail || '{{ static("core/img/sas.jpg") }}'}"
class="album"
:class="{not_moderated: !album.is_moderated}"
>
<img :src="thumbUrl" :alt="album.name" loading="lazy" />
<template x-if="album.is_moderated">
<div class="text" x-text="album.name"></div>
</template>
<template x-if="!album.is_moderated">
<div class="overlay">&nbsp;</div>
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
</template>
</div>
{% if edit_mode %}
<input type="checkbox" name="file_list" :value="album.id">
{% endif %}
</a>
</template>
</div>
</div>
<br>
{% endif %}
<div x-data="pictures({ albumId: {{ album.id }}, maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }} })">
{{ download_button(_("Download album")) }}
<h4>{% trans %}Pictures{% endtrans %}</h4>
<br>
{{ download_button(_("Download album")) }}
<div class="photos" :aria-busy="loading">
<template x-for="picture in getPage(page)">
<a :href="picture.sas_url">
<div
class="photo"
:class="{not_moderated: !picture.is_moderated}"
>
<div class="photo" :class="{not_moderated: !picture.is_moderated}">
<img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
<template x-if="!picture.is_moderated">
<div class="overlay">&nbsp;</div>