wip #6182 @5:00 question drag and drop

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
new file mode 100644 (file)
index 0000000..ddcde83
--- /dev/null
+++ b/js/quiz.draganddrop.js
@@ -0,0 +1,157 @@
+import gsap from "gsap";
+import InertiaPlugin from "gsap/InertiaPlugin.js";
+import Draggable from "gsap/Draggable.js";
+
+function QuizDragAndDrop(quiz) {
+    this.quiz = quiz;
+}
+
+QuizDragAndDrop.prototype = {
+
+    start: function() {
+        const $this = this;
+
+        gsap.registerPlugin(InertiaPlugin);
+        gsap.registerPlugin(Draggable);
+
+        //let x = $(".list-item").offset().left
+
+        this.activeScreen = $(".active-screen")
+
+        this.zone1 = this.activeScreen.find(".zone-1 .zone-content")
+        this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
+        this.list = this.activeScreen.find(".list")
+        this.item = this.activeScreen.find(".list-item")
+        this.offsetLeftItemDragged = 0
+        this.offsetRightItemDragged = 0
+
+        Draggable.create(this.item, {
+            type: "x,y",
+            edgeResistance: 0.2,
+            inertia: false,
+            bounds: "#quiz",
+            onDragParams: [{}],
+            onDrag: function() {
+                $this.offsetLeftItemDragged = $(this.target).offset().left
+                $this.offsetRightItemDragged = $(this.target).offset().left + $(this.target).outerWidth()
+                let direction = this.getDirection()
+
+                let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)
+
+                //set rotation
+                $this.rotateItem(this,direction)
+
+                // actions when enter in zone
+                $this.enterZone(zone)
+
+                // actions when leave zone
+                if(!zone) {
+                    $this.leaveZone()
+                }
+            },
+            onDragEnd: function() {
+                //
+                let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged),
+                    slot = $this.getSlotInformations(zone);
+
+                let heightSubject = $(this.target).height()
+
+                //
+                gsap.timeline().to(this.target, {
+                    width: slot.w,
+                    height: slot.h,
+                    x: slot.x,
+                    y: slot.y,
+                    fontSize: "14px",
+                    padding: "7px 8px",
+                    borderRadius: "8px",
+                    onStart: function() {
+                        $($this.target).addClass("onStart")
+                    },
+                    onComplete: function(element) {
+                        let html = $($this.target).html()
+                        $(zone).find(".slot:not(.active)").eq(0).addClass("active").html(html)
+                        $($this.target).remove()
+                    }
+                })
+                .to(".list .overlay", {
+                    y: -heightSubject,
+                    opacity: 0,
+                    onStart: function() {
+                        $($this.target).next().addClass("isNext")
+                    }
+                }, "<")
+                .to(".list .overlay", {
+                    y: 0,
+                    opacity: 1,
+                    duration: 0
+                })
+
+                //
+                //$(".zone-2 .slot:not(.active)").eq(0).addClass("active")
+
+            },
+            onRelease: function() {
+                //
+                $this.leaveZone()
+
+                // reset list rotation
+                gsap.to(this.target, {
+                    rotation: 0
+                })
+            }
+        });
+
+    },
+
+    rotateItem: function($this, direction) {
+        let rotation = 0;
+        if(direction.includes("right")) {
+            rotation = 5
+        } else {
+            rotation = -5
+        }
+
+        if($this.endX === 0) {
+            rotation = 0
+        }
+
+        gsap.to($this.target, {
+            rotation: rotation
+        })
+    },
+
+    enterZone: function(zone) {
+        $(zone).addClass("active")
+    },
+
+    leaveZone: function() {
+        $(".zone-1,.zone-2").removeClass("active")
+    },
+
+    getZoneOverlap: function(offsetLeft, offsetRight) {
+        let zone = false,
+            zone1 = ".zone-1",
+            zone2 = ".zone-2"
+
+        if(offsetLeft - 19 < (this.zone1.offset().left + this.zone1.width())) {
+             zone = zone1
+        }else if(offsetRight + 19 > this.zone2.offset().left) {
+            zone = zone2
+        }
+
+        return zone
+    },
+
+    getSlotInformations: function(zone) {
+        let x = ($(zone).find(".slot:not(.active)").offset().left - this.list.offset().left),
+            y = ($(zone).find(".slot:not(.active)").offset().top - this.list.offset().top),
+            w = $(zone).find(".slot").innerWidth(),
+            h = $(zone).find(".slot").innerHeight(),
+            el = $(zone).find(".slot")
+
+        return {"x" : x, "y" : y, "w" : w, "h": h, "el": el}
+    }
+}
+
+export default QuizDragAndDrop;

diff --git a/js/quiz.question.js b/js/quiz.question.js
index 97c7c0dace3d39ed8b8eee770ea54f93250878e3..fc21bf675d11a390a70b8fcd3ad0870bc1516c72 100644 (file)
--- a/js/quiz.question.js
+++ b/js/quiz.question.js
@@ -44,6 +44,10 @@ QuizQuestion.prototype = {
     getFormData: function (responses) {
         //
     },
+
+    isDragAndDrop: function() {
+        return $(".active-screen").find(".question-draganddrop").length
+    }
 }
 
 export default QuizQuestion;

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 6ed20a9831103fc74f9cd683abd6ecccaa60ce38..58a5bd51d4b9c0285a1d060a750999fda5bc6482 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -1,9 +1,8 @@
 import gsap from "gsap";
-import InertiaPlugin from "gsap/InertiaPlugin.js";
-import Draggable from "gsap/Draggable.js";
 
 import QuizScreenIntro from './quiz.screen.intro';
 import QuizScreenOutro from "./quiz.screen.outro";
+import QuizDragAndDrop from "./quiz.draganddrop";
 
 function QuizScreens(quiz) {
     this.quiz = quiz;
@@ -15,6 +14,7 @@ function QuizScreens(quiz) {
 
     this.intro = new QuizScreenIntro(this);
     this.outro = new QuizScreenOutro(this);
+    this.draganddrop = new QuizDragAndDrop(this);
     this.initEvents();
 }
 
@@ -35,10 +35,10 @@ QuizScreens.prototype = {
 
         // Cliquer sur le bouton suivant
         $(document).on("click", ".next .action", function () {
-            console.log("countdown_enable",parseInt($this.quiz.question.current().countdown_enable))
-            console.log("intervalCountDown",$this.intervalCountDown)
+            console.log("countdown_enable", parseInt($this.quiz.question.current().countdown_enable))
+            console.log("intervalCountDown", $this.intervalCountDown)
             if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable))
-            || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) {
+                || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) {
                 alert('Please select at least one answer');
                 return false;
             }
@@ -60,122 +60,7 @@ QuizScreens.prototype = {
                 $this.nextQuestion();
             }
         });
-
-        gsap.registerPlugin(InertiaPlugin);
-        gsap.registerPlugin(Draggable);
-
-        let x = $(".list-item").offset().left
-
-        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: false,
-            bounds: "#quiz",
-            onMove: function() {
-                let left = $(this.target).offset().left,
-                    right = $(this.target).offset().left + $(this.target).outerWidth(),
-                    direction = this.getDirection(),
-                    rotation = 0
-
-                //set rotation
-                if(direction.includes("right")) {
-                    rotation = 5
-                } else {
-                    rotation = -5
-                }
-
-                if(this.endX === 0) {
-                    rotation = 0
-                }
-
-                gsap.to(this.target, {
-                    rotation: rotation
-                })
-
-
-                //
-                if(left - 19 < zone1.offset().left + zone1.width()) {
-                    $(".zone-1").addClass("active")
-                } else {
-                    $(".zone-1").removeClass("active")
-                }
-
-                if(right + 19 > zone2.offset().left) {
-                    $(".zone-2").addClass("active")
-                } else {
-                    $(".zone-2").removeClass("active")
-                }
-
-                //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")
-
-                // reset list rotation
-                gsap.to(this.target, {
-                    rotation: 0
-                })
-            }
-        });
     },
-
     instantReview: function (review) {
         this.quiz.progressbar.update();
         this.quiz.animations.instantReviewAnimation(review.ok === 'ok' ? 'OK' : 'NOK');
@@ -215,6 +100,7 @@ QuizScreens.prototype = {
         } else {
             nextScreen = 'q-' + nextQuestionIndex;
         }
+
         this.showScreen(nextScreen);
     },
 
@@ -289,6 +175,10 @@ QuizScreens.prototype = {
             $this.currentQuestionAnswers = [];
             $this.quiz.progressbar.update();
 
+            if($this.quiz.question.isDragAndDrop()) {
+                $this.draganddrop.start()
+            }
+
             if (screen === 'outro') {
                 $this.outro.show();
             }
@@ -375,7 +265,9 @@ QuizScreens.prototype = {
 
     resetCountdownBackground: function() {
         document.documentElement.style.setProperty("--width-bg-countdown", "100%")
-    }
+    },
+
+
 };
 
 export default QuizScreens;

diff --git a/style/100-global.sass b/style/100-global.sass
index 4fe992ef6deccae9b87c838b69ce20cc12fcba2a..65d76d1f3bcbb4e176f4dc96e0e83045c91ef151 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -51,7 +51,7 @@ body
         +opacity(.16)
         padding-left: 22px
     &.reset
-        max-width: 144px
+        //max-width: 144px
         .text svg
             width: 50%
     &.info

diff --git a/views/index.blade.php b/views/index.blade.php
index a25a03ddc851fc48b2cf973fdb18792e9d1247ab..8ae0da465b397bfedf1938d7e20a35e436c99ce8 100644 (file)
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -27,6 +27,7 @@
         <div id="instantReviewAnimation"></div>
     </div>
 </div>
+<div style="width:1px;height:100vh;position:absolute;left:620px;background:white;z-index:99;top:0;"></div>
 <script src="js/quiz.js"></script>
 <script>
     function changeViewportSize () {

diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index 0d8d498bfcd5d2c6b10355e07d6f681f7a6d76c2..dd06ab4684d59e06e08c854b7cbaddf4ce39189b 100644 (file)
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -2,7 +2,7 @@
     $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL();
 @endphp
 <div class="container-screen none" data-screen="welcome">
-    @include('header_title', ['data', $data])s
+    @include('header_title', ['data', $data])
     <div class="screen" id="welcome">
         <h2>{{$data->intro_title?:$__('Welcome')}}</h2>
         <p>{{$data->intro_text}}</p>

diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
new file mode 100644 (file)
index 0000000..e69de29