You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2019/07/30 14:26:35 UTC
[myfaces-tobago] branch master updated: TOBAGO-1633: TS
refactoring: tc:tree
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new 31eadaf TOBAGO-1633: TS refactoring: tc:tree
31eadaf is described below
commit 31eadaf8a5490440acf96d4db73211b0c0377b9a
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Tue Jul 30 16:26:25 2019 +0200
TOBAGO-1633: TS refactoring: tc:tree
* remove jQuery
* fix multicascade
* fix test
---
.../090-tree/01-select/Tree_Select.test.js | 42 ++++--
.../src/main/npm/ts/tobago-tree.ts | 147 ++++++++++-----------
2 files changed, 100 insertions(+), 89 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js
index 29e5238..c683d3f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {jQueryFrameFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
QUnit.test("single: select Music, select Mathematics", function (assert) {
@@ -193,31 +193,43 @@ QUnit.test("multiLeafOnly: select Classic, select Mathematics, deselect Classic"
});
QUnit.test("multiCascade: select Music, select Mathematics, deselect Classic", function (assert) {
- var musicFn = jQueryFrameFn("#page\\:mainForm\\:categoriesTree\\:3\\:select");
- var classicFn = jQueryFrameFn("#page\\:mainForm\\:categoriesTree\\:4\\:select");
- var mathematicsFn = jQueryFrameFn("#page\\:mainForm\\:categoriesTree\\:9\\:select");
+ var musicFn = testFrameQuerySelectorFn("#page\\:mainForm\\:categoriesTree\\:3\\:select");
+ var classicFn = testFrameQuerySelectorFn("#page\\:mainForm\\:categoriesTree\\:4\\:select");
+ var mathematicsFn = testFrameQuerySelectorFn("#page\\:mainForm\\:categoriesTree\\:9\\:select");
var outputFn = jQueryFrameFn("#page\\:mainForm\\:selectedNodesOutput span");
- var selectableNoneFn = jQueryFrameFn("#page\\:mainForm\\:selectable\\:\\:0");
- var selectableMultiCascadeFn = jQueryFrameFn("#page\\:mainForm\\:selectable\\:\\:5");
+ var selectableNoneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:0");
+ var selectableMultiCascadeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:5");
var inputFn = jQueryFrameFn(".tobago-treeSelect input");
var TTT = new TobagoTestTool(assert);
TTT.action(function () {
- selectableNoneFn().prop("checked", true).trigger("change");
+ selectableNoneFn().checked = true;
+
+ const event = document.createEvent('HTMLEvents');
+ event.initEvent('change', true, false);
+ selectableNoneFn().dispatchEvent(event);
});
TTT.waitForResponse();
TTT.asserts(1, function () {
assert.equal(inputFn().length, 0);
});
TTT.action(function () {
- selectableMultiCascadeFn().prop("checked", true).trigger("change");
+ selectableMultiCascadeFn().checked = true;
+
+ const event = document.createEvent('HTMLEvents');
+ event.initEvent('change', true, false);
+ selectableMultiCascadeFn().dispatchEvent(event);
});
TTT.waitForResponse();
TTT.asserts(1, function () {
assert.notEqual(inputFn().length, 0);
});
TTT.action(function () {
- musicFn().prop("checked", true).trigger("change");
+ musicFn().checked = true;
+
+ const event = document.createEvent('HTMLEvents');
+ event.initEvent('change', true, false);
+ musicFn().dispatchEvent(event);
});
TTT.waitForResponse(); // an ajax request is send for every leaf (Music, Classic, Pop, World)
TTT.waitMs(2000); // wait for the last ajax
@@ -225,14 +237,22 @@ QUnit.test("multiCascade: select Music, select Mathematics, deselect Classic", f
assert.equal(outputFn().text(), "Music, Classic, Pop, World");
});
TTT.action(function () {
- mathematicsFn().prop("checked", true).trigger("change");
+ mathematicsFn().checked = true;
+
+ const event = document.createEvent('HTMLEvents');
+ event.initEvent('change', true, false);
+ mathematicsFn().dispatchEvent(event);
});
TTT.waitForResponse();
TTT.asserts(1, function () {
assert.equal(outputFn().text(), "Music, Classic, Pop, World, Mathematics");
});
TTT.action(function () {
- classicFn().prop("checked", false).trigger("change");
+ classicFn().checked = false;
+
+ const event = document.createEvent('HTMLEvents');
+ event.initEvent('change', true, false);
+ classicFn().dispatchEvent(event);
});
TTT.waitForResponse();
TTT.asserts(1, function () {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
index 104aa46..a843aa1 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
@@ -16,13 +16,13 @@
*/
import {Listener, Phase} from "./tobago-listener";
-import {DomUtils, Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
class Tree {
static toggleNode = function (event: MouseEvent) {
const element = event.currentTarget as HTMLElement;
- const node = element.closest(".tobago-treeNode");
+ const node: HTMLDivElement = element.closest(".tobago-treeNode") as HTMLDivElement;
const data = node.closest(".tobago-tree, .tobago-sheet") as HTMLElement;
const expanded = DomUtils.childrenQuerySelector(data,
".tobago-tree-expanded, .tobago-sheet-expanded") as HTMLInputElement;
@@ -77,39 +77,35 @@ class Tree {
/**
* Hide all children of the node recursively.
- * @param node A jQuery-Object as a node of the tree.
+ * @param node A HTMLElement as a node of the tree.
*/
- static hideChildren = function (node: Element) {
- const children = Tree.findChildren(node);
- children.each(function () {
- const child = this;
+ static hideChildren = function (node: HTMLElement): void {
+ for (const child of Tree.findTreeChildren(node)) {
if (Tree.isInSheet(node)) {
- child.parentNode.parentNode.classList.add("d-none");
+ child.parentElement.parentElement.classList.add("d-none");
} else {
child.classList.add("d-none");
}
Tree.hideChildren(child);
- });
+ }
};
/**
* Show the children of the node recursively, there parents are expanded.
- * @param node A jQuery-Object as a node of the tree.
+ * @param node A HTMLElement as a node of the tree.
* @param expanded The hidden field which contains the expanded state.
* @return is reload needed (to get all nodes from the server)
*/
- static showChildren = function (node: Element, expanded: HTMLInputElement) {
- const children = Tree.findChildren(node);
- if (children.length == 0) {
- // no children in DOM, reload it from the server
+ static showChildren = function (node: HTMLElement, expanded: HTMLInputElement): boolean {
+ const children = Tree.findTreeChildren(node);
+ if (children.length === 0) {
return true;
}
- children.each(function () {
- const child = this;
+ for (const child of children) {
if (Tree.isInSheet(node)) {
- this.parentNode.parentNode.classList.remove("d-none");
+ child.parentElement.parentElement.classList.remove("d-none");
} else {
- this.classList.remove("d-none");
+ child.classList.remove("d-none");
}
if (Tree.isExpanded(child, expanded)) {
const reload = Tree.showChildren(child, expanded);
@@ -117,7 +113,7 @@ class Tree {
return true;
}
}
- });
+ }
return false;
};
@@ -133,7 +129,6 @@ class Tree {
}
}
node.classList.add("tobago-treeNode-markup-selected");
- console.info("-----------------> focus ---> " + node.id); // remove
};
static init = function (element: HTMLElement) {
@@ -147,72 +142,64 @@ class Tree {
command.addEventListener("focus", Tree.commandFocus);
}
- var elements = jQuery(elements); // fixme remove!
-
- // selected for treeSelect
- Tobago4Utils.selectWithJQuery(elements, ".tobago-treeSelect > input").change(function () {
- var select = jQuery(this);
- var selected = select.prop("checked");
- var data = select.closest(".tobago-tree, .tobago-sheet");
- const hidden: HTMLInputElement
- = data.children(".tobago-tree-selected, .tobago-sheet-selected").get(0);
- let value: Set<number>;
- // todo may use an class attribute for this value
- if (select.attr("type") === "radio") {
- value = new Set();
- value.add(Tree.rowIndex(select.get(0)));
- } else if (selected) {
- value = Tree.getSet(hidden);
- value.add(Tree.rowIndex(select.get(0)));
- } else {
- value = Tree.getSet(hidden);
- value.delete(Tree.rowIndex(select.get(0)));
- }
- Tree.setSet(hidden, value);
- });
-
- // init selected field
- Tobago4Utils.selectWithJQuery(elements, ".tobago-tree, .tobago-sheet").each(function () {
- const data: HTMLElement = this;
- const hidden = DomUtils.childrenQuerySelector(data, ".tobago-tree-selected, .tobago-sheet-selected");
- if (hidden) {
+ for (const e of DomUtils.selfOrQuerySelectorAll(element, ".tobago-sheet, .tobago-tree")) {
+ const sheetOrTree: HTMLDivElement = e as HTMLDivElement;
+
+ // init selected field
+ const hiddenInputSelected: HTMLInputElement = sheetOrTree.querySelector(":scope > .tobago-sheet-selected, :scope > .tobago-tree-selected");
+ if (hiddenInputSelected) {
const value = new Set<number>();
- for (const selected of data.querySelectorAll(".tobago-treeNode-markup-selected")) {
+ for (const selected of sheetOrTree.querySelectorAll(".tobago-treeNode-markup-selected")) {
value.add(Tree.rowIndex(selected));
}
- Tree.setSet(hidden, value);
+ Tree.setSet(hiddenInputSelected, value);
}
- });
- // init expanded field
- Tobago4Utils.selectWithJQuery(elements, ".tobago-tree, .tobago-sheet").each(function () {
- const hidden: HTMLInputElement = jQuery(this).children(".tobago-tree-expanded, .tobago-sheet-expanded").get(0);
- if (hidden) {
+ // selected for treeSelect
+ for (const select of sheetOrTree.querySelectorAll(".tobago-treeSelect > input") as NodeListOf<HTMLInputElement>) {
+ let value: Set<number>;
+ // todo may use an class attribute for this value
+ if (select.type === "radio") {
+ value = new Set();
+ value.add(Tree.rowIndex(select));
+ } else if (select.checked) {
+ value = Tree.getSet(hiddenInputSelected);
+ value.add(Tree.rowIndex(select));
+ } else {
+ value = Tree.getSet(hiddenInputSelected);
+ value.delete(Tree.rowIndex(select));
+ }
+ Tree.setSet(hiddenInputSelected, value);
+ }
+
+ // init expanded field
+ const hiddenInputExpanded: HTMLInputElement = sheetOrTree.querySelector(":scope > .tobago-sheet-expanded, :scope > .tobago-tree-expanded");
+ if (hiddenInputExpanded) {
const value = new Set<number>();
- jQuery(this).find(".tobago-treeNode-markup-expanded").each(function () {
- value.add(Tree.rowIndex(this));
- });
- Tree.setSet(hidden, value);
+ for (const expanded of sheetOrTree.querySelectorAll(".tobago-treeNode-markup-expanded")) {
+ value.add(Tree.rowIndex(expanded));
+ }
+ Tree.setSet(hiddenInputExpanded, value);
}
- });
-
- // init tree selection for multiCascade
- Tobago4Utils.selectWithJQuery(elements, ".tobago-tree[data-tobago-selectable=multiCascade]").each(function () {
- var tree = jQuery(this);
- tree.find("input[type=checkbox]").each(function () {
- jQuery(this).change(function (event) {
- var node = jQuery(event.target).parents(".tobago-treeNode");
- var checked = node.find("input[type=checkbox]").prop("checked");
- var children = Tree.findChildren(node.get(0));
- children.each(function () {
- var childsCheckbox = jQuery(this).find("input[type=checkbox]");
- childsCheckbox.prop("checked", checked);
- childsCheckbox.change();
- });
- });
- });
- });
+ // init tree selection for multiCascade
+ if (sheetOrTree.dataset.tobagoSelectable === "multiCascade") {
+ for (const treeNode of sheetOrTree.querySelectorAll(".tobago-treeNode") as NodeListOf<HTMLDivElement>) {
+
+ const checkbox: HTMLInputElement = treeNode.querySelector(".tobago-treeSelect input[type=checkbox]");
+ checkbox.addEventListener("change", function (event: Event) {
+ for (const childTreeNode of Tree.findTreeChildren(treeNode)) {
+ const childCheckbox: HTMLInputElement = childTreeNode.querySelector(".tobago-treeSelect input[type=checkbox]");
+ childCheckbox.checked = checkbox.checked;
+
+ const event = document.createEvent('HTMLEvents');
+ event.initEvent('change', true, false);
+ childCheckbox.dispatchEvent(event);
+ }
+ });
+ }
+ }
+ }
};
static getSet(element: HTMLInputElement): Set<number> {
@@ -243,6 +230,10 @@ class Tree {
return children;
};
+ static findTreeChildren = function (treeNode: HTMLElement): NodeListOf<HTMLDivElement> {
+ return treeNode.parentElement.querySelectorAll(".tobago-treeNode[data-tobago-tree-parent='" + treeNode.id + "']");
+ };
+
static isInSheet = function (node: Element) {
return node.parentElement.tagName === "TD";
};