From 7aeb8e61f46dcc5c918df20450df2fdf1d10f217 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Tue, 25 May 2021 12:14:13 +0200 Subject: [PATCH 1/7] fix: changed enter to tab behavior in CCommR added a new utility that looks for [uw-enter-as-tab] and attaches a listener to this field --- .../services/util-registry/util-registry.js | 2 +- frontend/src/utils/form/enter-is-tab.js | 44 +++++++++++++++++++ frontend/src/utils/form/form.js | 2 + 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 frontend/src/utils/form/enter-is-tab.js diff --git a/frontend/src/services/util-registry/util-registry.js b/frontend/src/services/util-registry/util-registry.js index 65e9326cc..507331135 100644 --- a/frontend/src/services/util-registry/util-registry.js +++ b/frontend/src/services/util-registry/util-registry.js @@ -1,6 +1,6 @@ import * as toposort from 'toposort'; -const DEBUG_MODE = /localhost/.test(window.location.href) ? 1 : 0; +const DEBUG_MODE = 3;///localhost/.test(window.location.href) ? 1 : 0; export class UtilRegistry { diff --git a/frontend/src/utils/form/enter-is-tab.js b/frontend/src/utils/form/enter-is-tab.js new file mode 100644 index 000000000..35d9481b1 --- /dev/null +++ b/frontend/src/utils/form/enter-is-tab.js @@ -0,0 +1,44 @@ +import { Utility } from '../../core/utility'; + +const ENTER_IS_TAB_INITIALIZED_CLASS = 'enter-as-tab--initialized'; +//Frage: diese ID ok? Oder lieber mit einem Query slector? +const FORM_GROUP_INPUT_ID = 'hident29'; + +@Utility({ + selector: '[uw-enter-as-tab]', + }) + +export class EnterIsTab { + _element; + + constructor(element) { + + if(!element) { + throw new Error('EnterIsTab Utility cannot be setup without a field element'); + } + + this._element = element; + + //Frage: Brauche ich diese Klasse? + if (this._element.classList.contains(ENTER_IS_TAB_INITIALIZED_CLASS)) { + return false; + } + + this._element.classList.add(ENTER_IS_TAB_INITIALIZED_CLASS); + } + + + start() { + this._element.addEventListener('keypress', (e) => { + if(e.key === 'Enter') { + e.preventDefault(); + let messageArea = document.getElementById(FORM_GROUP_INPUT_ID); + messageArea.focus(); + } + }); + } + + destroy() { + console.log('TBD: Destroy Alert'); + } +} \ No newline at end of file diff --git a/frontend/src/utils/form/form.js b/frontend/src/utils/form/form.js index 2327ca1db..723f4c9e8 100644 --- a/frontend/src/utils/form/form.js +++ b/frontend/src/utils/form/form.js @@ -7,6 +7,7 @@ import { FormErrorReporter } from './form-error-reporter'; import { InteractiveFieldset } from './interactive-fieldset'; import { NavigateAwayPrompt } from './navigate-away-prompt'; import { CommunicationRecipients } from './communication-recipients'; +import { EnterIsTab } from './enter-is-tab'; export const FormUtils = [ AutoSubmitButton, @@ -17,5 +18,6 @@ export const FormUtils = [ InteractiveFieldset, NavigateAwayPrompt, CommunicationRecipients, + EnterIsTab, // ReactiveSubmitButton // not used currently ]; From cc63f636e928c9071bbc3208b77aa20d88800a17 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Tue, 25 May 2021 12:20:55 +0200 Subject: [PATCH 2/7] fix: changed DEBUG_MODE back --- frontend/src/services/util-registry/util-registry.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/services/util-registry/util-registry.js b/frontend/src/services/util-registry/util-registry.js index 507331135..65e9326cc 100644 --- a/frontend/src/services/util-registry/util-registry.js +++ b/frontend/src/services/util-registry/util-registry.js @@ -1,6 +1,6 @@ import * as toposort from 'toposort'; -const DEBUG_MODE = 3;///localhost/.test(window.location.href) ? 1 : 0; +const DEBUG_MODE = /localhost/.test(window.location.href) ? 1 : 0; export class UtilRegistry { From 10b06e1f967b312133802142375666f45ddbab74 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Thu, 27 May 2021 13:31:03 +0000 Subject: [PATCH 3/7] corrected log message from alert to enter is tab --- frontend/src/utils/form/enter-is-tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/utils/form/enter-is-tab.js b/frontend/src/utils/form/enter-is-tab.js index 35d9481b1..1c3ab389f 100644 --- a/frontend/src/utils/form/enter-is-tab.js +++ b/frontend/src/utils/form/enter-is-tab.js @@ -39,6 +39,6 @@ export class EnterIsTab { } destroy() { - console.log('TBD: Destroy Alert'); + console.log('TBD: Destroy EnterIsTab'); } } \ No newline at end of file From 2450e03173da011d8ccfd7c68763d6d9ae254471 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Thu, 27 May 2021 15:40:35 +0200 Subject: [PATCH 4/7] chore: removed my comments --- frontend/src/utils/form/enter-is-tab.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/utils/form/enter-is-tab.js b/frontend/src/utils/form/enter-is-tab.js index 1c3ab389f..24d970ea6 100644 --- a/frontend/src/utils/form/enter-is-tab.js +++ b/frontend/src/utils/form/enter-is-tab.js @@ -1,7 +1,6 @@ import { Utility } from '../../core/utility'; const ENTER_IS_TAB_INITIALIZED_CLASS = 'enter-as-tab--initialized'; -//Frage: diese ID ok? Oder lieber mit einem Query slector? const FORM_GROUP_INPUT_ID = 'hident29'; @Utility({ @@ -19,7 +18,6 @@ export class EnterIsTab { this._element = element; - //Frage: Brauche ich diese Klasse? if (this._element.classList.contains(ENTER_IS_TAB_INITIALIZED_CLASS)) { return false; } From 1aaf254c3c3c07f95b63bdf760791859a80aa4a4 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Thu, 27 May 2021 17:31:16 +0200 Subject: [PATCH 5/7] fix: next input area is now selected via a css query --- frontend/src/utils/form/enter-is-tab.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/frontend/src/utils/form/enter-is-tab.js b/frontend/src/utils/form/enter-is-tab.js index 24d970ea6..1c50ef298 100644 --- a/frontend/src/utils/form/enter-is-tab.js +++ b/frontend/src/utils/form/enter-is-tab.js @@ -1,7 +1,7 @@ import { Utility } from '../../core/utility'; const ENTER_IS_TAB_INITIALIZED_CLASS = 'enter-as-tab--initialized'; -const FORM_GROUP_INPUT_ID = 'hident29'; +const AREA_SELECTOR = 'input, textarea'; @Utility({ selector: '[uw-enter-as-tab]', @@ -30,8 +30,19 @@ export class EnterIsTab { this._element.addEventListener('keypress', (e) => { if(e.key === 'Enter') { e.preventDefault(); - let messageArea = document.getElementById(FORM_GROUP_INPUT_ID); - messageArea.focus(); + let currentInputFieldId = this._element.id; + let inputAreas = document.querySelectorAll(AREA_SELECTOR); + let nextInputArea = null; + for (let i = 0; i < inputAreas.length; i++) { + if(inputAreas[i].id === currentInputFieldId) { + nextInputArea = inputAreas[i+1]; + break; + } + } + + if(nextInputArea) { + nextInputArea.focus(); + } } }); } From 9288e5c203a88368ec853ba7001290df87069fc6 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Tue, 1 Jun 2021 09:17:54 +0000 Subject: [PATCH 6/7] fix: changed keypress to keydown. --- frontend/src/utils/form/enter-is-tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/utils/form/enter-is-tab.js b/frontend/src/utils/form/enter-is-tab.js index 1c50ef298..4e171c87b 100644 --- a/frontend/src/utils/form/enter-is-tab.js +++ b/frontend/src/utils/form/enter-is-tab.js @@ -27,7 +27,7 @@ export class EnterIsTab { start() { - this._element.addEventListener('keypress', (e) => { + this._element.addEventListener('keydown', (e) => { if(e.key === 'Enter') { e.preventDefault(); let currentInputFieldId = this._element.id; From 93a829b81b45639b0841bac72dc57416b50ef01c Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Mon, 7 Jun 2021 15:13:04 +0200 Subject: [PATCH 7/7] fix: added uw-enter-as-tab to CCommR subject field --- src/Handler/Utils/Communication.hs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Handler/Utils/Communication.hs b/src/Handler/Utils/Communication.hs index c5575a65b..27a8e31a0 100644 --- a/src/Handler/Utils/Communication.hs +++ b/src/Handler/Utils/Communication.hs @@ -209,7 +209,7 @@ commR CommunicationRoute{..} = do ((commRes,commWdgt),commEncoding) <- runFormPost . identifyForm FIDCommunication . withButtonForm' universeF . renderAForm FormStandard $ Communication <$> recipientAForm <* aformMessage recipientsListMsg - <*> aopt textField (fslI MsgCommSubject) Nothing + <*> aopt textField (fslI MsgCommSubject & addAttr "uw-enter-as-tab" "") Nothing <*> (markupOutput <$> areq htmlField (fslI MsgCommBody) Nothing) formResult commRes $ \case (comm, BtnCommunicationSend) -> do