server/assets/development/scripts/organization.js

/**
 * Schedule collapsable section animation
 */
document.querySelectorAll('.schedule-category').forEach(node => {
  let opened = false
  let icon = node.querySelector('.schedule-category-collapse-icon')
  let content = node.querySelector('.schedule-category-table')
  let header = node.querySelector('.schedule-category-header')
  header.onclick = () => {
    if (!opened) {
      // open the table
      icon.style.transform = "rotate(0deg)"
      content.style.maxHeight = content.scrollHeight + "px"
    } else {
      // close the table
      icon.style.transform = "rotate(180deg)"
      content.style.maxHeight = null
    }
    opened = !opened
  }
})

/**
 * Description
 */
let description = document.querySelector('.description-cutted')
let descriptionActions = document.querySelector('.description-actions-container')
let descriptionOpened = false
let defaultMaxHeight = ""
if (description !== null) {
  let btn = document.querySelector('.description-btn')
  btn.onclick = () => {
    if (!descriptionOpened) {
      // open the full description
      descriptionActions.className = descriptionActions.className.replace(' closed', '')
      defaultMaxHeight = description.style.maxHeight
      description.style.maxHeight = description.scrollHeight + "px"
      btn.textContent = "Fermer la description"
    } else {
      // initial max Height
      descriptionActions.className += ' closed'
      description.style.maxHeight = defaultMaxHeight
      btn.textContent = "Ouvrir la description"
    }
    descriptionOpened = !descriptionOpened
  }
}

/**
 * Gallery modal to view media in large
 */
// let mediaModalImage = document.querySelector('#media-modal img')
// let mediaModalVideo = document.querySelector('#media-modal video')
// let mediaModalSource = document.querySelector('#media-modal video source')

// function disableScroll() { 
//     // Get the current page scroll position 
//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
  
//         // if any scroll is attempted, set this to the previous value 
//         window.onscroll = function() { 
//             window.scrollTo(scrollLeft, scrollTop); 
//         }; 
// } 
  
// 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 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
  
  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 = currentMedia.location
  let el = null
  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', currentMedia.location)
    source.setAttribute('type', 'video/mp4')
    el.appendChild(source)
  } else {
    el = document.createElement('img')
    el.attributes.setNamedItem(attr)
  }
  mediaModalContent.appendChild(el)

  if (mediaData.indexOf(currentMedia) === 0) {
    navLeft.className += ' disabled'
  } else {
    navLeft.className = navLeft.className.replace('disabled', '')
  }

  if (mediaData.indexOf(currentMedia) + 1 === mediaData.length) {
    navRight.className += ' disabled'
  } else {
    navRight.className = navRight.className.replace('disabled', '')
  }
}

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)
  }
  let phoneSplit = ''
  let partEnd = false
  for (var i = 0; i < phone.length; i++) {
    phoneSplit += phone.charAt(i)
    if (partEnd === true) {
      phoneSplit += ' '
    }
    partEnd = !partEnd
  }
  return ["+33" + phone.substr(1), phoneSplit]
}

/**
 * Decode email and phone data
 */
document.querySelectorAll('.offuscated').forEach(node => {
  let data = node.getAttribute('data-source')
  let type = node.getAttribute('data-source-type')
  data = data.replace(/'/gm, '"').replace(/%_/gm, '')
  data = data.replace(/\$/gm, 'A')
  data = data.replace(/£/gm, 'c')
  data = data.replace(/ù/gm, 'b')
  data = data.replace(/#/gm, 'd')
  data = data.replace(/µ/gm, 'e')
  data = data.replace(/§/gm, 'z')
  data = data.replace(/à/gm, 'i')
  data = data.replace(/\|/gm, 'f')
  data = JSON.parse(data).join('')
  data = atob(data)
  if (type === 'phone') {
    data = formatPhone(data)
    node.href = node.href.replace('data', data[0])
    data = data[1]
  } else {
    node.href = node.href.replace('data', data)
  }
  node.textContent = data
})