From 40a59a4d31189e3554dac0d1541a1cd3fb5c5ffa Mon Sep 17 00:00:00 2001
From: rec <112841230+recluse4615@users.noreply.github.com>
Date: Sun, 15 Oct 2023 22:14:08 +0100
Subject: [PATCH] Adding in a carousel for packages (#475)

Co-authored-by: recluse4615 <recluse4615@users.noreply.github.com>
---
 app/public/static/js/gallery_carousel.js | 13 +++++++++
 app/templates/packages/view.html         | 35 +++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 app/public/static/js/gallery_carousel.js

diff --git a/app/public/static/js/gallery_carousel.js b/app/public/static/js/gallery_carousel.js
new file mode 100644
index 00000000..73cdf773
--- /dev/null
+++ b/app/public/static/js/gallery_carousel.js
@@ -0,0 +1,13 @@
+// @author recluse4615
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+
+"use strict";
+
+const galleryCarousel = new bootstrap.Carousel(document.getElementById("galleryCarousel"));
+document.querySelectorAll(".gallery-image").forEach(el => {
+	el.addEventListener("click", function(e) {
+		galleryCarousel.to(el.dataset.bsSlideTo);
+		e.preventDefault();
+	});
+});
+
diff --git a/app/templates/packages/view.html b/app/templates/packages/view.html
index e29715a4..1ebc773c 100644
--- a/app/templates/packages/view.html
+++ b/app/templates/packages/view.html
@@ -19,6 +19,7 @@
 
 {% block scriptextra %}
 	<script src="/static/js/video_embed.js"></script>
+	<script src="/static/js/gallery_carousel.js"></script>
 	{% if current_user.is_authenticated %}
 		<script src="/static/js/quick_review_voting.js"></script>
 	{% endif %}
@@ -76,6 +77,7 @@
 	{% elif not package.media_license.is_foss %}
 		{% set package_warning=_("Non-free media") %}
 	{% endif %}
+
 <main>
 	{% if not package.approved %}
 		<section class="my-4 pb-3" style="">
@@ -248,6 +250,37 @@
 				{% endif %}
 
 				{% if screenshots or package.check_perm(current_user, "ADD_SCREENSHOTS") or package.video_url %}
+					{% if screenshots %}
+						<div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-hidden="true">
+							<div class="modal-dialog modal-xl">
+								<div class="modal-content">
+									<div class="modal-body">
+										<div id="galleryCarousel" class="carousel slide">
+											<div class="carousel-inner">
+												{% for ss in screenshots %}
+												{% if ss.approved or package.check_perm(current_user, "ADD_SCREENSHOTS") %}
+												<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
+													<a href="{{ ss.url }}" target="_blank">
+														<img class="img-size w-100" src="{{ ss.url }}" alt="{{ ss.title }}" title="{{ ss.title }}" />
+													</a>
+												</div>
+												{% endif %}
+												{% endfor %}
+												<button class="carousel-control-prev" data-bs-target="#galleryCarousel" role="button" data-bs-slide="prev">
+													<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+													<span class="sr-only">{{ _("Previous") }}</span>
+												</button>
+												<button class="carousel-control-next" data-bs-target="#galleryCarousel" role="button" data-bs-slide="next">
+													<span class="carousel-control-next-icon" aria-hidden="true"></span>
+													<span class="sr-only">{{ _("Next") }}</span>
+												</button>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					{% endif %}
 					<ul class="gallery">
 						{% if package.video_url %}
 							<li>
@@ -264,7 +297,7 @@
 							{% for ss in screenshots %}
 								{% if ss.approved or package.check_perm(current_user, "ADD_SCREENSHOTS") %}
 									<li>
-										<a href="{{ ss.url }}" class="gallery-image">
+										<a href="{{ ss.url }}" data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="{{ loop.index - 1 }}" class="gallery-image">
 											<img src="{{ ss.get_thumb_url() }}" alt="{{ ss.title }}" title="{{ ss.title }}" />
 											{% if not ss.approved %}
 												<span class="badge bg-dark badge-tr">{{ _("Awaiting review") }}</span>