simple-images-upload/views/pages/gallery.ejs
2023-09-25 00:31:06 +02:00

96 lines
No EOL
3.2 KiB
Text

<main class="layout-maxed collection" id="gallery">
<div class="grid gap-5 grid-cols-1 md:grid-cols-4 list hover">
<%
for ( let i = 0 ; i < page.images.length ; i += 1 ) {
const image = page.images[i];
%>
<div
class="item link imagesPreview"
data-toggle="modal"
id="item-<%= i %>"
data-original="<%= image.originalFile %>"
data-medium="<%= image.mediumFile %>"
data-small="<%= image.smallFile %>"
onclick="displayImageDetails('<%= i %>')"
>
<div>
<img src="<%= image.smallFile %>" alt="Image <%= i %>">
</div>
<div>
<small>
Le <%= DateTime.fromMillis(image.time).setLocale('fr').toFormat('D à T') %>
</small>
</div>
</div>
<%
}
%>
</div>
<nav class="pagination" role="navigation" aria-label="Pagination">
<ul class="pagination-list">
<% if ( page.currentPage > 1 ) { %>
<li>
<a class="pagination-link" href="?page=1" aria-label="Aller à la première page">
&laquo;
</a>
</li>
<li>
<a class="pagination-link" href="?page=<%= page.currentPage - 1 %>" aria-label="Aller à la page précédente">
&lsaquo;
</a>
</li>
<% } %>
<% for ( let i = 1 ; i <= page.totalPages ; i += 1 ) { %>
<% if (i < 2 || i > (page.totalPages - 1) || (Number(page.currentPage) - 1) <= i && Number(page.currentPage) + 1 >= i) { %>
<li>
<a class="pagination-link <%= i === page.currentPage ? 'is-current' : '' %>" href="?page=<%= i %>">
<%= i %>
</a>
</li>
<% } %>
<% if ((Number(page.currentPage) - 3 === i && Number(page.currentPage) - 2 > 1) || (Number(page.currentPage) + 2 === i && Number(page.currentPage) + 2 < page.totalPages - 1)) { %>
<li>
<a class="pagination-link is-disabled">…</a>
</li>
<% } %>
<% } %>
<% if ( page.currentPage < page.totalPages ) { %>
<li>
<a class="pagination-link" href="?page=<%= page.currentPage + 1 %>" aria-label="Aller à la page suivante">
&rsaquo;
</a>
</li>
<li>
<a class="pagination-link" href="?page=<%= page.totalPages %>" aria-label="Aller à la dernière page">
&raquo;
</a>
</li>
<% } %>
</ul>
</nav>
</main>
<div class="modal">
<div class="modal-background" onclick="closeModale()"></div>
<div class="modal-card">
<header>
<div>Détails d'une image</div>
<button aria-label="Fermer" class="close" onclick="closeModale()"></button>
</header>
<section>
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<div class="image-preview">
<img src="" id="previewImage" alt="Image">
</div>
<div>
<%- include('../partials/file-links', {file: {}, index: 0}) %></div>
<div>
</div>
</section>
<footer>
<button class="button is-primary" onclick="closeModale()">Fermer</button>
</footer>
</div>
</div>