From 4567800ec4b725847dc665f548bedd0066f6becf Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Thu, 12 Jan 2023 11:07:12 +0100
Subject: [PATCH] fix splide slide opacity on move
---
assets/js/vendors/carousel.js | 31 +++++++++++++++++---------
assets/sass/_theme/blocks/gallery.sass | 4 ++++
2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js
index 59d6cf3e..0da736c6 100644
--- a/assets/js/vendors/carousel.js
+++ b/assets/js/vendors/carousel.js
@@ -20,28 +20,29 @@ class Carousel {
}
init () {
- var splide = new Splide(this.element).mount(),
- toggleButton = splide.root.querySelector('.splide__autoplay'),
- stepButtons = splide.root.querySelectorAll('.splide__pagination button'),
- elements = splide.root.querySelectorAll('.splide__pagination, .splide__slide'),
- autoplay = splide.Components.Autoplay;
+ this.splide = new Splide(this.element).mount();
+ const toggleButton = this.splide.root.querySelector('.splide__autoplay'),
+ stepButtons = this.splide.root.querySelectorAll('.splide__pagination button'),
+ elements = this.splide.root.querySelectorAll('.splide__pagination, .splide__slide'),
+ autoplay = this.splide.Components.Autoplay;
+ this.listen();
if (toggleButton) {
stepButtons.forEach((stepButton) => {
stepButton.innerHTML = '<i></i>';
});
- splide.on('autoplay:play', function () {
+ this.splide.on('autoplay:play', function () {
toggleButton.classList.add('is-active');
});
- splide.on('autoplay:playing', function (rate) {
- var activeStepButton = splide.root.querySelector('.splide__pagination .is-active i');
+ this.splide.on('autoplay:playing', function (rate) {
+ var activeStepButton = this.splide.root.querySelector('.splide__pagination .is-active i');
activeStepButton.style.width = rate * 100 + '%';
});
- splide.on('autoplay:pause', function () {
+ this.splide.on('autoplay:pause', function () {
toggleButton.classList.remove('is-active');
});
@@ -51,11 +52,21 @@ class Carousel {
})
});
- splide.on('drag', function() {
+ this.splide.on('drag', function() {
autoplay.pause();
});
}
}
+
+ listen() {
+ this.splide.on('move', function() {
+ this.splide.root.classList.add('is-moving')
+ }.bind(this));
+
+ this.splide.on('moved', function() {
+ this.splide.root.classList.remove('is-moving')
+ }.bind(this));
+ }
}
(function () {
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index 40212712..9a2324a8 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -63,6 +63,10 @@
.splide
display: flex
flex-direction: column
+ @include in-page-with-sidebar
+ &.is-moving
+ .splide__slide.is-active
+ opacity: 0.1
&__track
overflow: visible
margin-right: half(-$grid-gutter-sm)
--
GitLab