From 70b26d0d93917f9eb0adf1eba6720c6157c8280d Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 28 Aug 2024 14:16:34 +0200
Subject: [PATCH] finish event swiper desktop

---
 assets/css/src/swiper.css          | 29 +++++++++++++++++++++++++++++
 assets/css/style.css               |  1 +
 assets/images/icons/arrow-next.svg | 10 ++++++++++
 assets/images/icons/arrow-prev.svg | 10 ++++++++++
 assets/js/swiper.js                | 15 +++++++++++++++
 site/snippets/header.php           |  5 +++++
 site/templates/event.php           | 13 ++++++++++++-
 7 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/src/swiper.css
 create mode 100644 assets/images/icons/arrow-next.svg
 create mode 100644 assets/images/icons/arrow-prev.svg
 create mode 100644 assets/js/swiper.js

diff --git a/assets/css/src/swiper.css b/assets/css/src/swiper.css
new file mode 100644
index 0000000..fcabc4f
--- /dev/null
+++ b/assets/css/src/swiper.css
@@ -0,0 +1,29 @@
+#swiper {
+  /* https://github.com/nolimits4web/swiper/issues/3599 */
+  width: 100%;
+  max-width: 100%;
+  max-height: 100vh;
+  min-height: 0;
+  min-width: 0;
+
+  /* Custom */
+  overflow: hidden;
+  position: relative;
+}
+
+.swiper-button {
+  width: 50% !important;
+  height: 100% !important;
+  top: 0 !important;
+}
+.swiper-button:before,
+.swiper-button:after {
+  content: "" !important;
+}
+
+.swiper-button-next:hover {
+  cursor: url(../../images/icons/arrow-next.svg) 10 20, auto !important;
+}
+.swiper-button-prev:hover {
+  cursor: url(../../images/icons/arrow-prev.svg) 10 20, auto !important;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 8ed6c7c..011e96a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -12,5 +12,6 @@
 @import url("src/newsletter.css");
 @import url("src/event-key-infos.css");
 @import url("src/event-presentation.css");
+@import url("src/swiper.css");
 @import url("src/collapsable-section.css");
 @import url("src/footer.css");
diff --git a/assets/images/icons/arrow-next.svg b/assets/images/icons/arrow-next.svg
new file mode 100644
index 0000000..e955197
--- /dev/null
+++ b/assets/images/icons/arrow-next.svg
@@ -0,0 +1,10 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2028_4182)">
+<path d="M25.8719 12.9654L26.2124 12.6163L25.8719 12.2672L14.3842 0.488181L14.0257 0.120551L13.6678 0.488766L11.3553 2.86759L11.0079 3.22495L11.3642 3.5735L18.5506 10.6047C17.751 10.5109 16.8258 10.4665 15.8539 10.4665H1.08398H0.583984L0.583984 10.9665L0.583985 14.2662L0.583986 14.7662H1.08398H15.8539H15.854C16.8427 14.7662 17.7785 14.7201 18.5816 14.6306L11.365 21.6583L11.0071 22.0068L11.3553 22.365L13.6678 24.7439L14.0257 25.1122L14.3842 24.7445L25.8719 12.9654Z" fill="black" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2028_4182">
+<rect width="26" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/assets/images/icons/arrow-prev.svg b/assets/images/icons/arrow-prev.svg
new file mode 100644
index 0000000..49913d3
--- /dev/null
+++ b/assets/images/icons/arrow-prev.svg
@@ -0,0 +1,10 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2028_4184)">
+<path d="M0.128078 12.0346L-0.212384 12.3837L0.128079 12.7328L11.6158 24.5118L11.9743 24.8794L12.3322 24.5112L14.6447 22.1324L14.9921 21.775L14.6358 21.4265L7.4494 14.3953C8.24898 14.4891 9.17416 14.5335 10.1461 14.5335L24.916 14.5335L25.416 14.5335L25.416 14.0335L25.416 10.7338L25.416 10.2338L24.916 10.2338L10.1461 10.2338L10.146 10.2338C9.15735 10.2338 8.22154 10.2799 7.41844 10.3694L14.635 3.34169L14.9929 2.99317L14.6447 2.63497L12.3322 0.256074L11.9743 -0.112153L11.6158 0.255484L0.128078 12.0346Z" fill="black" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2028_4184">
+<rect width="26" height="25" fill="white" transform="translate(26 25) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/js/swiper.js b/assets/js/swiper.js
new file mode 100644
index 0000000..0a04281
--- /dev/null
+++ b/assets/js/swiper.js
@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const swiperIssue = new Swiper("#swiper", {
+    direction: "horizontal",
+    slidesPerView: 1,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    keyboard: true,
+    loop: true,
+    autoplay: {
+      delay: 2500,
+    },
+  });
+});
diff --git a/site/snippets/header.php b/site/snippets/header.php
index 516be0f..3a3bdb7 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -15,6 +15,11 @@
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
       <?= js('/assets/js/calendar.js') ?>
     <?php endif ?>
+    <?php if ($page->template() == 'event'): ?>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" defer />
+        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
+        <script src="<?= url('assets/js/swiper.js') ?>" defer></script>
+    <?php endif ?>
     <script src="<?= url('assets/js/script.js') ?>" type="module" defer></script>
     <?php if ($page->color()->exists()): ?>
         <style>
diff --git a/site/templates/event.php b/site/templates/event.php
index 2637b4e..ce42bf1 100644
--- a/site/templates/event.php
+++ b/site/templates/event.php
@@ -9,7 +9,18 @@
 </section>
 
 <section class="presentation">
-  <?php snippet('picture', ['file' => $page->gallery()->toFiles()->first()]) ?>
+  <div id="swiper" style="--span: 8;">
+    <div class="swiper-wrapper">
+      <?php foreach($page->gallery()->toFiles() as $slide): ?>
+      <div class="swiper-slide">
+        <?php snippet('picture', ['file' => $slide]) ?>
+      </div>
+      <?php endforeach ?>
+    </div>
+
+    <div class="swiper-button swiper-button-prev"></div>
+    <div class="swiper-button swiper-button-next"></div>
+  </div>
   <div class="presentation__text">
     <h2 class="h1 presentation__title"><?= $page->title() ?></h2>
     <h3 class="h2 presentation__authors"><?= $page->authors() ?></h3>