From 0e78498f87f910372089d086a77e2c7af92f97df Mon Sep 17 00:00:00 2001 From: morethanwords Date: Tue, 13 Oct 2020 01:38:54 +0300 Subject: [PATCH] Fix max length for texts in poll creation --- src/components/inputField.ts | 22 ++++++++++++- src/components/popupCreatePoll.ts | 33 ++++++++++++++++---- src/scss/partials/_chatlist.scss | 2 +- src/scss/partials/popups/_mediaAttacher.scss | 5 --- src/scss/style.scss | 14 +++++---- 5 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/components/inputField.ts b/src/components/inputField.ts index b92d15c1..eb794e11 100644 --- a/src/components/inputField.ts +++ b/src/components/inputField.ts @@ -1,4 +1,4 @@ -const InputField = (placeholder: string, label: string, name: string) => { +const InputField = (placeholder: string, label: string, name: string, maxLength?: number, showLengthOn: number = maxLength ? maxLength / 3 : 0) => { const div = document.createElement('div'); div.classList.add('input-field'); @@ -7,6 +7,26 @@ const InputField = (placeholder: string, label: string, name: string) => { `; + if(maxLength) { + const input = div.firstElementChild as HTMLInputElement; + const labelEl = div.lastElementChild as HTMLLabelElement; + let showingLength = false; + input.addEventListener('input', (e) => { + const wasError = input.classList.contains('error'); + const diff = maxLength - input.value.length; + const isError = diff < 0; + input.classList.toggle('error', isError); + + if(isError || diff <= showLengthOn) { + labelEl.innerText = label + ` (${maxLength - input.value.length})`; + if(!showingLength) showingLength = true; + } else if((wasError && !isError) || showingLength) { + labelEl.innerText = label; + showingLength = false; + } + }); + } + return div; }; diff --git a/src/components/popupCreatePoll.ts b/src/components/popupCreatePoll.ts index 98dda5b2..4adc8faa 100644 --- a/src/components/popupCreatePoll.ts +++ b/src/components/popupCreatePoll.ts @@ -10,6 +10,10 @@ import RadioField from "./radioField"; import Scrollable from "./scrollable"; import { toast } from "./toast"; +const MAX_LENGTH_QUESTION = 255; +const MAX_LENGTH_OPTION = 100; +const MAX_LENGTH_SOLUTION = 200; + export default class PopupCreatePoll extends PopupElement { private questionInput: HTMLInputElement; private questions: HTMLElement; @@ -28,7 +32,7 @@ export default class PopupCreatePoll extends PopupElement { this.title.innerText = 'New Poll'; - const questionField = InputField('Ask a Question', 'Ask a Question', 'question'); + const questionField = InputField('Ask a Question', 'Ask a Question', 'question', MAX_LENGTH_QUESTION); this.questionInput = questionField.firstElementChild as HTMLInputElement; this.header.append(questionField); @@ -89,7 +93,7 @@ export default class PopupCreatePoll extends PopupElement { const quizSolutionContainer = document.createElement('div'); quizSolutionContainer.classList.add('poll-create-questions'); - const quizSolutionField = InputField('Add a Comment (Optional)', 'Add a Comment (Optional)', 'solution'); + const quizSolutionField = InputField('Add a Comment (Optional)', 'Add a Comment (Optional)', 'solution', MAX_LENGTH_SOLUTION); this.quizSolutionInput = quizSolutionField.firstElementChild as HTMLInputElement; const quizSolutionSubtitle = document.createElement('div'); @@ -124,13 +128,18 @@ export default class PopupCreatePoll extends PopupElement { } onSubmitClick = (e: MouseEvent) => { - const question = this.questionInput.value; + const question = this.questionInput.value.trim(); - if(!question.trim()) { + if(!question) { toast('Please enter a question.'); return; } + if(question.length > MAX_LENGTH_QUESTION) { + toast('Question is too long.'); + return; + } + if(this.quizCheckboxField.input.checked && !this.correctAnswers?.length) { toast('Please choose the correct answer.'); return; @@ -143,6 +152,18 @@ export default class PopupCreatePoll extends PopupElement { return; } + const tooLongOption = answers.find(a => a.length > MAX_LENGTH_OPTION); + if(tooLongOption) { + toast('Option is too long.'); + return; + } + + const quizSolution = this.quizSolutionInput.value.trim() || undefined; + if(quizSolution.length > MAX_LENGTH_SOLUTION) { + toast('Explanation is too long.'); + return; + } + this.closeBtn.click(); this.confirmBtn.removeEventListener('click', this.onSubmitClick); @@ -178,7 +199,7 @@ export default class PopupCreatePoll extends PopupElement { }; //poll.id = randomIDS; - const inputMediaPoll = appPollsManager.getInputMediaPoll(poll, this.correctAnswers, this.quizSolutionInput.value || undefined); + const inputMediaPoll = appPollsManager.getInputMediaPoll(poll, this.correctAnswers, quizSolution); //console.log('Will try to create poll:', inputMediaPoll); @@ -214,7 +235,7 @@ export default class PopupCreatePoll extends PopupElement { private appendMoreField() { const tempID = this.tempID++; const idx = this.questions.childElementCount + 1; - const questionField = InputField('Add an Option', 'Option ' + idx, 'question-' + tempID); + const questionField = InputField('Add an Option', 'Option ' + idx, 'question-' + tempID, MAX_LENGTH_OPTION); (questionField.firstElementChild as HTMLInputElement).addEventListener('input', this.onInput); const radioField = RadioField('', 'question'); diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 0ee085ae..17189a12 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -43,7 +43,7 @@ &:focus { --border-width: 2px; background-color: transparent; - border: 2px solid $button-primary-background; + border-color: $button-primary-background; & + .tgico { color: $button-primary-background; diff --git a/src/scss/partials/popups/_mediaAttacher.scss b/src/scss/partials/popups/_mediaAttacher.scss index 36e59c3c..8cce0e16 100644 --- a/src/scss/partials/popups/_mediaAttacher.scss +++ b/src/scss/partials/popups/_mediaAttacher.scss @@ -135,12 +135,7 @@ input { //height: 54px; font-size: 1rem; - padding: 0 15px; border-radius: $border-radius-medium; - - &:focus { - padding: 0 14.5px; - } } label { diff --git a/src/scss/style.scss b/src/scss/style.scss index 2aa52dce..66396a45 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -626,9 +626,11 @@ hr { } input { - border: 1px solid #DADCE0; + --border-width: 1px; + border: var(--border-width) solid #DADCE0; border-radius: $border-radius-medium; - padding: 0 1rem; + //padding: 0 1rem; + padding: 0 calc(1rem - var(--border-width)); box-sizing: border-box; width: 100%; height: 54px; @@ -637,7 +639,7 @@ hr { z-index: 1; html.no-touch & { - &:hover { + &:hover:not(:focus):not(.error):not(.valid) { border-color: var(--color-gray); } } @@ -652,9 +654,9 @@ hr { } */ &:focus { - border-color: $button-primary-background !important; - border-width: 2px; - padding: 0 calc(1rem - 1px); + --border-width: 2px; + border-color: $button-primary-background; + //padding: 0 calc(1rem - 1px); } &:disabled {