[IMP] website: make table of content fully previewed during drag

Before this commit, the "Table of Content" snippet only got its
navigation part rendered once the block was dropped.
In [1] when the "New page from template" feature was introduced, a
default pre-rendered content was introduced so that the "Table of
Content" snippet was properly rendered in the template previews where it
was used.

This commit moves this pre-rendered content from [1] into the base
definition of the snippet itself.
There is no collision problem regarding the default ids that are
included because the dynamic content is re-generated when the block is
dropped and whenever the headers texts are changed.

[1]: https://github.com/odoo/odoo/commit/e0796020ee0c3188e1e9d9fa077de73a2211c6f7#diff-bee4662b672e30dbfb9778f8747fee45698d9b8d16282d8f80066d8a30137928R35-R50

task-3555325

Part-of: odoo/odoo#138748
This commit is contained in:
Benoit Socias
2023-10-25 09:56:40 +00:00
committed by Romain Derie
parent 3bb63c8817
commit 8642b0c409
2 changed files with 8 additions and 20 deletions
@@ -1084,23 +1084,6 @@ overridden by modules), because:
<!-- Previews for blocks that normally generate part of their content upon drop -->
<!-- Defined in website so that every theme can benefit from it -->
<!-- Table of content: define the entries that match the default text -->
<template id="new_page_template_s_table_of_content" inherit_id="s_table_of_content" primary="True">
<xpath expr="//div[hasclass('s_table_of_content_navbar')]" position="attributes">
<attribute name="style">top: 76px; max-height: calc(100vh - 96px);</attribute>
</xpath>
<xpath expr="//div[hasclass('s_table_of_content_navbar')]" position="inside">
<a href="#table_of_content_heading_1_1" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0 active">Intuitive system</a>
<a href="#table_of_content_heading_1_2" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Design features</a>
</xpath>
<xpath expr="//section//section[1]//h2" position="attributes">
<attribute name="id">table_of_content_heading_1_1</attribute>
</xpath>
<xpath expr="//section//section[2]//h2" position="attributes">
<attribute name="id">table_of_content_heading_1_2</attribute>
</xpath>
</template>
<!-- Form: define the default set of form fields -->
<template id="new_page_template_s_website_form" inherit_id="s_website_form" primary="True">
<xpath expr="//section" position="attributes">
@@ -6,11 +6,16 @@
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-3 s_table_of_content_navbar_wrap s_table_of_content_navbar_sticky s_table_of_content_vertical_navbar d-print-none d-none d-lg-block o_not_editable o_cc o_cc1" data-name="Navbar">
<div class="s_table_of_content_navbar list-group o_no_link_popover"/>
<div class="s_table_of_content_navbar list-group o_no_link_popover"
style="top: 76px; max-height: calc(100vh - 96px);"
>
<a href="#table_of_content_heading_1_1" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0 active">Intuitive system</a>
<a href="#table_of_content_heading_1_2" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Design features</a>
</div>
</div>
<div class="col-lg-9 s_table_of_content_main oe_structure oe_empty" data-name="Content">
<section class="pb16">
<h2 data-anchor="true">Intuitive system</h2>
<h2 id="table_of_content_heading_1_1" data-anchor="true">Intuitive system</h2>
<h4>What you see is what you get</h4>
<p>
Insert text styles like headers, bold, italic, lists, and fonts with
@@ -28,7 +33,7 @@
</p>
</section>
<section class="pb16">
<h2 data-anchor="true">Design features</h2>
<h2 id="table_of_content_heading_1_2" data-anchor="true">Design features</h2>
<h4>Bootstrap-based templates</h4>
<p>
Easily design your own Odoo templates thanks to clean HTML