modifs couleurs etc
This commit is contained in:
@@ -32,7 +32,7 @@ let isMobileNavOpen = false,
|
||||
// MAIN FUNCTIONS
|
||||
function initBarba() {
|
||||
barba.init({
|
||||
prefetchIgnore: true,
|
||||
//prefetchIgnore: true,
|
||||
transitions: [{
|
||||
name: 'opacity-transition',
|
||||
leave(data) {
|
||||
@@ -51,13 +51,12 @@ function initBarba() {
|
||||
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') {
|
||||
if ($(data.next.container).attr('id') != 'reader') {
|
||||
leaveReader()
|
||||
$('#nav-container h1').empty().append(currentPage.text())
|
||||
}
|
||||
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) => {
|
||||
@@ -100,7 +99,7 @@ function initBarba() {
|
||||
}
|
||||
if ($(data.next.container).attr('id') == 'reader') {
|
||||
displayReader()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -163,6 +162,22 @@ 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() {
|
||||
@@ -237,32 +252,82 @@ 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,
|
||||
isCommanditairesOpen = false,
|
||||
isExtraitOpen = false,
|
||||
quelExtrait
|
||||
let isTextOpen = false
|
||||
|
||||
if (closeEverything) {
|
||||
closeEverything()
|
||||
}
|
||||
|
||||
$('#second-p-index, #commanditaires-grid, #extrait-publique, #extrait-social, #extrait-culturelle').children().fadeOut()
|
||||
$('#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) {
|
||||
if (isDesktopDevice) {
|
||||
displayContent($('#second-p-index'), '70vh')
|
||||
} else {
|
||||
displayContent($('#second-p-index'), '90vh')
|
||||
}
|
||||
displayContent($('#second-p-index'), isDesktopDevice ? '70vh' : '90vh')
|
||||
turnArrow('down')
|
||||
isTextOpen = true
|
||||
} else {
|
||||
if (isExtraitOpen) {
|
||||
hideContent($('#extrait-' + quelExtrait))
|
||||
$('#' + quelExtrait).css('text-decoration', 'none')
|
||||
$('#' + quelExtrait).css({
|
||||
'text-underline-offset': '0.1em',
|
||||
'text-decoration-thickness': '1px',
|
||||
})
|
||||
isExtraitOpen = false
|
||||
turnArrow('top')
|
||||
}
|
||||
@@ -273,7 +338,9 @@ function toggleIndexContent(closeEverything) {
|
||||
}
|
||||
if (isCommanditairesOpen) {
|
||||
hideContent($('#commanditaires-grid'))
|
||||
$('#commanditaires').css('text-decoration', 'none')
|
||||
$('#commanditaires').css({
|
||||
'text-underline-offset': '0.1em',
|
||||
'text-decoration-thickness': '1px',})
|
||||
isCommanditairesOpen = false
|
||||
}
|
||||
}
|
||||
@@ -292,18 +359,20 @@ function toggleIndexContent(closeEverything) {
|
||||
case 'figureslibres':
|
||||
changeMenuSelected($('nav li a[href$=collectif]').parent())
|
||||
break
|
||||
case 'logicielslibres':
|
||||
/* case 'logicielslibres':
|
||||
changeMenuSelected($('nav li a[href$=logiciels-libres]').parent())
|
||||
break
|
||||
case 'projets':
|
||||
*/ 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) {
|
||||
@@ -314,38 +383,65 @@ function toggleIndexContent(closeEverything) {
|
||||
}
|
||||
if (isCommanditairesOpen) {
|
||||
hideContent($('#commanditaires-grid'))
|
||||
$('#commanditaires').css('text-decoration', 'none')
|
||||
$('#commanditaires').css({
|
||||
'text-underline-offset': '0.1em',
|
||||
'text-decoration-thickness': '1px',
|
||||
})
|
||||
isCommanditairesOpen = false
|
||||
}
|
||||
displayContent($('#extrait-' + category), '80vh')
|
||||
displayContent($('#extrait-' + category), '100vh')
|
||||
turnArrow('down')
|
||||
$('#' + category).css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'})
|
||||
$('#' + category).css({
|
||||
'text-underline-offset': '0.3em',
|
||||
'text-decoration-thickness': '2px',
|
||||
})
|
||||
|
||||
isExtraitOpen = true
|
||||
quelExtrait = category
|
||||
} else if (isExtraitOpen && quelExtrait != category) {
|
||||
hideContent($('#extrait-' + quelExtrait))
|
||||
$('#' + category).css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'})
|
||||
$('#' + quelExtrait).css('text-decoration', 'none')
|
||||
setTimeout(() => {
|
||||
displayContent($('#extrait-' + category), '80vh')
|
||||
quelExtrait = category
|
||||
}, 1000)
|
||||
} else if (isExtraitOpen && quelExtrait == category) {
|
||||
hideContent($('#extrait-' + category))
|
||||
turnArrow('top')
|
||||
$('#' + category).css('text-decoration', 'none')
|
||||
isExtraitOpen = false
|
||||
} 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-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'})
|
||||
$('#commanditaires').css({
|
||||
'text-underline-offset': '0.3em',
|
||||
'text-decoration-thickness': '2px',
|
||||
})
|
||||
setBgColor(color_commanditaire)
|
||||
isCommanditairesOpen = true
|
||||
} else {
|
||||
hideContent($('#commanditaires-grid'))
|
||||
$('#commanditaires').css('text-decoration', 'none')
|
||||
$('#commanditaires').css({
|
||||
'text-underline-offset': '0.1em',
|
||||
'text-decoration-thickness': '1px',
|
||||
})
|
||||
setBgColor(color_bg)
|
||||
isCommanditairesOpen = false
|
||||
}
|
||||
}
|
||||
@@ -357,16 +453,24 @@ function toggleIndexContent(closeEverything) {
|
||||
}
|
||||
if (isExtraitOpen) {
|
||||
hideContent($('#extrait-' + quelExtrait))
|
||||
$('#' + quelExtrait).css('text-decoration', 'none')
|
||||
$('#' + quelExtrait).css({
|
||||
'text-underline-offset': '0.1em',
|
||||
'text-decoration-thickness': '1px',
|
||||
})
|
||||
isExtraitOpen = false
|
||||
}
|
||||
if (isCommanditairesOpen) {
|
||||
hideContent($('#commanditaires-grid'))
|
||||
$('#commanditaires').css('text-decoration', 'none')
|
||||
$('#commanditaires').css({
|
||||
'text-underline-offset': '0.1em',
|
||||
'text-decoration-thickness': '1px',
|
||||
})
|
||||
isCommanditairesOpen = false
|
||||
}
|
||||
turnArrow('top')
|
||||
setBgColor(color_bg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function turnArrow(direction) {
|
||||
@@ -382,10 +486,25 @@ function turnArrow(direction) {
|
||||
'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({
|
||||
@@ -475,7 +594,10 @@ function filterCards(utilite) {
|
||||
}
|
||||
})
|
||||
|
||||
$('#' + utilite + '-filter').css('opacity', 1)
|
||||
$('#' + utilite + '-filter').css({
|
||||
'opacity': 1,
|
||||
'filter': 'grayscale(0)'
|
||||
})
|
||||
|
||||
Object.keys(filterObj).forEach(v => filterObj[v] = false)
|
||||
|
||||
@@ -487,12 +609,18 @@ function filterCards(utilite) {
|
||||
checkFilter()
|
||||
|
||||
if (filterIsOn) {
|
||||
$('#' + utilite + '-filter').css('opacity', 0.4)
|
||||
$('#' + 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)
|
||||
$('#' + 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')
|
||||
})
|
||||
@@ -504,13 +632,19 @@ function filterCards(utilite) {
|
||||
checkFilter()
|
||||
|
||||
if (filterIsOn) {
|
||||
$('#' + utilite + '-filter').css('opacity', 0.4)
|
||||
$('#' + 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)
|
||||
$(this).css({
|
||||
'opacity': 0.4,
|
||||
'filter': 'grayscale(1)'
|
||||
})
|
||||
})
|
||||
$('.projets-grid div').each(function () { // hide all cards
|
||||
$(this).removeClass('card-hidden').addClass('card-displayed')
|
||||
@@ -565,6 +699,9 @@ function filterWhenEntering() {
|
||||
|
||||
// display reader
|
||||
function displayReader() {
|
||||
$('header').fadeOut()
|
||||
projectTitleIsScrolling = false
|
||||
checkTitleAutoScroll()
|
||||
const swiper = new Swiper('.swiper', {
|
||||
// Optional parameters
|
||||
loop: true,
|
||||
@@ -596,9 +733,6 @@ function displayReader() {
|
||||
swiper.el.style.display = "none";
|
||||
}, 300);
|
||||
})
|
||||
$('header').fadeOut()
|
||||
projectTitleIsScrolling = false
|
||||
checkTitleAutoScroll()
|
||||
|
||||
|
||||
|
||||
@@ -612,7 +746,7 @@ function displayReader() {
|
||||
}
|
||||
isProjectHeaderDisplayed = true
|
||||
} else if ($(window).scrollTop() < $('#main-project-title').offset().top && isProjectHeaderDisplayed) {
|
||||
$('#header-project').css('top', '-9vh')
|
||||
$('#header-project').css('top', '-4vh')
|
||||
if (isDesktopDevice) {
|
||||
$('#close-project').removeClass('scrolled-cross')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user