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/core/esl-share-config.ts b/src/modules/esl-share/core/esl-share-config.ts index 626d2fd2f..53d7ce82f 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'; @@ -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,10 +173,10 @@ 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)) { - this.append(Object.assign({}, btn, changes)); + /** 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; } 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}'); 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'});