846 lines
23 KiB
JavaScript
846 lines
23 KiB
JavaScript
$(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');
|
|
} |