From b9b4e5fad974a60c22fbaf022cd5076ae96e6e74 Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Thu, 11 Jan 2024 12:30:29 +0100 Subject: [PATCH 1/3] fix(esl-share): fix merging of `additional`(nested) params when `ESLShareConfig.update` method is called Co-authored-by: Dmitry Shovchko (cherry picked from commit a1b1942907e36597bac89166ba239be402b76df4) --- src/modules/esl-share/core/esl-share-config.ts | 4 ++-- src/modules/esl-share/test/esl-share-config.test.ts | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/modules/esl-share/core/esl-share-config.ts b/src/modules/esl-share/core/esl-share-config.ts index 626d2fd2f..eceddba5b 100644 --- a/src/modules/esl-share/core/esl-share-config.ts +++ b/src/modules/esl-share/core/esl-share-config.ts @@ -1,6 +1,6 @@ import {decorate, memoize} from '../../esl-utils/decorators'; import {microtask} from '../../esl-utils/async/microtask'; -import {isObject} from '../../esl-utils/misc/object/types'; +import {isObject, deepMerge} from '../../esl-utils/misc/object'; import {uniq} from '../../esl-utils/misc/array'; import {SyntheticEventTarget} from '../../esl-utils/dom/events/target'; @@ -176,7 +176,7 @@ export class ESLShareConfig extends SyntheticEventTarget { /** Updates items by the name and passed changes */ public update(name: string, changes: Partial): ESLShareConfig { for (const btn of this.get(name)) { - this.append(Object.assign({}, btn, changes)); + this.append(deepMerge({}, btn, changes)); } return this; } diff --git a/src/modules/esl-share/test/esl-share-config.test.ts b/src/modules/esl-share/test/esl-share-config.test.ts index b2d92172b..a878dab45 100644 --- a/src/modules/esl-share/test/esl-share-config.test.ts +++ b/src/modules/esl-share/test/esl-share-config.test.ts @@ -11,6 +11,7 @@ describe('ESLShareConfig tests', () => { const SAMPLE_BUTTON_3: ESLShareButtonConfig = {name: 'sn3', title: 'SN3', action: 'media', link: 'https://sn3.com'}; const SAMPLE_BUTTON_4: ESLShareButtonConfig = {name: 'sn4', title: 'SN4', action: 'media', link: 'https://sn4.com', icon: ''}; const SAMPLE_BUTTON_5: ESLShareButtonConfig = {name: 'sn-5', title: 'SN5', action: 'media', link: 'https://sn5.com'}; + const SAMPLE_BUTTON_6: ESLShareButtonConfig = {name: 'sn6', title: 'SN6', action: 'media', link: 'https://sn5.com', additional: {a: 1, b: 'test'}}; describe('Getting ESLShareConfig state', () => { const instance: ESLShareConfig = new (ESLShareConfig as any)(); @@ -295,6 +296,12 @@ describe('ESLShareConfig tests', () => { } }); + test('ESLShareConfig.update merge additional properties', () => { + instance.append(SAMPLE_BUTTON_6); + instance.update('sn6', {additional: {a: 2, c: 'test'}}); + expect(instance.get('sn6')).toEqual([expect.objectContaining({...SAMPLE_BUTTON_6, additional: {a: 2, b: 'test', c: 'test'}})]); + }); + test('ESLShareConfig.update does not introduce new items', () => { instance.append([SAMPLE_BUTTON_1, SAMPLE_BUTTON_2]); instance.update('sn1', {title: 'SN3'}); From d3e3c3ae62197972fed35c08b992a2ba7f121634 Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Thu, 11 Jan 2024 12:41:18 +0100 Subject: [PATCH 2/3] fix(esl-share): rename copy action `alertText` param to `copyAlertMsg` Co-authored-by: Dmitry Shovchko (cherry picked from commit 3ba61aca2d6bd44648ab70a7897dcbffcaaa9233) --- src/modules/esl-share/README.md | 4 ++-- src/modules/esl-share/actions/copy-action.ts | 8 ++++---- src/modules/esl-share/buttons/copy.ts | 2 +- src/modules/esl-share/test/actions/copy-action.test.ts | 4 ++-- src/modules/esl-share/test/esl-share-button.test.ts | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/modules/esl-share/README.md b/src/modules/esl-share/README.md index 4f0f515c1..9a87e6b03 100644 --- a/src/modules/esl-share/README.md +++ b/src/modules/esl-share/README.md @@ -176,7 +176,7 @@ or for example the configuration of the copy button "name": "copy", "title": "Copy", "additional": { - "alertText": "Copied to clipboard" + "copyAlertMsg": "Copied to clipboard" } } ``` @@ -221,7 +221,7 @@ The group may include another group. So this configuration describing nested gro ### Share actions available for use ESLShare provides several actions available for you to use: - - `copy` - action for copying to the clipboard. It can use additional params `alertText` (with message text) to show an alert to indicate a successful operation + - `copy` - action for copying to the clipboard. It can use additional params `copyAlertMsg` (with message text) to show an alert to indicate a successful operation - `external` - action for sharing via an external application. It is used to produce actions via external applications linked via schema in URL (for example mailto:, news: or tel: ) - `media` - action for sharing via a link to share on a social media - `native` - action for sharing that invokes the native sharing mechanism of Web Share API diff --git a/src/modules/esl-share/actions/copy-action.ts b/src/modules/esl-share/actions/copy-action.ts index 878a3db7e..eace66e5b 100644 --- a/src/modules/esl-share/actions/copy-action.ts +++ b/src/modules/esl-share/actions/copy-action.ts @@ -20,15 +20,15 @@ export class ESLShareCopyAction extends ESLShareBaseAction { if (!this.isAvailable || !url) return; await navigator.clipboard.writeText(url); - this.showCopyAlert($button.shareAdditional?.alertText); + this.showCopyAlert($button.shareAdditional?.copyAlertMsg); } /** Shows alert about the successful action completion */ - protected showCopyAlert(alertText: string): void { - if (!alertText) return; + protected showCopyAlert(msg: string): void { + if (!msg) return; const detail = { cls: 'esl-share-alert', - html: `${alertText}` + html: `${msg}` }; ESLEventUtils.dispatch(document.body, 'esl:alert:show', {detail}); } diff --git a/src/modules/esl-share/buttons/copy.ts b/src/modules/esl-share/buttons/copy.ts index 217647599..1d6f6e28b 100644 --- a/src/modules/esl-share/buttons/copy.ts +++ b/src/modules/esl-share/buttons/copy.ts @@ -11,7 +11,7 @@ export const copy: ESLShareButtonConfig = { name: 'copy', title: 'Copy', additional: { - alertText: 'Copied to clipboard' + copyAlertMsg: 'Copied to clipboard' } }; ESLShareConfig.append(copy); diff --git a/src/modules/esl-share/test/actions/copy-action.test.ts b/src/modules/esl-share/test/actions/copy-action.test.ts index 32375c2ce..901f56147 100644 --- a/src/modules/esl-share/test/actions/copy-action.test.ts +++ b/src/modules/esl-share/test/actions/copy-action.test.ts @@ -23,7 +23,7 @@ describe('ESLShare: "copy" action public API', () => { document.body.appendChild($button); $button.setAttribute('share-title', 'Test button title'); $button.setAttribute('share-url', '/test/button/url'); - $button.setAttribute('additional', '{"alertText": "Copied to clipboard"}'); + $button.setAttribute('additional', '{"copyAlertMsg": "Copied to clipboard"}'); }); afterEach(() => { @@ -44,7 +44,7 @@ describe('ESLShare: "copy" action public API', () => { expect(mockClipboard.writeText).toBeCalledWith('http://localhost/test/button/url'); }); - test('should dispatch esl:alert:show with shareAdditional.alertText when share() calls', (done) => { + test('should dispatch esl:alert:show with shareAdditional.copyAlertMsg when share() calls', (done) => { document.body.addEventListener('esl:alert:show', (e) => { expect((e as CustomEvent).detail).toEqual({ cls: 'esl-share-alert', diff --git a/src/modules/esl-share/test/esl-share-button.test.ts b/src/modules/esl-share/test/esl-share-button.test.ts index f2a6b7675..df92d9480 100644 --- a/src/modules/esl-share/test/esl-share-button.test.ts +++ b/src/modules/esl-share/test/esl-share-button.test.ts @@ -47,7 +47,7 @@ describe('ESLShareButton tests', () => { }); test('shareAdditional getter available', () => { - expect($copyButton.shareAdditional).toEqual({alertText: 'Copied to clipboard'}); + expect($copyButton.shareAdditional).toEqual({copyAlertMsg: 'Copied to clipboard'}); }); test('shareLink getter available', () => { expect($facebookButton.shareLink).toBe('//www.facebook.com/sharer.php?u={u}'); From fa872589cc37fbb33028ddcc00ac3b42561db9c1 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Thu, 18 Jan 2024 17:21:39 +0200 Subject: [PATCH 3/3] style(esl-share): update variable naming (cherry picked from commit 0d94f310f14caa64c648f6642dcb0814ce42f4c4) --- src/modules/esl-share/core/esl-share-config.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/modules/esl-share/core/esl-share-config.ts b/src/modules/esl-share/core/esl-share-config.ts index eceddba5b..53d7ce82f 100644 --- a/src/modules/esl-share/core/esl-share-config.ts +++ b/src/modules/esl-share/core/esl-share-config.ts @@ -77,9 +77,9 @@ export class ESLShareConfig extends SyntheticEventTarget { return ESLShareConfig.instance; } - /** Updates items by the name and passed changes */ - public static update(name: string, changes: Partial): ESLShareConfig { - return ESLShareConfig.instance.update(name, changes); + /** Updates items configuration from the list with the specified partial config */ + public static update(query: string, changes: Partial): ESLShareConfig { + return ESLShareConfig.instance.update(query, changes); } /** Appends single button or group to current configuration */ @@ -173,9 +173,9 @@ export class ESLShareConfig extends SyntheticEventTarget { return this; } - /** Updates items by the name and passed changes */ - public update(name: string, changes: Partial): ESLShareConfig { - for (const btn of this.get(name)) { + /** Updates items configuration from the list with the specified partial config */ + public update(query: string, changes: Partial): ESLShareConfig { + for (const btn of this.get(query)) { this.append(deepMerge({}, btn, changes)); } return this;