From cfdb6d04a0a0e128a97dcc40fac023fd284c7593 Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Tue, 16 Nov 2021 15:26:35 +0000 Subject: [PATCH] [FIX] web_editor: focus url input on double click on link This commit focuses the url input from the link tools when double clicking on the link. It introduces a focusUrl public method on the Link widget, triggered from the SnippetsMenu after activating a snippet, if the link tools are shown. task-2680461 closes odoo/odoo#80796 X-original-commit: add3e05840869d4a885ca18a2bbabfcb61c7a83d Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.editor.js | 9 +++++++++ .../static/src/js/wysiwyg/widgets/link.js | 18 +++++++++++------- .../src/js/wysiwyg/widgets/link_tools.js | 19 +++++++++++++------ .../static/src/js/wysiwyg/wysiwyg.js | 14 +++----------- 4 files changed, 36 insertions(+), 24 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 9e6e4b81d07..f9b0e30e0e6 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1853,6 +1853,15 @@ var SnippetsMenu = Widget.extend({ } return editorToEnable; + }).then(editor => { + // If a link was clicked, the linktools should be focused after + // the right panel is shown to the user. + if (this._currentTab === this.tabs.OPTIONS + && this.options.wysiwyg.linkTools + && !this.options.wysiwyg.linkTools.noFocusUrl) { + this.options.wysiwyg.linkTools.focusUrl(); + } + return editor; }); }); }, diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js index 1432850ff7c..ff2fa97e151 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js @@ -36,6 +36,7 @@ const Link = Widget.extend({ this.data = data || {}; this.isButton = this.data.isButton; this.$button = $button; + this.noFocusUrl = this.options.noFocusUrl; this.data.className = this.data.className || ""; this.data.iniClassName = this.data.iniClassName || ""; @@ -143,13 +144,8 @@ const Link = Widget.extend({ this._updateOptionsUI(); - if (!this.options.noFocusUrl) { - // ensure the focus in the first input of the link modal - setTimeout(()=> { - const firstInput = this.$('input:visible:first'); - firstInput.focus(); - firstInput.select(); - }, 0); + if (!this.noFocusUrl) { + this.focusUrl(); } return this._super.apply(this, arguments); @@ -252,6 +248,14 @@ const Link = Widget.extend({ } return link; }, + /** + * Focuses the url input. + */ + focusUrl() { + const urlInput = this.el.querySelector('input[name="url"]'); + urlInput.focus(); + urlInput.select(); + }, //-------------------------------------------------------------------------- // Private diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js index 0e4d19516b1..6a167a7ca7b 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js @@ -4,7 +4,6 @@ odoo.define('wysiwyg.widgets.LinkTools', function (require) { const Link = require('wysiwyg.widgets.Link'); const {ColorPaletteWidget} = require('web_editor.ColorPalette'); const {ColorpickerWidget} = require('web.Colorpicker'); -const dom = require('web.dom'); const { computeColorClasses, getCSSVariableValue, @@ -53,11 +52,7 @@ const LinkTools = Link.extend({ this.options.wysiwyg.odooEditor.observerUnactive(); this.$link.addClass('oe_edited_link'); this.$button.addClass('active'); - return this._super(...arguments).then(() => { - if (!this.options.noFocusUrl) { - dom.scrollTo(this.$(':visible:last')[0], {duration: 0}); - } - }); + return this._super(...arguments); }, destroy: function () { if (!this.el) { @@ -84,6 +79,18 @@ const LinkTools = Link.extend({ this._observer.observe(this._link, {subtree: true, childList: true, characterData: true}); }, + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @override + */ + focusUrl() { + this.el.scrollIntoView(); + this._super(); + }, + //-------------------------------------------------------------------------- // Private //-------------------------------------------------------------------------- diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 0451e5a73cf..3af6a043e60 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -203,16 +203,6 @@ const Wysiwyg = Widget.extend({ self.openMediaDialog(params); }); - this.$editable.on('dblclick', this.customizableLinksSelector, function (ev) { - if (!this.getAttribute('data-oe-model') && self.toolbar.$el.is(':visible')) { - self.showTooltip = false; - self.toggleLinkTools({ - forceOpen: true, - link: this, - noFocusUrl: $(ev.target).data('popover-widget-initialized'), - }); - } - }); if (options.snippets) { $(this.odooEditor.document.body).addClass('editor_enable'); @@ -275,7 +265,7 @@ const Wysiwyg = Widget.extend({ this.toggleLinkTools({ forceOpen: true, link: $target[0], - noFocusUrl: true, + noFocusUrl: ev.detail === 1, }); } } @@ -909,6 +899,7 @@ const Wysiwyg = Widget.extend({ if (!this.linkTools || ![options.link, ...wysiwygUtils.ancestors(options.link)].includes(this.linkTools.$link[0])) { this.linkTools = new weWidgets.LinkTools(this, {wysiwyg: this, noFocusUrl: options.noFocusUrl}, this.odooEditor.editable, {}, $btn, options.link || this.lastMediaClicked); } + this.linkTools.noFocusUrl = options.noFocusUrl; const _onMousedown = ev => { if ( !ev.target.closest('.oe-toolbar') && @@ -1034,6 +1025,7 @@ const Wysiwyg = Widget.extend({ } }); }, + //-------------------------------------------------------------------------- // Private //--------------------------------------------------------------------------