From 38ec6411c7883e029d362d0def27e2f64ed59dc1 Mon Sep 17 00:00:00 2001 From: krdwan Date: Tue, 4 May 2021 14:26:12 -0400 Subject: [PATCH] Split amp-stream-gallery --- .../1.0/amp-stream-gallery.js | 99 ++++--------------- .../amp-stream-gallery/1.0/base-element.js | 74 ++++++++++++++ .../1.0/{stream-gallery.js => component.js} | 0 .../amp-stream-gallery/1.0/storybook/Basic.js | 2 +- .../1.0/test/test-stream-gallery.js | 2 +- 5 files changed, 96 insertions(+), 81 deletions(-) create mode 100644 extensions/amp-stream-gallery/1.0/base-element.js rename extensions/amp-stream-gallery/1.0/{stream-gallery.js => component.js} (100%) diff --git a/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js b/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js index ad253c875838..15269c9b7634 100644 --- a/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js +++ b/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js @@ -15,25 +15,20 @@ */ import {ActionTrust} from '../../../src/core/constants/action-constants'; -import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/base-carousel.jss'; +import {BaseElement} from './base-element'; import {CSS} from '../../../build/amp-stream-gallery-1.0.css'; -import {CSS as GALLERY_CSS} from './stream-gallery.jss'; -import {PreactBaseElement} from '../../../src/preact/base-element'; import {Services} from '../../../src/services'; -import {StreamGallery} from './stream-gallery'; import {createCustomEvent} from '../../../src/event-helper'; -import {dict} from '../../../src/core/types/object'; -import {dispatchCustomEvent} from '../../../src/dom'; import {isExperimentOn} from '../../../src/experiments'; +import {toWin} from '../../../src/types'; import {userAssert} from '../../../src/log'; /** @const {string} */ const TAG = 'amp-stream-gallery'; -class AmpStreamGallery extends PreactBaseElement { +class AmpStreamGallery extends BaseElement { /** @override */ init() { - const {element} = this; this.registerApiAction('prev', (api) => api.prev(), ActionTrust.LOW); this.registerApiAction('next', (api) => api.next(), ActionTrust.LOW); this.registerApiAction( @@ -45,11 +40,7 @@ class AmpStreamGallery extends PreactBaseElement { ActionTrust.LOW ); - return dict({ - 'onSlideChange': (index) => { - fireSlideChangeEvent(this.win, element, index, ActionTrust.HIGH); - }, - }); + return super.init(); } /** @override */ @@ -61,74 +52,24 @@ class AmpStreamGallery extends PreactBaseElement { ); return super.isLayoutSupported(layout); } -} - -/** - * Triggers a 'slideChange' event with one data param: - * 'index' - index of the current slide. - * @param {!Window} win - * @param {!Element} el The element that was selected or deslected. - * @param {number} index - * @param {!ActionTrust} trust - * @private - */ -function fireSlideChangeEvent(win, el, index, trust) { - const eventName = 'slideChange'; - const data = dict({'index': index}); - const slideChangeEvent = createCustomEvent( - win, - `amp-stream-gallery.${eventName}`, - data - ); - Services.actionServiceForDoc(el).trigger( - el, - eventName, - slideChangeEvent, - trust - ); - dispatchCustomEvent(el, eventName, data); -} - -/** @override */ -AmpStreamGallery['Component'] = StreamGallery; -/** @override */ -AmpStreamGallery['layoutSizeDefined'] = true; - -/** @override */ -AmpStreamGallery['props'] = { - 'arrowPrevAs': { - selector: '[slot="prev-arrow"]', - single: true, - as: true, - }, - 'arrowNextAs': { - selector: '[slot="next-arrow"]', - single: true, - as: true, - }, - 'controls': {attr: 'controls', type: 'string', media: true}, - 'extraSpace': {attr: 'extra-space', type: 'string', media: true}, - 'loop': {attr: 'loop', type: 'boolean', media: true}, - 'minItemWidth': {attr: 'min-item-width', type: 'number', media: true}, - 'maxItemWidth': {attr: 'max-item-width', type: 'number', media: true}, - 'maxVisibleCount': {attr: 'max-visible-count', type: 'number', media: true}, - 'minVisibleCount': {attr: 'min-visible-count', type: 'number', media: true}, - 'outsetArrows': {attr: 'outset-arrows', type: 'boolean', media: true}, - 'peek': {attr: 'peek', type: 'number', media: true}, - 'slideAlign': {attr: 'slide-align', type: 'string', media: true}, - 'snap': {attr: 'snap', type: 'boolean', media: true}, - 'children': { - selector: '*', // This should be last as catch-all. - single: false, - }, -}; - -/** @override */ -AmpStreamGallery['usesShadowDom'] = true; + /** @override */ + triggerEvent(element, eventName, detail) { + const event = createCustomEvent( + toWin(element.ownerDocument.defaultView), + `amp-stream-gallery.${eventName}`, + detail + ); + Services.actionServiceForDoc(element).trigger( + element, + eventName, + event, + ActionTrust.HIGH + ); -/** @override */ -AmpStreamGallery['shadowCss'] = GALLERY_CSS + CAROUSEL_CSS; + super.triggerEvent(element, eventName, detail); + } +} AMP.extension(TAG, '1.0', (AMP) => { AMP.registerElement(TAG, AmpStreamGallery, CSS); diff --git a/extensions/amp-stream-gallery/1.0/base-element.js b/extensions/amp-stream-gallery/1.0/base-element.js new file mode 100644 index 000000000000..d9ee0ce5edff --- /dev/null +++ b/extensions/amp-stream-gallery/1.0/base-element.js @@ -0,0 +1,74 @@ +/** + * Copyright 2021 The AMP HTML Authors. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS-IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/base-carousel.jss'; +import {CSS as GALLERY_CSS} from './stream-gallery.jss'; +import {PreactBaseElement} from '../../../src/preact/base-element'; +import {StreamGallery} from './component'; +import {dict} from '../../../src/core/types/object'; + +export class BaseElement extends PreactBaseElement { + /** @override */ + init() { + const {element} = this; + return dict({ + 'onSlideChange': (index) => { + this.triggerEvent(element, 'slideChange', dict({'index': index})); + }, + }); + } +} + +/** @override */ +BaseElement['Component'] = StreamGallery; + +/** @override */ +BaseElement['layoutSizeDefined'] = true; + +/** @override */ +BaseElement['props'] = { + 'arrowPrevAs': { + selector: '[slot="prev-arrow"]', + single: true, + as: true, + }, + 'arrowNextAs': { + selector: '[slot="next-arrow"]', + single: true, + as: true, + }, + 'controls': {attr: 'controls', type: 'string', media: true}, + 'extraSpace': {attr: 'extra-space', type: 'string', media: true}, + 'loop': {attr: 'loop', type: 'boolean', media: true}, + 'minItemWidth': {attr: 'min-item-width', type: 'number', media: true}, + 'maxItemWidth': {attr: 'max-item-width', type: 'number', media: true}, + 'maxVisibleCount': {attr: 'max-visible-count', type: 'number', media: true}, + 'minVisibleCount': {attr: 'min-visible-count', type: 'number', media: true}, + 'outsetArrows': {attr: 'outset-arrows', type: 'boolean', media: true}, + 'peek': {attr: 'peek', type: 'number', media: true}, + 'slideAlign': {attr: 'slide-align', type: 'string', media: true}, + 'snap': {attr: 'snap', type: 'boolean', media: true}, + 'children': { + selector: '*', // This should be last as catch-all. + single: false, + }, +}; + +/** @override */ +BaseElement['usesShadowDom'] = true; + +/** @override */ +BaseElement['shadowCss'] = GALLERY_CSS + CAROUSEL_CSS; diff --git a/extensions/amp-stream-gallery/1.0/stream-gallery.js b/extensions/amp-stream-gallery/1.0/component.js similarity index 100% rename from extensions/amp-stream-gallery/1.0/stream-gallery.js rename to extensions/amp-stream-gallery/1.0/component.js diff --git a/extensions/amp-stream-gallery/1.0/storybook/Basic.js b/extensions/amp-stream-gallery/1.0/storybook/Basic.js index 12b43623b4ea..0ac2631fc06a 100644 --- a/extensions/amp-stream-gallery/1.0/storybook/Basic.js +++ b/extensions/amp-stream-gallery/1.0/storybook/Basic.js @@ -15,7 +15,7 @@ */ import * as Preact from '../../../../src/preact'; -import {StreamGallery} from '../stream-gallery'; +import {StreamGallery} from '../component'; import {boolean, number, select, withKnobs} from '@storybook/addon-knobs'; const CONTROLS = ['auto', 'always', 'never']; diff --git a/extensions/amp-stream-gallery/1.0/test/test-stream-gallery.js b/extensions/amp-stream-gallery/1.0/test/test-stream-gallery.js index 9900fa5c3a4c..b92579964c4a 100644 --- a/extensions/amp-stream-gallery/1.0/test/test-stream-gallery.js +++ b/extensions/amp-stream-gallery/1.0/test/test-stream-gallery.js @@ -15,7 +15,7 @@ */ import * as Preact from '../../../../src/preact'; -import {StreamGallery} from '../stream-gallery'; +import {StreamGallery} from '../component'; import {mount} from 'enzyme'; describes.sandboxed('StreamGallery preact component', {}, () => {