$(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() } 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() } } }) barba.hooks.after((data) => { 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('') }) // 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('
') 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') } }