From 3f96d7839759c8f2fd0a7cb056a337ba0a273568 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 11 Jan 2024 12:01:48 +0100
Subject: [PATCH] wait #6590 @6:10

---
 js/quiz.draganddrop.js                        | 42 ++++++++++++++---
 style/001-global-variables.sass               |  2 +
 style/106-question-draganddrop.sass           | 46 +++++++++++++++----
 .../question_draganddrop_area.blade.php       |  8 ----
 4 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index dbe9d0b..ddf23f5 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -43,6 +43,7 @@ QuizDragAndDrop.prototype = {
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
         this.initQuestion();
+        this.value_ = 0
 
         let height_ = 400 - $(".card-holder").parent().find(".text").height()
         document.documentElement.style.setProperty('--height-zone', height_+'px');
@@ -67,8 +68,8 @@ QuizDragAndDrop.prototype = {
         //
         if (slot) {
             let rules = {
-                width: slot.w,
-                height: slot.h,
+                width: "60%",
+                height: "60%",
                 x: slot.x,
                 y: slot.y,
                 fontSize: "12px",
@@ -138,6 +139,9 @@ QuizDragAndDrop.prototype = {
                     scale: 1, duration: 0, immediateRender: true
                 })
 
+                //
+                $this.setOpacityZone(this.target,direction)
+
                 //set rotation on desktop
                 if (!$this.quiz.resize.isMobile()) {
                     $this.rotateItem(this, direction)
@@ -162,6 +166,10 @@ QuizDragAndDrop.prototype = {
                 //
                 $(".zone-1,.zone-2").addClass("notDrag")
 
+                //
+                document.documentElement.style.setProperty('--opacity-zone-1', '0');
+                document.documentElement.style.setProperty('--opacity-zone-2', '0');
+
                 //
                 $this.leaveZone()
 
@@ -247,6 +255,28 @@ QuizDragAndDrop.prototype = {
         return zone
     },
 
+    setOpacityZone: function (target,direction) {
+        let $this = this
+        var rectSelection = target.getBoundingClientRect();
+        var listRect = $this.list.get(0).getBoundingClientRect()
+        let value = 0;
+        let zone = '';
+
+        if (direction.includes("left") || direction.includes("up")) {
+            var rect = document.querySelector(".zone-1 .zone-content").getBoundingClientRect()
+            value = direction === "up" ? 100 - ( (rectSelection.top - rect.bottom) / (listRect.top - rect.bottom) ) * 100 :
+                100 - ( (rectSelection.left - rect.right) / (listRect.left - rect.right) ) * 100
+            zone = "--opacity-zone-1"
+        } else {
+            var rect = document.querySelector(".zone-2 .zone-content").getBoundingClientRect()
+            value = direction === "down" ? 100 - ( (rectSelection.bottom - rect.top) / (listRect.bottom - rect.top) ) * 100 :
+                100 - ( (rectSelection.right - rect.left) / (listRect.right - rect.left) ) * 100
+            zone = "--opacity-zone-2"
+        }
+        value = Math.max(0, Math.min(value, 100)) / 100;
+        document.documentElement.style.setProperty(zone, value);
+    },
+
     measureSizes: function () {
         this.ww = $(window).width();
         this.hh = $(window).height();
@@ -257,11 +287,11 @@ QuizDragAndDrop.prototype = {
 
     getSlotInformations: function (zone) {
         let a = this.getAreaElement(zone);
-        let freeSlot = $(a).find('.slot:not(.active)')
-        if (freeSlot.index() > 5) {
+        let freeSlot = $(a).find('.text')
+        /*if (freeSlot.index() > 5) {
             freeSlot = $(a).find('.slot:nth-child(6)')
-        }
-        freeSlot = freeSlot.eq(0);
+        }*/
+        //freeSlot = freeSlot.eq(0);
         let freeSlotRect = $(freeSlot).get(0).getBoundingClientRect();
         let listRect = this.list.get(0).getBoundingClientRect();
         let scale = this.quiz.resize.scale
diff --git a/style/001-global-variables.sass b/style/001-global-variables.sass
index 861b960..41f07ae 100644
--- a/style/001-global-variables.sass
+++ b/style/001-global-variables.sass
@@ -1,2 +1,4 @@
 \:root
     --height-zone: 0
+    --opacity-zone-1: 0
+    --opacity-zone-2: 0
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index adc4016..d8f7b72 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -1,3 +1,5 @@
+@use 'sass:color'
+
 [data-type="draganddrop"]
     .fill-area
         background-color: $standard-fill-area
@@ -29,13 +31,20 @@
 
         &.zone-1
             .zone-content
-                left: 24px
+                &:before
+                    opacity: var(--opacity-zone-1)
+                    .m &
+                        left: 50%
+                        top: 0
+                .text
+                    padding-left: 24px
+
+
 
         &.zone-2
             text-align: right
             left: initial
             right: 0
-
             img
                 position: absolute
                 right: 0
@@ -44,32 +53,49 @@
                     height: 252px
 
             .zone-content
-                right: 24px
+                right: 0
+                &:before
+                    transform: translate(0,-50%)
+                    opacity: var(--opacity-zone-2)
+                    .m &
+                        transform: translate(-50%,-50%)
+                        left: 50%
+                        top: 100%
+
+                .text
+                    padding-right: 24px
 
 
         .zone-content
             position: absolute
-            bottom: 106px
             width: 180px
-            height: 400px
-            +flex-config(space-between,false,column,false)
+            height: 100%
+            +flex-config(center,false,column,false)
+
+            &:before
+                content: ""
+                left: 0
+                width: 200%
+                height: 200%
+                position: absolute
+                top: 50%
+                background: radial-gradient($accent-color, transparent, transparent)
+                transform: translate(-50%,-50%)
+                transition: opacity .3s
 
             &.active
                 .card-holder
                     +opacity(.2, background-color, $texts-color)
 
-
             .card-holder
                 overflow: hidden
                 height: var(--height-zone)
 
-
                 .m &
                     display: none
 
             .text
-                margin-bottom: 21px
-
+                position: relative
                 h2
                     font-size: 20px
                     margin-bottom: 8px
diff --git a/views/screens/question_draganddrop_area.blade.php b/views/screens/question_draganddrop_area.blade.php
index a1e332e..8e5a37e 100644
--- a/views/screens/question_draganddrop_area.blade.php
+++ b/views/screens/question_draganddrop_area.blade.php
@@ -4,13 +4,5 @@
             <h2>{{ $question['area_'.$area]['title'] }}</h2>
             <p>{{ $question['area_'.$area]['text'] }}</p>
         </div>
-        <div class="card-holder">
-            @foreach($question['answers'] as $key => $answer)
-                <div class="slot">
-                    <h4></h4>
-                    <p></p>
-                </div>
-            @endforeach
-        </div>
     </div>
 </div>
-- 
2.39.5