checked and refined remaining ported js utils

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();
   }
 }

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);
         });
       });

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

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;
   }

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;

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);

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);
     });
   }
 }

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);
     }
   }
 

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]',
 })