diff --git a/addons/web/static/src/js/core/smooth_scroll_on_drag.js b/addons/web/static/src/js/core/smooth_scroll_on_drag.js index 71ea347ed9d152e810355adfeec5fa7d9bdbbc51..a53323174cfba2c9057bf7a9491e36832e0c5eae 100644 --- a/addons/web/static/src/js/core/smooth_scroll_on_drag.js +++ b/addons/web/static/src/js/core/smooth_scroll_on_drag.js @@ -21,25 +21,25 @@ const OffsetElementsHelper = Class.extend({ this.offsetElements = offsetElements; }, top: function () { - if (!this.offsetElements.$top) { + if (!this.offsetElements.$top || !this.offsetElements.$top.length) { return 0; } return this.offsetElements.$top.get(0).getBoundingClientRect().bottom; }, right: function () { - if (!this.offsetElements.$right) { + if (!this.offsetElements.$right || !this.offsetElements.$right.length) { return 0; } return this.offsetElements.$right.get(0).getBoundingClientRect().left; }, bottom: function () { - if (!this.offsetElements.$bottom) { + if (!this.offsetElements.$bottom || !this.offsetElements.$bottom.length) { return 0; } return this.offsetElements.$bottom.get(0).getBoundingClientRect().top; }, left: function () { - if (!this.offsetElements.$left) { + if (!this.offsetElements.$left || !this.offsetElements.$left.length) { return 0; } return this.offsetElements.$left.get(0).getBoundingClientRect().right; 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 46cb8dbabf4fbd0e0d1a045608c2d2aa10c6b6c6..6b87b837bac0e362e1a542aac2c6ce9e0756d868 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -72,26 +72,18 @@ var SnippetEditor = Widget.extend({ // Initialize move/clone/remove buttons if (this.isTargetMovable) { this.dropped = false; - const smoothScrollOptions = { - offsetElements: { - $top: $('#top'), - $left: $('#oe_snippets'), - }, + const smoothScrollOptions = this.options.getScrollOptions({ jQueryDraggableOptions: { - appendTo: this.$body, - cursor: 'move', cursorAt: { left: 10, top: 10 }, - greedy: true, handle: '.o_move_handle', helper: () => { var $clone = this.$el.clone().css({width: '24px', height: '24px', border: 0}); $clone.appendTo(this.$body).removeClass('d-none'); return $clone; }, - scroll: false, start: this._onDragAndDropStart.bind(this), stop: (...args) => { // Delay our stop handler so that some summernote handlers @@ -103,7 +95,7 @@ var SnippetEditor = Widget.extend({ }, 0); }, }, - }; + }); this.draggableComponent = new SmoothScrollOnDrag(this, this.$el, $('html'), smoothScrollOptions); } else { this.$('.o_overlay_move_options').addClass('d-none'); @@ -932,6 +924,8 @@ var SnippetsMenu = Widget.extend({ this._addTabLoading(this.tabs.BLOCKS); + this.options.getScrollOptions = this._getScrollOptions.bind(this); + // Fetch snippet templates and compute it defs.push(this._loadSnippetsTemplates().then(() => { return this._updateInvisibleDOM(); @@ -1736,6 +1730,25 @@ var SnippetsMenu = Widget.extend({ $snippet.toggleClass('o_disabled', !check); }); }, + /** + * @private + * @param {Object} [options={}] + * @returns {Object} + */ + _getScrollOptions(options = {}) { + return Object.assign({}, options, { + offsetElements: Object.assign({ + $top: $('#web_editor-top-edit'), // TODO should ideally be retrieved another way + $left: this.$el, + }, options.offsetElements), + jQueryDraggableOptions: Object.assign({ + appendTo: this.$body, + cursor: 'move', + greedy: true, + scroll: false, + }, options.jQueryDraggableOptions), + }); + }, /** * Creates a dropzone element and inserts it by replacing the given jQuery * location. This allows to add data on the dropzone depending on the hook @@ -1766,16 +1779,9 @@ var SnippetsMenu = Widget.extend({ var self = this; var $toInsert, dropped, $snippet; - const smoothScrollOptions = { - offsetElements: { - $top: $('#top'), - $left: $('#oe_snippets'), - }, + const smoothScrollOptions = this._getScrollOptions({ jQueryDraggableOptions: { - appendTo: this.$body, - cursor: 'move', distance: 0, - greedy: true, handle: '.oe_snippet_thumbnail', helper: function () { const dragSnip = this.cloneNode(true); @@ -1784,7 +1790,6 @@ var SnippetsMenu = Widget.extend({ ); return dragSnip; }, - scroll: false, start: function () { dropped = false; $snippet = $(this); @@ -1882,7 +1887,7 @@ var SnippetsMenu = Widget.extend({ } }, }, - }; + }); this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, $('html'), smoothScrollOptions); }, /** diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index 04de692f2fde0cac01219c4da74e6474ae559edd..24b950afc8c46ad89c92c74ef8ba9c0e48550308 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -30,6 +30,19 @@ weSnippetEditor.Class.include({ return this._super(...arguments); }, + /** + * @override + */ + _getScrollOptions(options = {}) { + const finalOptions = this._super(...arguments); + if (!options.offsetElements || !options.offsetElements.$top) { + const $header = $('#top'); + if ($header.length) { + finalOptions.offsetElements.$top = $header; + } + } + return finalOptions; + }, /** * @override */