wip #6339

diff --git a/js/quiz.countriesList.js b/js/quiz.countriesList.js
new file mode 100644 (file)
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 64549b77f38d5de7f615303be89730327909d5fe..ef6e390a29f12493cd1a2263a687203dac0698fe 100644 (file)
--- 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 496449001896b7ce75ccd4cb2e873e6d210e28e1..dbdc84d9315720607cf571ef86422d516eaa0b47 100644 (file)
--- 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 8cfb8f3201b187db29862fda9f57fad243228ce7..dd5a95698d51a874fe8636df359846f44d076df2 100644 (file)
--- 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 d3e39cecaef44e6d7c282fd17383b9cfc1dee19b..84fa33609cc7e61aec1ea2df9c3a60edfd01c03e 100644 (file)
--- 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 73116b01f4bb7ac2b775a0cd38ddc1d298e1496b..c8f6c7bc3dea33c730907701156710381bbc1ad2 100644 (file)
--- 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 aa9c97b3b65f2197ce2593541787d1253c8be3a6..6488f5bf62e750feca7be2f9a7b640e4f275b0e1 100644 (file)
--- a/views/screens/question_country.blade.php
+++ b/views/screens/question_country.blade.php
@@ -1,11 +1,16 @@
-<div class="container-screen none" data-screen="q-{{$position}}" data-type="multiple">
+<div class="container-screen none" data-screen="q-{{$position}}" data-type="country">
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
-    <div class="screen question-text">
+    <div class="screen question-text question-country">
         <form id="form-{{$position}}">
             <div class="form-group">
                 <label for="toggleDropdown">
                     <input id="toggleDropdown" name="text" placeholder="{{$__('Select an answer')}}" type="text" />
+                    <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="18.828" height="10.414" viewBox="0 0 18.828 10.414">
+                        <g id="Groupe_87" data-name="Groupe 87" transform="translate(17.414 -14.086) rotate(90)">
+                            <path id="Tracé_50" data-name="Tracé 50" d="M11.5,5l8,8-8,8" transform="translate(4 -5)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                        </g>
+                    </svg>
                 </label>
                 <div class="dropdown">
                     <ul class="countrylist">