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:58 UTC
(myfaces-tobago) branch main updated (39b4b270a9 -> 71c7253ba2)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
from 39b4b270a9 fix(command): stop event propagation (#4522)
new b80739ce80 fix(command): stop event propagation
new 71c7253ba2 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} | 28 ++++--
.../tobago-theme-standard/src/main/js/tobago.js | 8 +-
.../src/main/js/tobago.js.map | 2 +-
.../src/main/ts/tobago-behavior.ts | 2 -
.../src/main/ts/tobago-sheet.ts | 31 ++++++
6 files changed, 159 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} (63%)
(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 main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit b80739ce80e3254158523927806a6796e566c6f4
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-behavior.ts | 2 -
.../src/main/ts/tobago-sheet.ts | 31 ++++++
4 files changed, 196 insertions(+), 2 deletions(-)
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..a2aeb214b9
--- /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="jakarta.faces.core"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="jakarta.faces.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-behavior.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
index 21b46d5b3c..7b817be3a6 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
@@ -99,7 +99,6 @@ class Behavior extends HTMLElement {
}
}
}
- event.stopPropagation();
faces.ajax.request(
this.actionElement,
event,
@@ -111,7 +110,6 @@ class Behavior extends HTMLElement {
});
break;
case BehaviorMode.full:
- event.stopPropagation();
setTimeout(this.submit.bind(this), this.delay);
break;
default:
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 58cfee636c..25da1440b7 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 main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 71c7253ba2aa1ec332b6cfab602796c639f32c15
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed Nov 22 14:34:39 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 5bed545f13..4adf589ea7 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 5cea6caa94..41016c396a 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