From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 18 Sep 2023 09:42:18 +0000 (+0200)
Subject: wip #6182 @1:20 question drag and drop
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0d0dd7997ec1a2e507a14f57256e01579ce84dc1;p=fluidbook-toolbox-quiz.git

wip #6182 @1:20 question drag and drop
---

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index ad93de2..b22e4f3 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -23,6 +23,7 @@ QuizDragAndDrop.prototype = {
 
     start: function() {
         const $this = this
+        this.isMobile = this.quiz.resize.isMobile()
         this.activeScreen = this.quiz.screens.getActiveScreen()
         this.list = this.activeScreen.find(".list")
         this.listHtml = this.list.html()
@@ -58,7 +59,7 @@ QuizDragAndDrop.prototype = {
 
     createDraggable: function($this) {
         Draggable.create($this.item, {
-            type: "x,y",
+            type: $this.isMobile ? "y" : "x,y",
             edgeResistance: 0.2,
             inertia: false,
             bounds: "#quiz",
@@ -71,7 +72,8 @@ QuizDragAndDrop.prototype = {
                 $this.offsetRightItemDragged = $(this.target).offset().left + $(this.target).outerWidth()
                 let direction = this.getDirection()
 
-                let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)
+                //let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)
+                let zone = $this.getZoneOverlap(this.target)
 
                 // fix bug scale !important from css
                 gsap.to(this.target, {
@@ -80,8 +82,10 @@ QuizDragAndDrop.prototype = {
                     immediateRender: true
                 })
 
-                //set rotation
-                $this.rotateItem(this,direction)
+                //set rotation on desktop
+                if(!$this.isMobile) {
+                    $this.rotateItem(this, direction)
+                }
 
                 // actions when enter in zone
                 $this.enterZone(zone)
@@ -93,7 +97,7 @@ QuizDragAndDrop.prototype = {
             },
             onDragEnd: function() {
                 //
-                let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)
+                let zone = $this.getZoneOverlap(this.target)
                 let slot = false
                 if(zone) {
                     slot = $this.getSlotInformations(zone)
@@ -104,7 +108,7 @@ QuizDragAndDrop.prototype = {
 
                 //
                 if(slot) {
-                    gsap.timeline().to(this.target, {
+                    let rules = {
                         width: slot.w,
                         height: slot.h,
                         x: slot.x,
@@ -112,8 +116,21 @@ QuizDragAndDrop.prototype = {
                         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)
@@ -141,7 +158,7 @@ QuizDragAndDrop.prototype = {
                 $this.leaveZone()
 
                 //
-                if(!$this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)) {
+                if(!$this.getZoneOverlap(this.target)) {
                     gsap.to(this.target, {
                         x: 0,
                         y: 0,
@@ -194,7 +211,10 @@ QuizDragAndDrop.prototype = {
         let text = target.text(),
             id = "answer-"+target.data("id")
 
-        $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<span>"+text+"</span>").attr('data-order',target.data("id"))
+        if(!this.isMobile) {
+            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<span>"+text+"</span>").attr('data-order',target.data("id"))
+        }
+
         $this.saveAnswer(zone,id)
         target.remove()
     },
@@ -206,15 +226,26 @@ QuizDragAndDrop.prototype = {
         })
     },
 
-    getZoneOverlap: function(offsetLeft, offsetRight) {
-        let zone = false,
-            zone1 = ".zone-1",
-            zone2 = ".zone-2"
+    getZoneOverlap: function(target) {
+        let zone = false
+        var rectSelection = target.getBoundingClientRect();
+
+        // Iterate over all LI elements.
+        [].forEach.call(document.querySelectorAll(".zone-content"), function(div) {
+            var rect = div.getBoundingClientRect();
+
+            if(rect.bottom > rectSelection.top
+                && rect.right > rectSelection.left
+                && rect.top < rectSelection.bottom
+                && rect.left < rectSelection.right) {
+                div.classList.add("active")
+            }else {
+                div.classList.remove("active")
+            }
+        });
 
-        if(offsetLeft - 19 < (this.zone1.offset().left + this.zone1.width())) {
-             zone = zone1
-        }else if(offsetRight + 19 > this.zone2.offset().left) {
-            zone = zone2
+        if($(".zone-content.active").length > 0) {
+            zone = "."+$(".zone-content.active").parent().data("zone")
         }
 
         return zone
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 6f840f3..130f00e 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -73,7 +73,7 @@
                             transform: scale(1) !important
                             transition: all .3s
                         &.complete
-                            opacity: 1 !important
+                            opacity: 1
 
                     &:not(.isDragging)
                         &:nth-child(2)
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index e712e91..7519730 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -1,5 +1,5 @@
 <div class="container-screen none question-draganddrop" data-screen="q-{{$position}}">
-    <div class="screen-image zone-1 notDrag">
+    <div class="screen-image zone-1 notDrag" data-zone="zone-1">
         <img src="{{$theme->draganddropArea1Image}}" />
         <img class="mobile" src="{{$theme->draganddropArea1ImageMobile}}"/>
         <div class="zone-content">
@@ -36,7 +36,7 @@
             <button class="access move-card" aria-keyshortcuts="ARROWRIGHT"><span data-icon="arrow"></span></button>
         </div>
     </div>
-    <div class="screen-image zone-2 notDrag">
+    <div class="screen-image zone-2 notDrag" data-zone="zone-2">
         <img src="{{$theme->draganddropArea2Image}}" />
         <img class="mobile" src="{{$theme->draganddropArea2ImageMobile}}"/>
         <div class="zone-content">