From 66d1aecdb911a734bd1321e7d542da16011fdae7 Mon Sep 17 00:00:00 2001 From: Amandine Trolet Date: Mon, 17 Feb 2025 15:33:52 +0100 Subject: [PATCH 1/3] Add attribute to hide share story button --- examples/amp-story/amp-story-social-share.html | 2 +- extensions/amp-story/1.0/amp-story-store-service.js | 6 ++++++ extensions/amp-story/1.0/amp-story.js | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/examples/amp-story/amp-story-social-share.html b/examples/amp-story/amp-story-social-share.html index a67f7807ebc2..c3c572ce5cbb 100644 --- a/examples/amp-story/amp-story-social-share.html +++ b/examples/amp-story/amp-story-social-share.html @@ -125,7 +125,7 @@ - + Share on diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js index dbd09c70498b..e126ba500329 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -247,6 +247,7 @@ const Action = mangleObjectValues({ TOGGLE_PAGE_HAS_ELEMENT_WITH_PLAYBACK: 'togglePageHasElementWithPlayblack', TOGGLE_PAUSED: 'togglePaused', TOGGLE_RTL: 'toggleRtl', + TOGGLE_SHARE_BUTTON: 'toggleShareButton', TOGGLE_SHARE_MENU: 'toggleShareMenu', TOGGLE_STORY_HAS_BACKGROUND_AUDIO: 'toggleStoryHasBackgroundAudio', TOGGLE_STORY_HAS_PLAYBACK_UI: 'toggleStoryHasPlaybackUi', @@ -420,6 +421,11 @@ const actions = (state, action, data) => { ...state, [StateProperty.KEYBOARD_ACTIVE_STATE]: !!data, }); + case Action.TOGGLE_SHARE_BUTTON: + return /** @type {!State} */ ({ + ...state, + [StateProperty.CAN_SHOW_SHARING_UIS]: !!data, + }); case Action.TOGGLE_SHARE_MENU: return /** @type {!State} */ ({ ...state, diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index ccdff08c808e..0f74b17fbec7 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -145,6 +145,7 @@ const Attributes = { ADVANCE_TO: 'i-amphtml-advance-to', AUTO_ADVANCE_AFTER: 'auto-advance-after', AUTO_ADVANCE_TO: 'auto-advance-to', + NO_SHARING: 'hide-share-button', MUTED: 'muted', ORIENTATION: 'orientation', PUBLIC_ADVANCE_TO: 'advance-to', @@ -401,6 +402,11 @@ export class AmpStory extends AMP.BaseElement { ); } + this.storeService_.dispatch( + Action.TOGGLE_SHARE_BUTTON, + !this.element.hasAttribute([Attributes.NO_SHARING]) + ); + // Removes title in order to prevent incorrect titles appearing on link // hover. (See 17654) if (!this.platform_.isBot()) { From 056fbe39f092f6acd754effd65d1555615e801b0 Mon Sep 17 00:00:00 2001 From: Amandine Trolet Date: Mon, 17 Feb 2025 16:23:11 +0100 Subject: [PATCH 2/3] Fix for embed mode 2 --- extensions/amp-story/1.0/amp-story.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index 0f74b17fbec7..c3efd7a906b4 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -402,10 +402,9 @@ export class AmpStory extends AMP.BaseElement { ); } - this.storeService_.dispatch( - Action.TOGGLE_SHARE_BUTTON, - !this.element.hasAttribute([Attributes.NO_SHARING]) - ); + if (this.element.hasAttribute([Attributes.NO_SHARING])) { + this.storeService_.dispatch(Action.TOGGLE_SHARE_BUTTON, false); + } // Removes title in order to prevent incorrect titles appearing on link // hover. (See 17654) From d055d714408e222e4025d2a37c7cffee38c7985a Mon Sep 17 00:00:00 2001 From: Amandine Trolet Date: Tue, 18 Feb 2025 10:38:03 +0100 Subject: [PATCH 3/3] Add unit test amp-story --- extensions/amp-story/1.0/amp-story.js | 27 ++++++++++++++++--- .../amp-story/1.0/test/test-amp-story.js | 9 +++++++ 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index c3efd7a906b4..b9552eefd92b 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -374,6 +374,10 @@ export class AmpStory extends AMP.BaseElement { this.initializeStandaloneStory_(); } + if (this.isShareButtonHidden_()) { + this.initializeShareButton_(false); + } + // buildCallback already runs in a mutate context. Calling another // mutateElement explicitly will force the runtime to remeasure the // amp-story element, fixing rendering bugs where the story is inactive @@ -402,10 +406,6 @@ export class AmpStory extends AMP.BaseElement { ); } - if (this.element.hasAttribute([Attributes.NO_SHARING])) { - this.storeService_.dispatch(Action.TOGGLE_SHARE_BUTTON, false); - } - // Removes title in order to prevent incorrect titles appearing on link // hover. (See 17654) if (!this.platform_.isBot()) { @@ -581,6 +581,16 @@ export class AmpStory extends AMP.BaseElement { this.onResizeDebounced(); } + /** + * Initializes the share button by toggling its visibility. + * + * @param {boolean} canShow - A boolean indicating whether the share button should be shown. + * @private + */ + initializeShareButton_(canShow) { + this.storeService_.dispatch(Action.TOGGLE_SHARE_BUTTON, canShow); + } + /** * Initializes page ids by deduplicating them. * @private @@ -2027,6 +2037,15 @@ export class AmpStory extends AMP.BaseElement { return this.element.hasAttribute(Attributes.SUPPORTS_LANDSCAPE); } + /** + * Checks if the share button is hidden. + * @return {boolean} True if the share button is hidden, false otherwise. + * @private + */ + isShareButtonHidden_() { + return this.element.hasAttribute(Attributes.NO_SHARING); + } + /** * Reacts to paused state updates. * @param {boolean} isPaused diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js index 27a1b5a7b721..037b391e7e48 100644 --- a/extensions/amp-story/1.0/test/test-amp-story.js +++ b/extensions/amp-story/1.0/test/test-amp-story.js @@ -492,6 +492,15 @@ describes.realWin( ]); }); + it('should hide the share button', async () => { + await createStoryWithPages(2, ['cover', 'page-1']); + story.element.setAttribute('hide-share-button', ''); + story.buildCallback(); + await story.layoutCallback(); + expect(story.storeService_.get(StateProperty.CAN_SHOW_SHARING_UIS)).to.be + .false; + }); + describe('amp-story consent', () => { it('should pause the story if there is a consent', async () => { await createStoryWithPages(2, ['cover', 'page-1']);