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

[FIX] website: handle TOC sub-elements device visibility

Browse Source 
From [this commit], it is possible to define the visibility of blocks
according to the device on which the page is displayed (either hide on
mobile, or hide on desktop). This change has brought two problems on the
table of content block:
1. The sub-component s_table_of_content_main (the right part) can be
invisible, which does not make sense.
2. The sub-component of s_table_of_content_main can be invisible but it
did not change the navbar of the TOC.

This commit prevents hiding the main part of the TOC and rebuilds the
navbar of the TOC according to the device visibility of its
sub-components.

[this commit]: https://github.com/odoo/odoo/commit/3103e0553011b5c1f4078972d7a88fa3fd4068b2

task-3116227
Related to opw-3135927

X-original-commit: b7f9c26a93e58f2ace964ab6b05132cc9f8f3366
Part-of: odoo/odoo#113184
This commit is contained in:
Guillaume (gdi)
2023-02-21 21:07:16 +01:00
parent 492aff522a
commit 291439da11
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+9
View File
@@ -2531,6 +2531,15 @@ options.registry.DeviceVisibility = options.Class.extend({
}
return await this._super(...arguments);
},
/**
* @override
*/
_computeWidgetVisibility(widgetName, params) {
if (this.$target[0].classList.contains('s_table_of_content_main')) {
return false;
}
return this._super(...arguments);
}
});
/**
addons/website/static/src/snippets/s_table_of_content/options.js
+7 -5
View File
@@ -19,6 +19,7 @@ options.registry.TableOfContent = options.Class.extend({
const config = {attributes: false, childList: true, subtree: true, characterData: true};
this.observer = new MutationObserver(() => this._generateNav());
this.observer.observe(targetNode, config);
this.$target.on('content_changed', () => this._generateNav());
return this._super(...arguments);
},
/**
@@ -78,9 +79,10 @@ options.registry.TableOfContent = options.Class.extend({
*/
_generateNav: function (ev) {
this.options.wysiwyg && this.options.wysiwyg.odooEditor.unbreakableStepUnactive();
const $headings = this.$target.find(this.targetedElements);
const areHeadingsEqual = this.oldHeadingsEls.length === $headings.length
&& this.oldHeadingsEls.every((el, i) => el.isEqualNode($headings[i]));
const headingsEls = this.$target.find(this.targetedElements).toArray()
.filter(el => !el.closest('.o_snippet_desktop_invisible'));
const areHeadingsEqual = this.oldHeadingsEls.length === headingsEls.length
&& this.oldHeadingsEls.every((el, i) => el.isEqualNode(headingsEls[i]));
if (areHeadingsEqual) {
// If the content of the navbar before the change of the DOM is
// equal to the content of the navbar after the change of the DOM,
@@ -96,7 +98,7 @@ options.registry.TableOfContent = options.Class.extend({
this._disposeScrollSpy();
const $nav = this.$target.find('.s_table_of_content_navbar');
$nav.empty();
_.each($headings, el => {
_.each(headingsEls, el => {
const $el = $(el);
const id = 'table_of_content_heading_' + _.now() + '_' + _.uniqueId();
$('<a>').attr('href', "#" + id)
@@ -108,7 +110,7 @@ options.registry.TableOfContent = options.Class.extend({
});
const exception = (tocEl) => !tocEl.querySelector('.s_table_of_content_navbar a');
this._activateScrollSpy(exception);
this.oldHeadingsEls = [...($headings.clone())];
this.oldHeadingsEls = [...headingsEls.map(el => el.cloneNode(true))];
},
});