[IMP] website: move options in table of content snippet

Move position options in navbar.

Part of https://github.com/odoo/odoo/pull/46503
task-2194309
This commit is contained in:
Benjamin Vray
2020-03-24 16:07:22 +00:00
committed by qsm-odoo
parent 9ebc9a1a44
commit 079dac124a
2 changed files with 52 additions and 30 deletions
@@ -43,31 +43,6 @@ options.registry.TableOfContent = options.Class.extend({
_.each($headings, el => el.dataset.anchor = anchorValue);
this.isAnimateScrolling = !!widgetValue;
},
/**
* Change the navbar position.
*
* @see this.selectClass for parameters
*/
navbarPosition: function (previewMode, widgetValue, params) {
const $navbar = this.$target.find('.s_table_of_content_navbar_wrap');
const $mainContent = this.$target.find('.s_table_of_content_main');
if (widgetValue === 'top' || widgetValue === 'left') {
$navbar.prev().before($navbar);
}
if (widgetValue === 'left' || widgetValue === 'right') {
$navbar.removeClass('s_table_of_content_horizontal_navbar col-lg-12').addClass('s_table_of_content_vertical_navbar col-lg-3');
$mainContent.removeClass('col-lg-12').addClass('col-lg-9');
$navbar.find('.s_table_of_content_navbar').removeClass('list-group-horizontal-md');
}
if (widgetValue === 'right') {
$navbar.next().after($navbar);
}
if (widgetValue === 'top') {
$navbar.removeClass('s_table_of_content_vertical_navbar col-lg-3').addClass('s_table_of_content_horizontal_navbar col-lg-12');
$navbar.find('.s_table_of_content_navbar').addClass('list-group-horizontal-md');
$mainContent.removeClass('col-lg-9').addClass('col-lg-12');
}
},
//--------------------------------------------------------------------------
// Private
@@ -105,12 +80,58 @@ options.registry.TableOfContent = options.Class.extend({
return 'true';
}
}
}
return this._super(...arguments);
},
});
options.registry.TableOfContentNavbar = options.Class.extend({
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Change the navbar position.
*
* @see this.selectClass for parameters
*/
navbarPosition: function (previewMode, widgetValue, params) {
const $navbar = this.$target;
const $mainContent = this.$target.parent().find('.s_table_of_content_main');
if (widgetValue === 'top' || widgetValue === 'left') {
$navbar.prev().before($navbar);
}
if (widgetValue === 'left' || widgetValue === 'right') {
$navbar.removeClass('s_table_of_content_horizontal_navbar col-lg-12').addClass('s_table_of_content_vertical_navbar col-lg-3');
$mainContent.removeClass('col-lg-12').addClass('col-lg-9');
$navbar.find('.s_table_of_content_navbar').removeClass('list-group-horizontal-md');
}
if (widgetValue === 'right') {
$navbar.next().after($navbar);
}
if (widgetValue === 'top') {
$navbar.removeClass('s_table_of_content_vertical_navbar col-lg-3').addClass('s_table_of_content_horizontal_navbar col-lg-12');
$navbar.find('.s_table_of_content_navbar').addClass('list-group-horizontal-md');
$mainContent.removeClass('col-lg-9').addClass('col-lg-12');
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_computeWidgetState: function (methodName, params) {
switch (methodName) {
case 'navbarPosition': {
const $navbar = this.$target.find('.s_table_of_content_navbar_wrap');
const $navbar = this.$target;
if ($navbar.hasClass('s_table_of_content_horizontal_navbar')) {
return 'top';
} else {
const $mainContent = this.$target.find('.s_table_of_content_main');
const $mainContent = $navbar.parent().find('.s_table_of_content_main');
return $navbar.prev().is($mainContent) === true ? 'right' : 'left';
}
}
@@ -52,13 +52,14 @@
<xpath expr="." position="inside">
<div data-js="TableOfContent" data-selector=".s_table_of_content">
<we-checkbox string="Animate Scrolling" data-animate-scrolling="true" data-no-preview="true"/>
<we-select string="Navbar position">
</div>
<div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
<we-select string="Position">
<we-button data-navbar-position="left">Left</we-button>
<we-button data-navbar-position="right">Right</we-button>
<we-button data-navbar-position="top">Top</we-button>
</we-select>
<we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky"
data-apply-to=".s_table_of_content_navbar_wrap" data-no-preview="true"/>
<we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
</div>
<div data-js="TableOfContentMainColumns" data-selector=".s_table_of_content_navbar_wrap, .s_table_of_content_main"/>
</xpath>