Edit slider behaviour and add custom cursor
This commit is contained in:
Paul Nicoué
parent
07bc24cd7b
commit
0c74117eae
10 changed files with 72 additions and 4599 deletions
|
|
@ -95,7 +95,6 @@ body {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
4173
public/build/app.js
4173
public/build/app.js
File diff suppressed because one or more lines are too long
15
public/build/app.js.LICENSE.txt
Normal file
15
public/build/app.js.LICENSE.txt
Normal file
|
|
@ -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
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,13 +1 @@
|
|||
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** 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=*/
|
||||
.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}
|
||||
3
public/icons/cursor-next-dark.svg
Normal file
3
public/icons/cursor-next-dark.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 715 B |
3
public/icons/cursor-next-light.svg
Normal file
3
public/icons/cursor-next-light.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 715 B |
3
public/icons/cursor-previous-dark.svg
Normal file
3
public/icons/cursor-previous-dark.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 696 B |
3
public/icons/cursor-previous-light.svg
Normal file
3
public/icons/cursor-previous-light.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 696 B |
Loading…
Add table
Add a link
Reference in a new issue