diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md index 055f9a08d997..d90b4b825355 100644 --- a/css/Z_INDEX.md +++ b/css/Z_INDEX.md @@ -40,7 +40,6 @@ | `.i-amphtml-story-toast` | 100004 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) | | `amp-story-access` | 100003 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css) | | `.i-amphtml-story-share-menu` | 100003 | [extensions/amp-story/1.0/amp-story-share-menu.css](/extensions/amp-story/1.0/amp-story-share-menu.css) | -| `.i-amphtml-story-opacity-mask` | 100003 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) | | `.i-amphtml-story-has-new-page-notification-container` | 100002 | [extensions/amp-story/1.0/amp-story-system-layer.css](/extensions/amp-story/1.0/amp-story-system-layer.css) | | `amp-story[standalone] .i-amphtml-story-developer-log` | 100002 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) | | `.i-amphtml-story-button-container` | 100002 | [extensions/amp-story/1.0/pagination-buttons.css](/extensions/amp-story/1.0/pagination-buttons.css) | diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.html b/examples/visual-tests/amp-story/amp-story-sidebar.html deleted file mode 100644 index 6d871206cbd0..000000000000 --- a/examples/visual-tests/amp-story/amp-story-sidebar.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - amp-story sidebar visual diff - - - - - - - - - - - - - - - - -

Hello world!

-

Page one of three

- - - - - - - -

Hello world!

-

Page two of three

- - - - - - - -

Hello world!

-

Page three of three

- - - - - diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.js b/examples/visual-tests/amp-story/amp-story-sidebar.js deleted file mode 100644 index 3f3aaaab9757..000000000000 --- a/examples/visual-tests/amp-story/amp-story-sidebar.js +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -const { - verifySelectorsVisible, -} = require('../../../build-system/tasks/visual-diff/helpers'); - -module.exports = { - 'tapping on sidebar control button should show sidebar and opacity mask': - async (page, name) => { - const screen = page.touchscreen; - await screen.tap(200, 240); - await page.waitForSelector('amp-story-page#cover[active]'); - await page.tap('.i-amphtml-story-sidebar-control'); - await verifySelectorsVisible(page, name, [ - 'amp-sidebar[side][open]', - '.i-amphtml-story-opacity-mask', - ]); - }, - 'tapping on element with sidebar close action should close opacity mask ': - async (page, name) => { - const screen = page.touchscreen; - await screen.tap(200, 240); - await page.waitForSelector('amp-story-page#cover[active]'); - await page.tap('.i-amphtml-story-sidebar-control'); - await page.waitForTimeout(400); - await page.tap('button#close-button'); - await verifySelectorsVisible(page, name, [ - 'amp-sidebar[hidden]', - '.i-amphtml-story-opacity-mask[hidden]', - ]); - }, - 'tapping on the opacity mask should close sidebar ': async (page, name) => { - const screen = page.touchscreen; - await screen.tap(200, 240); - await page.waitForSelector('amp-story-page#cover[active]'); - await page.tap('.i-amphtml-story-sidebar-control'); - await screen.tap(200, 240); - await verifySelectorsVisible(page, name, [ - 'amp-sidebar[hidden]', - '.i-amphtml-story-opacity-mask[hidden]', - ]); - }, -}; diff --git a/extensions/amp-story-interactive/README.md b/extensions/amp-story-interactive/README.md index 1810077acd68..fcbd7857e79a 100644 --- a/extensions/amp-story-interactive/README.md +++ b/extensions/amp-story-interactive/README.md @@ -382,7 +382,7 @@ This is a starting point for creating the inputs on a creation tool (and just a - _Styles_: A good starting point for customizing the style is to provide a color picker for accent color (and can additionally provide gradients for the prompt-background), and have dropdowns to select the theme=dark|light) and chip-style=flat|shadow. Dropdowns are better for future-proofing the attributes, as we may add more styles later. - _Fields_: Prompt text can be a field that, if left empty, the tool doesn't specify it in the component. Options should be a list of custom fields, where users start with 2 options and can add new options (up to 4 if not a binary-poll). Each option requires a text, but more attributes such as the confetti/correct can be assigned to each option. -- _Results_: It's useful to guide the users through creating multi-page results. For quizzes, users can add the results component to any page, but it's a good idea to warn users that they need quizzes on previous pages to use it correctly. Users can edit the attributes in a WYSIWYG editor for the multiple states if tools provide a dropdown to change the visible option, allowing users to input one state at a time (thresholds can be specified on a sidebar for example). Poll results can also be edited in a WYSIWYG manner, but it's a good idea to first require users to create the categories in the results component, and provide a dropdown on each poll option to link it to a category of the results page. This prevents errors in matching the names of the categories across components (eg: titlecase vs lowercase, extra spaces, etc) that are hard to debug from a user standpoint. +- _Results_: It's useful to guide the users through creating multi-page results. For quizzes, users can add the results component to any page, but it's a good idea to warn users that they need quizzes on previous pages to use it correctly. Users can edit the attributes in a WYSIWYG editor for the multiple states if tools provide a dropdown to change the visible option, allowing users to input one state at a time. Poll results can also be edited in a WYSIWYG manner, but it's a good idea to first require users to create the categories in the results component, and provide a dropdown on each poll option to link it to a category of the results page. This prevents errors in matching the names of the categories across components (eg: titlecase vs lowercase, extra spaces, etc) that are hard to debug from a user standpoint. **What if I want to animate the interactive components?** diff --git a/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css b/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css index 7621147020ff..7441c9f77250 100644 --- a/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css +++ b/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css @@ -4,7 +4,3 @@ .i-amphtml-story-background { background-color: transparent; } - -amp-sidebar { - background-color: #ffffff; -} 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 1ab1a3d3e718..5e4e176ae079 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -87,7 +87,6 @@ export let InteractiveReactData; * desktopState: boolean, * educationState: boolean, * gyroscopeEnabledState: string, - * hasSidebarState: boolean, * infoDialogState: boolean, * interactiveEmbeddedComponentState: !InteractiveComponentDef, * interactiveReactState: !Map, @@ -100,7 +99,6 @@ export let InteractiveReactData; * previewState: boolean, * rtlState: boolean, * shareMenuState: boolean, - * sidebarState: boolean, * storyHasAudioState: boolean, * storyHasPlaybackUiState: boolean, * storyHasBackgroundAudioState: boolean, @@ -139,7 +137,6 @@ export const StateProperty = { AFFILIATE_LINK_STATE: 'affiliateLinkState', EDUCATION_STATE: 'educationState', GYROSCOPE_PERMISSION_STATE: 'gyroscopePermissionState', - HAS_SIDEBAR_STATE: 'hasSidebarState', INFO_DIALOG_STATE: 'infoDialogState', INTERACTIVE_COMPONENT_STATE: 'interactiveEmbeddedComponentState', // State of interactive components (polls, quizzes) on the story. @@ -154,7 +151,6 @@ export const StateProperty = { PREVIEW_STATE: 'previewState', RTL_STATE: 'rtlState', SHARE_MENU_STATE: 'shareMenuState', - SIDEBAR_STATE: 'sidebarState', SUPPORTED_BROWSER_STATE: 'supportedBrowserState', // Any page has audio, or amp-story has a `background-audio` attribute. STORY_HAS_AUDIO_STATE: 'storyHasAudioState', @@ -190,7 +186,6 @@ export const Action = { TOGGLE_AD: 'toggleAd', TOGGLE_AFFILIATE_LINK: 'toggleAffiliateLink', TOGGLE_EDUCATION: 'toggleEducation', - TOGGLE_HAS_SIDEBAR: 'toggleHasSidebar', TOGGLE_INFO_DIALOG: 'toggleInfoDialog', TOGGLE_INTERACTIVE_COMPONENT: 'toggleInteractiveComponent', TOGGLE_KEYBOARD_ACTIVE_STATE: 'toggleKeyboardActiveState', @@ -201,7 +196,6 @@ export const Action = { TOGGLE_PAUSED: 'togglePaused', TOGGLE_RTL: 'toggleRtl', TOGGLE_SHARE_MENU: 'toggleShareMenu', - TOGGLE_SIDEBAR: 'toggleSidebar', TOGGLE_SUPPORTED_BROWSER: 'toggleSupportedBrowser', TOGGLE_STORY_HAS_AUDIO: 'toggleStoryHasAudio', TOGGLE_STORY_HAS_BACKGROUND_AUDIO: 'toggleStoryHasBackgroundAudio', @@ -381,21 +375,6 @@ const actions = (state, action, data) => { ...state, [StateProperty.KEYBOARD_ACTIVE_STATE]: !!data, }); - case Action.TOGGLE_SIDEBAR: - // Don't change the PAUSED_STATE if SIDEBAR_STATE is not changed. - if (state[StateProperty.SIDEBAR_STATE] === data) { - return state; - } - return /** @type {!State} */ ({ - ...state, - [StateProperty.PAUSED_STATE]: !!data, - [StateProperty.SIDEBAR_STATE]: !!data, - }); - case Action.TOGGLE_HAS_SIDEBAR: - return /** @type {!State} */ ({ - ...state, - [StateProperty.HAS_SIDEBAR_STATE]: !!data, - }); case Action.TOGGLE_SUPPORTED_BROWSER: return /** @type {!State} */ ({ ...state, @@ -573,7 +552,6 @@ export class AmpStoryStoreService { [StateProperty.AFFILIATE_LINK_STATE]: null, [StateProperty.EDUCATION_STATE]: false, [StateProperty.GYROSCOPE_PERMISSION_STATE]: '', - [StateProperty.HAS_SIDEBAR_STATE]: false, [StateProperty.INFO_DIALOG_STATE]: false, [StateProperty.INTERACTIVE_COMPONENT_STATE]: { state: EmbeddedComponentState.HIDDEN, @@ -588,7 +566,6 @@ export class AmpStoryStoreService { [StateProperty.PAUSED_STATE]: false, [StateProperty.RTL_STATE]: false, [StateProperty.SHARE_MENU_STATE]: false, - [StateProperty.SIDEBAR_STATE]: false, [StateProperty.SUPPORTED_BROWSER_STATE]: true, [StateProperty.STORY_HAS_AUDIO_STATE]: false, [StateProperty.STORY_HAS_BACKGROUND_AUDIO_STATE]: false, diff --git a/extensions/amp-story/1.0/amp-story-system-layer.css b/extensions/amp-story/1.0/amp-story-system-layer.css index 9a3756bc3846..b4ab12b66434 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.css +++ b/extensions/amp-story/1.0/amp-story-system-layer.css @@ -293,15 +293,10 @@ .i-amphtml-story-mute-text, .i-amphtml-story-unmute-sound-text, .i-amphtml-story-unmute-no-sound-text, -.i-amphtml-story-sidebar-control, .i-amphtml-story-skip-to-next { display: none !important; } -[i-amphtml-story-has-sidebar] .i-amphtml-story-sidebar-control { - display: block !important; -} - .i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-mute-audio-control, .i-amphtml-story-has-audio[muted] .i-amphtml-story-unmute-audio-control { display: block !important; @@ -361,10 +356,6 @@ background-image: url('data:image/svg+xml;charset=utf-8,') !important; } -.i-amphtml-story-sidebar-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; -} - .i-amphtml-story-share-control { background-image: url('data:image/svg+xml;charset=utf-8,') !important; } diff --git a/extensions/amp-story/1.0/amp-story-system-layer.js b/extensions/amp-story/1.0/amp-story-system-layer.js index c8ff4e312a06..ab75c1427027 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.js +++ b/extensions/amp-story/1.0/amp-story-system-layer.js @@ -71,18 +71,12 @@ const MESSAGE_DISPLAY_CLASS = 'i-amphtml-story-messagedisplay'; /** @private @const {string} */ const CURRENT_PAGE_HAS_AUDIO_ATTRIBUTE = 'i-amphtml-current-page-has-audio'; -/** @private @const {string} */ -const HAS_SIDEBAR_ATTRIBUTE = 'i-amphtml-story-has-sidebar'; - /** @private @const {string} */ const SHARE_CLASS = 'i-amphtml-story-share-control'; /** @private @const {string} */ const INFO_CLASS = 'i-amphtml-story-info-control'; -/** @private @const {string} */ -const SIDEBAR_CLASS = 'i-amphtml-story-sidebar-control'; - /** @private @const {string} */ const HAS_NEW_PAGE_ATTRIBUTE = 'i-amphtml-story-has-new-page'; @@ -266,13 +260,6 @@ const TEMPLATE = { }), localizedLabelId: LocalizedStringId.AMP_STORY_SHARE_BUTTON_LABEL, }, - { - tag: 'button', - attrs: dict({ - 'class': SIDEBAR_CLASS + ' i-amphtml-story-button', - }), - localizedLabelId: LocalizedStringId.AMP_STORY_SIDEBAR_BUTTON_LABEL, - }, { tag: 'button', attrs: dict({ @@ -329,7 +316,6 @@ const VIEWER_CONTROL_DEFAULTS = { * - story progress bar * - share button * - domain info button - * - sidebar * - story updated label (for live stories) * - close (for players) * - skip (for players) @@ -524,8 +510,6 @@ export class SystemLayer { this.onShareClick_(event); } else if (matches(target, `.${INFO_CLASS}, .${INFO_CLASS} *`)) { this.onInfoClick_(); - } else if (matches(target, `.${SIDEBAR_CLASS}, .${SIDEBAR_CLASS} *`)) { - this.onSidebarClick_(); } else if ( matches( target, @@ -641,14 +625,6 @@ export class SystemLayer { true /** callToInitialize */ ); - this.storeService_.subscribe( - StateProperty.HAS_SIDEBAR_STATE, - (hasSidebar) => { - this.onHasSidebarStateUpdate_(hasSidebar); - }, - true /** callToInitialize */ - ); - this.storeService_.subscribe( StateProperty.SYSTEM_UI_IS_VISIBLE_STATE, (isVisible) => { @@ -695,20 +671,6 @@ export class SystemLayer { : this.getShadowRoot().removeAttribute(AD_SHOWING_ATTRIBUTE); } - /** - * Checks if the story has a sidebar in order to display the icon representing - * the opening of the sidebar. - * @param {boolean} hasSidebar - * @private - */ - onHasSidebarStateUpdate_(hasSidebar) { - if (hasSidebar) { - this.getShadowRoot().setAttribute(HAS_SIDEBAR_ATTRIBUTE, ''); - } else { - this.getShadowRoot().removeAttribute(HAS_SIDEBAR_ATTRIBUTE); - } - } - /** * Reacts to updates to whether audio UI may be shown, and updates the UI * accordingly. @@ -1012,14 +974,6 @@ export class SystemLayer { this.storeService_.dispatch(Action.TOGGLE_INFO_DIALOG, !isOpen); } - /** - * Handles click events on the sidebar button and toggles the sidebar. - * @private - */ - onSidebarClick_() { - this.storeService_.dispatch(Action.TOGGLE_SIDEBAR, true); - } - /** * Shows the "story updated" label when a new page was added to the story. * @private diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css index a2f553336d5c..9b4bf4f7c6da 100644 --- a/extensions/amp-story/1.0/amp-story.css +++ b/extensions/amp-story/1.0/amp-story.css @@ -215,25 +215,6 @@ amp-story-page[active] { z-index: 1 !important; } -.i-amphtml-story-sidebar[open] { - animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !important; - animation-duration: 0.3s !important; - animation-name: i-amphtml-sidebar-slide-in-right; -} - -[desktop] .i-amphtml-story-sidebar { - min-width: 25% !important; - max-width: 600px !important; -} - -.i-amphtml-story-sidebar { - min-width: 75% !important; - max-width: 360px !important; - animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !important; - animation-duration: 0.2s !important; - animation-name: i-amphtml-sidebar-slide-out-right; -} - /* Setting `translateY` distances as a trick so that the runtime schedules * layout for the next N pages. The default value (1000%) means that pages are * not be automatically laid out. Max distance is set to 2 (next 2 pages) since @@ -272,34 +253,6 @@ amp-story-page [data-text-background-color] { -webkit-box-decoration-break: clone !important; } -.i-amphtml-story-opacity-mask { - position: absolute !important; - top: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - opacity: 1 !important; - display: block !important; - /* Prevent someone from making this a full-screen image */ - background-image: none !important; - background-color: rgba(0, 0, 0, 0.75) !important; - visibility: visible; - z-index: 100003 !important; - transition: visibility 0.3s, opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important; -} - -.i-amphtml-story-opacity-mask[hidden] { - opacity: 0 !important; - pointer-events: none !important; - display: block !important; - visibility: hidden; - transition: visibility 0.2s, opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important; -} - -.i-amphtml-sidebar-mask { - display: none !important; -} - /** Call to action layer, positioned at the bottom 20% of the screen. */ amp-story-cta-layer { display: block !important; diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index ad8123ccc294..114b13fd3ba1 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -167,19 +167,6 @@ const MINIMUM_AD_MEDIA_ELEMENTS = 2; */ const STORY_LOADED_CLASS_NAME = 'i-amphtml-story-loaded'; -/** - * CSS class for the opacity layer that separates the amp-sidebar and the rest - * of the story when the amp-sidebar is entering the screen. - * @const {string} - */ -const OPACITY_MASK_CLASS_NAME = 'i-amphtml-story-opacity-mask'; - -/** - * CSS class for sidebars in stories. - * @const {string} - */ -const SIDEBAR_CLASS_NAME = 'i-amphtml-story-sidebar'; - /** @const {!Object} */ const MAX_MEDIA_ELEMENT_COUNTS = { [MediaType.AUDIO]: 4, @@ -195,14 +182,6 @@ const TAG = 'amp-story'; */ const DEFAULT_THEME_COLOR = '#202125'; -/** - * MutationObserverInit options to listen for changes to the `open` attribute. - */ -const SIDEBAR_OBSERVER_OPTIONS = { - attributes: true, - attributeFilter: ['open'], -}; - /** * @implements {./media-pool.MediaPoolRoot} */ @@ -311,15 +290,6 @@ export class AmpStory extends AMP.BaseElement { */ this.pausedStateToRestore_ = null; - /** @private {?Element} */ - this.sidebar_ = null; - - /** @private {?MutationObserver} */ - this.sidebarObserver_ = null; - - /** @private {?Element} */ - this.maskElement_ = null; - /** @private {?LiveStoryManager} */ this.liveStoryManager_ = null; @@ -422,13 +392,7 @@ export class AmpStory extends AMP.BaseElement { Action.SET_ADVANCEMENT_MODE, AdvancementMode.GO_TO_PAGE ); - // If open, closes the sidebar before navigating. - const promise = this.storeService_.get(StateProperty.SIDEBAR_STATE) - ? Services.historyForDoc(this.getAmpDoc()).goBack() - : Promise.resolve(); - promise.then(() => - this.switchTo_(args['id'], NavigationDirection.NEXT) - ); + this.switchTo_(args['id'], NavigationDirection.NEXT); }); } if (isExperimentOn(this.win, 'story-load-first-page-only')) { @@ -748,13 +712,6 @@ export class AmpStory extends AMP.BaseElement { this.onPausedStateUpdate_(isPaused); }); - this.storeService_.subscribe( - StateProperty.SIDEBAR_STATE, - (sidebarState) => { - this.onSidebarStateUpdate_(sidebarState); - } - ); - this.storeService_.subscribe( StateProperty.UI_STATE, (uiState) => { @@ -864,7 +821,6 @@ export class AmpStory extends AMP.BaseElement { if ( embedComponent.state !== EmbeddedComponentState.HIDDEN || this.storeService_.get(StateProperty.ACCESS_STATE) || - this.storeService_.get(StateProperty.SIDEBAR_STATE) || !this.storeService_.get(StateProperty.SYSTEM_UI_IS_VISIBLE_STATE) || !this.storeService_.get(StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT) ) { @@ -974,7 +930,6 @@ export class AmpStory extends AMP.BaseElement { const initialPageId = this.getInitialPageId_(); this.buildSystemLayer_(initialPageId); - this.initializeSidebar_(); this.setThemeColor_(); const storyLayoutPromise = Promise.all([ @@ -1822,108 +1777,6 @@ export class AmpStory extends AMP.BaseElement { this.activePage_.setState(pageState); } - /** - * Reacts to sidebar state updates. - * @param {boolean} sidebarState - * @private - */ - onSidebarStateUpdate_(sidebarState) { - this.analyticsService_.triggerEvent( - sidebarState ? StoryAnalyticsEvent.OPEN : StoryAnalyticsEvent.CLOSE, - this.sidebar_ - ); - - const actions = Services.actionServiceForDoc(this.element); - if (this.win.MutationObserver) { - if (!this.sidebarObserver_) { - this.sidebarObserver_ = new this.win.MutationObserver(() => { - this.storeService_.dispatch( - Action.TOGGLE_SIDEBAR, - this.sidebar_.hasAttribute('open') - ); - }); - } - if (this.sidebar_ && sidebarState) { - this.sidebarObserver_.observe(this.sidebar_, SIDEBAR_OBSERVER_OPTIONS); - this.openOpacityMask_(); - actions.execute( - this.sidebar_, - 'open', - /* args */ null, - /* source */ null, - /* caller */ null, - /* event */ null, - ActionTrust.HIGH - ); - } else { - this.closeOpacityMask_(); - this.sidebarObserver_.disconnect(); - } - } else if (this.sidebar_ && sidebarState) { - this.openOpacityMask_(); - actions.execute( - this.sidebar_, - 'open', - /* args */ null, - /* source */ null, - /* caller */ null, - /* event */ null, - ActionTrust.HIGH - ); - this.storeService_.dispatch(Action.TOGGLE_SIDEBAR, false); - } - } - - /** - * @private - */ - initializeOpacityMask_() { - if (!this.maskElement_) { - const maskEl = this.win.document.createElement('div'); - maskEl.classList.add(OPACITY_MASK_CLASS_NAME); - maskEl.addEventListener('click', () => { - const actions = Services.actionServiceForDoc(this.element); - if (this.sidebar_) { - this.closeOpacityMask_(); - actions.execute( - this.sidebar_, - 'close', - /* args */ null, - /* source */ null, - /* caller */ null, - /* event */ null, - ActionTrust.HIGH - ); - } - }); - this.maskElement_ = maskEl; - this.mutateElement(() => { - this.element.appendChild(this.maskElement_); - toggle(dev().assertElement(this.maskElement_), /* display */ false); - }); - } - } - - /** - * @private - */ - openOpacityMask_() { - this.mutateElement(() => { - toggle(dev().assertElement(this.maskElement_), /* display */ true); - }); - } - - /** - * @private - */ - closeOpacityMask_() { - if (this.maskElement_) { - this.mutateElement(() => { - toggle(dev().assertElement(this.maskElement_), /* display */ false); - }); - } - } - /** * If browser is supported, displays the story. Otherwise, shows either the * default unsupported browser layer or the publisher fallback (if provided). @@ -2454,32 +2307,6 @@ export class AmpStory extends AMP.BaseElement { this.switchTo_(targetPage.element.id, direction); } - /** - * Checks for the presence of a sidebar. If a sidebar does exist, then an icon - * permitting for the opening/closing of the sidebar is shown. - * @private - */ - initializeSidebar_() { - this.sidebar_ = this.element.querySelector('amp-sidebar'); - if (!this.sidebar_) { - return; - } - - this.mutateElement(() => { - this.sidebar_.classList.add(SIDEBAR_CLASS_NAME); - }); - - this.initializeOpacityMask_(); - this.storeService_.dispatch(Action.TOGGLE_HAS_SIDEBAR, !!this.sidebar_); - - const actions = [ - {tagOrTarget: 'AMP-SIDEBAR', method: 'open'}, - {tagOrTarget: 'AMP-SIDEBAR', method: 'close'}, - {tagOrTarget: 'AMP-SIDEBAR', method: 'toggle'}, - ]; - this.storeService_.dispatch(Action.ADD_TO_ACTIONS_ALLOWLIST, actions); - } - /** * Checks for the the storyNavigationPath stack in the history. * @private diff --git a/extensions/amp-story/1.0/test/test-amp-story-system-layer.js b/extensions/amp-story/1.0/test/test-amp-story-system-layer.js index b9aeca19d53f..aabb3e89e4b7 100644 --- a/extensions/amp-story/1.0/test/test-amp-story-system-layer.js +++ b/extensions/amp-story/1.0/test/test-amp-story-system-layer.js @@ -106,14 +106,6 @@ describes.fakeWin('amp-story system layer', {amp: true}, (env) => { ); }); - it('should show the sidebar control only if a sidebar exists', () => { - storeService.dispatch(Action.TOGGLE_HAS_SIDEBAR, true); - systemLayer.build(); - expect(systemLayer.getShadowRoot()).to.have.attribute( - 'i-amphtml-story-has-sidebar' - ); - }); - it('should hide system layer on SYSTEM_UI_IS_VISIBLE_STATE change', () => { systemLayer.build(); storeService.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false); 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 f5bdabab74e6..884c6f4752cf 100644 --- a/extensions/amp-story/1.0/test/test-amp-story.js +++ b/extensions/amp-story/1.0/test/test-amp-story.js @@ -6,7 +6,6 @@ import { StateProperty, UIType, } from '../amp-story-store-service'; -import {ActionTrust} from '#core/constants/action-constants'; import {AdvancementMode} from '../story-analytics'; import {AmpStory} from '../amp-story'; import {AmpStoryConsent} from '../amp-story-consent'; @@ -790,70 +789,6 @@ describes.realWin( }); }); - describe('amp-story custom sidebar', () => { - it('should show the sidebar control if a sidebar exists', async () => { - await createStoryWithPages(2, ['cover', 'page-1']); - - const sidebar = win.document.createElement('amp-sidebar'); - story.element.appendChild(sidebar); - - await story.layoutCallback(); - expect(story.storeService_.get(StateProperty.HAS_SIDEBAR_STATE)).to.be - .true; - }); - }); - - it('should open the sidebar on button click', async () => { - await createStoryWithPages(2, ['cover', 'page-1']); - - const sidebar = win.document.createElement('amp-sidebar'); - story.element.appendChild(sidebar); - - const executeSpy = env.sandbox.spy(); - env.sandbox.stub(Services, 'actionServiceForDoc').returns({ - setAllowlist: () => {}, - trigger: () => {}, - execute: executeSpy, - }); - - story.buildCallback(); - await story.layoutCallback(); - story.storeService_.dispatch(Action.TOGGLE_SIDEBAR, true); - expect(executeSpy).to.have.been.calledWith( - story.sidebar_, - 'open', - null, - null, - null, - null, - ActionTrust.HIGH - ); - }); - - it('should unpause the story when the sidebar is closed', async () => { - await createStoryWithPages(2, ['cover', 'page-1']); - - const sidebar = win.document.createElement('amp-sidebar'); - story.element.appendChild(sidebar); - - env.sandbox.stub(Services, 'actionServiceForDoc').returns({ - setAllowlist: () => {}, - trigger: () => {}, - execute: () => { - sidebar.setAttribute('open', ''); - }, - }); - - story.buildCallback(); - await story.layoutCallback(); - story.storeService_.dispatch(Action.TOGGLE_SIDEBAR, true); - await Promise.resolve(); - story.sidebar_.removeAttribute('open'); - await Promise.resolve(); - expect(story.storeService_.get(StateProperty.SIDEBAR_STATE)).to.be - .false; - }); - it('should add previous visited attribute', async () => { env.sandbox .stub(utils, 'setAttributeInMutate')