feat(PublicPage): Extra pictures in media gallery

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
   

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;
+}
+
 
 /* *****************************************************************************
 

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)
         }
 
         /**

views/organization.twig

@@ -45,9 +45,10 @@
   </div>
 </div>
 <div class="container">
-  {% if data.gallery|length > 0 %}
+  <div class="media-mosaic-container">
-  <div class="media-mosaic mosaic-{{ data.gallery|length }}">
+    {% if data.firstGallery|length > 0 %}
-    {% for media in data.gallery %}
+    <div class="media-mosaic mosaic-{{ data.firstGallery|length }}">
+      {% for media in data.firstGallery %}
       <div
         class="media-container"
         data-video="{{ media.isVideo }}"
@@ -66,6 +67,15 @@
       </div>
       {% endfor %}
     </div>
+    <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">
@@ -93,6 +103,17 @@
       </div>
     </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>
 
   {# {% if data.descriptionLong|length > 0 %} #}
   <section>