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 (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
-        closeModal()
-        document.removeEventListener('click', outsideClickListener)
-      }
-    }
-    document.addEventListener('click', outsideClickListener)
-  
-  }, 100)
+  if (mediaData.indexOf(currentMedia) + 1 === mediaData.length) {
+    navRight.className += ' disabled'
+  } else {
+    navRight.className = navRight.className.replace('disabled', '')
+  }
 }
 
-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
   */