Edit slider behaviour and add custom cursor

assets/css/main.scss

@@ -95,7 +95,6 @@ body {
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
-    background-color: transparent;
 }
 
 .navigation {

assets/js/app.js

@@ -9,14 +9,16 @@ import create from 'swiped-events';
 
 const body = document.body;
 
-// SPLIDE SLIDER
+// SLIDER
 
-const sliderSection = document.querySelector('.slider-section');
-let slider;
-const slides = document.querySelectorAll('.splide__slide');
 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
@@ -35,7 +37,7 @@ function convertRemToPixels(rem) {
     return rem * fontSize;
 }
 
-// SPLIDE SLIDER
+// SLIDER
 
 function setUpSlider() {
     if (sliderSection) {
@@ -60,11 +62,13 @@ function mountSlider() {
     }
 }
 
-function goToNextSlideOnClick() {
+function changeSlideOnClick() {
     if (homeSection && slider) {
         homeSection.addEventListener('click', function(e) {
-            if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
+            if (e.clientX >= window.innerWidth / 2) {
                 slider.go('>');
+            } else {
+                slider.go('<');
             }
         });
     }
@@ -108,28 +112,48 @@ function turnSidebarLinksToBlack() {
     }
 }
 
-function editNavLinksColor(slide) {
+function editColorTheme(slide) {
     if (slide) {
         if (slide.getAttribute('data-logo-color') === 'white') {
             turnSidebarLinksToWhite();
+            cursorColor = 'light';
         } else if (slide.getAttribute('data-logo-color') === 'black') {
             turnSidebarLinksToBlack();
+            cursorColor = 'dark';
+        }
+        if (body && cursorOrientation && cursorColor) {
+            body.style.cursor = `url('/icons/cursor-${cursorOrientation}-${cursorColor}.svg') 0 16, auto`;
         }
     }
 }
 
-function editNavLinksColorOnSliderMounted() {
+function editColorThemeOnSliderMounted() {
     if (slider && slides) {
         slider.on('mounted', function() {
-            editNavLinksColor(slides[0]);
+            editColorTheme(slides[0]);
         })
     }
 }
 
-function editNavLinksColorOnSlideActive() {
+function editColorThemeOnSlideActive() {
     if (slider) {
         slider.on('active', function(e) {
-            editNavLinksColor(e.slide);
+            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) {
+                body.style.cursor = `url('/icons/cursor-${cursorOrientation}-${cursorColor}.svg') 0 16, auto`;
+            }
         });
     }
 }
@@ -142,11 +166,12 @@ function editNavLinksColorOnSlideActive() {
 
 enableActivePseudoClass();
 
-// SPLIDE SLIDER
+// SLIDER
 
 setUpSlider();
-editNavLinksColorOnSliderMounted();
+editColorThemeOnSliderMounted();
 mountSlider();
-goToNextSlideOnClick();
+changeSlideOnClick();
 changeSlideOnSwipe();
-editNavLinksColorOnSlideActive();
+editColorThemeOnSlideActive();
+setCursorOnMove();

public/build/app.js.LICENSE.txt

@@ -0,0 +1,15 @@
+/*!
+ * Splide.js
+ * Version  : 4.1.4
+ * License  : MIT
+ * Copyright: 2022 Naotoshi Fujita
+ */
+
+/*!
+ * swiped-events.js - v@version@
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */

public/build/panel.css

@@ -1,13 +1 @@
-/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3),.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!./assets/css/panel.scss ***!
-  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),
-.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3) {
-  display: none;
-}
-
-.kirby-imagecrop-field .k-column:nth-of-type(2) {
-  display: none;
-}
-
-/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY3NzIiwibWFwcGluZ3MiOiI7OztBQVlZOztFQUVJO0FDWGhCOztBRHFCSTtFQUNJO0FDbEJSLEMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvY3NzL3BhbmVsLnNjc3MiLCJ3ZWJwYWNrOi8vLy4uLy4uLy4uLy4uL0Rvbm4lQzMlQTllcy9Qcm9ncmFtbWF0aW9uL1Byb2pldHMvanVsaWVubW9ubmVyaWUvYXNzZXRzL2Nzcy9wYW5lbC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIEtJUkJZIFBBTkVMIENVU1RPTUlaQVRJT05cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gVGV4dGFyZWEgaGVhZGxpbmUgYnV0dG9uc1xuXG4uay10ZXh0YXJlYS1maWVsZCB7XG5cbiAgICAuay10b29sYmFyIHtcblxuICAgICAgICAuay1kcm9wZG93biB7XG5cbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgyKSxcbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cblxuLy8gVmlzdWFsIGltYWdlIGNyb3AgZmllbGQgcHJvcGVydGllc1xuXG4ua2lyYnktaW1hZ2Vjcm9wLWZpZWxkIHtcblxuICAgIC5rLWNvbHVtbjpudGgtb2YtdHlwZSgyKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxufVxuIiwiLmstdGV4dGFyZWEtZmllbGQgLmstdG9vbGJhciAuay1kcm9wZG93biAuay1idXR0b246bnRoLW9mLXR5cGUoMiksXG4uay10ZXh0YXJlYS1maWVsZCAuay10b29sYmFyIC5rLWRyb3Bkb3duIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5raXJieS1pbWFnZWNyb3AtZmllbGQgLmstY29sdW1uOm50aC1vZi10eXBlKDIpIHtcbiAgZGlzcGxheTogbm9uZTtcbn0iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=*/

public/icons/cursor-next-dark.svg

@@ -0,0 +1,3 @@
+<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M 1.061 30.921 C 0.698 30.471 0.507 29.972 0.483 29.429 C 0.461 28.887 0.654 28.412 1.061 28.006 L 12.999 16.068 L 0.992 4.062 C 0.631 3.701 0.461 3.213 0.483 2.604 C 0.507 1.993 0.698 1.507 1.061 1.146 C 1.511 0.694 1.999 0.479 2.518 0.502 C 3.038 0.525 3.501 0.738 3.909 1.146 L 17.406 14.643 C 17.633 14.87 17.791 15.095 17.882 15.321 C 17.971 15.547 18.018 15.795 18.018 16.068 C 18.018 16.338 17.971 16.588 17.882 16.815 C 17.791 17.04 17.633 17.266 17.406 17.492 L 3.978 30.921 C 3.57 31.328 3.095 31.521 2.553 31.498 C 2.01 31.476 1.511 31.284 1.061 30.921 Z" style="fill: #000; stroke: #fff;"/>
+</svg>

public/icons/cursor-next-light.svg

@@ -0,0 +1,3 @@
+<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M 1.061 30.921 C 0.698 30.471 0.507 29.972 0.483 29.429 C 0.461 28.887 0.654 28.412 1.061 28.006 L 12.999 16.068 L 0.992 4.062 C 0.631 3.701 0.461 3.213 0.483 2.604 C 0.507 1.993 0.698 1.507 1.061 1.146 C 1.511 0.694 1.999 0.479 2.518 0.502 C 3.038 0.525 3.501 0.738 3.909 1.146 L 17.406 14.643 C 17.633 14.87 17.791 15.095 17.882 15.321 C 17.971 15.547 18.018 15.795 18.018 16.068 C 18.018 16.338 17.971 16.588 17.882 16.815 C 17.791 17.04 17.633 17.266 17.406 17.492 L 3.978 30.921 C 3.57 31.328 3.095 31.521 2.553 31.498 C 2.01 31.476 1.511 31.284 1.061 30.921 Z" style="fill: #fff; stroke: #000;"/>
+</svg>

public/icons/cursor-previous-dark.svg

@@ -0,0 +1,3 @@
+<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M 14.433 30.889 L 1.106 17.458 C 0.881 17.232 0.724 17.006 0.635 16.78 C 0.545 16.554 0.5 16.305 0.5 16.034 C 0.5 15.763 0.545 15.514 0.635 15.288 C 0.724 15.062 0.881 14.836 1.106 14.609 L 14.499 1.111 C 14.903 0.704 15.386 0.5 15.947 0.5 C 16.508 0.5 16.99 0.704 17.394 1.111 C 17.798 1.518 17.988 2.015 17.966 2.603 C 17.943 3.191 17.73 3.688 17.326 4.095 L 5.481 16.034 L 17.394 28.04 C 17.798 28.447 18 28.922 18 29.465 C 18 30.008 17.798 30.482 17.394 30.889 C 16.99 31.297 16.497 31.5 15.913 31.5 C 15.33 31.5 14.837 31.297 14.433 30.889 Z" style="fill: #000; stroke: #fff;"/>
+</svg>

public/icons/cursor-previous-light.svg

@@ -0,0 +1,3 @@
+<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M 14.433 30.889 L 1.106 17.458 C 0.881 17.232 0.724 17.006 0.635 16.78 C 0.545 16.554 0.5 16.305 0.5 16.034 C 0.5 15.763 0.545 15.514 0.635 15.288 C 0.724 15.062 0.881 14.836 1.106 14.609 L 14.499 1.111 C 14.903 0.704 15.386 0.5 15.947 0.5 C 16.508 0.5 16.99 0.704 17.394 1.111 C 17.798 1.518 17.988 2.015 17.966 2.603 C 17.943 3.191 17.73 3.688 17.326 4.095 L 5.481 16.034 L 17.394 28.04 C 17.798 28.447 18 28.922 18 29.465 C 18 30.008 17.798 30.482 17.394 30.889 C 16.99 31.297 16.497 31.5 15.913 31.5 C 15.33 31.5 14.837 31.297 14.433 30.889 Z" style="fill: #fff; stroke: #000;"/>
+</svg>