From c0bc163b79130f317fe8d73a09379e4f00872d27 Mon Sep 17 00:00:00 2001 From: prudho Date: Wed, 2 Aug 2023 14:54:08 +0200 Subject: [PATCH 1/3] feat(tab): add removable variation --- src/definitions/modules/tab.js | 62 +++++++++++++++++++ src/definitions/modules/tab.less | 18 ++++++ .../default/globals/variation.variables | 1 + src/themes/default/modules/tab.variables | 8 +++ 4 files changed, 89 insertions(+) diff --git a/src/definitions/modules/tab.js b/src/definitions/modules/tab.js index 13fe416d6f..7b52e2bc90 100644 --- a/src/definitions/modules/tab.js +++ b/src/definitions/modules/tab.js @@ -71,6 +71,7 @@ $module = $(this), $context, $tabs, + $close = $module.find(selector.removeIcon), cache = {}, firstLoad = true, @@ -96,6 +97,13 @@ if (settings.auto) { module.set.auto(); } + + if (module.is.removable() && !module.has.removeIcon()) { + module.verbose('Adding close icon'); + $close = $('').addClass('remove icon'); + $module.append($close); + } + module.bind.events(); if (settings.history && !initializedHistory) { @@ -142,6 +150,7 @@ module.debug('Attaching tab activation events to element', $module); $module .on('click' + eventNamespace, module.event.click) + .on('click' + eventNamespace, selector.removeIcon, module.event.removeIcon.click) ; } }, @@ -224,6 +233,15 @@ module.debug('No tab specified'); } }, + removeIcon: { + click: function (event) { + var + tabPath = $(this).parent().data(metadata.tab) + ; + module.removeTab(tabPath); + event.stopPropagation(); + } + }, history: { change: function (event) { var @@ -423,6 +441,35 @@ }); }, + removeTab: function (tabPath) { + var + activeTab = module.determine.activeTab(), + $tab = module.get.tabElement(tabPath) + ; + if (tabPath == $module.data(metadata.tab)) { + module.verbose('Call for tab removal', tabPath); + if (settings.onBeforeRemove.call(element, tabPath) === false) { + module.debug('onBeforeRemove returned false, cancelling tab removal', $tab); + return false; + } + var + nextTab = $module.nextAll(selector.enabled).length > 0 + ? $module.nextAll(selector.enabled).eq(0).data(metadata.tab) + : ($module.prevAll(selector.enabled).length > 0 + ? $module.prevAll(selector.enabled).eq(0).data(metadata.tab) + : module.get.initialPath()) + ; + $tab.removeClass(className.active).remove(); + $module.removeClass(className.active).remove(); + module.determineTabs(); + settings.onRemove.call(element, tabPath); + if (activeTab == tabPath) { + module.debug('No active tab detected, setting tab active', nextTab); + module.changeTab(nextTab); + } + } + }, + scrollTo: function ($element) { var scrollOffset = $element && $element.length > 0 @@ -609,6 +656,15 @@ ? module.get.tabElement(tabName).length > 0 : false; }, + removable: function () { + return $module.hasClass(className.removable) || settings.removable; + }, + }, + + has: { + removeIcon: function () { + return $close.length > 0; + }, }, get: { @@ -916,6 +972,7 @@ loadOnce: false, // Whether tab data should only be loaded once when using remote content cacheType: 'response', // Whether to cache exact response, or to html cache contents after scripts execute ignoreFirstLoad: false, // don't load remote content on first load + removable: false, apiSettings: false, // settings for api call evaluateScripts: 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content @@ -926,6 +983,8 @@ onVisible: function (tabPath, parameterArray, historyEvent) {}, // called every time tab visible onRequest: function (tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content onBeforeChange: function (tabPath) {}, // called before a tab is about to be changed. Returning false will cancel the tab change + onBeforeRemove: function (tabPath) {}, // called before a tab is about to be removed. Returning false will cancel the tab removal + onRemove: function (tabPath) {}, // called when a tab is removed templates: { determineTitle: function (tabArray) {}, // returns page title for path @@ -954,11 +1013,14 @@ className: { loading: 'loading', active: 'active', + removable: 'removable', }, selector: { tabs: '.ui.tab', ui: '.ui', + enabled: ':not(.disabled)', + removeIcon: '> .remove.icon', }, }; diff --git a/src/definitions/modules/tab.less b/src/definitions/modules/tab.less index 2cf3346ca4..f760090cc2 100755 --- a/src/definitions/modules/tab.less +++ b/src/definitions/modules/tab.less @@ -25,6 +25,24 @@ display: none; } +/******************************* + Types +*******************************/ + +/* -------------------- + Closable +--------------------- */ + +& when (@variationTabRemove) { + .ui.menu .item > .remove.icon { + cursor: pointer; + font-size: @removeIconSize; + padding: @removeIconPadding; + opacity: @removeIconOpacity; + z-index: @removeIconZIndex; + } +} + /******************************* States *******************************/ diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables index 6288377e7d..a03272611f 100644 --- a/src/themes/default/globals/variation.variables +++ b/src/themes/default/globals/variation.variables @@ -714,6 +714,7 @@ /* Tab */ @variationTabLoading: true; +@variationTabRemove: true; /* Toast */ @variationToastInverted: true; diff --git a/src/themes/default/modules/tab.variables b/src/themes/default/modules/tab.variables index a629d4fc44..54a466ee5e 100644 --- a/src/themes/default/modules/tab.variables +++ b/src/themes/default/modules/tab.variables @@ -9,3 +9,11 @@ @loaderDistanceFromTop: 50%; @loaderSize: 2.5em; + +/* Removable */ + +@removeIconSize: @relative12px; +@removeIconPosition: 2em; +@removeIconOpacity: 0.6; +@removeIconPadding: 0 0 0 1em; +@removeIconZIndex: 3; From 282ee0c59549671eed1d63fcb5d4c2f89a55f533 Mon Sep 17 00:00:00 2001 From: prudho Date: Wed, 2 Aug 2023 15:48:57 +0200 Subject: [PATCH 2/3] fix(tab): linting issues --- src/definitions/modules/tab.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/definitions/modules/tab.js b/src/definitions/modules/tab.js index 7b52e2bc90..a962b9de2e 100644 --- a/src/definitions/modules/tab.js +++ b/src/definitions/modules/tab.js @@ -240,7 +240,7 @@ ; module.removeTab(tabPath); event.stopPropagation(); - } + }, }, history: { change: function (event) { @@ -450,6 +450,7 @@ module.verbose('Call for tab removal', tabPath); if (settings.onBeforeRemove.call(element, tabPath) === false) { module.debug('onBeforeRemove returned false, cancelling tab removal', $tab); + return false; } var From 64a586b62b3d716f24aa640e198bdc1147a559a4 Mon Sep 17 00:00:00 2001 From: prudho Date: Wed, 2 Aug 2023 15:53:19 +0200 Subject: [PATCH 3/3] fix(tab): linting issue (again) --- src/definitions/modules/tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/definitions/modules/tab.js b/src/definitions/modules/tab.js index a962b9de2e..144bbb1f2b 100644 --- a/src/definitions/modules/tab.js +++ b/src/definitions/modules/tab.js @@ -450,7 +450,7 @@ module.verbose('Call for tab removal', tabPath); if (settings.onBeforeRemove.call(element, tabPath) === false) { module.debug('onBeforeRemove returned false, cancelling tab removal', $tab); - + return false; } var