From 1c9ed45efcf665aef88bd721e6db5dd9dabb4e5c Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 26 Sep 2023 15:04:48 +0200 Subject: [PATCH] wip #6305 @4 --- js/quiz.animations.js | 2 +- js/quiz.match.js | 113 ++++++++++++++++------------------ style/100-global.sass | 1 + style/104-animations.sass | 9 ++- style/107-question-match.sass | 33 +++++----- 5 files changed, 79 insertions(+), 79 deletions(-) diff --git a/js/quiz.animations.js b/js/quiz.animations.js index 7dde747..da7ba19 100644 --- a/js/quiz.animations.js +++ b/js/quiz.animations.js @@ -46,7 +46,7 @@ QuizAnimations.prototype = { selector.addClass("active") this.instantReviewAnimationTimeout = setTimeout(function (e) { $this.stopInstantReviewAnimation() - }, 4000) + }, 400000) }, stopInstantReviewAnimation: function () { diff --git a/js/quiz.match.js b/js/quiz.match.js index 3db6a33..956ab56 100644 --- a/js/quiz.match.js +++ b/js/quiz.match.js @@ -1,6 +1,6 @@ import gsap from "gsap"; import Swiper from 'swiper'; -import { Navigation, Pagination, Manipulation } from 'swiper/modules'; +import {Navigation, Pagination, Manipulation} from 'swiper/modules'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; @@ -10,32 +10,32 @@ function QuizMatch(quiz) { } QuizMatch.prototype = { - init: function() { + init: function () { const $this = this $(document).on("click", ".move-slide", function () { let move = $(this).attr("aria-keyshortcuts") - if(move === "ARROWLEFT") { + if (move === "ARROWLEFT") { $this.swiperBottom.slidePrev() - }else { + } else { $this.swiperBottom.slideNext() } }) - $(document).on("click", ".confirmMatch", function() { + $(document).on("click", ".confirmMatch", function () { $this.confirmTheMatch() - }) + }); }, - start: function() { + start: function () { const $this = this this.swiperBottom = false - this.rules = [{top: "10", opacity: ".48"},{top: "39", opacity: ".24"},{top: "88", opacity: "0"}] this.quiz.screens.currentQuestionAnswers = []; this.swiperBottomEl = this.quiz.screens.getActiveScreen().find(".bottom-slider") this.sliderBottomHtml = this.swiperBottomEl.html() + this.swiperTopEl = this.quiz.screens.getActiveScreen().find(".top-slider"); - this.swiperTop = new Swiper('.swiper-container.top-slider', { + this.swiperTop = new Swiper(this.swiperTopEl.get(0), { modules: [Navigation, Pagination], slidesPerView: 1, effect: 'fade', @@ -45,8 +45,7 @@ QuizMatch.prototype = { keyboardControl: false, noSwiping: true, pagination: { - el: '.swiper-pagination-top', - type: 'fraction', + el: '.swiper-pagination-top', type: 'fraction', }, }) @@ -54,84 +53,80 @@ QuizMatch.prototype = { }, - initSwiperBottom: function() { + initSwiperBottom: function () { const $this = this - if(this.swiperBottom) - this.swiperBottom.destroy() + if (this.swiperBottom) this.swiperBottom.destroy() - this.swiperBottom = new Swiper('.swiper-container.bottom-slider', { + this.swiperBottom = new Swiper(this.swiperBottomEl.get(0), { modules: [Navigation, Pagination, Manipulation], slidesPerView: "auto", - //loop: true, centeredSlides: true, spaceBetween: 20, + initialSlide: Math.floor(this.swiperBottomEl.find('.swiper-slide').length / 2), pagination: { - el: '.swiper-pagination-bottom', - type: 'bullets', + el: '.swiper-pagination-bottom', type: 'bullets', }, on: { - slideChange: function(swiper) { - $this.setRotation(swiper) - }, - progress: function(swiper) { - console.log(swiper) - $this.setRotation(swiper) + slideChange: function (swiper) { + $this.setRotation(swiper); + }, progress: function (swiper) { + $this.setRotation(swiper); + }, update: function (swiper) { + $this.setRotation(swiper); }, - update(swiper) { - console.log(swiper) - } } }) }, - setRotation: function(swiper) { - let activeIndex = swiper.activeIndex - let nextAllArray = swiper.slides.slice(activeIndex+1) - let prevAllArray = swiper.slides.slice(0,activeIndex).reverse() + setRotation: function (swiper) { + let activeIndex = Math.max(0, Math.min(Math.round(swiper.progress * swiper.slides.length), swiper.slides.length - 1)); + for (let i = 0; i < swiper.slides.length; i++) { + let position = i - (swiper.progress * (swiper.slides.length - 1)); + if (Math.round(position) === position) { + $(swiper.slides[i]).addClass('move-transitions'); + } else { + $(swiper.slides[i]).removeClass('move-transitions'); + } + this.slideSetPosition(swiper.slides[i], position); + } + }, + + slideSetPosition: function (slide, position) { + let tops = [0, 12, 41, 88, 120, 160, 200]; + let abspos = Math.abs(position); - this.setStyleCard(prevAllArray,"prev") - this.setStyleCard(nextAllArray,"next") + let angle = (position * 4); + let opacity = 1 - (abspos * 0.2); + let floorpos = Math.floor(abspos) + let ceilpos = Math.ceil(abspos); + let top = tops[floorpos]; + top += (abspos - floorpos) * (tops[ceilpos] - tops[floorpos]); + + $(slide).css({transform: 'rotate(' + angle + 'deg) translateY(' + top + 'px)', opacity: opacity}); }, - setStyleCard: function(array,direction) { - const $this = this - let angle = direction === "next" ? 4 : -4 - if(array.length > 0) { - array.forEach(function(el,index) { - $(el).css({ - 'transform':'rotate('+(angle)+'deg)', - 'top': $this.rules[index] ? $this.rules[index].top+'px' : 0, - 'opacity': $this.rules[index] ? $this.rules[index].opacity : 0 - }) - if(direction === "next") { - angle += 4 - } else { - angle -= 4 - } - }) - } + deg2rad: function (deg) { + return deg * (Math.PI / 180); }, - confirmTheMatch: function() { + confirmTheMatch: function () { let lastIndex = this.swiperTop.slides.length - 1 let index = this.swiperBottom.activeIndex this.quiz.screens.currentQuestionAnswers.push(index) this.swiperBottomEl.find(".swiper-slide").get(index).remove() - //this.swiperBottom.removeSlide(index) this.swiperBottom.update() - if(this.swiperTop.activeIndex === lastIndex) { + + if (this.swiperTop.activeIndex === lastIndex) { this.switchMatchValidateButton() - return false + return false; } this.swiperTop.slideNext() }, - switchMatchValidateButton: function() { - let btn = $(".active-screen").find(".confirmMatch"), - text = this.quiz.l10n.__('Validate answer'); - + switchMatchValidateButton: function () { + let btn = $(".active-screen").find(".confirmMatch"), text = this.quiz.l10n.__('Validate answer'); btn.removeClass("confirmMatch").addClass("action validate").find('.text').text(text) }, @@ -141,7 +136,7 @@ QuizMatch.prototype = { this.swiperBottomEl.html(this.sliderBottomHtml) this.initSwiperBottom() this.quiz.screens.toggleScreen(1, 'all'); - } + }, } export default QuizMatch; diff --git a/style/100-global.sass b/style/100-global.sass index 34b362f..2bb37a0 100644 --- a/style/100-global.sass +++ b/style/100-global.sass @@ -146,6 +146,7 @@ body .screen position: relative z-index: 1 + transition: opacity .3s &-image position: absolute diff --git a/style/104-animations.sass b/style/104-animations.sass index 82287f2..866478d 100644 --- a/style/104-animations.sass +++ b/style/104-animations.sass @@ -1,21 +1,20 @@ #instantReviewAnimation position: absolute - top: 50% - left: 50% - transform: translate(-50%,-50%) + top: 0 + left: 0 z-index: 2 width: 100% height: 100% +opacity(.4, background-color, $neutral-color) backdrop-filter: blur(4px) - // règle ie > 9 à tester - // filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3') opacity: 0 visibility: hidden transition: all 1s + svg position: relative z-index: 1 + &.active visibility: visible opacity: 1 diff --git a/style/107-question-match.sass b/style/107-question-match.sass index be84b8a..1c5d848 100644 --- a/style/107-question-match.sass +++ b/style/107-question-match.sass @@ -1,8 +1,12 @@ .question-match + $transition-time: .3s + .top-slider-container margin: 75px 0 40px - +flex-config(center, '','', flex-end) + transition: opacity $transition-time + +flex-config(center, '', '', flex-end) + .controls margin: 0 24px @@ -10,11 +14,12 @@ max-width: 596px overflow: hidden pointer-events: none + .swiper-slide min-height: 137px padding: 38px 24px 18px +radius(16px) - border: 1px solid rgb($texts-color,.24) + border: 1px solid rgb($texts-color, .24) text-align: center .bottom-slider @@ -23,21 +28,17 @@ height: 158px +radius(16px) padding: 15px - transition: all .3s + transition: background-color $transition-time, border $transition-time border: 2px solid transparent + transform-origin: 50% 50% + +opacity(.24, background-color, $neutral-color) + + &.move-transitions + transition: background-color $transition-time, border $transition-time, opacity $transition-time, transform $transition-time + &-active background-color: $neutral-color border: 2px solid $texts-color - transform: rotate(0) !important - top: 0 !important - opacity: 1 !important - &-prev, - &-next - +opacity(.24,background-color,$neutral-color) - - &:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) - +opacity(.24,background-color,$neutral-color) - .swiper-pagination-top text-align: center @@ -47,11 +48,13 @@ .swiper-pagination-bottom text-align: center margin-top: 10px + .swiper-pagination-bullet width: 4px height: 4px opacity: 1 - +opacity(.16,background-color,$texts-color) + +opacity(.16, background-color, $texts-color) + .swiper-pagination-bullet-active background-color: $texts-color @@ -59,8 +62,10 @@ .question-match .subtitle display: none + .top-slider-container margin: 24px 0 30px + .bottom-slider .swiper-slide width: 185px !important -- 2.39.5