From 7ee0352ec7c71d3040d4687e1d0947713e57f47c Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 6 Oct 2023 17:54:02 +0200 Subject: [PATCH] wait #6369 @1 --- js/quiz.countriesList.js | 9 +++++---- js/quiz.screens.js | 24 +++++++++++------------ style/108-question-text.sass | 13 +++++++++--- views/screens/question_country.blade.php | 14 ++++++++----- views/screens/question_email.blade.php | 2 +- views/screens/question_text.blade.php | 2 +- views/screens/question_textarea.blade.php | 2 +- 7 files changed, 39 insertions(+), 27 deletions(-) diff --git a/js/quiz.countriesList.js b/js/quiz.countriesList.js index d01edb8..9876233 100644 --- a/js/quiz.countriesList.js +++ b/js/quiz.countriesList.js @@ -13,21 +13,22 @@ QuizCountriesList.prototype = { this.dropdown = this.quiz.screens.getActiveScreen().find(".dropdown") // - $(document).on("click", "label[for=toggleDropdown]", function() { + $(document).on("click", "label[for=toggleDropdown]", function () { $this.dropdown.addClass("active") }) // - $(document).on("click", ".country", function() { + $(document).on("click", ".country", function () { $this.dropdown.removeClass("active") let value = $(this).text() - $(".active-screen input").val(value) + $(".active-screen input").val(value); + $(this).closest('form').trigger('change'); }) this.setScrollBarDropdown() }, - setScrollBarDropdown: function() { + setScrollBarDropdown: function () { let dp = new SimpleBar(this.dropdown.get(0)) }, diff --git a/js/quiz.screens.js b/js/quiz.screens.js index f90791b..1f6f416 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -39,15 +39,15 @@ QuizScreens.prototype = { // Cliquer sur le bouton suivant $(document).on("click", ".active-screen.next .action", function () { - if($this.getActiveScreenType() === 'email') { - if(!$this.validateEmail($this.activeScreen.find("input").val())) { - alert('Please enter a correct format'); + if ($this.getActiveScreenType() === 'email') { + if (!$this.validateEmail($this.activeScreen.find("input").val())) { + $this.activeScreen.find("input").addClass('error'); return false; } } 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)) { - alert('Please select at least one answer'); + $this.activeScreen.find("input[type='email'],input[type='text'],textarea,.dropdown").addClass('error'); return false; } @@ -55,7 +55,7 @@ QuizScreens.prototype = { if ($(this).hasClass('validate')) { let review = $this.sendUserAnswers(); // Si la revue instantanée est activée, on affiche les résultats - if ($this.quiz.data.instantReview && !['country','email','text'].includes($this.getActiveScreenType()) ) { + if ($this.quiz.data.instantReview && !['country', 'email', 'text'].includes($this.getActiveScreenType())) { $this.instantReview(review); } else { // Sinon, on passe directement à la question suivante @@ -121,7 +121,7 @@ QuizScreens.prototype = { const $this = this; this.currentQuestionAnswers = [] - if(['country','email','text'].includes(this.getActiveScreenType())) { + if (['country', 'email', 'text'].includes(this.getActiveScreenType())) { this.currentQuestionAnswers = this.getActiveScreen().find(".answer-text").val() } else { $(".active-screen form").find("input:checked").each(function () { @@ -148,11 +148,11 @@ QuizScreens.prototype = { if ($this.getActiveScreenType() === 'draganddrop') { $this.quiz.draganddrop.start() - } else if($this.getActiveScreenType() === 'match') { + } else if ($this.getActiveScreenType() === 'match') { $this.quiz.match.start() - } else if($this.getActiveScreenType() === 'country') { + } else if ($this.getActiveScreenType() === 'country') { $this.quiz.countriesList.start() - } else if($this.getActiveScreenType() === 'email') { + } else if ($this.getActiveScreenType() === 'email') { $this.email = $this.activeScreen.find("input").val() } @@ -224,7 +224,7 @@ QuizScreens.prototype = { this.getCurrentForm().find("input").prop("checked", false) } else if (type === 'draganddrop') { this.quiz.draganddrop.reset(); - } else if(type === 'match') { + } else if (type === 'match') { this.quiz.match.reset(); } else { this.getCurrentForm().find(".answer-text").val("") @@ -306,8 +306,8 @@ QuizScreens.prototype = { document.documentElement.style.setProperty("--width-bg-countdown", "100%") }, - validateEmail: function(email) { - let re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; + validateEmail: function (email) { + let re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; return re.test(email); } }; diff --git a/style/108-question-text.sass b/style/108-question-text.sass index dac9310..88c156d 100644 --- a/style/108-question-text.sass +++ b/style/108-question-text.sass @@ -17,7 +17,8 @@ top: 50% transform: translateY(-50%) z-index: 3 - input:focus+svg + + input:focus + svg color: $texts-color .form-group @@ -35,6 +36,7 @@ input, textarea, .dropdown + font-family: $font width: 100% +radius(16px) padding: 20px 16px @@ -44,6 +46,7 @@ color: $texts-color outline: none box-sizing: border-box + &::placeholder +opacity(.48, color, $texts-color) opacity: 1 @@ -51,6 +54,9 @@ &::-ms-input-placeholder +opacity(.48, color, $texts-color) + &.error + border-color: $nok-color + textarea height: 183px @@ -73,6 +79,7 @@ opacity: 0 visibility: hidden z-index: 2 + &.active max-height: 325px opacity: 1 @@ -87,10 +94,10 @@ &.placeholder padding-top: 0 - color: rgba($texts-color,.48) + color: rgba($texts-color, .48) .country - border-top: 1px solid rgba($texts-color,.16) + border-top: 1px solid rgba($texts-color, .16) // SimpleBar personalisation .simplebar-track diff --git a/views/screens/question_country.blade.php b/views/screens/question_country.blade.php index 99f13aa..1378e68 100644 --- a/views/screens/question_country.blade.php +++ b/views/screens/question_country.blade.php @@ -1,21 +1,25 @@
- @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill']) + @include('components.background',['data'=>$data, 'name'=>'standard', 'fit'=>'fill'])
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
    -
  • {{$__("Select an answer")}}
    • +
  • {{$question['placeholder']?:$__('Choose a country')}}
    • @foreach($data["countriesList"] as $key => $name)
  • {{$name}}
    • @endforeach diff --git a/views/screens/question_email.blade.php b/views/screens/question_email.blade.php index 28661f9..cc99b6d 100644 --- a/views/screens/question_email.blade.php +++ b/views/screens/question_email.blade.php @@ -5,7 +5,7 @@
    - + diff --git a/views/screens/question_text.blade.php b/views/screens/question_text.blade.php index 449b8d6..7d321f0 100644 --- a/views/screens/question_text.blade.php +++ b/views/screens/question_text.blade.php @@ -5,7 +5,7 @@
    - +
    diff --git a/views/screens/question_textarea.blade.php b/views/screens/question_textarea.blade.php index 2556abf..972654f 100644 --- a/views/screens/question_textarea.blade.php +++ b/views/screens/question_textarea.blade.php @@ -5,7 +5,7 @@
    - +
    -- 2.39.5