From 57c139036b3319d1a1395aa7a6dc4a37a80bbf35 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 14 Sep 2023 15:06:12 +0200
Subject: [PATCH] wip #6182 @1:00 question drag and drop

---
 js/quiz.accessibility.js                     |  2 +-
 js/quiz.draganddrop.js                       | 38 ++++++++++++++++----
 views/screens/question_draganddrop.blade.php |  4 +--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/js/quiz.accessibility.js b/js/quiz.accessibility.js
index bf34596..852ac57 100644
--- a/js/quiz.accessibility.js
+++ b/js/quiz.accessibility.js
@@ -8,11 +8,11 @@ QuizAccessibility.prototype = {
     initShortcuts: function () {
         let $this = this;
         $(document).on('keyup', function (e) {
-
             let key = e.key.toLocaleUpperCase();
             if (key === ' ') {
                 key = 'Space';
             }
+
             $('[aria-keyshortcuts="' + key + '"]').each(function () {
                 if ($this.quiz.utils.isEnabled($(this))) {
                     console.log('click ', $(this));
diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 22c49d2..ad313e8 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -22,6 +22,7 @@ QuizDragAndDrop.prototype = {
     },
 
     start: function() {
+        const $this = this
         this.activeScreen = this.quiz.screens.getActiveScreen()
         this.list = this.activeScreen.find(".list")
         this.listHtml = this.list.html()
@@ -33,6 +34,25 @@ QuizDragAndDrop.prototype = {
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
 
+        $(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") {
+                zone = $this.zone1
+            }else {
+                zone = $this.zone2
+            }
+
+            target.addClass("isValidated").next().addClass("isNext")
+            $this.slapping(zone,target)
+
+            if($this.activeScreen.find(".list-item").length === 0) {
+                $this.toggleScreen(0,"none")
+            }
+        })
+
         this.retreiveAnswer()
         //let x = $(".list-item").offset().left
     },
@@ -96,12 +116,7 @@ QuizDragAndDrop.prototype = {
                             target.addClass("isValidated")
                         },
                         onComplete: function () {
-                            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"))
-                            $this.saveAnswer(zone,id)
-                            target.remove()
+                            $this.slapping(zone,target)
                         }
                     })
                     .to(".list .overlay", {
@@ -170,6 +185,17 @@ QuizDragAndDrop.prototype = {
         $(".zone-1,.zone-2").removeClass("active")
     },
 
+    slapping: function(zone,target) {
+        const $this = this
+
+        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"))
+        $this.saveAnswer(zone,id)
+        target.remove()
+    },
+
     toggleScreen: function(opacity,pointer) {
         gsap.to(".active-screen .screen", {
             opacity: opacity,
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 58e27ea..4c6aaee 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -20,7 +20,7 @@
     <div class="screen question-draganddrop">
         <div class="controls left">
             <p>{{$__('Move left')}}</p>
-            <button class="access"><span data-icon="arrow"></span></button>
+            <button class="access move-card" aria-keyshortcuts="ARROWLEFT"><span data-icon="arrow"></span></button>
         </div>
         <ul class="list">
             @foreach($question['answers'] as $key => $answer)
@@ -32,7 +32,7 @@
         </ul>
         <div class="controls right">
             <p>{{$__('Move right')}}</p>
-            <button class="access"><span data-icon="arrow"></span></button>
+            <button class="access move-card" aria-keyshortcuts="ARROWRIGHT"><span data-icon="arrow"></span></button>
         </div>
     </div>
     <div class="screen-image zone-2">
-- 
2.39.5