From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 26 Sep 2023 16:06:03 +0000 (+0200)
Subject: wip #6182 @2:00 correctifs html, animations, css
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=84a0a26a2f9185c737e75692e9698086754eb648;p=fluidbook-toolbox-quiz.git

wip #6182 @2:00 correctifs html, animations, css
---

84a0a26a2f9185c737e75692e9698086754eb648
diff --cc js/quiz.match.js
index 0d7271c,3a7526f..33f4fa1
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@@ -1,6 -1,5 +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';
  
@@@ -51,99 -49,62 +50,92 @@@ QuizMatch.prototype = 
          })
  
          this.initSwiperBottom()
+ 
      },
  
-     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)
-                 }
              }
          })
++
 +        this.animateContent()
 +    },
 +
 +    animateContent: function() {
 +        gsap.timeline({delay: .5}).to(".active-screen .top-slider-container", {
 +            opacity: 1
 +        })
-         .to(".active-screen .bottom-slider", {
-             opacity: 1
-         })
-         .to(".active-screen .bottom-slider .swiper-slide", {
-             opacity: function(index) {
-                 let opacity = 1
-                 if(index === 1) {
-                     opacity = 0.48
-                 }else if(index === 2) {
-                     opacity = 0.24
-                 }else if(index === 3) {
-                     opacity = 0
++            .to(".active-screen .bottom-slider", {
++                opacity: 1
++            })
++            .to(".active-screen .bottom-slider .swiper-slide", {
++                opacity: function(index) {
++                    let opacity = 1
++                    if(index === 1) {
++                        opacity = 0.48
++                    }else if(index === 2) {
++                        opacity = 0.24
++                    }else if(index === 3) {
++                        opacity = 0
++                    }
++                    return opacity
++                },
++                ease: "power1.inOut",
++                stagger: .15,
++                onComplete: function() {
++                    $(this.target).removeClass("not-visible")
 +                }
-                 return opacity
-             },
-             ease: "power1.inOut",
-             stagger: .15,
-             onComplete: function() {
-                 $(this.target).removeClass("not-visible")
++            })
+     },
+ 
+     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);
+         }
      },
  
-     setRotation: function(swiper) {
-         let activeIndex = swiper.activeIndex
-         let nextAllArray = swiper.slides.slice(activeIndex+1)
-         let prevAllArray = swiper.slides.slice(0,activeIndex).reverse()
+     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]);
  
-     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,
-                 })
-                 if(!$(el).hasClass("not-visible")) {
-                     $(el).css({
-                         'opacity': $this.rules[index] ? $this.rules[index].opacity : 0
-                     })
-                 }
-                 if(direction === "next") {
-                     angle += 4
-                 } else {
-                     angle -= 4
-                 }
-             })
-         }
+         $(slide).css({transform: 'rotate(' + angle + 'deg) translateY(' + top + 'px)', opacity: opacity});
      },
  
-     confirmTheMatch: function() {
+     confirmTheMatch: function () {
          let lastIndex = this.swiperTop.slides.length - 1
          let index = this.swiperBottom.activeIndex
          this.quiz.screens.currentQuestionAnswers.push(index)
diff --cc style/105-outro.sass
index 55a8431,55a8431..f51f0fc
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@@ -29,7 -29,7 +29,7 @@@
          +flex-config(false,false,false,center)
          position: relative
          top: var(--space-21-66)
--        left: var(--space-21-66)
++        margin-left: 75px
  
      &-counter
          height: 0
@@@ -146,7 -146,7 +146,7 @@@
          transform: translateY(calc(100% + 24px))
          .restart-sentence
              margin-bottom: 14px
--        .controls
++        .score-controls
              +flex-config(space-between)
  
      .restart-sentence,
@@@ -214,7 -214,7 +214,7 @@@
          &-content-wrapper
              +flex-config(center,false,column,center)
              top: 74px
--            left: 0
++            margin-left: 0
              text-align: center
          &-counter
              margin: 0 0 24px
diff --cc style/107-question-match.sass
index 455af03,1c5d848..c8e0d18
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@@ -1,9 -1,12 +1,14 @@@
  .question-match
  
+     $transition-time: .3s
+ 
      .top-slider-container
          margin: 75px 0 40px
+         transition: opacity $transition-time
+         +flex-config(center, '', '', flex-end)
+ 
 +        opacity: 0
 +        +flex-config(center, '','', flex-end)
          .controls
              margin: 0 24px
  
@@@ -25,9 -28,14 +31,15 @@@
              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
+ 
 +            opacity: 0
              &-active
                  background-color: $neutral-color
                  border: 2px solid $texts-color
diff --cc views/screens/outro.blade.php
index a6dccb0,a6dccb0..974b769
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@@ -34,7 -34,7 +34,7 @@@
                  <div class="score-text">
                      <h1>{{$__('Congratulation!')}}</h1>
                      <div class="subtitle">
--                        <p class="word">{!! $__('You have completed the quiz with :score correct answers out of :total',['score'=>'<span id="score-text"></span>','total'=>'<span id="maxScore-text"></span>']) !!}</p>
++                        <p class="word">{!! $__('You have completed the quiz with :score correct answers out of :total',['score'=>"<span id='score-text'></span>",'total'=>'<span id="maxScore-text"></span>']) !!}</p>
                      </div>
                      @if($data->restart_button)
                          <div class="restart-sentence-mobile">{{$__('Want to improve your score?')}}</div>
@@@ -49,7 -49,7 +49,7 @@@
                  @if($data->restart_button)
                      <div class="restart-sentence">{{$__('Want to improve your score?')}}</div>
                  @endif
--                <div class="controls">
++                <div class="score-controls">
                      @if($data->restart_button)
                          <a class="btn secondary restart" aria-keyshortcuts="r">
                              {{$__('Restart')}}
@@@ -58,10 -58,10 +58,10 @@@
                      @endif
                      <a class="btn secondary toggle-answers-review">
                          <span data-icon=""></span>
--                        {{$__('Review answers')}}
++                        <span>{{$__('Review answers')}}</span>
                      </a>
                      <a class="btn primary action">
--                        {{$__('Leave')}}
++                        <span>{{$__('Leave')}}</span>
                          <span class="access space">{{$__('space')}}</span>
                      </a>
                  </div>
@@@ -69,8 -69,8 +69,9 @@@
          </div>
          <div class="score-answers-review_container">
              <div class="score-answers-review">
--                <h2>{{$__('Answers review')}}<span class="toggle-answers-review" id="close-answers"
--                                                   data-icon="wrong"></span></h2>
++                <h2>{{$__('Answers review')}}
++                    <span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span>
++                </h2>
                  <p class="subtitle">{{$__('Review your answers before you go')}}</p>
                  <ul id="answers-list">
                      @verbatim