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 2024/09/09 08:29:56 UTC
(myfaces-tobago) branch tobago-5.x updated: feature(operation): custom events
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
The following commit(s) were added to refs/heads/tobago-5.x by this push:
new 27208d815b feature(operation): custom events
27208d815b is described below
commit 27208d815b1ee44029c5b1fbfb2a030e1964dc55
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Sep 5 13:22:37 2024 +0200
feature(operation): custom events
* add show/shown/hide/hidden custom events for collapsing components (box, panel, popup, section)
* update demo
Issue: TOBAGO-2352
---
.../00-collapsible-box/Collapsible_Box.xhtml | 10 ++++++++++
.../10-collapsible-popup/Collapsible_Popup.xhtml | 12 ++++++++++++
.../20-collapsible-panel/Collapsible_Panel.xhtml | 8 ++++++++
.../30-collapsible-section/Collapsible_Section.xhtml | 13 +++++++++++++
.../tobago-theme-standard/src/main/ts/tobago-collapse.ts | 9 +++++++++
5 files changed, 52 insertions(+)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/00-collapsible-box/Collapsible_Box.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/00-collapsible-box/Collapsible_Box.xhtml
index 5541d3fcf3..1a703e113b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/00-collapsible-box/Collapsible_Box.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/00-collapsible-box/Collapsible_Box.xhtml
@@ -146,4 +146,14 @@
<tc:button id="submitAjaxBox" label="Submit"/>
</tc:form>
</tc:section>
+
+ <tc:section label="Events">
+ <p>A JavaScript custom event is fired if a <code
+ class="language-markup"><tc:box/></code> is collapsed or expanded.</p>
+ <p><code>tobago.box.show</code> is fired before the box is expanded.</p>
+ <p><code>tobago.box.shown</code> is fired after the box is expanded. (Does not wait for a possible Ajax reload.)</p>
+ <p><code>tobago.box.hide</code> is fired before the box is collaped.</p>
+ <p><code>tobago.box.hidden</code> is fired after the box is collapsed. (Does not wait for a possible Ajax reload.)
+ </p>
+ </tc:section>
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml
index 489629abe6..9c48340c69 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml
@@ -100,4 +100,16 @@
</tc:popup>
</tc:form>
</tc:section>
+
+ <tc:section label="Events">
+ <p>A JavaScript custom event is fired if a <code
+ class="language-markup"><tc:popup/></code> is collapsed or expanded.</p>
+ <p><code>tobago.popup.show</code> is fired before the popup is expanded.</p>
+ <p><code>tobago.popup.shown</code> is fired after the popup is expanded. (Does not wait for a possible Ajax reload.)
+ </p>
+ <p><code>tobago.popup.hide</code> is fired before the popup is collaped.</p>
+ <p>
+ <code>tobago.popup.hidden</code> is fired after the popup is collapsed. (Does not wait for a possible Ajax reload.)
+ </p>
+ </tc:section>
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/20-collapsible-panel/Collapsible_Panel.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/20-collapsible-panel/Collapsible_Panel.xhtml
index a6749ece05..67f0f179aa 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/20-collapsible-panel/Collapsible_Panel.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/20-collapsible-panel/Collapsible_Panel.xhtml
@@ -120,4 +120,12 @@
</tc:panel>
</tc:form>
</tc:section>
+
+ <tc:section label="Events">
+ <p>A JavaScript custom event is fired if a <code class="language-markup"><tc:panel/></code> is collapsed or expanded.</p>
+ <p><code>tobago.panel.show</code> is fired before the panel is expanded.</p>
+ <p><code>tobago.panel.shown</code> is fired after the panel is expanded. (Does not wait for a possible Ajax reload.)</p>
+ <p><code>tobago.panel.hide</code> is fired before the panel is collaped.</p>
+ <p><code>tobago.panel.hidden</code> is fired after the panel is collapsed. (Does not wait for a possible Ajax reload.)</p>
+ </tc:section>
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/30-collapsible-section/Collapsible_Section.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/30-collapsible-section/Collapsible_Section.xhtml
index ac892b4147..c85e810e29 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/30-collapsible-section/Collapsible_Section.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/30-collapsible-section/Collapsible_Section.xhtml
@@ -119,4 +119,17 @@
</tc:section>
</tc:form>
</tc:section>
+
+ <tc:section label="Events">
+ <p>A JavaScript custom event is fired if a <code
+ class="language-markup"><tc:section/></code> is collapsed or expanded.</p>
+ <p><code>tobago.section.show</code> is fired before the section is expanded.</p>
+ <p>
+ <code>tobago.section.shown</code> is fired after the section is expanded. (Does not wait for a possible Ajax reload.)
+ </p>
+ <p><code>tobago.section.hide</code> is fired before the section is collaped.</p>
+ <p>
+ <code>tobago.section.hidden</code> is fired after the section is collapsed. (Does not wait for a possible Ajax reload.)
+ </p>
+ </tc:section>
</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-collapse.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-collapse.ts
index a4bb51ba99..5ca561a98d 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-collapse.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-collapse.ts
@@ -43,18 +43,27 @@ export class Collapse {
console.error("unknown operation: '%s'", operation);
}
if (newCollapsed) {
+ Collapse.fireEvent(target, "hide");
if (target instanceof Popup) {
target.clientBehaviorHide(behaviorMode);
} else {
target.classList.add(Css.TOBAGO_COLLAPSED);
}
+ Collapse.fireEvent(target, "hidden");
} else {
+ Collapse.fireEvent(target, "show");
if (target instanceof Popup) {
target.clientBehaviorShow(behaviorMode);
} else {
target.classList.remove(Css.TOBAGO_COLLAPSED);
}
+ Collapse.fireEvent(target, "shown");
}
hidden.value = newCollapsed;
};
+
+ static fireEvent(target: HTMLElement, eventName: string) {
+ const fullEventName = "tobago." + target.tagName.substring(7).toLowerCase() + "." + eventName;
+ target.dispatchEvent(new CustomEvent(fullEventName, {bubbles: true}));
+ }
}