From 3f9ca5e230f0d8b5f83b5fc35c18fca6afcae6f7 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 13 Nov 2019 17:25:56 +0100 Subject: [PATCH 1/8] fix(datepicker): close datepickers on focus loss --- frontend/src/utils/form/datepicker.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index b8ba0869f..c6e6ff589 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -180,11 +180,11 @@ export class Datepicker { // change the selected date in the tail.datetime instance if the value of the input element is changed this._element.addEventListener('change', setDatepickerDate, { once: true }); - // close the instance if something other than the instance was clicked (i.e. if the target is not within the datepicker instance and if any previously clicked calendar view was replaced (is not in the window anymore) because it was clicked). YES, I KNOW - window.addEventListener('click', event => { - if (!this.datepickerInstance.dt.contains(event.target) && window.document.contains(event.target)) { + // close the instance on focus loss of the corresponding input element + // (only close the instance if source and target IDs differ, since interactions with the opened datepicker also triggers this event in some cases) + this._element.addEventListener('focusout', event => { + if (!event.relatedTarget || event.relatedTarget.id !== event.srcElement.id) this.datepickerInstance.close(); - } }); // close the datepicker on escape keydown events From 7fa0124fe25a53caa07c478e157dace3c4f2a6ee Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 12:24:02 +0100 Subject: [PATCH 2/8] fix(datepicker): close datepickers on focusout or click outside --- frontend/src/utils/form/datepicker.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index c6e6ff589..de7b0f6db 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -180,14 +180,27 @@ export class Datepicker { // change the selected date in the tail.datetime instance if the value of the input element is changed this._element.addEventListener('change', setDatepickerDate, { once: true }); - // close the instance on focus loss of the corresponding input element - // (only close the instance if source and target IDs differ, since interactions with the opened datepicker also triggers this event in some cases) - this._element.addEventListener('focusout', event => { - if (!event.relatedTarget || event.relatedTarget.id !== event.srcElement.id) + // close the instance on focusout of any element if the target is outside of the instance + window.addEventListener('focusout', event => { + console.log('focusout', event); + const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget); + const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); + console.log(targetIsOutside, targetIsNotTimepicker); + if (targetIsOutside && targetIsNotTimepicker) + this.datepickerInstance.close(); + }); + + // close the instance on click on any element outside of the datepicker (except the input element itself) + window.addEventListener('click', event => { + const targetIsOutside = !this.datepickerInstance.dt.contains(event.target); + const targetIsInDocument = window.document.contains(event.target); + const targetIsNotInput = event.target !== this._element; + console.log(targetIsOutside, targetIsInDocument, targetIsNotInput); + if (targetIsOutside && targetIsInDocument && targetIsNotInput) this.datepickerInstance.close(); }); - // close the datepicker on escape keydown events + // close the instance on escape keydown events this._element.addEventListener('keydown', event => { if (event.keyCode === KEYCODE_ESCAPE) { this.datepickerInstance.close(); From 85ae663d91aaed981301765eae0d7da49b2d0f67 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 13:16:40 +0100 Subject: [PATCH 3/8] Apply suggestion to frontend/src/utils/form/datepicker.js --- frontend/src/utils/form/datepicker.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index de7b0f6db..0d27fb691 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -182,7 +182,6 @@ export class Datepicker { // close the instance on focusout of any element if the target is outside of the instance window.addEventListener('focusout', event => { - console.log('focusout', event); const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget); const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); console.log(targetIsOutside, targetIsNotTimepicker); From e661cb9f65a938168a92e4cd56aab37f26dce25a Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 13:16:43 +0100 Subject: [PATCH 4/8] Apply suggestion to frontend/src/utils/form/datepicker.js --- frontend/src/utils/form/datepicker.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index 0d27fb691..c24708516 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -184,7 +184,6 @@ export class Datepicker { window.addEventListener('focusout', event => { const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget); const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); - console.log(targetIsOutside, targetIsNotTimepicker); if (targetIsOutside && targetIsNotTimepicker) this.datepickerInstance.close(); }); From 999dd6b29b3737936e5f75f0a2f77b603e9bb4b2 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 13:16:46 +0100 Subject: [PATCH 5/8] Apply suggestion to frontend/src/utils/form/datepicker.js --- frontend/src/utils/form/datepicker.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index c24708516..d0f6123b2 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -193,7 +193,6 @@ export class Datepicker { const targetIsOutside = !this.datepickerInstance.dt.contains(event.target); const targetIsInDocument = window.document.contains(event.target); const targetIsNotInput = event.target !== this._element; - console.log(targetIsOutside, targetIsInDocument, targetIsNotInput); if (targetIsOutside && targetIsInDocument && targetIsNotInput) this.datepickerInstance.close(); }); From 434c0daa239dc6d502f55be39783edd75c96703e Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 15:24:45 +0100 Subject: [PATCH 6/8] fix(datepicker): partial focusout and click fix --- frontend/src/utils/form/datepicker.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index d0f6123b2..c9cba1a8b 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -180,20 +180,22 @@ export class Datepicker { // change the selected date in the tail.datetime instance if the value of the input element is changed this._element.addEventListener('change', setDatepickerDate, { once: true }); - // close the instance on focusout of any element if the target is outside of the instance + // close the instance on focusout of any element if another input is focussed that is neither the timepicker nor _element window.addEventListener('focusout', event => { - const targetIsOutside = !this.datepickerInstance.dt.contains(event.explicitOriginalTarget); - const targetIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); - if (targetIsOutside && targetIsNotTimepicker) + const hasFocus = event.relatedTarget !== null; + const focussedIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); + const focussedIsNotElement = event.relatedTarget !== this._element; + if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement) this.datepickerInstance.close(); }); // close the instance on click on any element outside of the datepicker (except the input element itself) window.addEventListener('click', event => { - const targetIsOutside = !this.datepickerInstance.dt.contains(event.target); + const targetIsOutside = !this.datepickerInstance.dt.contains(event.target) + && event.target !== this.datepickerInstance.dt; const targetIsInDocument = window.document.contains(event.target); - const targetIsNotInput = event.target !== this._element; - if (targetIsOutside && targetIsInDocument && targetIsNotInput) + const targetIsNotElement = event.target !== this._element; + if (targetIsOutside && targetIsInDocument && targetIsNotElement) this.datepickerInstance.close(); }); From ee0edc7d21393e217f88486be56a9d79f542a510 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Thu, 14 Nov 2019 15:31:51 +0100 Subject: [PATCH 7/8] fix(datepicker): close on focusout of elements in document only --- frontend/src/utils/form/datepicker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index c9cba1a8b..2c3ad9f61 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -185,7 +185,8 @@ export class Datepicker { const hasFocus = event.relatedTarget !== null; const focussedIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); const focussedIsNotElement = event.relatedTarget !== this._element; - if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement) + const focussedIsInDocument = window.document.contains(event.relatedTarget); + if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement && focussedIsInDocument) this.datepickerInstance.close(); }); From 069d15abcd4cb811a0aeb07ef1cb55ced97729c1 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Fri, 15 Nov 2019 09:39:47 +0100 Subject: [PATCH 8/8] fix(info-lecturer): translate german headline --- templates/i18n/info-lecturer/en-eu.hamlet | 2 +- templates/i18n/info-lecturer/en.hamlet | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/i18n/info-lecturer/en-eu.hamlet b/templates/i18n/info-lecturer/en-eu.hamlet index dfaffdb6a..72221d0f1 100644 --- a/templates/i18n/info-lecturer/en-eu.hamlet +++ b/templates/i18n/info-lecturer/en-eu.hamlet @@ -33,7 +33,7 @@ $newline text The course description can be composed in Html and should contain the module description! -
Unterstützung für verschiedene Institute +
Support for Multiple Departments

^{newU2WFeat} Uni2work supports managing multiple departments; prefixing course titles with e.g. "[MATH]" are not necessary anymore. diff --git a/templates/i18n/info-lecturer/en.hamlet b/templates/i18n/info-lecturer/en.hamlet index 5a6afc414..3ed3b9d02 100644 --- a/templates/i18n/info-lecturer/en.hamlet +++ b/templates/i18n/info-lecturer/en.hamlet @@ -33,7 +33,7 @@ $newline text The course description can be composed in Html and should contain the module description! -

Unterstützung für verschiedene Institute +
Support for Multiple Departments

^{newU2WFeat} Uni2work supports managing multiple departments; prefixing course titles with e.g. "[MATH]" are not necessary anymore.