Replaced the traditional function expressions with ES6 arrow function expressions in the JavaScript for the summary editor to avoid messing up with the "this" object.

This commit is contained in:
依瑪貓 2023-03-04 07:49:14 +08:00
parent 3ab4eacf9f
commit 39c9c17007

View File

@ -22,7 +22,7 @@
*/ */
// Initializes the page JavaScript. // Initializes the page JavaScript.
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", () => {
SummaryEditor.initialize(); SummaryEditor.initialize();
}); });
@ -163,13 +163,10 @@ class SummaryEditor {
} }
this.currentTab = this.tabPlanes.general; this.currentTab = this.tabPlanes.general;
this.#initializeSuggestedAccounts(); this.#initializeSuggestedAccounts();
const editor = this; this.summary.onchange = () => this.#onSummaryChange();
this.summary.onchange = function () { this.#form.onsubmit = () => {
editor.#onSummaryChange(); if (this.currentTab.validate()) {
}; this.#submit();
this.#form.onsubmit = function () {
if (editor.currentTab.validate()) {
editor.#submit();
} }
return false; return false;
}; };
@ -220,11 +217,8 @@ class SummaryEditor {
* *
*/ */
#initializeSuggestedAccounts() { #initializeSuggestedAccounts() {
const editor = this;
for (const accountButton of this.#accountButtons) { for (const accountButton of this.#accountButtons) {
accountButton.onclick = function () { accountButton.onclick = () => this.#selectAccount(accountButton);
editor.#selectAccount(accountButton);
};
} }
} }
@ -307,10 +301,7 @@ class SummaryEditor {
const editor = new SummaryEditor(form); const editor = new SummaryEditor(form);
this.#editors[editor.#entryType] = editor; this.#editors[editor.#entryType] = editor;
} }
const editors = this; formSummaryControl.onclick = () => this.#editors[entryForm.dataset.entryType].#onOpen()
formSummaryControl.onclick = function () {
editors.#editors[entryForm.dataset.entryType].#onOpen();
};
} }
/** /**
@ -365,10 +356,7 @@ class TabPlane {
this.prefix = this.editor.prefix + "-" + this.tabId(); this.prefix = this.editor.prefix + "-" + this.tabId();
this.#tab = document.getElementById(this.prefix + "-tab"); this.#tab = document.getElementById(this.prefix + "-tab");
this.#page = document.getElementById(this.prefix + "-page"); this.#page = document.getElementById(this.prefix + "-page");
const tabPlane = this; this.#tab.onclick = () => this.switchToMe();
this.#tab.onclick = function () {
tabPlane.switchToMe();
};
} }
/** /**
@ -460,10 +448,9 @@ class TagTabPlane extends TabPlane {
// noinspection JSValidateTypes // noinspection JSValidateTypes
this.tagButtons = Array.from(document.getElementsByClassName(this.prefix + "-btn-tag")); this.tagButtons = Array.from(document.getElementsByClassName(this.prefix + "-btn-tag"));
this.initializeTagButtons(); this.initializeTagButtons();
const tabPlane = this; this.tag.onchange = () => {
this.tag.onchange = function () { this.onTagChange();
tabPlane.onTagChange(); this.updateSummary();
tabPlane.updateSummary();
}; };
} }
@ -519,18 +506,17 @@ class TagTabPlane extends TabPlane {
* *
*/ */
initializeTagButtons() { initializeTagButtons() {
const tabPlane = this; for (const tagButton of this.tagButtons) {
for (const tagButton of tabPlane.tagButtons) { tagButton.onclick = () => {
tagButton.onclick = function () { for (const otherButton of this.tagButtons) {
for (const otherButton of tabPlane.tagButtons) {
otherButton.classList.remove("btn-primary"); otherButton.classList.remove("btn-primary");
otherButton.classList.add("btn-outline-primary"); otherButton.classList.add("btn-outline-primary");
} }
tagButton.classList.remove("btn-outline-primary"); tagButton.classList.remove("btn-outline-primary");
tagButton.classList.add("btn-primary"); tagButton.classList.add("btn-primary");
tabPlane.tag.value = tagButton.dataset.value; this.tag.value = tagButton.dataset.value;
tabPlane.editor.filterSuggestedAccounts(tagButton); this.editor.filterSuggestedAccounts(tagButton);
tabPlane.updateSummary(); this.updateSummary();
}; };
} }
} }
@ -702,27 +688,26 @@ class GeneralTripTab extends TagTabPlane {
this.#toError = document.getElementById(this.prefix + "-to-error") this.#toError = document.getElementById(this.prefix + "-to-error")
// noinspection JSValidateTypes // noinspection JSValidateTypes
this.#directionButtons = Array.from(document.getElementsByClassName(this.prefix + "-direction")); this.#directionButtons = Array.from(document.getElementsByClassName(this.prefix + "-direction"));
const tabPlane = this; this.#from.onchange = () => {
this.#from.onchange = function () { this.#from.value = this.#from.value.trim();
tabPlane.#from.value = tabPlane.#from.value.trim(); this.updateSummary();
tabPlane.updateSummary(); this.validateFrom();
tabPlane.validateFrom();
}; };
for (const directionButton of this.#directionButtons) { for (const directionButton of this.#directionButtons) {
directionButton.onclick = function () { directionButton.onclick = () => {
for (const otherButton of tabPlane.#directionButtons) { for (const otherButton of this.#directionButtons) {
otherButton.classList.remove("btn-primary"); otherButton.classList.remove("btn-primary");
otherButton.classList.add("btn-outline-primary"); otherButton.classList.add("btn-outline-primary");
} }
directionButton.classList.remove("btn-outline-primary"); directionButton.classList.remove("btn-outline-primary");
directionButton.classList.add("btn-primary"); directionButton.classList.add("btn-primary");
tabPlane.updateSummary(); this.updateSummary();
}; };
} }
this.#to.onchange = function () { this.#to.onchange = () => {
tabPlane.#to.value = tabPlane.#to.value.trim(); this.#to.value = this.#to.value.trim();
tabPlane.updateSummary(); this.updateSummary();
tabPlane.validateTo(); this.validateTo();
}; };
} }
@ -915,21 +900,20 @@ class BusTripTab extends TagTabPlane {
this.#fromError = document.getElementById(this.prefix + "-from-error"); this.#fromError = document.getElementById(this.prefix + "-from-error");
this.#to = document.getElementById(this.prefix + "-to"); this.#to = document.getElementById(this.prefix + "-to");
this.#toError = document.getElementById(this.prefix + "-to-error") this.#toError = document.getElementById(this.prefix + "-to-error")
const tabPlane = this; this.#route.onchange = () => {
this.#route.onchange = function () { this.#route.value = this.#route.value.trim();
tabPlane.#route.value = tabPlane.#route.value.trim(); this.updateSummary();
tabPlane.updateSummary(); this.validateRoute();
tabPlane.validateRoute();
}; };
this.#from.onchange = function () { this.#from.onchange = () => {
tabPlane.#from.value = tabPlane.#from.value.trim(); this.#from.value = this.#from.value.trim();
tabPlane.updateSummary(); this.updateSummary();
tabPlane.validateFrom(); this.validateFrom();
}; };
this.#to.onchange = function () { this.#to.onchange = () => {
tabPlane.#to.value = tabPlane.#to.value.trim(); this.#to.value = this.#to.value.trim();
tabPlane.updateSummary(); this.updateSummary();
tabPlane.validateTo(); this.validateTo();
}; };
} }
@ -1139,13 +1123,10 @@ class AnnotationTab extends TabPlane {
*/ */
constructor(editor) { constructor(editor) {
super(editor); super(editor);
const tabPlane = this; this.editor.number.onchange = () => this.updateSummary();
this.editor.number.onchange = function () { this.editor.note.onchange = () => {
tabPlane.updateSummary(); this.editor.note.value = this.editor.note.value.trim();
}; this.updateSummary();
this.editor.note.onchange = function () {
tabPlane.editor.note.value = tabPlane.editor.note.value.trim();
tabPlane.updateSummary();
}; };
} }