composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-17 14:28:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/6132-disabling-tabs-dynamically' into saas/3.0

Browse Source
This commit is contained in:
denis.flaven@combodo.com
2023-03-30 17:08:02 +02:00
parent 97d717b016 477f2f51e9
commit 32d74fbc8e
4 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/backoffice/utils/helpers/_misc.scss
View File

@@ -35,6 +35,10 @@ $ibo-sticky-sentinel-bottom--height: $ibo-sticky-sentinel--height !default;
opacity: 1 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
.ibo-is-disabled {
cursor: not-allowed !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
/****************************/
/* Disposition / alignement */
/****************************/

9
js/layouts/tab-container/regular-tabs.js
View File

@@ -126,13 +126,14 @@ $.widget( "itop.regulartabs", $.ui.tabs, {
},
// JQuery UI overload
disable: function(index){
let panel = this._getPanelForTab( index );
panel.css({display: 'none'});
const panel = this._getPanelForTab( index );
panel.hide();
this._super( index );
},
// JQuery UI overload
enable: function(index) {
let panel = this._getPanelForTab( index );
panel.css({display: 'block'});
const panel = this._getPanelForTab( index );
panel.show();
this._super( index );
},
});

9
js/layouts/tab-container/scrollable-tabs.js
View File

@@ -379,13 +379,14 @@ $.widget( "itop.scrollabletabs", $.ui.tabs, {
},
// JQuery UI overload
disable: function(index){
let panel = this._getPanelForTab( this.tabs[index] );
panel.css({display: 'none'});
const panel = this._getPanelForTab( this.tabs[index] );
panel.hide();
this._super( index );
},
// JQuery UI overload
enable: function(index) {
let panel = this._getPanelForTab( this.tabs[index] );
panel.css({display: 'block'});
const panel = this._getPanelForTab( this.tabs[index] );
panel.show();
this._super( index );
},
});

69
js/layouts/tab-container/tab-container.js
View File

@@ -15,6 +15,7 @@ $(function()
css_classes:
{
is_hidden: 'ibo-is-hidden',
is_disabled: 'ibo-is-disabled',
is_transparent: 'ibo-is-transparent',
is_opaque: 'ibo-is-opaque',
is_scrollable: 'ibo-is-scrollable',
@@ -252,6 +253,11 @@ $(function()
// Prevent anchor default behaviour
oEvent.preventDefault();
if (oExtraTabTogglerElem.attr('aria-disabled') === 'true') {
// Corresponding tab is disabled, do nothing
oEvent.stopPropagation();
return;
}
// Trigger click event on real tab toggler (the hidden one)
const sTargetTabId = oExtraTabTogglerElem.attr('href').replace(/#/, '');
this.element.find(this.js_selectors.tab_header+'[data-tab-id="'+sTargetTabId+'"] '+this.js_selectors.tab_toggler).trigger('click');
@@ -297,21 +303,30 @@ $(function()
const sTabId = oTabHeaderElem.attr('data-tab-id');
const oMatchingExtraTabElem = this.element.find(this.js_selectors.extra_tab_toggler+'[href="#'+sTabId+'"]');
// Disabled tabs are never added to the ExtraTabs list
if (oTabHeaderElem.attr('aria-disabled') == 'true') {
bIsVisible = true;
// Disabled tabs should be disabled in the ExtraTabs list as well
let bIsDisabled = false;
if (oTabHeaderElem.attr('aria-disabled') === 'true') {
bIsDisabled = true;
}
// Manually check if the tab header is visible if the info isn't passed
if (bIsVisible === null) {
bIsVisible = CombodoGlobalToolbox.IsElementVisibleToTheUser(oTabHeaderElem[0], true, 2);
}
bIsVisible = CombodoGlobalToolbox.IsElementVisibleToTheUser(oTabHeaderElem[0], true, 2);
}
// Hide/show the corresponding extra tab element
if (bIsVisible) {
oMatchingExtraTabElem.addClass(this.css_classes.is_hidden);
} else {
oMatchingExtraTabElem.removeClass(this.css_classes.is_hidden);
}
if (bIsVisible) {
oMatchingExtraTabElem.addClass(this.css_classes.is_hidden);
} else {
oMatchingExtraTabElem.removeClass(this.css_classes.is_hidden);
}
// Enable/disable the corresponding extra tab element
if (bIsDisabled) {
oMatchingExtraTabElem.attr('aria-disabled', 'true');
oMatchingExtraTabElem.addClass(this.css_classes.is_disabled);
} else {
oMatchingExtraTabElem.attr('aria-disabled', 'false');
oMatchingExtraTabElem.removeClass(this.css_classes.is_disabled);
}
},
// - Update extra tabs list
_updateExtraTabsList: function () {
@@ -343,19 +358,35 @@ $(function()
return oTabElem.length === 0 ? 0 : oTabElem.prevAll().length;
},
_getTabElementFromTabIndex: function(iIdx) {
return this.element.children(this.js_selectors.tabs_list).children(this.js_selectors.tab_header).eq(iIdx);
/**
* @param sId {string} The [data-tab-id] of the tab
* @return {Object} The jQuery object representing the tab element
*
* @private
*/
_getTabElementFromTabId: function(sId) {
return this.element.children(this.js_selectors.tabs_list).children(this.js_selectors.tab_header+'[data-tab-id="'+sId+'"]');
},
disableTab: function(iIdx){
let tabsWidget = this.GetTabsWidget();
/**
* @param sId {string} The [data-tab-id] of the tab
* @return {Object} The jQuery object representing the tab element
*/
disableTab: function(sId){
const tabsWidget = this.GetTabsWidget();
const iIdx = this._getTabIndexFromTabId(sId);
tabsWidget.disable(iIdx);
let tabElement = this._getTabElementFromTabIndex(iIdx);
this._updateTabHeaderDisplay(tabElement);
const tabElement = this._getTabElementFromTabId(sId);
this._updateTabHeaderDisplay(tabElement);
},
enableTab: function(iIdx){
let tabsWidget = this.GetTabsWidget();
/**
* @param sId {string} The [data-tab-id] of the tab
* @return {Object} The jQuery object representing the tab element
*/
enableTab: function(sId){
const tabsWidget = this.GetTabsWidget();
const iIdx = this._getTabIndexFromTabId(sId);
tabsWidget.enable(iIdx);
let tabElement = this._getTabElementFromTabIndex(iIdx);
const tabElement = this._getTabElementFromTabId(sId);
this._updateTabHeaderDisplay(tabElement);
}
});