Split amp-stream-gallery

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);

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;

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'];

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', {}, () => {