From 2df9ff8f4824a0a2510eebdb58bca4738f67064e Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Thu, 27 Aug 2020 12:56:21 +0200
Subject: [PATCH] feat(PublicPage): Extra pictures in media gallery

---
 assets/development/scripts/organization.js |  4 +
 assets/development/styles/organization.css | 23 +++++
 src/controllers/PublicController.ts        |  4 +-
 views/organization.twig                    | 97 +++++++++++++---------
 4 files changed, 89 insertions(+), 39 deletions(-)

diff --git a/assets/development/scripts/organization.js b/assets/development/scripts/organization.js
index 3bd379e..ecb02c1 100644
--- a/assets/development/scripts/organization.js
+++ b/assets/development/scripts/organization.js
@@ -94,6 +94,10 @@ let loadMedias = () => {
 loadMedias()
 
 let openModal = (index) =>  {
+  if (index === 'extra') {
+    index = 5
+  }
+
   mediaModal.style.visibility = 'visible'
   mediaModal.style.opacity = 1
   
diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css
index 5292560..ac388dd 100644
--- a/assets/development/styles/organization.css
+++ b/assets/development/styles/organization.css
@@ -109,6 +109,10 @@
 
 ********************************************************************************/
 
+.media-mosaic-container {
+  position: relative;
+}
+
 .media-mosaic {
   margin-top: .75em;
   width: 100%;
@@ -317,6 +321,25 @@
   right: 2em !important;
 }
 
+/**
+Extra count
+**/
+.media-gallery-extra-count {
+  position: absolute;
+  width: 100%;
+
+  margin-top: .25em;
+  font-size: 0.8em;
+
+  display: flex;
+  justify-content: flex-end;
+}
+
+.media-gallery-extra-count a {
+  cursor: pointer;
+  padding: .25em;
+}
+
 
 /* *****************************************************************************
 
diff --git a/src/controllers/PublicController.ts b/src/controllers/PublicController.ts
index 6332552..b151175 100644
--- a/src/controllers/PublicController.ts
+++ b/src/controllers/PublicController.ts
@@ -200,10 +200,12 @@ export default class PublicController {
          * Parse gallery
           */
         if (Array.isArray(version.gallery)) {
-          version.gallery = version.gallery.slice(0, 5).map((media: any) => {
+          version.gallery = version.gallery.map((media: any) => {
             media.isVideo = media.contentType.indexOf('video/') !== -1
             return media
           })
+          version.firstGallery = version.gallery.slice(0, 5)
+          version.secondGallery = version.gallery.slice(5)
         }
 
         /**
diff --git a/views/organization.twig b/views/organization.twig
index f6be8dd..f5e095c 100644
--- a/views/organization.twig
+++ b/views/organization.twig
@@ -45,54 +45,75 @@
   </div>
 </div>
 <div class="container">
-  {% if data.gallery|length > 0 %}
-  <div class="media-mosaic mosaic-{{ data.gallery|length }}">
-    {% for media in data.gallery %}
-    <div
-      class="media-container"
-      data-video="{{ media.isVideo }}"
-      data-location="{{ media.location }}"
-      onclick="openModal({{ loop.index - 1 }})">
+  <div class="media-mosaic-container">
+    {% if data.firstGallery|length > 0 %}
+    <div class="media-mosaic mosaic-{{ data.firstGallery|length }}">
+      {% for media in data.firstGallery %}
       <div
-        class="media {% if media.isVideo %}media-video-bg{% endif %}"
-        {% if not media.isVideo %}style="background-image: url({{ media.location }})"{% endif %}></div>
-      {% if media.isVideo %}
-      <div class="media-overlay">
-        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>
-        </svg>
+        class="media-container"
+        data-video="{{ media.isVideo }}"
+        data-location="{{ media.location }}"
+        onclick="openModal({{ loop.index - 1 }})">
+        <div
+          class="media {% if media.isVideo %}media-video-bg{% endif %}"
+          {% if not media.isVideo %}style="background-image: url({{ media.location }})"{% endif %}></div>
+        {% if media.isVideo %}
+        <div class="media-overlay">
+          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>
+          </svg>
+        </div>
+        {% endif %}
       </div>
-      {% endif %}
+      {% endfor %}
     </div>
-    {% endfor %}
-  </div>
-  <div class="media-modal-container" id="media-modal">
-    <div class="media-modal">
-      <div class="media-modal-content" id="media-modal-content">
-      </div>
-      <div class="media-close" onclick="closeModal()">
-        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path>
-        </svg>
+    <div class="second-media-gallery" style="display: none;">
+      {% for media in data.secondGallery %}
+      <div
+        class="media-container"
+        data-video="{{ media.isVideo }}"
+        data-location="{{ media.location }}">
       </div>
+      {% endfor %}
     </div>
+    <div class="media-modal-container" id="media-modal">
+      <div class="media-modal">
+        <div class="media-modal-content" id="media-modal-content">
+        </div>
+        <div class="media-close" onclick="closeModal()">
+          <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path>
+          </svg>
+        </div>
+      </div>
 
-    <div
-      id="media-nav-left"
-      class="media-nav-left media-nav">
-      <div class="media-nav-btn">
-        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
+      <div
+        id="media-nav-left"
+        class="media-nav-left media-nav">
+        <div class="media-nav-btn">
+          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
+        </div>
+      </div>
+      <div
+        id="media-nav-right"
+        class="media-nav-right media-nav">
+        <div class="media-nav-btn">
+          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
+        </div>
       </div>
     </div>
-    <div
-      id="media-nav-right"
-      class="media-nav-right media-nav">
-      <div class="media-nav-btn">
-        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
-      </div>
+    {% endif %}
+    {% if data.secondGallery|length == 1 %}
+    <div class="media-gallery-extra-count">
+      <a onclick="openModal('extra')">Voir plus ({{ data.secondGallery|length }} photo restante)</a>
     </div>
+    {% endif %}
+    {% if data.secondGallery|length > 1 %}
+    <div class="media-gallery-extra-count">
+      <a onclick="openModal('extra')">Voir plus ({{ data.secondGallery|length }} photos restantes)</a>
+    </div>
+    {% endif %}
   </div>
-  {% endif %}
 
   {# {% if data.descriptionLong|length > 0 %} #}
   <section>