[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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user