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 2023/11/22 14:13:55 UTC
(myfaces-tobago) branch tobago-5.x updated (52447636a1 -> c476756ec2)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
from 52447636a1 feat(sheet): custom event support for sheet row selection (#4514)
new 79c9a74a89 fix(command): stop event propagation
new c476756ec2 build(theme): rebuild after fixing sheet button click
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../50-button-in-sheet/Button_in_sheet.test.js | 104 +++++++++++++++++++++
.../50-button-in-sheet/Button_in_sheet.xhtml} | 32 ++++---
.../tobago-theme-standard/src/main/js/tobago.js | 8 +-
.../src/main/js/tobago.js.map | 2 +-
.../src/main/ts/tobago-sheet.ts | 31 ++++++
5 files changed, 161 insertions(+), 16 deletions(-)
create mode 100644 tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js
copy tobago-example/tobago-example-demo/src/main/webapp/content/{080-sheet/25-selection/Sheet_Selectionchange.xhtml => 900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml} (59%)
(myfaces-tobago) 01/02: fix(command): stop event propagation
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 79c9a74a895e8876534a589181c6b0992919668a
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed Nov 22 13:53:34 2023 +0100
fix(command): stop event propagation
* revert changes on tobago-behavior because it's to general
* fix the issue directly in sheet
* add test
Issue: TOBAGO-2263
---
.../50-button-in-sheet/Button_in_sheet.test.js | 104 +++++++++++++++++++++
.../50-button-in-sheet/Button_in_sheet.xhtml | 61 ++++++++++++
.../src/main/ts/tobago-sheet.ts | 31 ++++++
3 files changed, 196 insertions(+)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js
new file mode 100644
index 0000000000..78ab972873
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js
@@ -0,0 +1,104 @@
+/*
+ * 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 {elementByIdFn, querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
+import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+
+it("submit button", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const submitButton = elementByIdFn("page:mainForm:sheet:0:submitButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", submitButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("ajax button", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const ajaxButton = elementByIdFn("page:mainForm:sheet:0:ajaxButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", ajaxButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("submit button in panel", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const submitButton = elementByIdFn("page:mainForm:sheet:0:submitPanelButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", submitButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("ajax button in panel", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const ajaxButton = elementByIdFn("page:mainForm:sheet:0:ajaxPanelButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", ajaxButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("select 'gamma' from list", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const listField = elementByIdFn("page:mainForm:sheet:0:list::field")
+ const listOptions = querySelectorAllFn("#page\\:mainForm\\:sheet\\:0\\:list option");
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.do(() => listOptions().item(0).selected = false);
+ test.do(() => listOptions().item(1).selected = false);
+ test.do(() => listOptions().item(2).selected = true); //Gamma
+ test.do(() => listOptions().item(3).selected = false);
+ test.event("change", listField, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml
new file mode 100644
index 0000000000..b1228d7433
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * 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.
+-->
+
+<ui:composition template="/main.xhtml"
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:f="http://xmlns.jcp.org/jsf/core"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+ <tc:out id="timestamp" label="Timestamp" value="#{eventController.currentTimestamp}"/>
+
+ <tc:sheet id="sheet" value="#{sheetController.solarList}" var="object" rows="4">
+ <tc:style maxHeight="500px"/>
+ <tc:column label="Name">
+ <tc:button id="submitButton" label="Submit"/>
+ <tc:button id="ajaxButton" label="Ajax"/>
+ <tc:link id="link" label="apache" link="https://www.apache.org/"/>
+ </tc:column>
+ <tc:column label="Orbit">
+ <tc:panel>
+ <tc:button id="submitPanelButton" label="Submit"/>
+ <tc:button id="ajaxPanelButton" label="Ajax">
+ <f:ajax render=":::timestamp"/>
+ </tc:button>
+ </tc:panel>
+ <tc:out id="outOrbit" value="#{object.orbit}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="Period (Days)">
+ <tc:selectOneListbox id="list" label="List" size="3">
+ <tc:selectItem itemLabel="Alpha"/>
+ <tc:selectItem itemLabel="Beta"/>
+ <tc:selectItem itemLabel="Gamma"/>
+ <tc:selectItem itemLabel="Delta"/>
+ <f:ajax render=":::timestamp"/>
+ </tc:selectOneListbox>
+ <tc:out value="#{object.period}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="Discoverer">
+ <tc:out value="#{object.discoverer}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="Year">
+ <tc:out value="#{object.discoverYear}" labelLayout="skip"/>
+ </tc:column>
+ </tc:sheet>
+</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
index a9f1c3bb68..73753dc080 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
@@ -626,6 +626,37 @@ Type: ${data.type}`);
}
clickOnRow(event: MouseEvent): void {
+ let clickElement: HTMLElement = event.target as HTMLElement;
+ while (clickElement.tagName !== "TR") {
+ if (clickElement.tagName === "A"
+ || clickElement.tagName === "BUTTON"
+ || clickElement.tagName === "TOBAGO-DATE"
+ || clickElement.tagName === "TOBAGO-DROPDOWN"
+ || clickElement.tagName === "TOBAGO-FILE"
+ || clickElement.tagName === "TOBAGO-IN"
+ || clickElement.tagName === "TOBAGO-RANGE"
+ || clickElement.tagName === "TOBAGO-SELECT-BOOLEAN-CHECKBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-BOOLEAN-TOGGLE"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-CHECKBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-LIST"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-LISTBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-SHUTTLE"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-CHOICE"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-LIST"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-LISTBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-RADIO"
+ || clickElement.tagName === "TOBAGO-STARS"
+ || clickElement.tagName === "TOBAGO-TAB-GROUP"
+ || clickElement.tagName === "TOBAGO-TEXTAREA"
+ || clickElement.tagName === "TOBAGO-TREE"
+ || clickElement.tagName === "BUTTON") {
+ // click on a button/link/form-component should not select row TOBAGO-2263
+ return;
+ } else {
+ clickElement = clickElement.parentElement;
+ }
+ }
+
const row = event.currentTarget as HTMLTableRowElement;
if (row.classList.contains(Css.TOBAGO_SELECTED) || !Sheet.isInputElement(row)) {
(myfaces-tobago) 02/02: build(theme): rebuild after fixing sheet button click
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit c476756ec28ebe8509424c9fd56e8189fdb72289
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed Nov 22 14:48:46 2023 +0100
build(theme): rebuild after fixing sheet button click
---
tobago-theme/tobago-theme-standard/src/main/js/tobago.js | 8 ++++----
tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
index 5e94ca4d5b..fe050e3c7b 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
@@ -1,19 +1,19 @@
-!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";var e;!function(e){e.ACTIVE="active",e.AUTOCOMPLETE="autocomplete",e.AUTOCOMPLETE_INPUT="autocomplete-input",e.BOTTOM_0="bottom-0",e.COLLAPSE="collapse",e.COLLAPSING="collapsing",e.D_NONE="d-none",e.DISABLED="disabled",e.DROPDOWN="dropdown",e.DROPDOWN_ITEM="dropdown-item",e.DROPDOWN_MENU="dropdown-menu",e.DROPDOWN_MENU_END="dropdown-menu-end",e.END_0="end-0",e.FADE="fade",e.FIXED_BOTTOM="fixed-bott [...]
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";var e;!function(e){e.ACTIVE="active",e.AUTOCOMPLETE="autocomplete",e.AUTOCOMPLETE_INPUT="autocomplete-input",e.BOTTOM_0="bottom-0",e.COLLAPSE="collapse",e.COLLAPSING="collapsing",e.D_NONE="d-none",e.DISABLED="disabled",e.DROPDOWN="dropdown",e.DROPDOWN_ITEM="dropdown-item",e.DROPDOWN_MENU="dropdown-menu",e.DROPDOWN_MENU_END="dropdown-menu-end",e.END_0="end-0",e.FADE="fade",e.FIXED_BOTTOM="fixed-bott [...]
/*!
* Bootstrap v5.3.2 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
-const $e=new Map,Me={set(e,t,s){$e.has(e)||$e.set(e,new Map);const n=$e.get(e);n.has(t)||0===n.size?n.set(t,s):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(n.keys())[0]}.`)},get:(e,t)=>$e.has(e)&&$e.get(e).get(t)||null,remove(e,t){if(!$e.has(e))return;const s=$e.get(e);s.delete(t),0===s.size&&$e.delete(e)}},Pe="transitionend",Be=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,((e,t)=>`#${CSS.escape(t)}`))),e),H [...]
+const $e=new Map,Me={set(e,t,s){$e.has(e)||$e.set(e,new Map);const n=$e.get(e);n.has(t)||0===n.size?n.set(t,s):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(n.keys())[0]}.`)},get:(e,t)=>$e.has(e)&&$e.get(e).get(t)||null,remove(e,t){if(!$e.has(e))return;const s=$e.get(e);s.delete(t),0===s.size&&$e.delete(e)}},Be="transitionend",Pe=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,((e,t)=>`#${CSS.escape(t)}`))),e),H [...]
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
- */const nr=globalThis,ir=nr.trustedTypes,or=ir?ir.createPolicy("lit-html",{createHTML:e=>e}):void 0,rr="$lit$",ar=`lit$${(Math.random()+"").slice(9)}$`,lr="?"+ar,cr=`<${lr}>`,dr=document,ur=()=>dr.createComment(""),hr=e=>null===e||"object"!=typeof e&&"function"!=typeof e,pr=Array.isArray,gr="[ \t\n\f\r]",fr=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,mr=/-->/g,br=/>/g,vr=RegExp(`>|${gr}(?:([^\\s"'>=/]+)(${gr}*=${gr}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),_r=/'/g,yr=/"/g, [...]
+ */const nr=globalThis,ir=nr.trustedTypes,or=ir?ir.createPolicy("lit-html",{createHTML:e=>e}):void 0,rr="$lit$",ar=`lit$${(Math.random()+"").slice(9)}$`,lr="?"+ar,cr=`<${lr}>`,dr=document,ur=()=>dr.createComment(""),hr=e=>null===e||"object"!=typeof e&&"function"!=typeof e,pr=Array.isArray,gr="[ \t\n\f\r]",fr=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,mr=/-->/g,br=/>/g,vr=RegExp(`>|${gr}(?:([^\\s"'>=/]+)(${gr}*=${gr}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),_r=/'/g,yr=/"/g, [...]
<button type='button'
class='tobago-button btn btn-secondary badge' aria-label='deselect ${e}'
${s>0?" tabindex='"+String(s)+"'":""}
@click="${this.removeBadge.bind(this)}"
@focus="${this.focusEvent.bind(this)}"
- @blur="${this.blurEvent.bind(this)}"><i class='bi-x-lg'></i></button>`}removeBadge(e){const t=e.target.closest(".btn-group").dataset.tobagoValue,s=this.hiddenSelect.querySelector(`[value="${t}"]`);s.selected=!1;const n=this.selectField.querySelector(`[data-tobago-value="${t}"]`),i=n.previousElementSibling,o="SPAN"===n.nextElementSibling.tagName?n.nextElementSibling:null;i?i.querySelector("button.btn.badge").focus():o?o.querySelector("button.btn.badge").focus():(this.filterInput.dis [...]
+ @blur="${this.blurEvent.bind(this)}"><i class='bi-x-lg'></i></button>`}removeBadge(e){const t=e.target.closest(".btn-group").dataset.tobagoValue,s=this.hiddenSelect.querySelector(`[value="${t}"]`);s.selected=!1;const n=this.selectField.querySelector(`[data-tobago-value="${t}"]`),i=n.previousElementSibling,o="SPAN"===n.nextElementSibling.tagName?n.nextElementSibling:null;i?i.querySelector("button.btn.badge").focus():o?o.querySelector("button.btn.badge").focus():(this.filterInput.dis [...]
//# sourceMappingURL=tobago.js.map
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
index af7b2ad3b3..df64aaab39 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago.js","sources":["../ts/tobago-css.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.j [...]
\ No newline at end of file
+{"version":3,"file":"tobago.js","sources":["../ts/tobago-css.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.j [...]
\ No newline at end of file