host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Clean up image file blueprint and remove cursor related functionalities

Browse source
This commit is contained in:
Paul Nicoué 2025-05-01 17:14:24 +02:00
parent 58911e48d3
commit 776c8cb74e
10 changed files with 15 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

87
assets/js/app.js
View file

@ -12,13 +12,9 @@ const body = document.body;
// SLIDER
const homeSection = document.querySelector('.home-section');
const navLinks = document.querySelectorAll('.navigation__link');
const socialLinks = document.querySelectorAll('.social__link');
const sliderSection = document.querySelector('.slider-section');
let slider;
const slides = document.querySelectorAll('.splide__slide');
let cursorOrientation;
let cursorColor;
// ----------------------------------------------------------------------------
// LOGIC
@ -88,86 +84,6 @@ function changeSlideOnSwipe() {
}
}
function turnSidebarLinksToWhite() {
if (navLinks) {
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('navigation__link--white');
}
}
if (socialLinks) {
for (let i = 0; i < socialLinks.length; i++) {
socialLinks[i].classList.add('social__link--white');
}
}
}
function turnSidebarLinksToBlack() {
if (navLinks) {
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.remove('navigation__link--white');
}
}
if (socialLinks) {
for (let i = 0; i < socialLinks.length; i++) {
socialLinks[i].classList.remove('social__link--white');
}
}
}
function editColorTheme(slide) {
if (slide) {
if (slide.getAttribute('data-text-color') === 'white') {
turnSidebarLinksToWhite();
cursorColor = 'light';
} else if (slide.getAttribute('data-text-color') === 'black') {
turnSidebarLinksToBlack();
cursorColor = 'dark';
}
if (body && cursorOrientation && cursorColor) {
if (cursorOrientation === 'previous') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 0 12, auto`;
} else if (cursorOrientation === 'next') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 24 12, auto`;
}
}
}
}
function editColorThemeOnSliderMounted() {
if (slider && slides) {
slider.on('mounted', function() {
editColorTheme(slides[0]);
})
}
}
function editColorThemeOnSlideActive() {
if (slider) {
slider.on('active', function(e) {
editColorTheme(e.slide);
});
}
}
function setCursorOnMove() {
if (body) {
body.addEventListener('mousemove', function(e) {
if (e.clientX >= window.innerWidth / 2) {
cursorOrientation = 'next';
} else {
cursorOrientation = 'previous';
}
if (cursorOrientation && cursorColor) {
if (cursorOrientation === 'previous') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 0 12, auto`;
} else if (cursorOrientation === 'next') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 24 12, auto`;
}
}
});
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -179,9 +95,6 @@ enableActivePseudoClass();
// SLIDER
setUpSlider();
editColorThemeOnSliderMounted();
mountSlider();
changeSlideOnClick();
changeSlideOnSwipe();
editColorThemeOnSlideActive();
setCursorOnMove();

4
public/images/cursor-next-dark.svg
View file

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 19.777 L 7.543 19.705 C 7.397 19.384 7.629 19 8 19 L 13.5 19 L 13.5 0.5 C 13.5 0.224 13.724 0 14 0 L 18 0 L 18.09 0.008 C 18.323 0.05 18.5 0.255 18.5 0.5 L 18.5 19 L 24 19 C 24.399 19 24.638 19.445 24.416 19.777 L 16.416 31.777 C 16.218 32.074 15.782 32.074 15.584 31.777 L 7.584 19.777 Z" fill="#000" transform="matrix(0, -1, 1, 0, 0.000012, 31.999764)"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 511 B

4
public/images/cursor-next-light.svg
View file

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 19.777 L 7.543 19.705 C 7.397 19.384 7.629 19 8 19 L 13.5 19 L 13.5 0.5 C 13.5 0.224 13.724 0 14 0 L 18 0 L 18.09 0.008 C 18.323 0.05 18.5 0.255 18.5 0.5 L 18.5 19 L 24 19 C 24.399 19 24.638 19.445 24.416 19.777 L 16.416 31.777 C 16.218 32.074 15.782 32.074 15.584 31.777 L 7.584 19.777 Z" fill="#fff" transform="matrix(0, -1, 1, 0, 0.000012, 31.999764)"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 512 B

4
public/images/cursor-previous-dark.svg
View file

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 12.223 L 7.543 12.295 C 7.397 12.616 7.629 13 8 13 L 13.5 13 L 13.5 31.5 C 13.5 31.776 13.724 32 14 32 L 18 32 L 18.09 31.992 C 18.323 31.95 18.5 31.745 18.5 31.5 L 18.5 13 L 24 13 C 24.399 13 24.638 12.555 24.416 12.223 L 16.416 0.223 C 16.218 -0.074 15.782 -0.074 15.584 0.223 L 7.584 12.223 Z" fill="#000" transform="matrix(0, -1, 1, 0, -0.000237, 32.000013)"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 519 B

4
public/images/cursor-previous-light.svg
View file

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 12.223 L 7.543 12.295 C 7.397 12.616 7.629 13 8 13 L 13.5 13 L 13.5 31.5 C 13.5 31.776 13.724 32 14 32 L 18 32 L 18.09 31.992 C 18.323 31.95 18.5 31.745 18.5 31.5 L 18.5 13 L 24 13 C 24.399 13 24.638 12.555 24.416 12.223 L 16.416 0.223 C 16.218 -0.074 15.782 -0.074 15.584 0.223 L 7.584 12.223 Z" fill="#fff" transform="matrix(0, -1, 1, 0, -0.000237, 32.000013)"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 520 B

29
site/blueprints/files/full_screen_image.yml
View file

@ -1,29 +0,0 @@
title: Image
accept:
mime: image/jpeg, image/png
fields:
alt_text:
label:
en: Alternative text
fr: Texte alternatif
type: text
help:
en: "Short description displayed if the image can't be loaded and used by screen readers."
fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."
text_color:
label:
en: Overlay text color
fr: Couleur du texte superposé
type: select
options:
black:
en: Black
fr: Noir
white:
en: White
fr: Blanc
default: black
help:
en: "Favor a black logo for a light image, and a white logo for a dark image."
fr: "Privilégier le noir pour un texte superposé à une image claire, et le blanc pour un texte superposé à une image sombre."
width: 1/4

12
site/blueprints/files/gallery_image.yml Normal file
View file

@ -0,0 +1,12 @@
title: Image
accept:
mime: image/jpeg, image/png
fields:
alt_text:
label:
en: Alternative text
fr: Texte alternatif
type: text
help:
en: "Short description displayed if the image can't be loaded and used by screen readers."
fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."

4
site/blueprints/sections/site_content_images.yml
View file

@ -2,10 +2,8 @@ label:
en: Image gallery
fr: Galerie d'images
type: files
template: full_screen_image
template: gallery_image
min: 2
layout: cards
size: small
limit: 15
image:
ratio: 1/1

2
site/controllers/home.php
View file

@ -3,7 +3,7 @@
return function ($site) {
// Get image files section content
$images = $site->files()->template("full_screen_image")->shuffle();
$images = $site->files()->template("gallery_image")->shuffle();
// Get contact fields content
$email = $site->email();

2
site/templates/home.twig
View file

@ -90,7 +90,7 @@
<div class="splide__track">
<ul class="splide__list">
{% for image in images %}
<li class="splide__slide" data-text-color="{{ image.text_color }}">
<li class="splide__slide">
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
</li>
{% endfor %}