[IMP] web_editor, website: display better previews over dropzones

Before this commit, some snippets did not have any or complete preview
when dragging them over a dropzone.

This commit covers `s_website_form`, `s_countdown`, `s_map` and
`o_facebook_page`.
Some elements with class `s_preview` are added to the template. These
elements are removed when the snippet is dropped.

Also, the class o_colored_level was added to snippets so that the
previews matches the snippet dropped.

For "New page templates", an `s_keep_preview` class can be added on a
parent element of an `s_preview` to prevent its removal when creating
the page - thereby making the snippet ready as if is had been dropped
into the page.

Note: `s_chart` and the "dynamic snippet" and its variants are not
covered in this commit.

task-3555325 (was task-2431469)

Part-of: odoo/odoo#138748
Co-authored-by: Benoit Socias <bso@odoo.com>
This commit is contained in:
qsm-odoo
2023-10-25 09:56:40 +00:00
committed by Romain Derie
co-authored by Benoit Socias
parent ea5a7077ab
commit b993399f8a
10 changed files with 121 additions and 103 deletions
@@ -3460,15 +3460,15 @@ var SnippetsMenu = Widget.extend({
var $target = $toInsert;
if ($target[0].classList.contains("o_snippet_drop_in_only")) {
// If it's a "drop in only" snippet, after dropping
// it, we modify it so that it's no longer a
// draggable snippet but rather simple HTML code, as
// if the element had been created with the editor.
$target[0].classList.remove("o_snippet_drop_in_only");
delete $target[0].dataset.snippet;
delete $target[0].dataset.name;
}
if ($target[0].classList.contains("o_snippet_drop_in_only")) {
// If it's a "drop in only" snippet, after dropping
// it, we modify it so that it's no longer a
// draggable snippet but rather simple HTML code, as
// if the element had been created with the editor.
$target[0].classList.remove("o_snippet_drop_in_only");
delete $target[0].dataset.snippet;
delete $target[0].dataset.name;
}
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropCreateSnippet');
await this._scrollToSnippet($target, this.$scrollable);