pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: allow to add/remove tabs in the new "Tabs" snippet

Browse Source 
closes odoo/odoo#27815
This commit is contained in:
qsm-odoo
2018-10-15 16:15:01 +00:00
parent ea1ad98354
commit cc780b5974
2 changed files with 68 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+64 -7
View File
@@ -299,13 +299,7 @@ options.registry.navTabs = options.Class.extend({
* @override
*/
start: function () {
this.$navLinks = this.$target.find('.nav-link');
var $el = this.$target;
do {
$el = $el.parent();
this.$tabPanes = $el.find('.tab-pane');
} while (this.$tabPanes.length === 0 && !$el.is('body'));
this._findLinksAndPanes();
return this._super.apply(this, arguments);
},
/**
@@ -321,10 +315,65 @@ options.registry.navTabs = options.Class.extend({
this._generateUniqueIDs();
},
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Creates a new tab and tab-pane.
*
* @see this.selectClass for parameters
*/
addTab: function (previewMode, value, $opt) {
var $activeItem = this.$navLinks.filter('.active').parent();
var $activePane = this.$tabPanes.filter('.active');
var $navItem = $activeItem.clone();
var $navLink = $navItem.find('.nav-link').removeClass('active show');
var $tabPane = $activePane.clone().removeClass('active show');
$navItem.insertAfter($activeItem);
$tabPane.insertAfter($activePane);
this._findLinksAndPanes();
this._generateUniqueIDs();
$navLink.tab('show');
},
/**
* Removes the current active tab and its content.
*
* @see this.selectClass for parameters
*/
removeTab: function (previewMode, value, $opt) {
var self = this;
var $activeLink = this.$navLinks.filter('.active');
var $activePane = this.$tabPanes.filter('.active');
var $next = this.$navLinks.eq((this.$navLinks.index($activeLink) + 1) % this.$navLinks.length);
$next.one('shown.bs.tab', function () {
$activeLink.parent().remove();
$activePane.remove();
self._findLinksAndPanes();
self._setActive(); // TODO forced to do this because we do not return deferred for options
});
$next.tab('show');
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @private
*/
_findLinksAndPanes: function () {
this.$navLinks = this.$target.find('.nav-link');
var $el = this.$target;
do {
$el = $el.parent();
this.$tabPanes = $el.find('.tab-pane');
} while (this.$tabPanes.length === 0 && !$el.is('body'));
},
/**
* @private
*/
@@ -344,6 +393,14 @@ options.registry.navTabs = options.Class.extend({
});
}
},
/**
* @private
* @override
*/
_setActive: function () {
this._super.apply(this, arguments);
this.$el.filter('[data-remove-tab]').toggleClass('d-none', this.$tabPanes.length <= 2);
},
});
options.registry.sizing_x = options.registry.sizing.extend({
addons/website/views/snippets.xml
+4 -1
View File
@@ -1109,7 +1109,10 @@
<a href="#" class="dropdown-item" data-remove-slide="true" data-no-preview="true"><i class="fa fa-trash-o"/>Remove Slide</a>
</div>
<div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs"/>
<div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
<a href="#" class="dropdown-item" data-add-tab="1" data-no-preview="true"><i class="fa fa-plus"/>Add Tab</a>
<a href="#" class="dropdown-item" data-remove-tab="1" data-no-preview="true"><i class="fa fa-minus"/>Remove Tab</a>
</div>
<!-- Parallax -->
<div data-js="parallax" data-selector=".parallax">