From c84d10dfb9bc1b8f0176d312fe0a4d8b8c7f4540 Mon Sep 17 00:00:00 2001
From: MattMo <matt@montoyatech.com>
Date: Thu, 9 Feb 2023 06:54:25 -0800
Subject: [PATCH] Added showCallback and hideCallback to tab function.
---
ignite-html-tabs.js | 14 +++++++++++++-
1 file changed, 13 insertions(+), 1 deletion(-)
diff --git a/ignite-html-tabs.js b/ignite-html-tabs.js
index 22e1348..f499df0 100644
--- a/ignite-html-tabs.js
+++ b/ignite-html-tabs.js
@@ -6,9 +6,11 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
* @param {String} name The name of the tab.
* @param {String} group The tab group to put this tab under, by default this is null.
* @param {Boolean} active Whether or not this tab is active by default.
+ * @param {Function} showCallback Called when this tab is changed to the shown state.
+ * @param {Function} hideCallback Called when this tab is changed to hidden state.
* @returns {IgniteTemplate} Returns this ignite template.
*/
- IgniteTemplate.prototype.tab = function(name, group = null, active = false) {
+ IgniteTemplate.prototype.tab = function(name, group = null, active = false, showCallback = null, hideCallback = null) {
//Add the tab class to this element.
this.class("tab")
@@ -26,9 +28,19 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
if (event.name == name && event.group == group) {
if (!this.element.classList.contains("active")) {
this.element.classList.add("active");
+
+ //Invoke the show callback if there is one.
+ if (showCallback) {
+ showCallback();
+ }
}
} else if (event.group == group) {
this.element.classList.remove("active");
+
+ //Invoke the hide callback if there is one.
+ if (hideCallback) {
+ hideCallback();
+ }
}
}
}, () => {