152 lines
3.9 KiB
JavaScript
152 lines
3.9 KiB
JavaScript
import Splide from '@splidejs/splide';
|
|
import create from 'swiped-events';
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// DATA
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
const body = document.body;
|
|
|
|
// SPLIDE 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');
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// LOGIC
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
// Enable CSS :active pseudo-class in Safari Mobile
|
|
function enableActivePseudoClass() {
|
|
document.addEventListener("touchstart", function() {},false);
|
|
}
|
|
|
|
// Convert rem to pixels by getting font-size CSS property
|
|
function convertRemToPixels(rem) {
|
|
let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
|
|
return rem * fontSize;
|
|
}
|
|
|
|
// SPLIDE SLIDER
|
|
|
|
function setUpSlider() {
|
|
if (sliderSection) {
|
|
slider = new Splide('.splide', {
|
|
type: 'fade',
|
|
rewind: true,
|
|
rewindByDrag: true,
|
|
speed: 400,
|
|
width: '100vw',
|
|
height: '100vh',
|
|
arrows: false,
|
|
pagination: false,
|
|
easing: 'ease-in-out',
|
|
drag: true
|
|
});
|
|
}
|
|
}
|
|
|
|
function mountSlider() {
|
|
if (slider) {
|
|
slider.mount();
|
|
}
|
|
}
|
|
|
|
function goToNextSlideOnClick() {
|
|
if (homeSection && slider) {
|
|
homeSection.addEventListener('click', function(e) {
|
|
if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
|
|
slider.go('>');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function changeSlideOnSwipe() {
|
|
if (homeSection && slider) {
|
|
homeSection.addEventListener('swiped', function(e) {
|
|
if (e.detail.dir === 'right') {
|
|
slider.go('>');
|
|
} else if (e.detail.dir === 'left') {
|
|
slider.go('<');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
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 editNavLinksColor(slide) {
|
|
if (slide) {
|
|
if (slide.getAttribute('data-logo-color') === 'white') {
|
|
turnSidebarLinksToWhite();
|
|
} else if (slide.getAttribute('data-logo-color') === 'black') {
|
|
turnSidebarLinksToBlack();
|
|
}
|
|
}
|
|
}
|
|
|
|
function editNavLinksColorOnSliderMounted() {
|
|
if (slider && slides) {
|
|
slider.on('mounted', function() {
|
|
editNavLinksColor(slides[0]);
|
|
})
|
|
}
|
|
}
|
|
|
|
function editNavLinksColorOnSlideActive() {
|
|
if (slider) {
|
|
slider.on('active', function(e) {
|
|
editNavLinksColor(e.slide);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// PROGRAM
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
enableActivePseudoClass();
|
|
|
|
// SPLIDE SLIDER
|
|
|
|
setUpSlider();
|
|
editNavLinksColorOnSliderMounted();
|
|
mountSlider();
|
|
goToNextSlideOnClick();
|
|
changeSlideOnSwipe();
|
|
editNavLinksColorOnSlideActive();
|