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

Edit HTML structure

Browse source
This commit is contained in:
Paul Nicoué 2022-11-23 14:55:44 +01:00
parent 5e4b34ee0d
commit 07bc24cd7b
8 changed files with 4671 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

64
assets/js/app.js
View file

@ -11,12 +11,12 @@ const body = document.body;
// SPLIDE SLIDER
const slider = document.querySelector('.slider-section');
let splideSlider;
const sliderSection = document.querySelector('.slider-section');
let slider;
const slides = document.querySelectorAll('.splide__slide');
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
const homeSection = document.querySelector('.home-section');
const navLinks = document.querySelectorAll('.navigation__link');
const socialLinks = document.querySelectorAll('.social__link');
// ----------------------------------------------------------------------------
// LOGIC
@ -38,8 +38,8 @@ function convertRemToPixels(rem) {
// SPLIDE SLIDER
function setUpSlider() {
if (slider) {
splideSlider = new Splide('.splide', {
if (sliderSection) {
slider = new Splide('.splide', {
type: 'fade',
rewind: true,
rewindByDrag: true,
@ -55,55 +55,55 @@ function setUpSlider() {
}
function mountSlider() {
if (splideSlider) {
splideSlider.mount();
if (slider) {
slider.mount();
}
}
function goToNextSlideOnClick() {
if (sidebar && splideSlider) {
sidebar.addEventListener('click', function(e) {
if (homeSection && slider) {
homeSection.addEventListener('click', function(e) {
if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
splideSlider.go('>');
slider.go('>');
}
});
}
}
function changeSlideOnSwipe() {
if (sidebar && splideSlider) {
sidebar.addEventListener('swiped', function(e) {
if (homeSection && slider) {
homeSection.addEventListener('swiped', function(e) {
if (e.detail.dir === 'right') {
splideSlider.go('>');
slider.go('>');
} else if (e.detail.dir === 'left') {
splideSlider.go('<');
slider.go('<');
}
});
}
}
function turnSidebarLinksToWhite() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].classList.add('sidebar__nav-link--white');
if (navLinks) {
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('navigation__link--white');
}
}
if (sidebarSocialLinks) {
for (let i = 0; i < sidebarSocialLinks.length; i++) {
sidebarSocialLinks[i].classList.add('sidebar__social-link--white');
if (socialLinks) {
for (let i = 0; i < socialLinks.length; i++) {
socialLinks[i].classList.add('social__link--white');
}
}
}
function turnSidebarLinksToBlack() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].classList.remove('sidebar__nav-link--white');
if (navLinks) {
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.remove('navigation__link--white');
}
}
if (sidebarSocialLinks) {
for (let i = 0; i < sidebarSocialLinks.length; i++) {
sidebarSocialLinks[i].classList.remove('sidebar__social-link--white');
if (socialLinks) {
for (let i = 0; i < socialLinks.length; i++) {
socialLinks[i].classList.remove('social__link--white');
}
}
}
@ -119,16 +119,16 @@ function editNavLinksColor(slide) {
}
function editNavLinksColorOnSliderMounted() {
if (splideSlider && slides) {
splideSlider.on('mounted', function() {
if (slider && slides) {
slider.on('mounted', function() {
editNavLinksColor(slides[0]);
})
}
}
function editNavLinksColorOnSlideActive() {
if (splideSlider) {
splideSlider.on('active', function(e) {
if (slider) {
slider.on('active', function(e) {
editNavLinksColor(e.slide);
});
}