tobago-select-many-shuttle: custom elements
Using custom elements for tobago-select-many-shuttle.ts
Test added.
issue: TOBAGO-1633: TS refactoring
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java
index 563a070..ea31468 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyShuttleRenderer.java
@@ -40,6 +40,10 @@
public class SelectManyShuttleRenderer extends SelectManyRendererBase {
+ public HtmlElements getComponentTag() {
+ return HtmlElements.TOBAGO_SELECT_MANY_SHUTTLE;
+ }
+
@Override
public void encodeBeginField(final FacesContext facesContext, final UIComponent component) throws IOException {
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index 3b1a990..f6ecb2c 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -145,6 +145,7 @@
TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
TOBAGO_SELECT_MANY_CHECKBOX("tobago-select-many-checkbox"),
+ TOBAGO_SELECT_MANY_SHUTTLE("tobago-select-many-shuttle"),
TOBAGO_STARS("tobago-stars"),
TOBAGO_SUGGEST("tobago-suggest"),
TOBAGO_TAB("tobago-tab"),
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.test.js
new file mode 100644
index 0000000..1593716
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.test.js
@@ -0,0 +1,141 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
+import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
+
+QUnit.test("submit: addAll, removeAll, addItem0to4, removeItem2to3", function (assert) {
+ let unselectedOptions = testFrameQuerySelectorAllFn("#page\\:mainForm\\:submitExample\\:\\:unselected option");
+ let selectedOptions = testFrameQuerySelectorAllFn("#page\\:mainForm\\:submitExample\\:\\:selected option");
+ let addAllButton = testFrameQuerySelectorFn("#page\\:mainForm\\:submitExample\\:\\:addAll");
+ let addButton = testFrameQuerySelectorFn("#page\\:mainForm\\:submitExample\\:\\:add");
+ let removeButton = testFrameQuerySelectorFn("#page\\:mainForm\\:submitExample\\:\\:remove");
+ let removeAllButton = testFrameQuerySelectorFn("#page\\:mainForm\\:submitExample\\:\\:removeAll");
+ let submitButton = testFrameQuerySelectorFn("#page\\:mainForm\\:submitButton");
+ let output = testFrameQuerySelectorFn("#page\\:mainForm\\:submitExampleOutput span");
+
+ let TTT = new TobagoTestTool(assert);
+ TTT.action(function () {
+ addAllButton().click();
+ submitButton().click();
+ });
+ TTT.waitForResponse();
+ TTT.asserts(3, function () {
+ assert.equal(unselectedOptions().length, 0);
+ assert.equal(selectedOptions().length, 9);
+ assert.equal(output().textContent, "[Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, Pluto]");
+ });
+ TTT.action(function () {
+ removeAllButton().click();
+ submitButton().click();
+ });
+ TTT.waitForResponse();
+ TTT.asserts(3, function () {
+ assert.equal(unselectedOptions().length, 9);
+ assert.equal(selectedOptions().length, 0);
+ assert.equal(output().textContent, "[]");
+ });
+ TTT.action(function () {
+ unselectedOptions().item(0).selected = true;
+ unselectedOptions().item(1).selected = true;
+ unselectedOptions().item(2).selected = true;
+ unselectedOptions().item(3).selected = true;
+ unselectedOptions().item(4).selected = true;
+ addButton().click();
+ submitButton().click();
+ });
+ TTT.waitForResponse();
+ TTT.asserts(3, function () {
+ assert.equal(unselectedOptions().length, 4);
+ assert.equal(selectedOptions().length, 5);
+ assert.equal(output().textContent, "[Mercury, Venus, Earth, Mars, Jupiter]");
+ });
+ TTT.action(function () {
+ selectedOptions().item(2).selected = true;
+ selectedOptions().item(3).selected = true;
+ removeButton().click();
+ submitButton().click();
+ });
+ TTT.waitForResponse();
+ TTT.asserts(3, function () {
+ assert.equal(unselectedOptions().length, 6);
+ assert.equal(selectedOptions().length, 3);
+ assert.equal(output().textContent, "[Mercury, Venus, Jupiter]");
+ });
+ TTT.startTest();
+});
+
+QUnit.test("ajax: addAll, removeAll, addItem1to2, removeItem0", function (assert) {
+ let unselectedOptions = testFrameQuerySelectorAllFn("#page\\:mainForm\\:ajaxExample\\:\\:unselected option");
+ let selectedOptions = testFrameQuerySelectorAllFn("#page\\:mainForm\\:ajaxExample\\:\\:selected option");
+ let addAllButton = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxExample\\:\\:addAll");
+ let addButton = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxExample\\:\\:add");
+ let removeButton = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxExample\\:\\:remove");
+ let removeAllButton = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxExample\\:\\:removeAll");
+ let output = testFrameQuerySelectorFn("#page\\:mainForm\\:outputStars span");
+
+ let TTT = new TobagoTestTool(assert);
+ TTT.action(function () {
+ addAllButton().click();
+ });
+ // TTT.waitForResponse(); //TODO use waitForResponse()
+ TTT.waitMs(5000);
+ TTT.asserts(6, function () {
+ assert.equal(unselectedOptions().length, 0);
+ assert.equal(selectedOptions().length, 4);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(0).value) > 0);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(1).value) > 0);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(2).value) > 0);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(3).value) > 0);
+ });
+ TTT.action(function () {
+ removeAllButton().click();
+ });
+ // TTT.waitForResponse(); //TODO use waitForResponse()
+ TTT.waitMs(5000);
+ TTT.asserts(3, function () {
+ assert.equal(unselectedOptions().length, 4);
+ assert.equal(selectedOptions().length, 0);
+ assert.equal(output().textContent, "[]");
+ });
+ TTT.action(function () {
+ unselectedOptions().item(1).selected = true;
+ unselectedOptions().item(2).selected = true;
+ addButton().click();
+ });
+ // TTT.waitForResponse(); //TODO use waitForResponse()
+ TTT.waitMs(5000);
+ TTT.asserts(4, function () {
+ assert.equal(unselectedOptions().length, 2);
+ assert.equal(selectedOptions().length, 2);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(0).value) > 0);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(1).value) > 0);
+ });
+ TTT.action(function () {
+ selectedOptions().item(0).selected = true;
+ selectedOptions().item(1).selected = false;
+ removeButton().click();
+ });
+ // TTT.waitForResponse(); //TODO use waitForResponse()
+ TTT.waitMs(5000);
+ TTT.asserts(3, function () {
+ assert.equal(unselectedOptions().length, 3);
+ assert.equal(selectedOptions().length, 1);
+ assert.ok(output().textContent.indexOf(selectedOptions().item(0).value) > 0);
+ });
+ TTT.startTest();
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.xhtml
index b7de6b4..aaf990e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/70-selectManyShuttle/Shuttle.xhtml
@@ -98,14 +98,14 @@
<pre><code class="language-markup"><tc:selectManyShuttle label="Planets" ...>
<tc:selectItems value="\#{selectManyShuttleController.planets}" .../>
</tc:selectManyShuttle></code></pre>
- <tc:selectManyShuttle id="s4" label="Planets" labelLayout="top"
+ <tc:selectManyShuttle id="submitExample" label="Planets" labelLayout="top"
unselectedLabel="Left List" selectedLabel="Right List"
value="#{selectManyShuttleController.selectedPlanets}">
<tc:selectItems value="#{selectManyShuttleController.planets}"
var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
</tc:selectManyShuttle>
- <tc:out id="o1" label="Selected Planets" value="#{selectManyShuttleController.selectedPlanetsAsString}"/>
- <tc:button label="Submit"/>
+ <tc:out id="submitExampleOutput" label="Selected Planets" value="#{selectManyShuttleController.selectedPlanetsAsString}"/>
+ <tc:button id="submitButton" label="Submit"/>
</tc:section>
<tc:section label="Ajax">
@@ -114,7 +114,7 @@
<code class="language-markup"><tc:selectManyShuttle .../></code> contain
<code class="language-markup"><f:ajax render="outputStars"/></code>. Every time, the value in the shuttle list
change, the outputfield is rerendered.</p>
- <tc:selectManyShuttle id="s5" label="Stars" labelLayout="top" value="#{selectManyShuttleController.selectedStars}">
+ <tc:selectManyShuttle id="ajaxExample" label="Stars" labelLayout="top" value="#{selectManyShuttleController.selectedStars}">
<tc:selectItems value="#{selectManyShuttleController.stars}"/>
<f:ajax render="outputStars"/>
</tc:selectManyShuttle>
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 8db3da2..1cf4161 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
@@ -15,73 +15,103 @@
* limitations under the License.
*/
-import {Listener, Phase} from "./tobago-listener";
-import {DomUtils} from "./tobago-utils";
+class SelectManyShuttle extends HTMLElement {
-class SelectManyShuttle {
+ constructor() {
+ super();
+ }
- static init = function (element: HTMLElement): void {
- for (const shuttle of DomUtils.selfOrQuerySelectorAll(
- element, ".tobago-selectManyShuttle:not(.tobago-selectManyShuttle-disabled)")) {
-
- shuttle.querySelector(".tobago-selectManyShuttle-unselected").addEventListener(
- "dblclick", (event: Event) => {
- SelectManyShuttle.moveSelectedItems(event, true, false);
- });
-
- shuttle.querySelector(".tobago-selectManyShuttle-selected").addEventListener(
- "dblclick", (event: Event) => {
- SelectManyShuttle.moveSelectedItems(event, false, false);
- });
-
- shuttle.querySelector(".tobago-selectManyShuttle-addAll").addEventListener(
- "click", (event: Event) => {
- SelectManyShuttle.moveSelectedItems(event, true, true);
- });
-
- shuttle.querySelector(".tobago-selectManyShuttle-add").addEventListener(
- "click", (event: Event) => {
- SelectManyShuttle.moveSelectedItems(event, true, false);
- });
-
- shuttle.querySelector(".tobago-selectManyShuttle-removeAll").addEventListener(
- "click", (event: Event) => {
- SelectManyShuttle.moveSelectedItems(event, false, true);
- });
-
- shuttle.querySelector(".tobago-selectManyShuttle-remove").addEventListener(
- "click", (event: Event) => {
- SelectManyShuttle.moveSelectedItems(event, false, false);
- });
- }
- };
-
- static moveSelectedItems = function (event: Event, direction: boolean, all: boolean): void {
- 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");
- const oldCount = selected.childElementCount;
- const source = direction ? unselected : selected;
- const target = direction ? selected : unselected;
- const options = source.querySelectorAll(all ? "option:not(:disabled)" : "option:checked");
- const hidden = shuttle.querySelector(".tobago-selectManyShuttle-hidden");
- const 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;
- }
- }
+ connectedCallback(): void {
+ if (this.unselectedSelect.getAttribute("readonly") !== "readonly" && !this.unselectedSelect.disabled) {
+ this.unselectedSelect.addEventListener("dblclick", this.addSelectedItems.bind(this));
}
- if (oldCount !== selected.childElementCount) {
- hidden.dispatchEvent(new Event("change"));
+ if (this.selectedSelect.getAttribute("readonly") !== "readonly" && !this.selectedSelect.disabled) {
+ this.selectedSelect.addEventListener("dblclick", this.removeSelectedItems.bind(this));
}
- };
+
+ if (!this.addAllButton.disabled) {
+ this.addAllButton.addEventListener("click", this.addAllItems.bind(this));
+ }
+
+ if (!this.addButton.disabled) {
+ this.addButton.addEventListener("click", this.addSelectedItems.bind(this));
+ }
+
+ if (!this.removeButton.disabled) {
+ this.removeButton.addEventListener("click", this.removeSelectedItems.bind(this));
+ }
+
+ if (!this.removeAllButton.disabled) {
+ this.removeAllButton.addEventListener("click", this.removeAllItems.bind(this));
+ }
+ }
+
+ private addAllItems(event: MouseEvent): void {
+ this.addItems(this.unselectedSelect.querySelectorAll("option:not(:disabled)"));
+ }
+
+ private addSelectedItems(event: MouseEvent): void {
+ this.addItems(this.unselectedSelect.querySelectorAll("option:checked"));
+ }
+
+ private removeSelectedItems(event: MouseEvent): void {
+ this.removeItems(this.selectedSelect.querySelectorAll("option:checked"));
+ }
+
+ private removeAllItems(event: MouseEvent): void {
+ this.removeItems(this.selectedSelect.querySelectorAll("option:not(:disabled)"));
+ }
+
+ private addItems(options: NodeListOf<HTMLOptionElement>): void {
+ for (const option of options) {
+ this.selectedSelect.add(option);
+ this.changeHiddenOption(option, true);
+ }
+ }
+
+ private removeItems(options: NodeListOf<HTMLOptionElement>): void {
+ for (const option of options) {
+ this.unselectedSelect.add(option);
+ this.changeHiddenOption(option, false);
+ }
+ }
+
+ private changeHiddenOption(option: HTMLOptionElement, select: boolean): void {
+ const hiddenOption: HTMLOptionElement = this.hiddenSelect.querySelector("option[value='" + option.value + "']");
+ hiddenOption.selected = select;
+ this.dispatchEvent(new Event("change"));
+ }
+
+ get unselectedSelect(): HTMLSelectElement {
+ return this.querySelector(".tobago-selectManyShuttle-unselected");
+ }
+
+ get selectedSelect(): HTMLSelectElement {
+ return this.querySelector(".tobago-selectManyShuttle-selected");
+ }
+
+ get hiddenSelect(): HTMLSelectElement {
+ return this.querySelector(".tobago-selectManyShuttle-hidden");
+ }
+
+ get addAllButton(): HTMLButtonElement {
+ return this.querySelector(".tobago-selectManyShuttle-addAll");
+ }
+
+ get addButton(): HTMLButtonElement {
+ return this.querySelector(".tobago-selectManyShuttle-add");
+ }
+
+ get removeButton(): HTMLButtonElement {
+ return this.querySelector(".tobago-selectManyShuttle-remove");
+ }
+
+ get removeAllButton(): HTMLButtonElement {
+ return this.querySelector(".tobago-selectManyShuttle-removeAll");
+ }
}
-Listener.register(SelectManyShuttle.init, Phase.DOCUMENT_READY);
-Listener.register(SelectManyShuttle.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+ window.customElements.define("tobago-select-many-shuttle", SelectManyShuttle);
+});
