[IMP] website, *: allow to handle snippets with a list of items
*: web_editor The goal of this commit is to add the "MultipleItems" option to be able to add new elements in snippets with a list of items. In this commit, the option is used for "Media List" & "Tabs". Part of https://github.com/odoo/odoo/pull/68061 task-2431484
This commit is contained in:
xO-Tx
@@ -6363,6 +6363,75 @@ registry.DynamicSvg = SnippetOptionWidget.extend({
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Allows to handle snippets with a list of items.
|
||||
*/
|
||||
registry.MultipleItems = SnippetOptionWidget.extend({
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
async addItem(previewMode, widgetValue, params) {
|
||||
const $target = this.$(params.item);
|
||||
const addBeforeItem = params.addBefore === 'true';
|
||||
if ($target.length) {
|
||||
await new Promise(resolve => {
|
||||
this.trigger_up('clone_snippet', {
|
||||
$snippet: $target,
|
||||
onSuccess: resolve,
|
||||
});
|
||||
});
|
||||
if (addBeforeItem) {
|
||||
$target.before($target.next());
|
||||
}
|
||||
if (params.selectItem !== 'false') {
|
||||
this.trigger_up('activate_snippet', {
|
||||
$snippet: addBeforeItem ? $target.prev() : $target.next(),
|
||||
});
|
||||
}
|
||||
this._addItemCallback($target);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
async removeItem(previewMode, widgetValue, params) {
|
||||
const $target = this.$(params.item);
|
||||
if ($target.length) {
|
||||
await new Promise(resolve => {
|
||||
this.trigger_up('remove_snippet', {
|
||||
$snippet: $target,
|
||||
onSuccess: resolve,
|
||||
});
|
||||
});
|
||||
this._removeItemCallback($target);
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Allows to add behaviour when item added.
|
||||
*
|
||||
* @private
|
||||
* @abstract
|
||||
* @param {jQueryElement} $target
|
||||
*/
|
||||
_addItemCallback($target) {},
|
||||
/**
|
||||
* @private
|
||||
* @abstract
|
||||
* @param {jQueryElement} $target
|
||||
*/
|
||||
_removeItemCallback($target) {},
|
||||
});
|
||||
|
||||
return {
|
||||
SnippetOptionWidget: SnippetOptionWidget,
|
||||
snippetOptionRegistry: registry,
|
||||
|
||||
@@ -3,7 +3,7 @@ odoo.define('website.s_tabs_options', function (require) {
|
||||
|
||||
const options = require('web_editor.snippets.options');
|
||||
|
||||
options.registry.NavTabs = options.Class.extend({
|
||||
options.registry.NavTabs = options.registry.MultipleItems.extend({
|
||||
isTopOption: true,
|
||||
|
||||
/**
|
||||
@@ -26,53 +26,6 @@ options.registry.NavTabs = options.Class.extend({
|
||||
this._generateUniqueIDs();
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Creates a new tab and tab-pane.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
addTab: function (previewMode, widgetValue, params) {
|
||||
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, widgetValue, params) {
|
||||
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);
|
||||
|
||||
return new Promise(resolve => {
|
||||
$next.one('shown.bs.tab', function () {
|
||||
$activeLink.parent().remove();
|
||||
$activePane.remove();
|
||||
self._findLinksAndPanes();
|
||||
resolve();
|
||||
});
|
||||
$next.tab('show');
|
||||
});
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
@@ -112,6 +65,29 @@ options.registry.NavTabs = options.Class.extend({
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_addItemCallback($target) {
|
||||
$target.removeClass('active show');
|
||||
const $targetNavItem = this.$(`.nav-item a[href="#${$target.attr('id')}"]`)
|
||||
.removeClass('active show').parent();
|
||||
const $navLink = $targetNavItem.clone().insertAfter($targetNavItem)
|
||||
.find('.nav-link');
|
||||
this._findLinksAndPanes();
|
||||
this._generateUniqueIDs();
|
||||
$navLink.tab('show');
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_removeItemCallback($target) {
|
||||
const $targetNavLink = this.$(`.nav-item a[href="#${$target.attr('id')}"]`);
|
||||
const $navLinkToShow = this.$navLinks.eq((this.$navLinks.index($targetNavLink) + 1) % this.$navLinks.length);
|
||||
$targetNavLink.parent().remove();
|
||||
this._findLinksAndPanes();
|
||||
$navLinkToShow.tab('show');
|
||||
},
|
||||
});
|
||||
options.registry.NavTabsStyle = options.Class.extend({
|
||||
|
||||
|
||||
@@ -46,6 +46,15 @@
|
||||
</template>
|
||||
|
||||
<template id="s_media_list_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
|
||||
<div data-js="MultipleItems" data-selector=".s_media_list">
|
||||
<we-row string="Media">
|
||||
<we-button data-add-item="" data-item=".s_media_list_item:last" data-select-item="" data-no-preview="true" class="o_we_bg_brand_primary">
|
||||
Add Media
|
||||
</we-button>
|
||||
</we-row>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="." position="inside">
|
||||
<t t-call="web_editor.snippet_options_background_options">
|
||||
<t t-set="selector" t-value="'.s_media_list_item'"/>
|
||||
|
||||
@@ -37,10 +37,10 @@
|
||||
<template id="s_tabs_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-js="NavTabs" data-selector="section.s_tabs">
|
||||
<we-button data-add-tab="" data-no-preview="true" class="o_we_text_success ml-0" title="Add Tab" aria-label="Add Tab">
|
||||
<we-button data-add-item="" data-item=".tab-pane.active" data-no-preview="true" class="o_we_text_success ml-0" title="Add Tab" aria-label="Add Tab">
|
||||
<i class="fa fa-fw fa-plus"/>
|
||||
</we-button>
|
||||
<we-button data-remove-tab="" data-name="remove_tab_opt" data-no-preview="true" class="o_we_text_danger mr-3" title="Remove Tab" aria-label="Remove Tab">
|
||||
<we-button data-remove-item="" data-item=".tab-pane.active" data-name="remove_tab_opt" data-no-preview="true" class="o_we_text_danger mr-3" title="Remove Tab" aria-label="Remove Tab">
|
||||
<i class="fa fa-fw fa-minus"/>
|
||||
</we-button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user