[IMP] website: support a snippet to embed custom code
Before this commit there no general purpose snippet to embed HTML code in the page. After this commit there is a new Embed Code snippet that allows the user to include any HTML within the page. task-2517473 closes odoo/odoo#68019 Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
This commit is contained in:
Benoit Socias
@@ -79,6 +79,7 @@
|
||||
'views/snippets/s_map.xml',
|
||||
'views/snippets/s_dynamic_snippet.xml',
|
||||
'views/snippets/s_dynamic_snippet_carousel.xml',
|
||||
'views/snippets/s_embed_code.xml',
|
||||
'views/website_views.xml',
|
||||
'views/website_visitor_views.xml',
|
||||
'views/res_config_settings_views.xml',
|
||||
@@ -175,6 +176,7 @@
|
||||
'website/static/src/snippets/s_map/options.js',
|
||||
'website/static/src/snippets/s_dynamic_snippet/options.js',
|
||||
'website/static/src/snippets/s_dynamic_snippet_carousel/options.js',
|
||||
'website/static/src/snippets/s_embed_code/options.js',
|
||||
'website/static/src/js/editor/wysiwyg.js',
|
||||
'website/static/src/js/editor/widget_link.js',
|
||||
'website/static/src/js/widgets/media.js',
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
|
||||
<defs>
|
||||
<linearGradient id="linearGradient" x1="50%" x2="50%" y1="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#00A09D"/>
|
||||
<stop offset="100%" stop-color="#00E2FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
|
||||
<g class="s_embed_code">
|
||||
<rect width="82" height="60" class="bg"/>
|
||||
<g class="group_2" transform="translate(20 11)">
|
||||
<path fill="url(#linearGradient)" d="M2 5l-10 10l10 10l-7 -10z"/>
|
||||
<path fill="url(#linearGradient)" d="M40 5l10 10l-10 10l7 -10z"/>
|
||||
<rect fill="#000" width="12" height="2" x="9" y="0"/>
|
||||
<rect fill="#FFF" fill-opacity=".78" width="12" height="2" x="9" y="0"/>
|
||||
<rect fill="#000" width="20" height="2" x="13" y="5"/>
|
||||
<rect fill="#FFF" fill-opacity=".348" width="20" height="2" x="13" y="5"/>
|
||||
<rect fill="#000" width="16" height="2" x="13" y="10"/>
|
||||
<rect fill="#FFF" fill-opacity=".348" width="16" height="2" x="13" y="10"/>
|
||||
<rect fill="#000" width="22" height="2" x="13" y="15"/>
|
||||
<rect fill="#FFF" fill-opacity=".348" width="22" height="2" x="13" y="15"/>
|
||||
<rect fill="#000" width="14" height="2" x="13" y="20"/>
|
||||
<rect fill="#FFF" fill-opacity=".348" width="14" height="2" x="13" y="20"/>
|
||||
<rect fill="#000" width="8" height="2" x="9" y="25"/>
|
||||
<rect fill="#FFF" fill-opacity=".78" width="8" height="2" x="9" y="25"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,4 @@
|
||||
|
||||
.editor_enable .s_embed_code {
|
||||
min-height: $o-font-size-base;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import Dialog from 'web.Dialog';
|
||||
import core from 'web.core';
|
||||
import options from 'web_editor.snippets.options';
|
||||
|
||||
const _t = core._t;
|
||||
|
||||
options.registry.EmbedCode = options.Class.extend({
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
async editCode() {
|
||||
const $container = this.$target.find('.s_embed_code_embedded');
|
||||
const code = $container.html().trim();
|
||||
|
||||
await this._loadLibs({
|
||||
jsLibs: [
|
||||
'/web/static/lib/ace/ace.js',
|
||||
'/web/static/lib/ace/mode-xml.js',
|
||||
'/web/static/lib/ace/mode-qweb.js',
|
||||
],
|
||||
});
|
||||
|
||||
await new Promise(resolve => {
|
||||
const $content = $(core.qweb.render('website.custom_code_dialog_content'));
|
||||
const aceEditor = this._renderAceEditor($content.find('.o_ace_editor_container')[0], code || '');
|
||||
const dialog = new Dialog(this, {
|
||||
title: _t("Edit embedded code"),
|
||||
$content,
|
||||
buttons: [
|
||||
{
|
||||
text: _t("Save"),
|
||||
classes: 'btn-primary',
|
||||
click: async () => {
|
||||
$container[0].innerHTML = aceEditor.getValue();
|
||||
},
|
||||
close: true,
|
||||
},
|
||||
{
|
||||
text: _t("Discard"),
|
||||
close: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
dialog.on('closed', this, resolve);
|
||||
dialog.open();
|
||||
});
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {DOMElement} node
|
||||
* @param {String} content text of the editor
|
||||
* @returns {Object}
|
||||
*/
|
||||
_renderAceEditor(node, content) {
|
||||
const aceEditor = window.ace.edit(node);
|
||||
aceEditor.setTheme('ace/theme/monokai');
|
||||
aceEditor.setValue(content, 1);
|
||||
aceEditor.setOptions({
|
||||
minLines: 20,
|
||||
maxLines: Infinity,
|
||||
showPrintMargin: false,
|
||||
});
|
||||
aceEditor.renderer.setOptions({
|
||||
highlightGutterLine: true,
|
||||
showInvisibles: true,
|
||||
fontSize: 14,
|
||||
});
|
||||
|
||||
const aceSession = aceEditor.getSession();
|
||||
aceSession.setOptions({
|
||||
mode: "ace/mode/xml",
|
||||
useWorker: false,
|
||||
});
|
||||
return aceEditor;
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
EmbedCode: options.registry.EmbedCode,
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template name="Embed Code" id="s_embed_code">
|
||||
<section class="s_embed_code o_half_screen_height text-center">
|
||||
<div class="s_embed_code_embedded container o_not_editable">
|
||||
<div class="text-monospace pt8 bg-light"> Replace this with your own HTML code </div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- Snippet's Options -->
|
||||
<template id="s_embed_code_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@data-js='Box']" position="before">
|
||||
<div data-js="EmbedCode" data-selector=".s_embed_code">
|
||||
<we-row string="Code">
|
||||
<we-button data-edit-code="" data-no-preview="true"
|
||||
class="o_we_edit_code o_we_no_toggle o_we_bg_success active"
|
||||
title="Edit embedded code">Edit</we-button>
|
||||
</we-row>
|
||||
<we-button-group string="Alignment">
|
||||
<we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
|
||||
<we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
|
||||
<we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
|
||||
</we-button-group>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<record id="website.s_embed_code_000_scss" model="ir.asset">
|
||||
<field name="name">Embed Code 000 SCSS</field>
|
||||
<field name="bundle">web.assets_frontend</field>
|
||||
<field name="path">website/static/src/snippets/s_embed_code/000.scss</field>
|
||||
</record>
|
||||
|
||||
</odoo>
|
||||
@@ -127,6 +127,7 @@
|
||||
</t>
|
||||
<t id="mail_channel_discussion_group_hook"/>
|
||||
<t id="twitter_favorite_tweets_hook"/>
|
||||
<t t-snippet="website.s_embed_code" t-thumbnail="/website/static/src/img/snippets_thumbs/s_embed_code.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user