From: soufiane Date: Thu, 5 Oct 2023 11:52:58 +0000 (+0200) Subject: wip #6339 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=316b66f4ad42141900a110142363225fade9295b;p=fluidbook-toolbox-quiz.git wip #6339 --- diff --git a/js/quiz.countriesList.js b/js/quiz.countriesList.js new file mode 100644 index 0000000..d01edb8 --- /dev/null +++ b/js/quiz.countriesList.js @@ -0,0 +1,36 @@ +import SimpleBar from 'simplebar' +import 'simplebar/dist/simplebar.css' + +function QuizCountriesList(quiz) { + this.dropdown = ''; + this.quiz = quiz; +} + +QuizCountriesList.prototype = { + + start: function () { + const $this = this + this.dropdown = this.quiz.screens.getActiveScreen().find(".dropdown") + + // + $(document).on("click", "label[for=toggleDropdown]", function() { + $this.dropdown.addClass("active") + }) + + // + $(document).on("click", ".country", function() { + $this.dropdown.removeClass("active") + let value = $(this).text() + $(".active-screen input").val(value) + }) + + this.setScrollBarDropdown() + }, + + setScrollBarDropdown: function() { + let dp = new SimpleBar(this.dropdown.get(0)) + }, + +} + +export default QuizCountriesList; diff --git a/js/quiz.js b/js/quiz.js index 64549b7..ef6e390 100644 --- a/js/quiz.js +++ b/js/quiz.js @@ -14,6 +14,7 @@ import QuizL10n from "./quiz.l10n"; import QuizDraganddrop from "./quiz.draganddrop"; import QuizMatch from "./quiz.match"; import QuizAttemptsLog from "./quiz.attemptslog"; +import QuizCountriesList from "./quiz.countriesList"; window.$ = window.jQuery = $; @@ -41,6 +42,7 @@ Quiz.prototype = { this.draganddrop = new QuizDraganddrop(this); this.match = new QuizMatch(this); this.attemptsLog = new QuizAttemptsLog(this); + this.countriesList = new QuizCountriesList(this); this.scorm = new QuizScorm(this); }, diff --git a/js/quiz.screens.js b/js/quiz.screens.js index 4964490..dbdc84d 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -1,4 +1,6 @@ import gsap from "gsap"; +import SimpleBar from 'simplebar' +import 'simplebar/dist/simplebar.css' import QuizScreenIntro from './quiz.screen.intro'; import QuizScreenOutro from "./quiz.screen.outro"; @@ -10,6 +12,7 @@ function QuizScreens(quiz) { this.intervalCountDown = 0; this.runningManTimeout = 0; this.timeline = null; + this.scrollBarDropdown = null; this.intro = new QuizScreenIntro(this); this.outro = new QuizScreenOutro(this); @@ -39,7 +42,6 @@ QuizScreens.prototype = { } // - if ($(this).hasClass('validate')) { let review = $this.sendUserAnswers(); // Si la revue instantanée est activée, on affiche les résultats @@ -133,6 +135,8 @@ QuizScreens.prototype = { $this.quiz.draganddrop.start() } else if($this.getActiveScreenType() === 'match') { $this.quiz.match.start() + } else if($this.getActiveScreenType() === 'country') { + $this.quiz.countriesList.start() } // diff --git a/style/100-global.sass b/style/100-global.sass index 8cfb8f3..dd5a956 100644 --- a/style/100-global.sass +++ b/style/100-global.sass @@ -254,3 +254,21 @@ body width: 100% height: 100% pointer-events: none + +// SimpleBar personalisation +.simplebar-wrapper + height: 100% +.simplebar-track + +opacity(.08,background-color,$texts-color) + border-radius: 20px + &.simplebar-vertical + .simplebar-scrollbar::before + background-color: #77679f + opacity: 1 !important + width: 3px + top: 1px + bottom: 1px + left: 1px + right: 1px + &.simplebar-horizontal + display: none diff --git a/style/105-outro.sass b/style/105-outro.sass index d3e39ce..84fa336 100644 --- a/style/105-outro.sass +++ b/style/105-outro.sass @@ -181,22 +181,10 @@ // SimpleBar personalisation - .simplebar-wrapper - height: 100% .simplebar-track - +opacity(.08,background-color,$texts-color) - border-radius: 20px &.simplebar-vertical height: 93% width: 5px - .simplebar-scrollbar::before - background-color: #77679f - opacity: 1 !important - width: 3px - top: 1px - bottom: 1px - left: 1px - right: 1px #anime-result transform: scale(1.7) diff --git a/style/108-question-text.sass b/style/108-question-text.sass index 73116b0..c8f6c7b 100644 --- a/style/108-question-text.sass +++ b/style/108-question-text.sass @@ -1,12 +1,22 @@ .question-text top: 93px + &.question-country + input + pointer-events: none + .form-group width: 100% max-width: 568px margin: 0 auto position: relative + label + color: $texts-color + position: relative + cursor: pointer + display: block + input, textarea, .dropdown @@ -14,7 +24,6 @@ +radius(16px) padding: 20px 16px font-size: 16px - overflow: hidden background-color: $neutral-color border: 2px solid $texts-color color: $texts-color @@ -28,17 +37,32 @@ position: relative z-index: 1 + .arrow + position: absolute + top: 50% + right: 20px + transform: translateY(-50%) + z-index: 2 + .dropdown max-height: 63px position: absolute top: 0 - transition: all .3s + transition: max-height .3s opacity: 0 + visibility: hidden + z-index: 2 &.active max-height: 325px + opacity: 1 + visibility: visible + + ul.countrylist + width: 98% li padding: 14px 0 + cursor: pointer &.placeholder padding-top: 0 @@ -47,6 +71,15 @@ .country border-top: 1px solid rgba($texts-color,.16) + // SimpleBar personalisation + .simplebar-track + &.simplebar-vertical + height: 93% + width: 5px !important + right: 10px + top: 50% !important + transform: translateY(-50%) + .m .question-text top: 45px diff --git a/views/screens/question_country.blade.php b/views/screens/question_country.blade.php index aa9c97b..6488f5b 100644 --- a/views/screens/question_country.blade.php +++ b/views/screens/question_country.blade.php @@ -1,11 +1,16 @@ -
+
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position]) -
+