From c72335c13f445b02161e77bd4de419cb17e26bd6 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Tue, 28 May 2019 23:18:47 +0200 Subject: [PATCH] checked and refined remaining ported js utils --- frontend/src/utils/form/auto-submit-input.js | 2 +- frontend/src/utils/form/form-error-remover.js | 6 ++--- .../src/utils/form/interactive-fieldset.js | 2 +- .../src/utils/form/navigate-away-prompt.js | 14 ++++++----- .../src/utils/form/reactive-submit-button.js | 6 ++--- frontend/src/utils/inputs/file-input.js | 4 ++-- frontend/src/utils/mass-input/mass-input.js | 24 +++++++++---------- frontend/src/utils/show-hide/show-hide.js | 8 ++----- frontend/src/utils/tooltips/tooltips.js | 2 +- 9 files changed, 33 insertions(+), 35 deletions(-) diff --git a/frontend/src/utils/form/auto-submit-input.js b/frontend/src/utils/form/auto-submit-input.js index 6276d2f3f..f442f2960 100644 --- a/frontend/src/utils/form/auto-submit-input.js +++ b/frontend/src/utils/form/auto-submit-input.js @@ -41,7 +41,7 @@ export class AutoSubmitInput { this._element.removeEventListener('input', this._debouncedHandler); } - autoSubmit() { + autoSubmit = () => { this._form.submit(); } } diff --git a/frontend/src/utils/form/form-error-remover.js b/frontend/src/utils/form/form-error-remover.js index 08aed0598..af25d4bc1 100644 --- a/frontend/src/utils/form/form-error-remover.js +++ b/frontend/src/utils/form/form-error-remover.js @@ -23,7 +23,7 @@ export class FormErrorRemover { // find form groups const formGroups = Array.from(element.querySelectorAll(FORM_GROUP_SELECTOR)); - formGroups.forEach(function(formGroup) { + formGroups.forEach((formGroup) => { if (!formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS)) { return; } @@ -33,8 +33,8 @@ export class FormErrorRemover { return false; } - inputElements.forEach(function(inputElement) { - inputElement.addEventListener('input', function() { + inputElements.forEach((inputElement) => { + inputElement.addEventListener('input', () => { formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS); }); }); diff --git a/frontend/src/utils/form/interactive-fieldset.js b/frontend/src/utils/form/interactive-fieldset.js index 79226e67f..0551ce289 100644 --- a/frontend/src/utils/form/interactive-fieldset.js +++ b/frontend/src/utils/form/interactive-fieldset.js @@ -73,7 +73,7 @@ export class InteractiveFieldset { this.target.classList.toggle('hidden', !active); - this.childInputs.forEach(function(el) { + this.childInputs.forEach((el) => { el.disabled = !active; // disable input for flatpickrs added input as well if exists diff --git a/frontend/src/utils/form/navigate-away-prompt.js b/frontend/src/utils/form/navigate-away-prompt.js index 013074981..151da8e5b 100644 --- a/frontend/src/utils/form/navigate-away-prompt.js +++ b/frontend/src/utils/form/navigate-away-prompt.js @@ -32,12 +32,12 @@ export class NavigateAwayPrompt { window.addEventListener('beforeunload', this._beforeUnloadHandler); - this._element.addEventListener('submit', function() { - this.unloadDueToSubmit = true; + this._element.addEventListener('submit', () => { + this._unloadDueToSubmit = true; }); - this._element.addEventListener('change', function() { - this.touched = true; - this.unloadDueToSubmit = false; + this._element.addEventListener('change', () => { + this._touched = true; + this._unloadDueToSubmit = false; }); // mark initialized @@ -49,7 +49,7 @@ export class NavigateAwayPrompt { window.removeEventListener('beforeunload', this._beforeUnloadHandler); } - _beforeUnloadHandler(event) { + _beforeUnloadHandler = (event) => { // allow the event to happen if the form was not touched by the // user or the unload event was initiated by a form submit if (!this._touched || this._unloadDueToSubmit) { @@ -58,6 +58,8 @@ export class NavigateAwayPrompt { // cancel the unload event. This is the standard to force the prompt to appear. event.preventDefault(); + // chrome + event.returnValue = true; // for all non standard compliant browsers we return a truthy value to activate the prompt. return true; } diff --git a/frontend/src/utils/form/reactive-submit-button.js b/frontend/src/utils/form/reactive-submit-button.js index d26477517..a684a0ee9 100644 --- a/frontend/src/utils/form/reactive-submit-button.js +++ b/frontend/src/utils/form/reactive-submit-button.js @@ -55,10 +55,10 @@ export class ReactiveSubmitButton { } setupInputs() { - this._requiredInputs.forEach(function(el) { + this._requiredInputs.forEach((el) => { var checkbox = el.getAttribute('type') === 'checkbox'; var eventType = checkbox ? 'change' : 'input'; - el.addEventListener(eventType, function() { + el.addEventListener(eventType, () => { this.updateButtonState(); }); }); @@ -74,7 +74,7 @@ export class ReactiveSubmitButton { inputsValid() { var done = true; - this._requiredInputs.forEach(function(inp) { + this._requiredInputs.forEach((inp) => { var len = inp.value.trim().length; if (done && len === 0) { done = false; diff --git a/frontend/src/utils/inputs/file-input.js b/frontend/src/utils/inputs/file-input.js index 1b9f9acd0..f54563884 100644 --- a/frontend/src/utils/inputs/file-input.js +++ b/frontend/src/utils/inputs/file-input.js @@ -40,7 +40,7 @@ export class FileInput { this._updateLabel(); // add change listener - this._element.addEventListener('change', function() { + this._element.addEventListener('change', () => { this.updateLabel(); this.renderFileList(); }); @@ -61,7 +61,7 @@ export class FileInput { const files = this._element.files; this._fileList.innerHTML = ''; - Array.from(files).forEach(function(file) { + Array.from(files).forEach((file) => { const fileDisplayEl = document.createElement('li'); fileDisplayEl.innerHTML = file.name; this.fileList.appendChild(fileDisplayEl); diff --git a/frontend/src/utils/mass-input/mass-input.js b/frontend/src/utils/mass-input/mass-input.js index 4d5e0f49b..fbde37f6c 100644 --- a/frontend/src/utils/mass-input/mass-input.js +++ b/frontend/src/utils/mass-input/mass-input.js @@ -41,8 +41,8 @@ export class MassInput { // setup submit buttons inside this massinput so browser // uses correct submit button for form submission. const buttons = this._getMassInputSubmitButtons(); - buttons.forEach(function(button) { - this.setupSubmitButton(button); + buttons.forEach((button) => { + this._setupSubmitButton(button); }); this._massInputForm.addEventListener('submit', this._massInputFormSubmitHandler); @@ -66,7 +66,7 @@ export class MassInput { requestFn = this._app.httpClient[method.toLowerCase()].bind(this._app.httpClient); } - return function(event) { + return (event) => { let activeElement; // check if event occured from either a mass input add/delete button or @@ -96,10 +96,10 @@ export class MassInput { } event.preventDefault(); - const requestBody = this.serializeForm(submitButton, enctype); + const requestBody = this._serializeForm(submitButton, enctype); if (requestFn && requestBody) { - const headers = {'Mass-Input-Shortcircuit': this.massInputId}; + const headers = {'Mass-Input-Shortcircuit': this._massInputId}; if (enctype !== 'multipart/form-data') { headers['Content-Type'] = enctype; @@ -109,19 +109,19 @@ export class MassInput { url: url, headers: headers, body: requestBody, - }).then(function(response) { + }).then((response) => { return this._app.htmlHelpers.parseResponse(response); - }).then(function(response) { - this.processResponse(response.element); + }).then((response) => { + this._processResponse(response.element); if (isAddCell) { - this.reFocusAddCell(); + this._reFocusAddCell(); } }); } }; } - _keypressHandler(event) { + _keypressHandler = (event) => { if (event.keyCode !== 13) { return false; } @@ -190,8 +190,8 @@ export class MassInput { this._massInputForm.removeEventListener('keypress', this._keypressHandler); const buttons = this._getMassInputSubmitButtons(); - buttons.forEach(function(button) { - this.resetSubmitButton(button); + buttons.forEach((button) => { + this._resetSubmitButton(button); }); } } diff --git a/frontend/src/utils/show-hide/show-hide.js b/frontend/src/utils/show-hide/show-hide.js index 1fc1925e5..0780a465d 100644 --- a/frontend/src/utils/show-hide/show-hide.js +++ b/frontend/src/utils/show-hide/show-hide.js @@ -59,10 +59,6 @@ export class ShowHide { } destroy() { - this._removeClickListener(); - } - - _removeClickListener() { this._element.removeEventListener('click', this._clickHandler); } @@ -73,8 +69,8 @@ export class ShowHide { _clickHandler = () => { const newState = this._element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS); - if (this.__showHideId) { - this._setLocalStorage(this.__showHideId, newState); + if (this._showHideId) { + this._setLocalStorage(this._showHideId, newState); } } diff --git a/frontend/src/utils/tooltips/tooltips.js b/frontend/src/utils/tooltips/tooltips.js index 6669e5d70..97a2e299f 100644 --- a/frontend/src/utils/tooltips/tooltips.js +++ b/frontend/src/utils/tooltips/tooltips.js @@ -1,7 +1,7 @@ import { Utility } from '../../core/utility'; import './tooltips.scss'; -// empty shell to be able to load styles +// empty "shell" to be able to load styles @Utility({ selector: '[not-something-that-would-be-found]', })