feat(MediaModal): add navigation between medias

assets/development/scripts/organization.js

@@ -49,8 +49,6 @@ if (description !== null) {
 /**
  * Gallery modal to view media in large
  */
-let mediaModal = document.querySelector('#media-modal')
-let mediaModalContent = document.querySelector('#media-modal-content')
 // let mediaModalImage = document.querySelector('#media-modal img')
 // let mediaModalVideo = document.querySelector('#media-modal video')
 // let mediaModalSource = document.querySelector('#media-modal video source')
@@ -66,26 +64,72 @@ let mediaModalContent = document.querySelector('#media-modal-content')
 //         }; 
 // } 
   
-// function enableScroll() { 
+// function enableScroll() {
 //     window.onscroll = function() {}; 
 // }
+let mediaModal = document.querySelector('#media-modal')
+let mediaModalContent = document.querySelector('#media-modal-content')
+let navLeft = document.getElementById('media-nav-left')
+let navRight = document.getElementById('media-nav-right')
 
+let currentMedia = {}
+let mediaData = []
 
-let openModal = (url, isVideo) =>  {
+let loadMedias = () => {
+  let list = document.querySelectorAll('.media-container')
+  //console.log(list)
+  list.forEach(m => {
+    mediaData.push({
+      isVideo: m.getAttribute('data-video') == 'true',
+      location: m.getAttribute('data-location')
+    })
+  })
+}
+
+loadMedias()
+
+let openModal = (index) =>  {
   mediaModal.style.visibility = 'visible'
   mediaModal.style.opacity = 1
-  mediaModalContent.innerHTML = ""
+  
+  currentMedia = mediaData[index]
+  fillModal(currentMedia)
+  
+  //document.body.style.height = '100vh'
+  document.body.style.overflow = 'hidden'
+  document.body.style.userSelect = 'none'
+  document.body.style.touchAction = 'none'
 
+  setTimeout(() => {
+    const outsideClickListener = event => {
+      if (
+        !mediaModalContent.contains(event.target) && isVisible(mediaModalContent) &&
+        navLeft.querySelector(':hover') === null &&
+        navRight.querySelector(':hover') === null
+      ) {
+        closeModal()
+        document.removeEventListener('click', outsideClickListener)
+      }
+    }
+    document.addEventListener('click', outsideClickListener)
+  }, 100)
+}
+
+const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
+
+let fillModal = () => {
+  console.log(currentMedia)
+  mediaModalContent.innerHTML = ""
   let attr = document.createAttribute('src')
-  attr.value = url
+  attr.value = currentMedia.location
   let el = null
-  if (isVideo) {
+  if (currentMedia.isVideo) {
     el = document.createElement('video')
     el.setAttribute('controls', '')
     el.setAttribute('autoplay', '')
     el.setAttribute('name', 'media')
     let source = document.createElement('source')
-    source.setAttribute('src', url)
+    source.setAttribute('src', currentMedia.location)
     source.setAttribute('type', 'video/mp4')
     el.appendChild(source)
   } else {
@@ -93,42 +137,48 @@ let openModal = (url, isVideo) =>  {
     el.attributes.setNamedItem(attr)
   }
   mediaModalContent.appendChild(el)
-  //document.body.style.height = '100vh'
-  document.body.style.overflow = 'hidden'
-  document.body.style.touchAction = 'none'
 
-  setTimeout(() => {
+  if (mediaData.indexOf(currentMedia) === 0) {
+    navLeft.className += ' disabled'
+  } else {
+    navLeft.className = navLeft.className.replace('disabled', '')
+  }
 
-    const outsideClickListener = event => {
+  if (mediaData.indexOf(currentMedia) + 1 === mediaData.length) {
-      if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
+    navRight.className += ' disabled'
-        closeModal()
+  } else {
-        document.removeEventListener('click', outsideClickListener)
+    navRight.className = navRight.className.replace('disabled', '')
-      }
+  }
-    }
-    document.addEventListener('click', outsideClickListener)
-  
-  }, 100)
 }
 
-const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
-
 let closeModal = () =>  {
   mediaModal.style.visibility = 'hidden'
   mediaModal.style.opacity = 0
   document.body.style.overflow = 'initial'
   document.body.style.height = 'initial'
   document.body.style.touchAction = 'initial'
+  document.body.style.userSelect = 'initial'
   let video = document.querySelector('#media-modal video')
   if (video !== null) {
     video.pause()
   }
 }
 
+navLeft.onclick = () => {
+  if (mediaData.indexOf(currentMedia) === 0) { return; }
+  currentMedia = mediaData[mediaData.indexOf(currentMedia) - 1]
+  fillModal()
+}
+
+navRight.onclick = () => {
+  if (mediaData.indexOf(currentMedia) + 1 === mediaData.length) { return; }
+  currentMedia = mediaData[mediaData.indexOf(currentMedia) + 1]
+  fillModal()
+}
 
 /**
  * Decode things
  */
-
 let formatPhone = (phone) => {
   if (phone.indexOf('+33') === 0) {
     phone = '0' + phone.substr(3)

assets/development/styles/organization.css

@@ -275,6 +275,49 @@
   opacity: 1;
 }
 
+.media-nav {
+  position: absolute;
+  width: .5em;
+  color: white;
+  opacity: 0.8;
+  cursor: pointer;
+  font-size: 1.25em;
+  transition: 0.2s all;
+  z-index: 9999;
+  width: 5em;
+}
+
+.media-nav.disabled {
+  opacity: 0.25 !important;
+  cursor: auto;
+}
+
+.media-nav-btn svg {
+  height: 2em;
+  filter: drop-shadow(2px 4px 6px black);
+}
+
+.media-nav-btn {
+  padding: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.media-nav:hover {
+  opacity: 1;
+  transition: 0.2s all;
+}
+
+.media-nav-left {
+  left: 2em !important;
+}
+
+.media-nav-right {
+  right: 2em !important;
+}
+
+
 /* *****************************************************************************
 
 *                                    SECTION                                    
@@ -764,6 +807,17 @@ RESPONSIVE
     height: 33em;
   }
 
+  /**
+  * MODAL
+  **/
+  .media-nav {
+    bottom: 0em;
+  }
+  .media-nav-btn {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+
   /**
   * MOSAIC CASES
   */

views/organization.twig

@@ -48,7 +48,11 @@
   {% if data.gallery|length > 0 %}
   <div class="media-mosaic mosaic-{{ data.gallery|length }}">
     {% for media in data.gallery %}
-    <div class="media-container" onclick="openModal('{{ media.location }}', {{ media.isVideo }})">
+    <div
+      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>
@@ -65,7 +69,6 @@
   <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">
@@ -73,6 +76,21 @@
         </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>
+    </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>
   {% endif %}
 
@@ -326,7 +344,7 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.website|e }}">
-            {{ data.contacts.websiteLabel|e }}
+            Site Web
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>
@@ -343,12 +361,7 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.facebook|e }}">
-            <span class="short">
+            Page Facebook
-              {{ data.contacts.facebookLabel|e }}
-            </span>
-            <span class="long">
-              {{ data.contacts.facebook|e }}
-            </span>
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>
@@ -365,12 +378,7 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.instagram|e }}">
-            <span class="short">
+            Profil Instagram
-              {{ data.contacts.instagramLabel|e }}
-            </span>
-            <span class="long">
-              {{ data.contacts.instagram|e }}
-            </span>
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>
@@ -387,12 +395,7 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.twitter|e }}">
-            <span class="short">
+            Profil Twitter
-              {{ data.contacts.twitterLabel|e }}
-            </span>
-            <span class="long">
-              {{ data.contacts.twitter|e }}
-            </span>
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>