92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
|
/** @odoo-module */
|
||
|
|
|
||
|
|
import {
|
||
|
|
insertSnippet,
|
||
|
|
registerWebsitePreviewTour,
|
||
|
|
selectElementInWeSelectWidget,
|
||
|
|
} from '@website/js/tours/tour_utils';
|
||
|
|
|
||
|
|
registerWebsitePreviewTour("text_highlights", {
|
||
|
|
url: "/",
|
||
|
|
edition: true,
|
||
|
|
}, () => [
|
||
|
|
...insertSnippet({
|
||
|
|
id: "s_cover",
|
||
|
|
name: "Cover",
|
||
|
|
groupName: "Intro",
|
||
|
|
}),
|
||
|
|
{
|
||
|
|
content: "Select the snippet title",
|
||
|
|
trigger: ":iframe .s_cover h1",
|
||
|
|
run: "dblclick",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Click on the 'Highlight Effects' button to activate the option",
|
||
|
|
trigger: "div.o_we_text_highlight",
|
||
|
|
run: "click",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Check that the highlight was applied",
|
||
|
|
trigger: ":iframe .s_cover h1 span.o_text_highlight > .o_text_highlight_item > svg:has(.o_text_highlight_path_underline)",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Check that the highlights grid was displayed",
|
||
|
|
trigger: "we-select[data-name=text_highlight_opt] we-toggler.active",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Disable the highlight effect",
|
||
|
|
trigger: "div.o_we_text_highlight",
|
||
|
|
run: "click",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Check that the highlight was disabled for the title",
|
||
|
|
trigger: ":iframe .s_cover:not(:has(.o_text_highlight))",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// On muti-line text, the highlight effect is added on every detected
|
||
|
|
// line (using the `.o_text_highlight_item` span).
|
||
|
|
content: "Update and select the snippet paragraph content",
|
||
|
|
trigger: ":iframe .s_cover p",
|
||
|
|
run() {
|
||
|
|
const iframeDOC = document.querySelector(".o_iframe").contentDocument;
|
||
|
|
const firstLine = document.createElement("strong");
|
||
|
|
firstLine.textContent = "Text content line A";
|
||
|
|
const secondLine = document.createElement("i");
|
||
|
|
secondLine.textContent = "Text content line B";
|
||
|
|
this.anchor.replaceChildren(firstLine, document.createElement("br"), secondLine);
|
||
|
|
// Select the whole content.
|
||
|
|
const range = iframeDOC.createRange();
|
||
|
|
const selection = iframeDOC.getSelection();
|
||
|
|
range.selectNodeContents(this.anchor);
|
||
|
|
selection.removeAllRanges();
|
||
|
|
selection.addRange(range);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Add the highlight effect on the muti-line text",
|
||
|
|
trigger: "div.o_we_text_highlight",
|
||
|
|
run: "click",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Check if the text was correctly updated",
|
||
|
|
trigger: ":iframe .o_text_highlight_underline:has(span:contains(Text content line A) + br + span:contains(Text content line B))",
|
||
|
|
},
|
||
|
|
...selectElementInWeSelectWidget("text_highlight_opt", "Jagged").slice(1), // The select is already opened
|
||
|
|
{
|
||
|
|
trigger: ":iframe .o_text_highlight_item:has(.o_text_highlight_path_jagged):nth-child(3)",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "When changing the text highlight, we only replace the highlight SVG with a new drawn one",
|
||
|
|
trigger: ":iframe .o_text_highlight_item:has(.o_text_highlight_path_jagged):nth-child(1)",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Disable the highlight effect",
|
||
|
|
trigger: "div.o_we_text_highlight",
|
||
|
|
run: "click",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
content: "Check if the original DOM structure was restored",
|
||
|
|
trigger: ":iframe .s_cover p:has(strong:contains(Text content line A) + br + i:contains(Text content line B))",
|
||
|
|
},
|
||
|
|
]);
|