diff --git a/assets/development/scripts/organization.js b/assets/development/scripts/organization.js index a40f525..71c43e8 100644 --- a/assets/development/scripts/organization.js +++ b/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) diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css index 8549eef..fcf7504 100644 --- a/assets/development/styles/organization.css +++ b/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 */ diff --git a/views/organization.twig b/views/organization.twig index 43c8417..6e5217c 100644 --- a/views/organization.twig +++ b/views/organization.twig @@ -48,7 +48,11 @@ {% if data.gallery|length > 0 %}
{% for media in data.gallery %} -
+
@@ -65,7 +69,6 @@
-
+ +
+
+ +
+
+
+
+ +
+
{% endif %} @@ -326,7 +344,7 @@
- {{ data.contacts.websiteLabel|e }} + Site Web @@ -343,12 +361,7 @@
- - {{ data.contacts.facebookLabel|e }} - - - {{ data.contacts.facebook|e }} - + Page Facebook @@ -365,12 +378,7 @@
- - {{ data.contacts.instagramLabel|e }} - - - {{ data.contacts.instagram|e }} - + Profil Instagram @@ -387,12 +395,7 @@
- - {{ data.contacts.twitterLabel|e }} - - - {{ data.contacts.twitter|e }} - + Profil Twitter