figureslibres.cc/user/themes/figureslibres-v2/js/script.js

$(document).ready( () => {
  lazyLoading()
  displayPictograms()
  getDeviceSize()
  hideMobileNavOnResize()
  hoverDesktopNavItems()
  if (currentPage.text().trim() == 'Accueil') {
    hideFooter()
    toggleIndexContent()
  } else if (currentPage.text().trim() == 'Projets' && $('main').children(":first").attr('id') != 'reader') {
    hideFooter()
    loadProjetIndex()
  } else if ($('main').children(":first").attr('id') == 'reader') {
    hideFooter()
    displayReader()
  } else if ($('main').children(":first").attr('id') == 'text-content') {
    addToggleBiography()
  }
  initBarba()
})

// GLOBAL VARIABLES
let isMobileNavOpen = false,
    isDesktopDevice = false,
    currentPage,
    filterObj = {
      publiqueCardsDisplayed : true,
      socialeCardsDisplayed : true,
      culturelleCardsDisplayed : true
    },
    projectTitleIsScrolling = false,
    titleScrollTimer

// MAIN FUNCTIONS
function initBarba() {
  barba.init({
    //prefetchIgnore: true,
    transitions: [{
      name: 'opacity-transition',
      leave(data) {
        return gsap.to(data.current.container, {
          opacity: 0
        })
      },
      enter(data) {
        return gsap.from(data.next.container, {
          opacity: 0
        })
      }
    }]
  })
  barba.hooks.beforeLeave((data) => {
    if (isMobileNavOpen) { toggleMobileNav() }
    if ($(data.current.container).attr('id') == 'projets-index') { resetFilters() }
    if ($(data.current.container).attr('id') == 'text-content' ) { hideFooter() }
    setBgColor(color_bg)
  })
  barba.hooks.afterLeave((data) => {
    if ($(data.current.container).attr('id') == 'reader' && $(data.next.container).attr('id') != 'reader') {
      leaveReader()
      $('#nav-container h1').empty().append(currentPage.text())
    }
  })
  barba.hooks.beforeEnter((data) => {
    lazyLoading()
    displayPictograms()
    $('html, body').scrollTop(0)
    if ($(data.next.container).attr('id') == 'index-content') {
      toggleIndexContent()
    } else if ($(data.next.container).attr('id') == 'projets-index') {
      loadProjetIndex()
      filterWhenEntering()
    } else if ($(data.next.container).attr('id') == 'text-content')
    { 
      if (isDesktopDevice) displayFooter()
      addToggleBiography()
    }
  })
  barba.hooks.after((data) => {
    refreshUiOnResize()
    let pageTitleComparator, navIndex
    switch ($('main').children(":first").attr('id')) {
      case 'index-content':
        pageTitleComparator = 'Accueil'
        navIndex = 0
        break
      case 'text-content':
        // dirty hack to get what content it is
        if ($('main').children(":first").children(":first").text().substring(3).replace(/ .*/,'') == "équipe") {
          pageTitleComparator = 'Le collectif'
          navIndex = 1;
        } else {
          pageTitleComparator = 'Logiciels Libres'
          navIndex = 3;
        }
        break
      case 'projets-index':
      case 'reader':
        pageTitleComparator = 'Projets'
        navIndex = 2
        break
    }
    if (pageTitleComparator != currentPage.text().trim()) {
      changeMenuSelected($('header nav ul li').eq(navIndex))
    }
    if ($(data.next.container).attr('id') == 'reader') {
     displayReader()
    }
  })
}

function lazyLoading() {
  $('.lazy').Lazy({
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    effectTime: 400,
    threshold: 100,
    afterLoad: function(element) {
      $(element).removeClass('loader')
      if ($(element).parent().is('figure')) {
        $(element).parent().addClass('loaded')
      } else {
        $(element).parentsUntil('figure').parent().addClass('loaded')
      }
    }
  })
}

// UI FUNCTIONS
// general content
function displayPictograms() {
  // To be able to change the pictograms color through scss variables
  addLinkPictogram()
  $('.picto').each((i, el) => {
      let source = $(el).data('src')
      $(el).css({
          '-webkit-mask': 'url(' + source + ') 0% 0% / contain no-repeat',
          'mask': 'url(' + source + ') 0% 0% / contain no-repeat',
      })
  })
}

function addLinkPictogram() {
  $('main a[target="_blank"]').each( (i, e) => {
    $(e).append('<div class="picto picto-url" data-src="/user/themes/figureslibres-v2/images/pictos/arrow-diagonal.svg" aria-hidden="true"></div>')
  })
    // hardcoded url because cant use twig in js
}

function getDeviceSize() {
  function setDeviceSize() {
    if (window.matchMedia('(min-width: 996px)').matches) {
      isDesktopDevice = true
    } else {
      isDesktopDevice = false
    }
  }
  setDeviceSize()
  let timer
  $(window).on('resize', () => {
    clearTimeout(timer)
    timer = setTimeout(setDeviceSize(), 100)
    refreshUiOnResize()
  })
}

function refreshUiOnResize() {
  hideFooterOnResize()
  hideMobileNavOnResize()
  checkTitleAutoScroll()
  function menuViewJustChanged(callback) {
    let prevDeviceIsDesktop = isDesktopDevice;
    setTimeout(() => callback(!(isDesktopDevice === prevDeviceIsDesktop)), 50);
  }
  menuViewJustChanged(result => {
    if (result) {
      currentColor = $('body').css('background-color')
      if (isDesktopDevice) {
        $('nav').css('background-color', currentColor)
        $('#nav-container').css('background-color', color_bg)
      } else {
        $('nav').css('background-color', color_main)
        $('#nav-container').css('background-color', currentColor)
      }
    }
  })
}

function triggerLazyLoading() {
  setTimeout(() => {
    $(document).scrollTop($(document).scrollTop() + 1)
    setTimeout(() => {
      $(document).scrollTop($(document).scrollTop() - 1)
    }, 100)
  }, 300)

}

function titleScrollTop() {
  if ($('html, body').scrollTop() > 0) {
    $('html, body').animate({scrollTop: 0}, 1200)
    if (currentPage.text().trim() == 'Accueil') {
      toggleIndexContent(true)
    }
  }
}

// set navigation
function toggleMobileNav() {
  if (!isMobileNavOpen) {
    $('nav').addClass('mobile-nav-open')
    $('footer').fadeIn()
    isMobileNavOpen = true
  } else {
    $('nav').removeClass('mobile-nav-open')
    isMobileNavOpen = false
    if (window.matchMedia('(min-width: 576px)').matches && (currentPage.text().trim() == 'Figures Libres' || currentPage.text().trim() == 'Logiciels Libres')) {
      return
    } else {
      $('footer').fadeOut()
    }
  }
}

function hideMobileNavOnResize() {
  if (!isDesktopDevice) {
    if (isMobileNavOpen) {
      toggleMobileNav()
    }
    $('nav').css('display', 'none')
    setTimeout( () => {
      $('nav').css('display', 'flex')
    }, 200)
  }
}

function hoverDesktopNavItems() {
  currentPage = $('.selected')
  $('nav li').hover(() => {
    if (isDesktopDevice) {
      currentPage.removeClass('selected')
    }
  }, () => {
    if (isDesktopDevice) {
      currentPage.addClass('selected')
    }
  })
}

function changeMenuSelected(page) {
  $('.selected').removeClass('selected')
  currentPage = $(page)
  currentPage.addClass('selected')
  changeMobileTitle()
}

function changeMobileTitle() {
  $('#nav-container h1').empty().append(currentPage.text())
}



const color_publique = "#ffaeab";
const color_sociale = "#71ff94";
const color_culturelle = "#feff74";
const color_commanditaire = "#fabbde";
const color_figureslibres = "#82f8ee";
const color_projets = "#4bffc9";

const color_bg = "#f5f5f5";
const color_main = "#0e1229";

let isExtraitOpen = false,
isCommanditairesOpen = false,
quelExtrait

function setBgColor(color) {
  $('body').css('background-color', color);
  if (isDesktopDevice) {
    $('nav').css('background-color', color)
  } else {
    $('#nav-container').css('background-color', color)
  }
  if (color === color_bg) {
    $('header').removeClass('plain_bg');
  } else {
    $('header').addClass('plain_bg');
  }
}



// index interaction
function toggleIndexContent(closeEverything) {
  let isTextOpen = false

  if (closeEverything) {
    closeEverything()
  }

  $('#figureslibres, #publique, #sociale, #culturelle, #commanditaires, #projets')
  .on('mouseleave', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_bg) : null)

  $('#figureslibres')
  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_figureslibres) : null)

  $('#publique')
  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_publique) : null)

  $('#sociale')
  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_sociale) : null)

  $('#culturelle')
  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_culturelle) : null)

  $('#commanditaires')
  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_commanditaire) : null)

  $('#projets')
  .on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_projets) : null)

  $('#second-p-index, #commanditaires-grid, #extrait-publique, #extrait-social, #extrait-culturelle')
  .children().fadeOut()

  $('#arrowIndex').click( () => {
    if (!isTextOpen && !isExtraitOpen) {
      displayContent($('#second-p-index'), isDesktopDevice ? '70vh' : '90vh')
      turnArrow('down')
      isTextOpen = true
    } else {
      if (isExtraitOpen) {
        hideContent($('#extrait-' + quelExtrait))
        $('#' + quelExtrait).css({
          'text-underline-offset': '0.1em',
          'text-decoration-thickness': '1px',
        })
        isExtraitOpen = false
        turnArrow('top')
      }
      if (isTextOpen) {
        hideContent($('#second-p-index'))
        turnArrow('top')
        isTextOpen = false
      }
      if (isCommanditairesOpen) {
        hideContent($('#commanditaires-grid'))
        $('#commanditaires').css({
          'text-underline-offset': '0.1em',
          'text-decoration-thickness': '1px',})
        isCommanditairesOpen = false
      }
    }
  })

  $('#index-content .animateText').click( function(event) {
    target = $(event.target).attr('id')
    if (target == 'publique' || target == 'sociale' || target == 'culturelle') {
      toggleExtrait(target)
      return false
    } else if (target == 'commanditaires') {
      toggleCommanditaires()
      return false
    } else {
        switch (target) {
          case 'figureslibres':
            changeMenuSelected($('nav li a[href$=collectif]').parent())
            break
/*           case 'logicielslibres':
            changeMenuSelected($('nav li a[href$=logiciels-libres]').parent())
            break
 */          case 'projets':
            changeMenuSelected($('nav li a[href$=projets]').parent())
            break
        }
        setBgColor(color_bg)
    }
  })

  $('#extrait-projets .projets-link-filter').click(() => {
    changeMenuSelected($('nav li a[href$=projets]').parent())
    setBgColor(color_bg)
  })

  function toggleExtrait(category) {
    if(!isExtraitOpen) {
      if (isTextOpen) {
        hideContent($('#second-p-index'))
        isTextOpen = false
      }
      if (isCommanditairesOpen) {
        hideContent($('#commanditaires-grid'))
        $('#commanditaires').css({
          'text-underline-offset': '0.1em',
          'text-decoration-thickness': '1px',
        })
        isCommanditairesOpen = false
      }
      displayContent($('#extrait-' + category), '100vh')
      turnArrow('down')
      $('#' + category).css({
        'text-underline-offset': '0.3em',
        'text-decoration-thickness': '2px',
      })

      isExtraitOpen = true
      quelExtrait = category
    } else {
      if (quelExtrait != category) {
        hideContent($('#extrait-' + quelExtrait))
        $('#' + category).css({
          'text-underline-offset': '0.3em',
          'text-decoration-thickness': '2px',
        })
        $('#' + quelExtrait).css({
          'text-underline-offset': '0.1em',
          'text-decoration-thickness': '1px',
        })
        setTimeout(() => {
          displayContent($('#extrait-' + category), '80vh')
          quelExtrait = category
        }, 1000)
      } else {
        hideContent($('#extrait-' + category))
        turnArrow('top')
        $('#' + category).css({
          'text-underline-offset': '0.1em',
          'text-decoration-thickness': '1px',
        })
        setBgColor(color_bg)
        isExtraitOpen = false
      }
    }
  }

  function toggleCommanditaires() {
    if (!isCommanditairesOpen) {
      displayContent($('#commanditaires-grid'), '150vh')
      $('#commanditaires').css({
        'text-underline-offset': '0.3em',
        'text-decoration-thickness': '2px',
      })
      setBgColor(color_commanditaire)
      isCommanditairesOpen = true
    } else {
      hideContent($('#commanditaires-grid'))
      $('#commanditaires').css({
        'text-underline-offset': '0.1em',
        'text-decoration-thickness': '1px',
      })
      setBgColor(color_bg)
      isCommanditairesOpen = false
    }
  }

  function closeEverything() {
    if (isTextOpen) {
      hideContent($('#second-p-index'))
      isTextOpen = false
    }
    if (isExtraitOpen) {
      hideContent($('#extrait-' + quelExtrait))
      $('#' + quelExtrait).css({
        'text-underline-offset': '0.1em',
        'text-decoration-thickness': '1px',
      })
      isExtraitOpen = false
    }
    if (isCommanditairesOpen) {
      hideContent($('#commanditaires-grid'))
      $('#commanditaires').css({
        'text-underline-offset': '0.1em',
        'text-decoration-thickness': '1px',
      })
      isCommanditairesOpen = false
    }
    turnArrow('top')
    setBgColor(color_bg);
  }

}

function turnArrow(direction) {
  if (direction == 'down') {
    $('#arrow-container').css({
        'transform': 'rotate(180deg)',
        'margin-bottom': '10vh'
    })
    $('#arrow-container .picto').removeAttr('id')
  } else if (direction == 'top') {
    $('#arrow-container').css({
        'transform': 'rotate(0deg)',
        'margin-bottom': '0vh'
    })
    $('#arrow-container .picto').attr('id', 'arrowIndex')
    setBgColor(color_bg);
  }
}

function displayContent(content, maxHeight) {
  switch (content[0].id) {
    case 'extrait-publique':
      setBgColor(color_publique)
      break
    case 'extrait-sociale':
      setBgColor(color_sociale)
      break
    case 'extrait-culturelle':
      setBgColor(color_culturelle)
      break
    default:
      break
  }

  content.children().fadeIn()
  setTimeout( () => {
    content.css({
      'max-height': maxHeight,
      'opacity': '1'
    })
    if (isDesktopDevice) {
      content.css('margin-top', '3vh')
    }
  }, 200)
  setTimeout( () => {
    $('html, body').animate({
      scrollTop: $(content).position().top
    }, 1200, 'swing')
  }, 400)
}

function hideContent(content) {
  content.css({
    'max-height': '0vh',
    'opacity': '0',
    'margin-top': '0vh'
  })
  setTimeout(() => {
    content.children().fadeOut()
  }, 1200)
}


// display project grid
function toggleCategory(category) {
  let chevron = $(category).find('.chevron-category')

  if (chevron.hasClass('close')) {
    $(chevron.removeClass('close'))
    $(category).next().slideToggle('slow')
    $('.card-displayed figure').each(function() {
      if ($(this).css('transform') != 'none') {
        $(this).css('transform', 'none')
      }
    })
  } else {
    $(chevron.addClass('close'))
    $(category).next().slideToggle('slow')
    triggerLazyLoading()
  }
}

function filterCards(utilite) {
  let filterIsOn
  function checkFilter() {
    switch (utilite) {
      case 'publique':
        filterIsOn = filterObj.publiqueCardsDisplayed ? true : false
        if (filterObj.publiqueCardsDisplayed) {
          filterObj.publiqueCardsDisplayed = false
        } else {
          filterObj.publiqueCardsDisplayed = true
        }
        break
      case 'sociale':
      filterIsOn = filterObj.socialeCardsDisplayed ? true : false
      if (filterObj.socialeCardsDisplayed) {
        filterObj.socialeCardsDisplayed = false
      } else {
        filterObj.socialeCardsDisplayed = true
      }
        break
      case 'culturelle':
      filterIsOn = filterObj.culturelleCardsDisplayed ? true : false
      if (filterObj.culturelleCardsDisplayed) {
        filterObj.culturelleCardsDisplayed = false
      } else {
        filterObj.culturelleCardsDisplayed = true
      }
        break
    }
  }

  if (Object.values(filterObj).every(Boolean) || Object.values(filterObj).every(e => e == false)) { // si tous les filtres sont actifs (état de base)
    $('.projets-grid div').each(function () { // hide all cards
      if($(this).hasClass(utilite + '-card')) { // except those from the filtered category
        $(this).removeClass('card-hidden').addClass('card-displayed')
      }
      else {
        $(this).removeClass('card-displayed').addClass('card-hidden')
      }
    })

    $('#' + utilite + '-filter').css({
      'opacity': 1,
      'filter': 'grayscale(0)'
    })

    Object.keys(filterObj).forEach(v => filterObj[v] = false)

    checkFilter()
  }

  else if (Object.values(filterObj).filter(Boolean).length == 1) {
    // check if the filter is on or off
    checkFilter()

    if (filterIsOn) {
      $('#' + utilite + '-filter').css({
        'opacity': 0.4,
        'filter': 'grayscale(1)'
      })
      $('.projets-grid div').each(function () { // display all cards
        $(this).removeClass('card-hidden').addClass('card-displayed')
      })
    } else {
      $('#' + utilite + '-filter').css({
        'opacity': 1,
        'filter': 'grayscale(0)'
      })
      $('.' + utilite + '-card').each(function () { // only display cards from selected category
        $(this).removeClass('card-hidden').addClass('card-displayed')
      })
    }

  }

  else if (Object.values(filterObj).filter(Boolean).length == 2) {
    checkFilter()

    if (filterIsOn) {
      $('#' + utilite + '-filter').css({
        'opacity': 0.4,
        'filter': 'grayscale(1)'
      })
      $('.' + utilite + '-card').each(function () { // only display cards from selected category
        $(this).removeClass('card-displayed').addClass('card-hidden')
      })
    } else {
      $('.filter-button').each(function() {
        $(this).css({
          'opacity': 0.4,
          'filter': 'grayscale(1)'
        })
      })
      $('.projets-grid div').each(function () { // hide all cards
        $(this).removeClass('card-hidden').addClass('card-displayed')
      })
    }
  }
  triggerLazyLoading()
  checkIfCategoryEmpty() // to hide empty category

  function checkIfCategoryEmpty() {
    $('.projets-grid').each(function() {
      let hiddenCount = 0
      $(this).children().each(function() {
        if ($(this).hasClass('card-hidden')) { hiddenCount++ }
      })
      if (hiddenCount == $(this).children().length) { $(this).prev().fadeOut() }
      else { $(this).prev().fadeIn() }
    })
  }
}

function loadProjetIndex() {
  animateProjectGrid()
  isProjetsIndexLoaded = true
}

function animateProjectGrid() {
  const grid = document.querySelector(".projets-grid")
  animateCSSGrid.wrapGrid(grid, {duration : 600})
}

function resetFilters() {
  Object.keys(filterObj).forEach(v => filterObj[v] = false)
}

function filterWhenEntering() {
  let searchParam = new URLSearchParams(window.location.search)
  if (searchParam.has('filter')) {
    switch (searchParam.get('filter')) {
      case 'publique':
        filterCards('publique')
        break
      case 'sociale':
        filterCards('sociale')
        break
      case 'culturelle':
        filterCards('culturelle')
        break
    }
  }
}

// display reader
function displayReader() {
  $('header').fadeOut()
  projectTitleIsScrolling = false
  checkTitleAutoScroll()
  const swiper = new Swiper('.swiper', {
    // Optional parameters
    loop: true,
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
  });
  $('#cover-image img, .project-image').click( function(event) {
    const totalImg = $('img')
    let indexImg = 0
    for (let img of totalImg) {
      if (event.target === img) { break }
      indexImg++
    }
    swiper.slideToLoop(indexImg - 1)
    $('body').css('overflow-y', 'hidden');
    swiper.el.style.display = "block";
    setTimeout(() => {
      swiper.el.style.opacity = "1";
    }, 10);
  })
  $('#close-carousel').click( () => {
    $('body').css('overflow-y', 'auto');
    swiper.el.style.opacity = "0";
    setTimeout(() => {
      swiper.el.style.display = "none";
    }, 300);
  })



  let isProjectHeaderDisplayed = false

  $(window).scroll( () => {
    if ($(window).scrollTop() > $('#main-project-title').offset().top && !isProjectHeaderDisplayed) {
      $('#header-project').css('top', '0vh')
      if(isDesktopDevice) {
        $('#close-project').addClass('scrolled-cross')
      }
      isProjectHeaderDisplayed = true
    } else if ($(window).scrollTop() < $('#main-project-title').offset().top && isProjectHeaderDisplayed) {
      $('#header-project').css('top', '-4vh')
      if (isDesktopDevice) {
        $('#close-project').removeClass('scrolled-cross')
      }
      isProjectHeaderDisplayed = false
    }
  })
}

function leaveReader() {
  $(window).off('scroll')
  $('header').fadeIn()
  if (!$('nav li a[href$=projets]').parent().hasClass('selected')) {
    changeNavSelected('projets')
  }
  disableTitleAutoScroll()
}

function titleAutoScroll() {
  if (!projectTitleIsScrolling) {
    $('#header-project').append('<div id="gradient-long-title"></div>')
    projectTitleIsScrolling = true
  }
  $('#header-project h2 span').addClass('scrollText')
  $('#header-project h2 span').css({
    'transition': 'transform 7s linear',
    'transform': 'translate(-' + parseInt($('#header-project h2 span').width() / 2 + 8) + 'px, 0)'
  })
  titleScrollTimer = setTimeout( () => {
    $('#header-project h2 span').css({'transition': 'none', 'transform': 'translate(0, 0)'})
    titleAutoScroll()
  }, 7000)
}

function disableTitleAutoScroll() {
  $('#gradient-long-title').remove()
  $('#header-project h2 span').removeClass('scrollText').css({'transition': 'none', 'transform': 'translate(0, 0)'})
  projectTitleIsScrolling = false
}

function checkTitleAutoScroll() {
  if (titleScrollTimer != null) { clearTimeout(titleScrollTimer) }
  if ($('#header-project h2 span').width() > $('#header-project h2').width() && !projectTitleIsScrolling) {
    titleAutoScroll()
  } else if ($('#header-project h2 span').width() / 2 < $('#header-project h2').width() && projectTitleIsScrolling) {
    $('#header-project h2 span').removeClass('scrollText')
    disableTitleAutoScroll()
  }
}

// show and hide footer
function displayFooter() {
  $('footer').fadeIn()
}

function hideFooter() {
  $('footer').fadeOut()
}

function hideFooterOnResize() {
  if ($('footer').css('display', 'flex') &&
     (window.matchMedia('(max-width: 576px)').matches ||
     $('.selected').text().trim() == 'Accueil' ||
     $('.selected').text().trim() == 'Projets')) {
    $('footer').css('display', 'none')
  }
}

// dropdown collectif
function addToggleBiography() {
  $('h4 + p > em, h4').on('click', toggleBiographie);
  $('h4 + p > em').append('<img src="/user/themes/figureslibres-v2/images/pictos/chevron-down.svg" aria-hidden="true">');
}

function toggleBiographie(el) {
  let targetContent;
  let targetArrow;
  if (el.target.tagName === "H4") {
    targetContent = el.target.nextElementSibling.nextElementSibling;
    targetArrow = el.target.nextElementSibling.firstElementChild.firstElementChild;
  } else {
    targetContent = el.target.firstElementChild;
    targetArrow = el.target.parentElement.nextElementSibling;
  }
  for (let openElement of document.querySelectorAll('h4 + p > em > img, h4 + p + p')) {
    if (openElement !== targetContent && openElement !== targetArrow) {
      openElement.classList.remove('open');
    }
  }
  targetContent.classList.toggle('open');
  targetArrow.classList.toggle('open');
}