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

Add logo color transition

Browse source
This commit is contained in:
Paul Nicoué 2022-08-03 16:49:26 +02:00
parent 9cd82101c8
commit dac525b4a6
9 changed files with 101 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

31
public/assets/build/app.js
View file

File diff suppressed because one or more lines are too long

27
public/assets/js/app.js
View file

@ -11,12 +11,12 @@ const body = document.body;
// SPLIDE SLIDER
let splideSlider = document.querySelector('.splide');
const logoIcon = document.querySelector('.logo__icon');
// EXHIBITION IFRAME
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
const logoIcon = document.querySelector('.logo__icon');
const exhibitionIframe = document.querySelector('.exhibition');
// ----------------------------------------------------------------------------
@ -64,6 +64,30 @@ function goToNextSlideOnClick() {
}
}
function turnLogoIconToWhite() {
if (logoIcon) {
logoIcon.classList.add('logo__icon--white');
}
}
function turnLogoIconToBlack() {
if (logoIcon) {
logoIcon.classList.remove('logo__icon--white');
}
}
function editLogoColorOnSlideActive() {
if (splideSlider) {
splideSlider.on('active', function(e) {
if (e.slide.getAttribute('data-logo-color') === 'white') {
turnLogoIconToWhite();
} else if (e.slide.getAttribute('data-logo-color') === 'black') {
turnLogoIconToBlack();
}
});
}
}
function enableLogoIconRotation() {
if (logoIcon) {
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
@ -150,6 +174,7 @@ enableActivePseudoClass();
setUpSlider();
goToNextSlideOnClick();
editLogoColorOnSlideActive();
rotateLogoOnSliderMove();
// EXHIBITION IFRAME

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

@ -0,0 +1,29 @@
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."
logo_color:
label:
en: Logo color
fr: Couleur du logo
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 un logo noir pour une image claire, et un logo blanc pour une image sombre."
width: 1/4

6
site/blueprints/files/image.yml
View file

@ -7,8 +7,14 @@ fields:
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."
caption:
label:
en: Caption
fr: Légende
type: text
help:
en: "Informative text displayed below the image."
fr: "Texte informatif affiché sous l'image."

6
site/blueprints/files/image_video.yml → site/blueprints/files/image_or_video.yml
View file

@ -9,6 +9,9 @@ fields:
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."
poster:
when:
file_type: video
@ -32,3 +35,6 @@ fields:
en: Caption
fr: Légende
type: text
help:
en: "Informative text displayed below the image."
fr: "Texte informatif affiché sous l'image."

2
site/blueprints/sections/gallery_content_artworks.yml → site/blueprints/sections/gallery_content_images.yml
View file

@ -2,7 +2,7 @@ headline:
en: Artworks
fr: Œuvres
type: files
template: image
template: full_screen_image
min: 2
layout: cards
size: small

2
site/blueprints/tabs/gallery_content.yml
View file

@ -3,4 +3,4 @@ label:
fr: Contenu
icon: text
sections:
artworks: sections/gallery_content_artworks
artworks: sections/gallery_content_images

2
site/controllers/gallery.php
View file

@ -6,7 +6,7 @@ return function ($pages, $page) {
$exhibitionsPage = $pages->template('exhibitions')->first();
// Get image files section content
$images = $page->files()->template("image")->sortBy('sort');
$images = $page->files()->template("full_screen_image")->sortBy('sort');
return [
'exhibitionsPage' => $exhibitionsPage,

6
site/templates/gallery.twig
View file

@ -7,8 +7,8 @@
<a class="logo__link" href="{{ exhibitionsPage.url }}" target="_self" aria-label="Go to {{ site.title }}'s exhibitions page">
<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
<path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
<path style="fill:none;stroke:currentColor;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
<path style="fill:none;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
<path style="fill:none;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
</g>
</svg>
</a>
@ -24,7 +24,7 @@
<div class="splide__track">
<ul class="splide__list">
{% for image in images %}
<li class="splide__slide">
<li class="splide__slide" data-logo-color="{{ image.logo_color }}">
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
</li>
{% endfor %}