From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 19 Sep 2023 18:00:51 +0000 (+0200)
Subject: wip #6295 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=45950d9035facd622eab7dfed54911319024728f;p=fluidbook-toolbox-quiz.git

wip #6295 @1
---

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index c581f16..52d093e 100644
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -104,8 +104,8 @@ QuizAnimations.prototype = {
         }, "<+=.3")
     },
 
-    setAnimItemDragAndDrop: function(tl) {
-        $(".active-screen .list-item").removeClass("complete")
+    animateDragAndDropCarrousel: function(tl) {
+        $(".active-screen .list-item").removeClass("complete");
         tl.to(".active-screen .list-item", {
             opacity: function(index) {
                 let opacity = 1
diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index da91354..30fd113 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -37,7 +37,6 @@ QuizDragAndDrop.prototype = {
 
         $(document).on("click", ".move-card", function () {
             let move = $(this).attr("aria-keyshortcuts"),
-                target = $this.activeScreen.find(".list-item:first-child"),
                 zone = false;
 
             if (move === "ARROWLEFT") {
@@ -46,15 +45,69 @@ QuizDragAndDrop.prototype = {
                 zone = $this.zone2
             }
 
-            target.addClass("isValidated").next().addClass("isNext")
-            $this.slapping(zone, target)
+            $this.sendCurrentAnswerToArea(zone);
+        });
+
+        this.retreiveAnswer()
+    },
 
-            if ($this.activeScreen.find(".list-item").length === 0) {
-                $this.toggleScreen(0, "none")
+    sendCurrentAnswerToArea: function (area) {
+        const $this = this;
+        const current = this.activeScreen.find(".list-item:first-child");
+        $(current).addClass('isDragging').removeClass('isNext').css('transform', 'scale(1)');
+
+        let slot = $this.getSlotInformations(area)
+        let heightTarget = $(current).height()
+
+        //
+        if (slot) {
+            let rules = {
+                width: slot.w,
+                height: slot.h,
+                x: slot.x,
+                y: slot.y,
+                fontSize: "14px",
+                padding: "7px 8px",
+                borderRadius: "8px",
+                position: 'absolute',
+            }
+            if (this.quiz.resize.isMobile()) {
+                rules = {
+                    scale: 0.8,
+                    duration: .3,
+                    autoAlpha: 0,
+                }
             }
-        })
 
-        this.retreiveAnswer()
+            gsap.timeline()
+                .to(current, {
+                    ...rules,
+                    onStart: function () {
+                        current.addClass("isValidated")
+                        gsap.set(current.next(), {opacity: 1})
+                    },
+                    onComplete: function () {
+                        $this.slapping(area, current)
+                    }
+                })
+                .to(".list .overlay", {
+                    y: -heightTarget,
+                    opacity: 0,
+                    onStart: function () {
+                        if(current.next('.list-item').length===0){
+                            console.log(':)');
+                            $this.toggleScreen(0, "none");
+                        }else {
+                            current.next('.list-item').addClass("isNext")
+                        }
+                    }
+                }, "<")
+                .to(".list .overlay", {
+                    y: 0,
+                    opacity: 1,
+                    duration: 0
+                }, "+=0.3")
+        }
     },
 
     createDraggable: function ($this) {
@@ -98,56 +151,8 @@ QuizDragAndDrop.prototype = {
             onDragEnd: function () {
                 //
                 let zone = $this.getZoneOverlap(this.target)
-                let slot = false
                 if (zone) {
-                    slot = $this.getSlotInformations(zone)
-                }
-
-                let target = $(this.target),
-                    heightTarget = $(this.target).height()
-
-                //
-                if (slot) {
-                    let rules = {
-                        width: slot.w,
-                        height: slot.h,
-                        x: slot.x,
-                        y: slot.y,
-                        fontSize: "14px",
-                        padding: "7px 8px",
-                        borderRadius: "8px",
-                    }
-                    if ($this.isMobile) {
-                        rules = {
-                            scale: 0.8,
-                            duration: .3,
-                            autoAlpha: 0,
-                        }
-                    }
-
-                    gsap.timeline()
-                        .to(this.target, {
-                            ...rules,
-                            onStart: function () {
-                                target.addClass("isValidated")
-                                gsap.set(target.next(), {opacity: 1})
-                            },
-                            onComplete: function () {
-                                $this.slapping(zone, target)
-                            }
-                        })
-                        .to(".list .overlay", {
-                            y: -heightTarget,
-                            opacity: 0,
-                            onStart: function () {
-                                $(".list-item.isValidated").next().addClass("isNext")
-                            }
-                        }, "<")
-                        .to(".list .overlay", {
-                            y: 0,
-                            opacity: 1,
-                            duration: 0
-                        }, "+=0.3")
+                    $this.sendCurrentAnswerToArea(zone);
                 }
             },
             onRelease: function () {
@@ -165,11 +170,6 @@ QuizDragAndDrop.prototype = {
                     })
                 }
 
-                //
-                if ($this.activeScreen.find(".list-item:not(.isDragging)").length === 0) {
-                    $this.toggleScreen(0, "none")
-                }
-
                 $(this.target).removeClass("isDragging")
 
                 // reset list rotation
@@ -213,7 +213,7 @@ QuizDragAndDrop.prototype = {
         let id = "answer-" + target.data("id");
 
         if (!this.isMobile) {
-            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<h4>" + title + "</h4><p>"+text+"</p>").attr('data-order', target.data("id"))
+            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<h4>" + title + "</h4><p>" + text + "</p>").attr('data-order', target.data("id"))
         }
 
         $this.saveAnswer(zone, id)
@@ -276,7 +276,7 @@ QuizDragAndDrop.prototype = {
         this.item = this.quiz.screens.getActiveScreen().find(".list-item")
         this.createDraggable(this)
         let tl = gsap.timeline()
-        this.quiz.animations.setAnimItemDragAndDrop(tl)
+        this.quiz.animations.animateDragAndDropCarrousel(tl)
     },
 
     saveAnswer: function (zone, id) {
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 7765e98..8d1d571 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -164,7 +164,7 @@ QuizScreens.prototype = {
 
             //
             if($this.quiz.question.isDragAndDrop()) {
-                $this.quiz.animations.setAnimItemDragAndDrop($this.timeline)
+                $this.quiz.animations.animateDragAndDropCarrousel($this.timeline)
             }else {
                 $this.quiz.animations.setAnimItemMultiple($this.timeline)
             }