From 1915fe35984fedac121c8177383735fe0ca6c5d3 Mon Sep 17 00:00:00 2001 From: Romain Derie Date: Thu, 5 Dec 2019 14:31:04 +0000 Subject: [PATCH] [IMP] web_editor, *: add new zone in left panel to handle invisible DOM * website, website_mass_mailing We only have one invisible snippet (newsletter popup) which is handled by adding a yellow alert in the DOM in edit mode to be able to click somewhere to open the snippet options. As we will add some new invisible snippet (generic popup, cookies bar, and probably more) this needed to be improved. Now, any snippet having the `o_snippet_invisible` class will have an entry in the left panel in a dedicated zone to edit itself. This also allows to get rid of the yellow alert, making sure that "what you see is what you get" in the editor zone. task-2150966 closes odoo/odoo#41420 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.editor.js | 61 +++++++++++++++++++ .../static/src/scss/wysiwyg_snippets.scss | 40 ++++++++---- .../static/src/js/editor/snippets.options.js | 7 ++- .../src/js/website_mass_mailing.editor.js | 8 ++- .../views/snippets_templates.xml | 6 +- 5 files changed, 100 insertions(+), 22 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index c938b987ae2..1f170d8a7db 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -686,6 +686,7 @@ var SnippetsMenu = Widget.extend({ cacheSnippetTemplate: {}, events: { 'click .o_install_btn': '_onInstallBtnClick', + 'click .o_we_invisible_entry': '_onInvisibleEntryClick', }, custom_events: { 'activate_insertion_zones': '_onActivateInsertionZones', @@ -697,6 +698,7 @@ var SnippetsMenu = Widget.extend({ 'go_to_parent': '_onGoToParent', 'remove_snippet': '_onRemoveSnippet', 'snippet_removed': '_onSnippetRemoved', + 'snippet_cloned': '_onSnippetCloned', 'reload_snippet_dropzones': '_disableUndroppableSnippets', 'update_customize_elements': '_onUpdateCustomizeElements', 'hide_overlay': '_onHideOverlay', @@ -754,6 +756,19 @@ var SnippetsMenu = Widget.extend({ this.customizePanel = document.createElement('div'); this.customizePanel.classList.add('o_we_customize_panel', 'd-none'); this.$el.append(this.customizePanel); + + this.invisibleDOMPanelEl = document.createElement('div'); + this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel'); + this.invisibleDOMPanelEl.appendChild( + $('
', { + text: _t('Invisible'), + class: 'o_panel_header', + }).prepend( + $('', {class: 'fa fa-eye-slash'}) + )[0] + ); + this.$el.append(this.invisibleDOMPanelEl); + this._updateInvisibleDOM(); })); // Prepare snippets editor environment @@ -1073,6 +1088,28 @@ var SnippetsMenu = Widget.extend({ } }); }, + /** + * Adds an entry for every invisible snippet in the left panel box. + * The entries will contains an 'Edit' button to activate their snippet. + * + * @private + */ + _updateInvisibleDOM: function () { + this.invisibleDOMMap = new Map(); + const $invisibleDOMPanelEl = $(this.invisibleDOMPanelEl); + $invisibleDOMPanelEl.find('.o_we_invisible_entry').remove(); + const $invisibleSnippets = this.getEditableArea().find('.o_snippet_invisible'); + + _.each($invisibleSnippets, el => { + const $invisEntry = $('
', { + class: 'o_we_invisible_entry d-flex align-items-center', + text: el.title, + }).append($('', {class: 'fa fa-edit ml-2'})); + $invisibleDOMPanelEl.append($invisEntry); + this.invisibleDOMMap.set($invisEntry[0], el); + }); + $invisibleDOMPanelEl.toggleClass('d-none', !$invisibleSnippets.length); + }, /** * Disable the overlay editor of the active snippet and activate the new one * if given. @@ -1613,6 +1650,8 @@ var SnippetsMenu = Widget.extend({ self.trigger_up('snippet_dropped', {$target: $target}); self._disableUndroppableSnippets(); + self._updateInvisibleDOM(); + self._callForEachChildSnippet($target, function (editor, $snippet) { editor.buildSnippet(); }).then(function () { @@ -1792,6 +1831,21 @@ var SnippetsMenu = Widget.extend({ }], }).open(); }, + /** + * @private + * @param {Event} ev + */ + _onInvisibleEntryClick: function (ev) { + ev.preventDefault(); + const $snippet = $(this.invisibleDOMMap.get(ev.currentTarget)); + let prom = null; + $snippet.trigger('invisible_snippet_activation', { + onSuccess: _prom => prom = _prom, + }); + Promise.resolve(prom).then(() => { + return this._activateSnippet($snippet); + }); + }, /** * @private */ @@ -1814,6 +1868,12 @@ var SnippetsMenu = Widget.extend({ editor.removeSnippet(); }); }, + /** + * @private + */ + _onSnippetCloned: function (ev) { + this._updateInvisibleDOM(); + }, /** * Called when a snippet is removed -> checks if there is draggable snippets * to enable/disable as the DOM changed. @@ -1822,6 +1882,7 @@ var SnippetsMenu = Widget.extend({ */ _onSnippetRemoved: function () { this._disableUndroppableSnippets(); + this._updateInvisibleDOM(); }, /** * @private diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 6f76811a704..b981a613521 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -92,21 +92,20 @@ body.editor_enable.editor_has_snippets { overflow: auto; } - > #o_scroll { + .o_panel_header { + display: flex; + align-items: center; + justify-content: center; + padding: 3%; + color: inherit; + margin-bottom: 3%; - .o_panel_header { - display: flex; - align-items: center; - justify-content: center; - padding: 3%; - color: inherit; - margin-bottom: 3%; - - i { - margin-right: 5px; - } + i { + margin-right: 5px; } + } + > #o_scroll { .o_panel_body { &:after { content: " "; @@ -506,6 +505,23 @@ body.editor_enable.editor_has_snippets { } } } + + > .o_we_invisible_el_panel { + flex: 0 0 auto; + max-height: 220px; + overflow-y: auto; + background-color: var(--o-we-bg-color); + border-top: 2px solid; + + .o_we_invisible_entry { + padding: 0.5rem; + cursor: pointer; + + &:hover { + background-color: var(--o-we-snippets-bg-color); + } + } + } } .oe_snippet { diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 3a0cfa72c6d..e7e0efcb8d0 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -35,12 +35,13 @@ options.Class.include({ * * @private * @param {jQuery} [$el=this.$target] + * @param {Object} [options] */ - _refreshPublicWidgets: function ($el) { - this.trigger_up('widgets_start_request', { + _refreshPublicWidgets: function ($el, options) { + this.trigger_up('widgets_start_request', _.extend({ editableMode: true, $target: $el || this.$target, - }); + }, options || {})); }, }); diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js index 526c7e35fec..ca10b5586a0 100644 --- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js +++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js @@ -66,11 +66,15 @@ options.registry.newsletter_popup = options.registry.mailing_list_subscribe.exte */ start: function () { var self = this; - this.$target.on('click.newsletter_popup_option', '.o_edit_popup', function (ev) { + this.$target.on('invisible_snippet_activation', function (ev, options) { // So that the snippet is not enabled again by the editor ev.stopPropagation(); self.$target.data('quick-open', true); - self._refreshPublicWidgets(); + options.onSuccess(new Promise(resolve => { + self._refreshPublicWidgets(self.$target, { + onSuccess: () => resolve(), + }); + })); }); this.$target.on('shown.bs.modal.newsletter_popup_option hide.bs.modal.newsletter_popup_option', function () { self.$target.closest('.o_editable').trigger('content_changed'); diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml index 320b3e8ff11..31db4095204 100644 --- a/addons/website_mass_mailing/views/snippets_templates.xml +++ b/addons/website_mass_mailing/views/snippets_templates.xml @@ -51,11 +51,7 @@