Clean up image file blueprint and remove cursor related functionalities

assets/js/app.js

@@ -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();

public/images/cursor-next-dark.svg

@@ -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>

public/images/cursor-next-light.svg

@@ -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>

public/images/cursor-previous-dark.svg

@@ -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>

public/images/cursor-previous-light.svg

@@ -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>

site/blueprints/files/full_screen_image.yml

@@ -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

site/blueprints/files/gallery_image.yml

@@ -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."

site/blueprints/sections/site_content_images.yml

@@ -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

site/controllers/home.php

@@ -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();

site/templates/home.twig

@@ -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 %}