From fc83af4b0b209ffc0ae3d117fd9865b68aa2f118 Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Wed, 13 Jan 2021 16:08:21 +0000 Subject: [FIX] website_form, *: allow to update buttons using link dialog *: web_editor, website_mass_mailing When we double click a link/button, a link dialog appears to update the target properties, and since the current link dialog can only handle anchor targets, using it on buttons leads to some inconsistencies : - visible href options for button & url required to save changes. - missing preview when button style changed. ... The goal of this commit is to add a fix (with minimum of code) on summernote linkdialog to handle button elements using the same logic as anchor nodes. Also, update website form test tour to test those new changes. Part of https://github.com/odoo/odoo/pull/62206 task-2381305 --- .../static/lib/summernote/src/js/module/Editor.js | 34 +++++++++++++++++----- .../static/src/js/wysiwyg/widgets/link_dialog.js | 20 ++++++++----- addons/web_editor/static/src/xml/wysiwyg.xml | 4 +-- 3 files changed, 42 insertions(+), 16 deletions(-) (limited to 'addons/web_editor/static') diff --git a/addons/web_editor/static/lib/summernote/src/js/module/Editor.js b/addons/web_editor/static/lib/summernote/src/js/module/Editor.js index 40b7c95e98d..b5e3190ce2e 100644 --- a/addons/web_editor/static/lib/summernote/src/js/module/Editor.js +++ b/addons/web_editor/static/lib/summernote/src/js/module/Editor.js @@ -618,6 +618,9 @@ define([ var isNewWindow = linkInfo.isNewWindow; var rng = linkInfo.range || this.createRange($editable); var isTextChanged = rng.toString() !== linkText; + // Hack : This method was updated to create buttons as well (using the same logic as anchor nodes). + const nodeName = linkInfo.isButton ? 'BUTTON' : 'A'; + const pred = dom.makePredByNodeName(nodeName); options = options || dom.makeLayoutInfo($editable).editor().data('options'); @@ -629,23 +632,25 @@ define([ var anchors = []; // ODOO: adding this branch to modify existing anchor if it fully contains the range - var ancestor_anchor = dom.ancestor(rng.sc, dom.isAnchor); - if(ancestor_anchor && ancestor_anchor === dom.ancestor(rng.ec, dom.isAnchor)) { + var ancestor_anchor = dom.ancestor(rng.sc, pred); + if (ancestor_anchor && ancestor_anchor === dom.ancestor(rng.ec, pred)) { anchors.push($(ancestor_anchor).html(linkText).get(0)); } else if (isTextChanged) { - // Create a new link when text changed. - var anchor = rng.insertNode($('' + linkText + '')[0]); + // Create a new element when text changed. + var anchor = rng.insertNode($(`<${nodeName}>${linkText}`)[0]); anchors.push(anchor); } else { anchors = style.styleNodes(rng, { - nodeName: 'A', + nodeName: nodeName, expandClosestSibling: true, onlyPartialContains: true }); } $.each(anchors, function (idx, anchor) { - $(anchor).attr('href', linkUrl); + if (!linkInfo.isButton) { + $(anchor).attr('href', linkUrl); + } $(anchor).attr('class', linkInfo.className || null); // ODOO: addition $(anchor).css(linkInfo.style || {}); // ODOO: addition if (isNewWindow) { @@ -672,6 +677,8 @@ define([ /** * returns link info + * Hack : This method was updated to return a boolean attribute 'isButton' to allow + * handling buttons in linkDialog. * * @return {Object} * @return {WrappedRange} return.range @@ -706,11 +713,24 @@ define([ // Get the first anchor on range(for edit). var $anchor = $(list.head(rng.nodes(dom.isAnchor))); + // Check if the target is a button element. + let isButton = false; + if (!$anchor.length) { + const pred = dom.makePredByNodeName('BUTTON'); + const rngNew = range.create().expand(pred); + const target = list.head(rngNew.nodes(pred)); + if (target && target.nodeName === 'BUTTON') { + isButton = true; + rng = rngNew; + } + } + return { range: rng, text: rng.toString(), isNewWindow: $anchor.length ? $anchor.attr('target') === '_blank' : false, - url: $anchor.length ? $anchor.attr('href') : '' + url: $anchor.length ? $anchor.attr('href') : '', + isButton: isButton, }; }; diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js index ed17127c55a..cf2fa9dd04a 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js @@ -26,6 +26,7 @@ var LinkDialog = Dialog.extend({ /** * @constructor + * @param {Boolean} linkInfo.isButton - whether if the target is a button element. */ init: function (parent, options, editable, linkInfo) { this.options = options || {}; @@ -40,8 +41,11 @@ var LinkDialog = Dialog.extend({ }, }); + this.data = linkInfo || {}; + this.isButton = this.data.isButton; + // Using explicit type 'link' to preserve style when the target is