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..b9552eefd92b 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', @@ -373,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 @@ -576,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 @@ -2022,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']);