]> _ Git - fluidbook-toolbox-quiz.git/commitdiff
wip #6182 question match
authorsoufiane <soufiane@cubedesigners.com>
Thu, 21 Sep 2023 09:32:18 +0000 (11:32 +0200)
committersoufiane <soufiane@cubedesigners.com>
Thu, 21 Sep 2023 09:32:18 +0000 (11:32 +0200)
js/quiz.match.js
style/004-mixins.sass
style/103-question-multiple.sass
style/106-question-draganddrop.sass
style/107-question-match.sass

index 9d1dafdd9310bc28bf07b4468c4a96ab6b33f064..bd1327a7e2a74956233c7985bf63e7f585925ce5 100644 (file)
@@ -18,9 +18,9 @@ QuizMatch.prototype = {
             let move = $(this).attr("aria-keyshortcuts")
 
             if(move === "ARROWLEFT") {
-                swiperTop.slidePrev()
+                swiperBottom.slidePrev()
             }else {
-                swiperTop.slideNext()
+                swiperBottom.slideNext()
             }
         })
 
@@ -46,25 +46,41 @@ QuizMatch.prototype = {
                 el: '.swiper-pagination-bottom',
                 type: 'bullets',
             },
+            on: {
+                afterInit: function(swiper) {
+                    //$this.setClass()
+                },
+                slideChange: function(swiper) {
+                    console.log(swiper)
+                    const slides = swiper.slides
+                    let activeIndex = swiper.activeIndex
+                    let nextAllArray = swiper.slides.slice(activeIndex)
+                    let prevAllArray = swiper.slides.slice(0,activeIndex)
+
+                    if(nextAllArray.length > 0) {
+                        nextAllArray.forEach(function() {
+
+                        })
+                    }
+
+                    /*$(".bottom-slider .swiper-slide").removeClass("prevSibling nextSibling")
+                    if($(".swiper-slide-prev").length > 0) {
+                        const firstPrev = $(".swiper-slide-prev")
+                        firstPrev.prevAll().addClass("prevSibling")
+                    }
+                    if($(".swiper-slide-next").length > 0) {
+                        const firstNext = $(".swiper-slide-next").next()
+                        firstNext.nextAll().addClass("nextSibling")
+                    }*/
+                }
+            }
         })
         swiperBottom.on('sliderMove', function (swiper,ev) {
             const direction = swiper.swipeDirection
             let currentSlide = $(swiper.slides[swiper.activeIndex])
-            console.log(currentSlide)
-
-            console.log(swiper,ev)
             //$this.applyRotationToSiblings()
         });
     },
-
-    applyRotationToSiblings: function() {
-        let prevEls = $(".swiper-container.bottom-slider .swiper-slide.swiper-slide-active").prevAll();
-        let rotate = 0;
-        prevEls.each(function (){
-            rotate -= 20
-            $(this).css("transform","rotate("+rotate+"deg)")
-        })
-    }
 }
 
 export default QuizMatch;
index bd8e37f9c4a17c68f93696a25683f1aa595152bf..756b3003f14627b83488675f64477317590923ee 100644 (file)
@@ -8,7 +8,7 @@
         @content
 
 
-@mixin breakpoint($breakpoint, $direction: min)
+//@mixin breakpoint($breakpoint, $direction: min)
     $breakpoint-values: map-get($breakpoints, $breakpoint)
     $breakpoint: map-get($breakpoint-values, $direction)
     @media (#{$direction}-width: $breakpoint)
@@ -42,7 +42,7 @@
 
 @mixin padding-container()
     padding: 16px
-    +breakpoint(md)
+    //+breakpoint(md)
         padding: 24px
 
 @mixin radius($size)
index e42c80f271917258cd9479a42f0f6bd2e042511d..4073dc3673d7995acd7dde6fd3246ecae452eb20 100644 (file)
@@ -5,7 +5,7 @@
     .list
         display: grid
         grid-gap: 16px
-        +breakpoint(md)
+        //+breakpoint(md)
             grid-template-columns: repeat(2, 1fr)
         &-item
             opacity: 0
index 0dcdb15d021edb478fc0539e61d6dedd540add32..548765fcafbfd3bdb65c3017f48962def237d9d0 100644 (file)
                             &.complete
                                 opacity: .16 !important
 
-                        &:not(:nth-child(-n+4))
+                        //&:not(:nth-child(-n+4))
                         // on cache les items à partir du 5ème
                                                    opacity: 0 !important
                                                    visibility: hidden
index ddeeab0f098e45c427d08f43c160540a377c913e..d2b5a6ccbdb60c657f7e5c0e045e3478b5b5a800 100644 (file)
@@ -33,6 +33,7 @@
             &-prev,
             &-next
                 +opacity(.24,background-color,$neutral-color)
+                top: 13px
 
             &:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next)
                 +opacity(.24,background-color,$neutral-color)