modifs couleurs etc

This commit is contained in:
Valentin
2024-03-25 23:22:38 +01:00
parent 6af420e9bb
commit 66bd5cb3d9
8 changed files with 733 additions and 341 deletions
+184 -50
View File
@@ -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')
}