replace jQuery with ES6
issue: TOBAGO-1633: TS refactoring
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
index ae105e9..da659d8 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
@@ -16,20 +16,17 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
class SelectBooleanCheckbox {
- static init = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
- var checkboxes = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectBooleanCheckbox input[readonly]");
- checkboxes.each(function () {
- // Save the initial state to restore it, when the user tries to manipulate it.
- var initial = jQuery(this).is(":checked");
- jQuery(this).click(function () {
- jQuery(this).prop("checked", initial);
+ static init = function (element: HTMLElement) {
+ for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectBooleanCheckbox input[readonly]")) {
+ checkbox.addEventListener("click", (event: Event) => {
+ // in the "readonly" case, prevent the default, which is changing the "checked" state
+ event.preventDefault();
});
- });
+ }
};
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
index 2330270..1a6cab2 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
@@ -16,20 +16,17 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
class SelectBooleanToggle {
- static init = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
- var toggles = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectBooleanToggle input[readonly]");
- toggles.each(function () {
- // Save the initial state to restore it, when the user tries to manipulate it.
- var initial = jQuery(this).is(":checked");
- jQuery(this).click(function () {
- jQuery(this).prop("checked", initial);
+ static init = function (element: HTMLElement) {
+ for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectBooleanCheckbox input[readonly]")) {
+ checkbox.addEventListener("click", (event: Event) => {
+ // in the "readonly" case, prevent the default, which is changing the "checked" state
+ event.preventDefault();
});
- });
+ }
};
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
index 7a584cc..57000b6 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
@@ -16,20 +16,17 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
class SelectManyCheckbox {
- static init = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
- var checkboxes = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectManyCheckbox input[readonly]");
- checkboxes.each(function () {
- // Save the initial state to restore it, when the user tries to manipulate it.
- var initial = jQuery(this).is(":checked");
- jQuery(this).click(function () {
- jQuery(this).prop("checked", initial);
+ static init = function (element: HTMLElement) {
+ for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectManyCheckbox input[readonly]")) {
+ checkbox.addEventListener("click", (event: Event) => {
+ // in the "readonly" case, prevent the default, which is changing the "checked" state
+ event.preventDefault();
});
- });
+ }
};
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
index 2ed8781..efa9b35 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
@@ -16,60 +16,68 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
class SelectManyShuttle {
- static init = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
- var shuttles = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectManyShuttle:not(.tobago-selectManyShuttle-disabled)");
+ static init = function (element: HTMLElement) {
+ for (const shuttle of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectManyShuttle:not(.tobago-selectManyShuttle-disabled)")) {
- shuttles.find(".tobago-selectManyShuttle-unselected").dblclick(function () {
- SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"), true, false);
- });
+ shuttle.querySelector(".tobago-selectManyShuttle-unselected").addEventListener(
+ "dblclick", (event: Event) => {
+ SelectManyShuttle.moveSelectedItems(event, true, false);
+ });
- shuttles.find(".tobago-selectManyShuttle-selected").dblclick(function () {
- SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"), false, false);
- });
+ shuttle.querySelector(".tobago-selectManyShuttle-selected").addEventListener(
+ "dblclick", (event: Event) => {
+ SelectManyShuttle.moveSelectedItems(event, false, false);
+ });
- shuttles.find(".tobago-selectManyShuttle-addAll").click(function () {
- SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"), true, true);
- });
+ shuttle.querySelector(".tobago-selectManyShuttle-addAll").addEventListener(
+ "click", (event: Event) => {
+ SelectManyShuttle.moveSelectedItems(event, true, true);
+ });
- shuttles.find(".tobago-selectManyShuttle-add").click(function () {
- SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"), true, false);
- });
+ shuttle.querySelector(".tobago-selectManyShuttle-add").addEventListener(
+ "click", (event: Event) => {
+ SelectManyShuttle.moveSelectedItems(event, true, false);
+ });
- shuttles.find(".tobago-selectManyShuttle-removeAll").click(function () {
- SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"), false, true);
- });
+ shuttle.querySelector(".tobago-selectManyShuttle-removeAll").addEventListener(
+ "click", (event: Event) => {
+ SelectManyShuttle.moveSelectedItems(event, false, true);
+ });
- shuttles.find(".tobago-selectManyShuttle-remove").click(function () {
- SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"), false, false);
- });
+ shuttle.querySelector(".tobago-selectManyShuttle-remove").addEventListener(
+ "click", (event: Event) => {
+ SelectManyShuttle.moveSelectedItems(event, false, false);
+ });
+ }
};
- static moveSelectedItems = function ($shuttle, direction, all) {
- var $unselected = $shuttle.find(".tobago-selectManyShuttle-unselected");
- var $selected = $shuttle.find(".tobago-selectManyShuttle-selected");
- var count = $selected.children().length;
- var $source = direction ? $unselected : $selected;
- var $target = direction ? $selected : $unselected;
- var $shifted = $source.find(all ? "option:not(:disabled)" : "option:selected").remove().appendTo($target);
+ static moveSelectedItems = function (event: Event, direction: boolean, all: boolean) {
+ const currentTarget = event.currentTarget as HTMLElement;
+ const shuttle = currentTarget.closest(".tobago-selectManyShuttle");
+ const unselected = shuttle.querySelector(".tobago-selectManyShuttle-unselected");
+ const selected = shuttle.querySelector(".tobago-selectManyShuttle-selected");
+ var oldCount = selected.childElementCount;
+ const source = direction ? unselected : selected;
+ const target = direction ? selected : unselected;
+ const options = source.querySelectorAll(all ? "option:not(:disabled)" : "option:checked");
+ var hidden = shuttle.querySelector(".tobago-selectManyShuttle-hidden");
+ var hiddenOptions = hidden.querySelectorAll("option");
+ for (const option of options as NodeListOf<HTMLOptionElement>) {
+ source.removeChild(option);
+ target.appendChild(option);
+ for (const hiddenOption of hiddenOptions) {
+ if (hiddenOption.value === option.value) {
+ hiddenOption.selected = direction;
+ }
+ }
+ }
- // synchronize the hidden select
- var $hidden = $shuttle.find(".tobago-selectManyShuttle-hidden");
- var $hiddenOptions = $hidden.find("option");
- // todo: may be optimized: put values in a hash map?
- $shifted.each(function () {
- var $option = jQuery(this);
- $hiddenOptions.filter("[value='" + $option.val() + "']").prop("selected", direction);
- });
-
- if (count !== $selected.children().length) {
- var e = jQuery.Event("change");
- // trigger an change event for command facets
- $hidden.trigger(e);
+ if (oldCount !== selected.childElementCount) {
+ hidden.dispatchEvent(new Event("change"));
}
};
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
index c211860..8ac9294 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
@@ -16,28 +16,26 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
class SelectOneListbox {
- static init = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
- var selects = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectOneListbox");
- var notRequired = selects.not(".tobago-selectOneListbox-markup-required");
- notRequired
- .change(function () {
- var element = jQuery(this);
- if (element.data("tobago-old-value") == undefined) {
- element.data("tobago-old-value", -1);
- }
- }).click(function () {
- var element = jQuery(this);
- if (element.data("tobago-old-value") == undefined
- || element.data("tobago-old-value") == element.prop("selectedIndex")) {
- element.prop("selectedIndex", -1);
- }
- element.data("tobago-old-value", element.prop("selectedIndex"));
- });
+ static init = function (element: HTMLElement) {
+ for (const listbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectOneListbox:not(:required)")) {
+ listbox.addEventListener("change", (event: Event) => {
+ const target = event.currentTarget as HTMLSelectElement;
+ if (!target.dataset["tobagoOldValue"]) {
+ target.dataset["tobagoOldValue"] = "-1";
+ }
+ });
+ listbox.addEventListener("click", (event: Event) => {
+ const target = event.currentTarget as HTMLSelectElement;
+ if (!target.dataset["tobagoOldValue"] || parseInt(target.dataset["tobagoOldValue"]) === target.selectedIndex) {
+ target.selectedIndex = -1;
+ }
+ target.dataset["tobagoOldValue"] = String(target.selectedIndex);
+ });
+ }
};
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
index abd8358..d0bc7f8 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
@@ -16,47 +16,42 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
class SelectOneRadio {
- static init = function (elements) {
- elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
- var selectOneRadios = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectOneRadio");
- selectOneRadios.each(function () {
- var ul = jQuery(this);
- var id = ul.closest("[id]").attr("id");
- var radios = jQuery('input[name="' + id.replace(/([:\.])/g, '\\$1') + '"]');
- radios.each(function () {
- var selectOneRadio = jQuery(this);
- selectOneRadio.data("tobago-old-value", selectOneRadio.prop("checked"));
- });
- radios.click(function () {
- var selectOneRadio = jQuery(this);
- var readonly = selectOneRadio.prop("readonly");
- var required = selectOneRadio.prop("required");
- if (!required && !readonly) {
- if (selectOneRadio.data("tobago-old-value") == selectOneRadio.prop("checked")) {
- selectOneRadio.prop("checked", false);
- }
- selectOneRadio.data("tobago-old-value", selectOneRadio.prop("checked"));
- }
- if (readonly) {
- radios.each(function () {
- var radio = jQuery(this);
- radio.prop("checked", radio.data("tobago-old-value"));
- });
- } else {
- radios.each(function () {
- if (this.id != selectOneRadio.get(0).id) {
- var radio = jQuery(this);
- radio.prop("checked", false);
- radio.data("tobago-old-value", radio.prop("checked"));
+ static init = function (element: HTMLElement) {
+ for (const radio of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectOneRadio")) {
+ const id = radio.closest("[id]").id;
+ const quotedId = id.replace(/([:.])/g, '\\$1');
+ const allConnected = document.querySelectorAll("input[name=" + quotedId + "]") as NodeListOf<HTMLInputElement>;
+ for (const connectedRadio of allConnected) {
+ connectedRadio.dataset["tobagoOldValue"] = String(connectedRadio.checked);
+ connectedRadio.addEventListener("click", (event: Event) => {
+ const target = event.currentTarget as HTMLInputElement;
+ const readOnly = target.readOnly;
+ const required = target.required;
+ if (!required && !readOnly) {
+ if (target.dataset["tobagoOldValue"] === String(target.checked)) {
+ target.checked = false;
}
- });
- }
- });
- });
+ target.dataset["tobagoOldValue"] = String(target.checked);
+ }
+ if (readOnly) {
+ for (const connectedRadio of allConnected) {
+ connectedRadio.checked = connectedRadio.dataset["tobagoOldValue"] === "true";
+ }
+ } else {
+ for (const connectedRadio of allConnected) {
+ if (target.id != connectedRadio.id) {
+ connectedRadio.checked = false;
+ connectedRadio.dataset["tobagoOldValue"] = String(connectedRadio.checked);
+ }
+ }
+ }
+ });
+ }
+ }
};
}
