StreamGallery: Initial implementation

build-system/compile/bundles.config.js

@@ -977,6 +977,12 @@ exports.extensionBundles = [
     options: {hasCss: true},
     type: TYPES.MISC,
   },
+  {
+    name: 'amp-stream-gallery',
+    version: '1.0',
+    latestVersion: '0.1',
+    type: TYPES.MISC,
+  },
   {
     name: 'amp-selector',
     version: ['0.1', '1.0'],

build-system/test-configs/dep-check-config.js

@@ -234,6 +234,8 @@ exports.rules = [
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/carousel-events.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/child-layout-manager.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/responsive-attributes.js',
+      'extensions/amp-stream-gallery/1.0/stream-gallery.js->extensions/amp-base-carousel/1.0/base-carousel.js',
+      'extensions/amp-stream-gallery/1.0/stream-gallery.js->extensions/amp-base-carousel/1.0/base-carousel.jss.js',
 
       // Facebook components
       'extensions/amp-facebook-page/0.1/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js',

extensions/amp-base-carousel/1.0/scroller.js

@@ -164,6 +164,9 @@ function ScrollerWithRef(
   // intermediary renders will interupt scroll and cause jank.
   const updateCurrentIndex = () => {
     const container = containerRef.current;
+    if (!container) {
+      return;
+    }
     const slideWidth = container./* OK */ offsetWidth / visibleCount;
     scrollOffset.current =
       container./* OK */ scrollLeft - offsetRef.current * slideWidth;

extensions/amp-stream-gallery/1.0/amp-stream-gallery.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2020 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 './stream-gallery';
+import {isExperimentOn} from '../../../src/experiments';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-stream-gallery';
+
+class AmpStreamGallery extends PreactBaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'amp-stream-gallery-bento'),
+      'expected amp-stream-gallery-bento experiment to be enabled'
+    );
+    return isLayoutSizeDefined(layout);
+  }
+}
+
+/** @override */
+AmpStreamGallery['Component'] = StreamGallery;
+
+/** @override */
+AmpStreamGallery['layoutSizeDefined'] = true;
+
+/** @override */
+AmpStreamGallery['children'] = {
+  'arrowPrev': {
+    name: 'arrowPrev',
+    selector: '[slot="prev-arrow"]',
+    single: true,
+  },
+  'arrowNext': {
+    name: 'arrowNext',
+    selector: '[slot="next-arrow"]',
+    single: true,
+  },
+  'children': {
+    name: 'children',
+    selector: '*', // This should be last as catch-all.
+    single: false,
+  },
+};
+
+/** @override */
+AmpStreamGallery['props'] = {
+  'extraSpace': {attr: 'extra-space', type: 'string'},
+  'insetArrowVisibility': {attr: 'inset-arrow-visibility', type: 'string'},
+  'loop': {attr: 'loop', type: 'boolean'},
+  'minItemWidth': {attr: 'min-item-width', type: 'number'},
+  'maxItemWidth': {attr: 'max-item-width', type: 'number'},
+  'maxVisibleCount': {attr: 'max-visible-count', type: 'number'},
+  'minVisibleCount': {attr: 'min-visible-count', type: 'number'},
+  'outsetArrows': {attr: 'outset-arrows', type: 'boolean'},
+  'peek': {attr: 'peek', type: 'number'},
+  'slideAlign': {attr: 'slide-align', type: 'string'},
+  'snap': {attr: 'snap', type: 'boolean'},
+};
+
+/** @override */
+AmpStreamGallery['shadowCss'] = GALLERY_CSS + CAROUSEL_CSS;
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpStreamGallery);
+});

extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright 2020 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 * as Preact from '../../../../src/preact';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+import {withA11y} from '@storybook/addon-a11y';
+import {withAmp} from '@ampproject/storybook-addon';
+
+const INSET_ARROW_VISIBILITY = ['auto', 'always', 'never'];
+
+export default {
+  title: 'amp-stream-gallery-1_0',
+  decorators: [withKnobs, withA11y, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-stream-gallery', version: '1.0'}],
+
+    experiments: ['amp-stream-gallery-bento', 'amp-stream-carousel-bento'],
+  },
+};
+
+export const Default = () => {
+  const slideCount = number('slide count', 15, {min: 3, max: 99});
+  const extraSpace = boolean('extra space around?', true);
+  const insetArrowVisibility = select(
+    'inset arrow visibility',
+    INSET_ARROW_VISIBILITY
+  );
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const slideAlign = select('slide align', ['start', 'center']);
+  const minItemWidth = number('min item width', 130, {min: 1});
+  const maxItemWidth = number('max item width', 180, {min: 1});
+  const minVisibleCount = number('min visible count', 2.5, {min: 1});
+  const maxVisibleCount = number('max visible count', 5, {min: 1});
+  const peek = number('peek', 0, {min: 1});
+  const outsetArrows = boolean('outset arrows', true);
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <amp-stream-gallery
+      width="735"
+      height="225"
+      layout="responsive"
+      extra-space={extraSpace}
+      inset-arrow-visibility={insetArrowVisibility}
+      loop={loop}
+      min-item-width={minItemWidth}
+      max-item-width={maxItemWidth}
+      min-visible-count={minVisibleCount}
+      max-visible-count={maxVisibleCount}
+      outset-arrows={outsetArrows}
+      peek={peek}
+      slide-align={slideAlign}
+      snap={snap}
+    >
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <amp-layout width="245" height="225" layout="flex-item">
+            <svg viewBox="0 0 440 225">
+              <rect
+                style={{fill: `rgb(${v}, 100, 100)`}}
+                width="440"
+                height="225"
+              />
+              Sorry, your browser does not support inline SVG.
+            </svg>
+          </amp-layout>
+        );
+      })}
+    </amp-stream-gallery>
+  );
+};
+
+Default.story = {
+  name: 'default',
+};

extensions/amp-stream-gallery/1.0/storybook/Basic.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2020 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 * as Preact from '../../../../src/preact';
+import {StreamGallery} from '../stream-gallery';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+import {withA11y} from '@storybook/addon-a11y';
+
+const INSET_ARROW_VISIBILITY = ['auto', 'always', 'never'];
+
+export default {
+  title: 'StreamGallery',
+  component: StreamGallery,
+  decorators: [withA11y, withKnobs],
+};
+
+export const _default = () => {
+  const width = number('width', 735);
+  const height = number('height', 225);
+  const slideCount = number('slide count', 5, {min: 0, max: 99});
+  const extraSpace = boolean('extra space around?', true);
+  const insetArrowVisibility = select(
+    'inset arrow visibility',
+    INSET_ARROW_VISIBILITY
+  );
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const slideAlign = select('slide align', ['start', 'center']);
+  const minItemWidth = number('min item width', 130, {min: 1});
+  const maxItemWidth = number('max item width', 180, {min: 1});
+  const minVisibleCount = number('min visible count', 3, {min: 1});
+  const maxVisibleCount = number('max visible count', 5, {min: 1});
+  const peek = number('peek', 0, {min: 1});
+  const outsetArrows = boolean('outset arrows', true);
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <>
+      <StreamGallery
+        extraSpace={extraSpace ? 'around' : ''}
+        insetArrowVisibility={insetArrowVisibility}
+        loop={loop}
+        slideAlign={slideAlign}
+        snap={snap}
+        outsetArrows={outsetArrows}
+        minItemWidth={minItemWidth}
+        maxItemWidth={maxItemWidth}
+        minVisibleCount={minVisibleCount}
+        maxVisibleCount={maxVisibleCount}
+        peek={peek}
+        style={{width, height}}
+      >
+        {Array.from({length: slideCount}, (_, i) => {
+          const v = colorIncrement * (i + 1);
+          return (
+            <div
+              style={{
+                backgroundColor: `rgb(${v}, 100, 100)`,
+                width,
+                height,
+              }}
+            ></div>
+          );
+        })}
+      </StreamGallery>
+    </>
+  );
+};