Skip to content

Commit 55de43e

Browse files
author
Hwashiang Yu
committed
MC-5386: Anchors Under Each Div if TinyMCE link Is Added to Banner/Slide (Add Notification for When Link Attribute Is Entered)
- Removed nest-link-dialog from pagebuilder - Updated dismissible-confirm.js to allow removal of cancel button and updating button text - Resolved linter issues - Removed uneeded linter disablers - Updated regex to prevent false positives - Updated conditional to be more concise
1 parent 1ac5efb commit 55de43e

File tree

9 files changed

+112
-118
lines changed

9 files changed

+112
-118
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ define([
4141
*/
4242
function validateIsUrl(href) {
4343

44-
return (/^(http|https|ftp):\/\/(([A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))(\.[A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))*)(:(\d+))?(\/[A-Z0-9~](([A-Z0-9_~-]|\.)*[A-Z0-9~]|))*\/?(.*)?$/i).test(href)//eslint-disable-line max-len);
44+
return (/^(http|https|ftp):\/\/(([A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))(\.[A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))*)(:(\d+))?(\/[A-Z0-9~](([A-Z0-9_~-]|\.)*[A-Z0-9~]|))*\/?(.*)?$/i).test(href);//eslint-disable-line max-len
4545
}
4646

4747
/**
@@ -51,7 +51,7 @@ define([
5151
*/
5252
function validateWysiwygHasAnchorTags(str) {
5353

54-
return (/<a.*?>|<\/a>/igm).test(str)//eslint-disable-line max-len);
54+
return (/<a[\s]+([^>]+)>|<a>|<\/a>/igm).test(str);
5555
}
5656

5757
/**
@@ -62,10 +62,10 @@ define([
6262
*/
6363
function validateOneAnchorTagField(message, url) {
6464

65-
return !(validateWysiwygHasAnchorTags(message) && ((url.type === 'page' && url.page && url.page.length !== 0)
66-
|| (url.type === 'product' && url.product && url.product.length !== 0)
67-
|| (url.type === 'category' && url.category && url.category.length !== 0)
68-
|| (url.type === 'default' && url.default && url.default.length !== 0)));
65+
return !(validateWysiwygHasAnchorTags(message) &&
66+
['page', 'product', 'category', 'default'].indexOf(url.type) !== -1 &&
67+
url[url.type] &&
68+
url[url.type].length > 0);
6969
}
7070

7171
/**
@@ -85,9 +85,11 @@ define([
8585
return rule.handler(value, params);
8686
}
8787

88-
_.flatten(_.map(value, _.values)).forEach(function(val) {
88+
_.flatten(_.map(value, _.values)).forEach(function (val) {
8989
if (!rule.handler(val, params)) {
90-
return allNumbers = false;
90+
allNumbers = false;
91+
92+
return allNumbers;
9193
}
9294
});
9395

@@ -151,13 +153,17 @@ define([
151153
validator.addRule(
152154
'required-entry',
153155
function (value) {
156+
var allFilled;
157+
154158
// Validation only for margins and paddings
155159
if (typeof value === 'object' && !!(value.padding || value.margin)) {
156-
var allFilled = true;
160+
allFilled = true;
157161

158-
_.flatten(_.map(value, _.values)).forEach(function(val) {
162+
_.flatten(_.map(value, _.values)).forEach(function (val) {
159163
if (utils.isEmpty(val)) {
160-
return allFilled = false;
164+
allFilled = false;
165+
166+
return allFilled;
161167
}
162168
});
163169

@@ -171,15 +177,15 @@ define([
171177

172178
validator.addRule(
173179
'validate-message-no-link',
174-
function (url,message) {
180+
function (url, message) {
175181
return validateOneAnchorTagField(message, url);
176182
},
177183
$.mage.__('Adding link in both content and outer element is not allowed')
178184
);
179185

180186
validator.addRule(
181187
'validate-no-url',
182-
function (message,url) {
188+
function (message, url) {
183189
return validateOneAnchorTagField(message, url);
184190
},
185191
$.mage.__('Adding link in both content and outer element is not allowed')

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/modal/dismissible-confirm.js

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,56 @@ define([
2020
], function ($, _, promptContentTmpl, $t) {
2121
'use strict';
2222

23+
/**
24+
* Create buttons array for modal options
25+
*
26+
* @param {String | Boolean} buttonText
27+
* @param {Boolean} haveCancelButton
28+
* @return {Object}
29+
*/
30+
function buttonsConfig(buttonText, haveCancelButton) {
31+
var cancelButton = {
32+
text: $.mage.__('Cancel'),
33+
class: 'action-secondary action-dismiss',
34+
35+
/**
36+
* Click handler.
37+
*/
38+
click: function () {
39+
this.closeModal(false);
40+
}
41+
},
42+
confirmButton = {
43+
text: $.mage.__('OK'),
44+
class: 'action-primary action-accept',
45+
46+
/**
47+
* Click handler.
48+
*/
49+
click: function () {
50+
this.closeModal(true);
51+
}
52+
},
53+
buttons = [];
54+
55+
if (typeof buttonText !== 'undefined') {
56+
confirmButton.text = buttonText;
57+
}
58+
59+
if (haveCancelButton !== false) {
60+
buttons.push(cancelButton);
61+
}
62+
buttons.push(confirmButton);
63+
64+
return buttons;
65+
}
66+
2367
$.widget('mage.dismissibleConfirm', $.mage.prompt, {
2468
options: {
2569
promptContentTmpl: promptContentTmpl,
2670
dismissible: false, // Can the modal be dismissed?
2771
dismissKey: 'default', // The key we'll check to see if the modal has already been dismissed
28-
dismissMessage: $t('Do not show this again'), // Message to display next to the dismiss checkbox
29-
dismissCheckbox: '[name="modal-dnsa"]' // Selector to retrieve dismiss checkbox
72+
dismissMessage: $t('Do not show this again') // Message to display next to the dismiss checkbox
3073
},
3174

3275
/**
@@ -52,7 +95,6 @@ define([
5295
*/
5396
closeModal: function (result) {
5497
this._super(result);
55-
result = result || false;
5698

5799
if (result && this._isDismissed()) {
58100
$.mage.cookies.set(this.options.dismissKey, 'true', {});
@@ -70,6 +112,10 @@ define([
70112
});
71113

72114
return function (config) {
115+
config.buttons = buttonsConfig(config.buttonText, config.haveCancelButton);
116+
delete config.buttonText;
117+
delete config.haveCancelButton;
118+
73119
return $('<div></div>').html(config.content).dismissibleConfirm(config);
74120
};
75121
});

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/modal/nest-link-dialog.js

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import $ from "jquery";
77
import $t from "mage/translate";
88
import events from "Magento_PageBuilder/js/events";
9-
import singleButtonDialog from "Magento_PageBuilder/js/modal/nest-link-dialog";
9+
import confirmationDialog from "Magento_PageBuilder/js/modal/dismissible-confirm";
1010
import Config from "../../config";
1111
import HideShowOption from "../../content-type-menu/hide-show-option";
1212
import {OptionsInterface} from "../../content-type-menu/option.d";
@@ -247,25 +247,25 @@ export default class Preview extends BasePreview {
247247
events.trigger(`image:${this.parent.id}:assignAfter`, imageObject);
248248
const message = dataStore.message as string;
249249
const linkUrl = dataStore.link_url as FieldDefaultsInterface;
250-
const aLinkRegex = /<a.*?>|<\/a>/igm;
251-
if (message.match(aLinkRegex) && dataStore.link_url && ((linkUrl.type === "page"
252-
&& linkUrl.page && linkUrl.page.length !== 0) || (linkUrl.type === "product" && linkUrl.product
253-
&& linkUrl.product.length !== 0) || (linkUrl.type === "category" && linkUrl.category
254-
&& linkUrl.category.length !== 0) || (linkUrl.type === "default" && linkUrl.default
255-
&& linkUrl.default.length !== 0))) {
256-
singleButtonDialog({
250+
const aLinkRegex = /<a[\s]+([^>]+)>|<a>|<\/a>/igm;
251+
if (message.match(aLinkRegex) &&
252+
dataStore.link_url &&
253+
["page", "product", "category", "default"].indexOf(linkUrl.type) !== -1 &&
254+
linkUrl[linkUrl.type] &&
255+
linkUrl[linkUrl.type].length !== 0) {
256+
confirmationDialog({
257257
actions: {
258258
confirm: () => {
259259
const anchorLessMessage = message.replace(aLinkRegex, "");
260-
// Call the parent to remove the child element
261260
this.parent.dataStore.update(anchorLessMessage, "message");
262261
$("#" + this.wysiwyg.elementId).html(anchorLessMessage);
263262
},
264263
},
265-
content: $t("Adding link in both contents and the outer element will result in nesting links. " +
266-
"This may break the structure of the page elements."), // tslint:disable-line:max-line-length
264+
content: $t("Adding link in both contents and the outer element will result in " +
265+
"nesting links. This may break the structure of the page elements."),
267266
title: $t("Nesting links are not allowed"),
268-
buttonText: "Revert Link",
267+
haveCancelButton: false,
268+
buttonText: $t("Revert Link"),
269269
});
270270
}
271271
});

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import $ from "jquery";
77
import $t from "mage/translate";
88
import events from "Magento_PageBuilder/js/events";
9-
import singleButtonDialog from "Magento_PageBuilder/js/modal/nest-link-dialog";
9+
import confirmationDialog from "Magento_PageBuilder/js/modal/dismissible-confirm";
1010
import _ from "underscore";
1111
import {PreviewSortableSortUpdateEventParams} from "../../binding/sortable-children";
1212
import Config from "../../config";
@@ -290,25 +290,25 @@ export default class Preview extends BasePreview {
290290
events.trigger(`image:${this.parent.id}:assignAfter`, imageObject);
291291
const content = dataStore.content as string;
292292
const linkUrl = dataStore.link_url as FieldDefaultsInterface;
293-
const aLinkRegex = /<a.*?>|<\/a>/igm;
294-
if (content.match(aLinkRegex) && dataStore.link_url && ((linkUrl.type === "page"
295-
&& linkUrl.page && linkUrl.page.length !== 0) || (linkUrl.type === "product" && linkUrl.product
296-
&& linkUrl.product.length !== 0) || (linkUrl.type === "category" && linkUrl.category
297-
&& linkUrl.category.length !== 0) || (linkUrl.type === "default" && linkUrl.default
298-
&& linkUrl.default.length !== 0))) {
299-
singleButtonDialog({
293+
const aLinkRegex = /<a[\s]+([^>]+)>|<a>|<\/a>/igm;
294+
if (content.match(aLinkRegex) &&
295+
dataStore.link_url &&
296+
["page", "product", "category", "default"].indexOf(linkUrl.type) !== -1 &&
297+
linkUrl[linkUrl.type] &&
298+
linkUrl[linkUrl.type].length !== 0) {
299+
confirmationDialog({
300300
actions: {
301301
confirm: () => {
302302
const anchorLessMessage = content.replace(aLinkRegex, "");
303-
// Call the parent to remove the child element
304303
this.parent.dataStore.update(anchorLessMessage, "content");
305304
$("#" + this.wysiwyg.elementId).html(anchorLessMessage);
306305
},
307306
},
308-
content: $t("Adding link in both contents and the outer element will result in nesting links. " +
309-
"This may break the structure of the page elements."), // tslint:disable-line:max-line-length
307+
content: $t("Adding link in both contents and the outer element will result in " +
308+
"nesting links. This may break the structure of the page elements."),
310309
title: $t("Nesting links are not allowed"),
311-
buttonText: "Revert Link",
310+
haveCancelButton: false,
311+
buttonText: $t("Revert Link"),
312312
});
313313
}
314314
});

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/types/dismissible-confirm.d.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
interface DismissibleConfirmInterface {
77
actions: object;
88
content: string;
9-
dismissKey: string;
10-
dismissible: boolean;
9+
dismissKey?: string;
10+
dismissible?: boolean;
1111
title: string;
12+
haveCancelButton?: boolean;
13+
buttonText?: string;
1214
}
1315

1416
declare function DismissibleConfirm(config: DismissibleConfirmInterface): void;

0 commit comments

Comments
 (0)