composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°4093 When clicking on a tab before tab widget is loaded, prevent AjaxTabs from redirecting our page to their target

Browse Source
This commit is contained in:
Stephen Abello
2021-08-20 11:17:53 +02:00
parent 6df98c3d41
commit ced0e7cc8f
2 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,8 @@ $(function()
{
tabs_list: '[data-role="ibo-tab-container--tabs-list"]',
tab_header: '[data-role="ibo-tab-container--tab-header"]',
tab_ajax_type: '[data-tab-type="ajax"]',
tab_html_type: '[data-tab-type="html"]',
tab_toggler: '[data-role="ibo-tab-container--tab-toggler"]',
extra_tabs_container: '[data-role="ibo-tab-container--extra-tabs-container"]',
extra_tabs_list_toggler: '[data-role="ibo-tab-container--extra-tabs-list-toggler"]',
@@ -65,10 +67,29 @@ $(function()
// will be executed for the selected tab whenever the hash changes.
oTabsParams['event'] = 'change';
}
// While our tab widget is loading, protect tab toggler from being triggered
this.element.find(this.js_selectors.tab_toggler).on('click', function(e){
console.log('cc');
if(me.element.attr('data-status') === 'loading') {
console.log('non');
e.preventDefault();
e.stopImmediatePropagation();
}
});
// Now that we are protected from toggler being triggered without tab container being loaded, we can put back
// data-target attribute value back into href attribute
$.each(this.element.find(this.js_selectors.tab_header + this.js_selectors.tab_ajax_type), function (a){
let oLink = $(this).find(me.js_selectors.tab_toggler);
oLink.attr('href', oLink.attr('data-target'));
})
this._addTabsWidget(oTabsParams);
this._bindEvents();
this._bindEvents()
// We're done, set our status as loaded
this.element.attr('data-status', 'loaded');
},
/**
* @param oParams {Object} Structured object representing the options for the jQuery UI Tabs widget

4
templates/base/layouts/tab-container/layout.html.twig
View File

@@ -1,7 +1,7 @@
{# @copyright Copyright (C) 2010-2021 Combodo SARL #}
{# @license http://opensource.org/licenses/AGPL-3.0 #}
<div id="{{ oUIBlock.GetId() }}" class="ibo-tab-container ibo-is-{{ oUIBlock.GetLayout() }}{% if oUIBlock.GetIsScrollable() %} ibo-is-scrollable{% endif %}"
data-role="ibo-tab-container">
data-role="ibo-tab-container" data-status="loading">
{% block iboTabContainer %}
<ul class="ibo-tab-container--tabs-list" data-role="ibo-tab-container--tabs-list">
{% if not aPage.isPrintable %}
@@ -14,7 +14,7 @@
data-tab-type="{{ oTab.GetType() }}"
data-cache="{{ oTab.GetCache() }}"
data-placeholder="{{ oTab.GetPlaceholderAbsPath() }}">
<a href="{{ oTab.GetUrl() }}" class="ibo-tab-container--tab-toggler"
<a data-target="{{ oTab.GetUrl() }}" class="ibo-tab-container--tab-toggler"
data-role="ibo-tab-container--tab-toggler">
<span class="ibo-tab-container--tab-toggler-label" data-role="ibo-tab-container--tab-toggler-label" title="{{ oTab.GetTitle() }}">{{ oTab.GetTitle() }}</span>
</a>