mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-10 00:03:24 +00:00
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:
parent
0eeaf1ce21
commit
a2b5f929dd
1
core/static/core/js/alpine/intersect.min.js
vendored
Normal file
1
core/static/core/js/alpine/intersect.min.js
vendored
Normal 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)});})();
|
@ -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>
|
||||||
|
|
||||||
|
@ -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"> </div>
|
<template x-if="!picture.is_moderated">
|
||||||
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
|
<div class="overlay"> </div>
|
||||||
</template>
|
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
|
||||||
<template x-if="picture.is_moderated">
|
</template>
|
||||||
<div class="text"> </div>
|
<template x-if="picture.is_moderated">
|
||||||
</template>
|
<div class="text"> </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;
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user