From b6fa1dd5eb7566116686254ee09e3324b167bdf8 Mon Sep 17 00:00:00 2001 From: soufiane Date: Fri, 8 Sep 2023 17:04:05 +0200 Subject: [PATCH] wip #6182 @5:00 question drag and drop --- js/quiz.draganddrop.js | 157 +++++++++++++++++++++++++ js/quiz.question.js | 4 + js/quiz.screens.js | 134 ++------------------- style/100-global.sass | 2 +- views/index.blade.php | 1 + views/screens/intro.blade.php | 2 +- views/screens/question_match.blade.php | 0 7 files changed, 177 insertions(+), 123 deletions(-) create mode 100644 js/quiz.draganddrop.js create mode 100644 views/screens/question_match.blade.php diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js new file mode 100644 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 97c7c0d..fc21bf6 100644 --- 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 6ed20a9..58a5bd5 100644 --- 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 4fe992e..65d76d1 100644 --- 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 a25a03d..8ae0da4 100644 --- a/views/index.blade.php +++ b/views/index.blade.php @@ -27,6 +27,7 @@
+