wip #6305 @4

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 7dde747a9b7654801da018b6edb23d94e27370bc..da7ba19040e4853e67f2d7f8e916c607d63bf1c1 100644 (file)
--- 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 3db6a33c5367a585bc6eab6f791fdacefa2256bd..956ab56a0e48aecee409b69da72aad0eab6c9cc1 100644 (file)
--- 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 34b362f4a7924aeb7a6278be283feadce1a3c454..2bb37a07f8fe090abf884e36d19e4ad839b4a4c5 100644 (file)
--- 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 82287f248e57ca755e252d8320e4bf091730cc51..866478d8ea2b397bcab2e2a7f25fa37d3525f9c2 100644 (file)
--- 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 be84b8ab1098ebe5cd6577a9fb96cd834f390c1a..1c5d84833ccfec15877591f74311393048eac7f0 100644 (file)
--- 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