From: soufiane <soufiane@cubedesigners.com>
Date: Wed, 6 Sep 2023 16:57:53 +0000 (+0200)
Subject: wip #6182 @4:00 question drag and drop
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3eda217f40f95350c4aca7a07e5e17bf7bb71e6f;p=fluidbook-toolbox-quiz.git

wip #6182 @4:00 question drag and drop
---

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index c8c367e..6ed20a9 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -68,18 +68,17 @@ QuizScreens.prototype = {
 
         let zone1 = $(".zone-1 .zone-content")
         let zone2 = $(".zone-2 .zone-content")
+        let xBase = $(".list").offset().left
         let widthList = $(".list-item").width()
 
+
+        console.log(xBase)
+
         Draggable.create(".list-item", {
             type: "x,y",
             edgeResistance: 0.2,
-            inertia: true,
-            bounds: ".list",
-            liveSnap: {
-                //quiz.js:1328 393 333.5
-                points: {x: [393], y: [333.5]},
-                radius: 1
-            },
+            inertia: false,
+            bounds: "#quiz",
             onMove: function() {
                 let left = $(this.target).offset().left,
                     right = $(this.target).offset().left + $(this.target).outerWidth(),
@@ -117,6 +116,54 @@ QuizScreens.prototype = {
 
                 //let listHalf = $(".list-item").width
             },
+            onDragEnd: function() {
+                //
+                let xFinal = ($(".zone-2 .slot:not(.active)").offset().left - $(".list").offset().left)
+                let yFinal = ($(".zone-2 .slot:not(.active)").offset().top - $(".list").offset().top)
+                let width = $(".zone-2 .slot").width()
+                let height = $(".zone-2 .slot").height()
+                let heightSubject = $(this.target).height()
+
+
+                //
+                let $_th = this
+                gsap.timeline({
+                    onComplete: function() {
+                        gsap.to(".list .overlay", {
+                            y: 0,
+                            opacity: 1,
+                            duration: 0
+                        })
+                    }
+                }).to(this.target, {
+                    width: width,
+                    height: height,
+                    x: xFinal,
+                    y: yFinal,
+                    fontSize: "14px",
+                    padding: "7px 8px",
+                    borderRadius: "8px",
+                    onStart: function() {
+                        $($_th.target).addClass("onStart")
+                    },
+                    onComplete: function(element) {
+                        let html = $($_th.target).html()
+                        $(".zone-2 .slot:not(.active)").eq(0).addClass("active").html(html)
+                        $($_th.target).remove()
+                    }
+                })
+                .to(".list .overlay", {
+                    y: -heightSubject,
+                    opacity: 0,
+                    onStart: function() {
+                        $($_th.target).next().addClass("isNext")
+                    }
+                }, "<")
+
+                //
+                //$(".zone-2 .slot:not(.active)").eq(0).addClass("active")
+
+            },
             onRelease: function() {
                 //
                 $(".zone-1,.zone-2").removeClass("active")
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 8db550f..edc5264 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -36,7 +36,13 @@
             width: 100%
             height: 51px
             //border: 1px solid rgba($texts-color,.24)
+            transition: all .3s
             +radius(8px)
+            padding: 7px 8px
+            font-size: 14px
+            margin-bottom: 8px
+            &.active
+                border: 1px solid rgba($texts-color,.24)
 
     .screen
         +flex-config(center, false, false, center)
@@ -52,38 +58,57 @@
                 width: 100%
                 height: 100%
                 +radius(16px)
-                &:nth-child(1)
-                    background-color: $neutral-color
-                    z-index: 4
-                    border: 2px solid $texts-color
-                    padding: 20px
-                &:nth-child(2)
-                    opacity: .64 !important
-                    +opacity(.8,background-color,$neutral-color)
-                    transform: scale(.9)
-                    z-index: 3
-                    top: 32px
-                &:nth-child(3)
-                    opacity: .4 !important
-                    +opacity(.8,background-color,$neutral-color)
-                    transform: scale(.81)
-                    z-index: 2
-                    top: 61px
-                &:nth-child(4)
-                    opacity: .16 !important
-                    +opacity(.8,background-color,$neutral-color)
-                    transform: scale(0.72)
-                    z-index: 1
-                    top: 91px
-                &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
-                    opacity: 0 !important
-                    visibility: hidden
+                padding: 20px
+                border: 2px solid transparent
+                &:not(.overlay)
+                    transition: top .3s
+                    &:nth-child(1)
+                        background-color: $neutral-color
+                        z-index: 4
+                        border: 2px solid $texts-color
+                        top: 0
+                    &:nth-child(2)
+                        opacity: .64 !important
+                        +opacity(.8,background-color,$neutral-color)
+                        transform: scale(.92) !important
+                        z-index: 3
+                        top: 30px
+                    &:nth-child(3)
+                        opacity: .4 !important
+                        +opacity(.8,background-color,$neutral-color)
+                        transform: scale(.83) !important
+                        z-index: 2
+                        top: 60px
+                    &:nth-child(4)
+                        opacity: .16 !important
+                        +opacity(.8,background-color,$neutral-color)
+                        transform: scale(0.75) !important
+                        z-index: 1
+                        top: 87px
+                    &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
+                        opacity: 0 !important
+                        visibility: hidden
+                    &.onStart
+                        font-size: 14px
+                        border: 1px solid rgba($texts-color,.24)
+                        transition: border .3s, font-size .3s
+                    &:not(:nth-child(1))
+                        clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%)
+                        &.isNext
+                            clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%)
+                            transition: all .3s
 
                 &[data-direction=right]
                     transform: rotate(25deg)
                 &[data-direction=left]
                     transform: rotate(-25deg)
 
+        .overlay
+            @extend .list-item
+            +opacity(.16,background-color,$neutral-color)
+            border: 1px dashed rgba($texts-color,.24)
+            z-index: 3
+
     .controls
         width: 124px
         padding: 12px 0
diff --git a/views/index.blade.php b/views/index.blade.php
index b86c6c7..a25a03d 100644
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -27,7 +27,6 @@
         <div id="instantReviewAnimation"></div>
     </div>
 </div>
-<div id="vertical-1" style="position: absolute; height: 100vh; width: 1px; top: 0; left: 1356px; z-index: 999; background: #FFFFFF;"></div>
 <script src="js/quiz.js"></script>
 <script>
     function changeViewportSize () {
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index a960197..70b852a 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -26,6 +26,7 @@
                     {{$answer['answer']}}
                 </li>
             @endforeach
+            <li class="overlay"></li>
         </ul>
         <div class="controls right">
             <p>Move right</p>