Amp slidescroll experiment - Support responsive layouts (ampproject#4395

) * white images on test file * AMP Slidescroll experiment - support responsive layouts
ooyala · Nov 30, 2016 · 45f40f4 · 45f40f4
1 parent 0e168c9
commit 45f40f4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/extensions/amp-carousel/0.1/amp-carousel.css b/extensions/amp-carousel/0.1/amp-carousel.css
@@ -81,9 +81,11 @@ amp-carousel .amp-carousel-button.amp-disabled {
   display: flex !important;
   flex-wrap: nowrap;
   height: 100% !important;
+  left: 0;
   overflow-x: auto !important;
   overflow-y: hidden !important;
-  position: relative !important;
+  position: absolute !important;
+  top: 0;
   white-space: nowrap !important;
   width: 100% !important;
   scroll-snap-type: mandatory !important;
@@ -110,26 +112,6 @@ amp-carousel .amp-carousel-button.amp-disabled {
   display: flex !important;
 }
 
-.-amp-carousel-start-marker,
-.-amp-carousel-end-marker {
-  display: block !important;
-  height: 100% !important;
-  width: 1px !important;
-  background-color: transparent !important;
-  scroll-snap-coordinate: 0 0 !important;
-  flex: 0 0 1px !important;
-}
-
-.-amp-carousel-start-marker {
-  order: -1 !important;
-  margin-left: -1px !important;
-}
-
-.-amp-carousel-end-marker {
-  order: 100000000 !important;
-  margin-right: -1px !important;
-}
-
 .-amp-carousel-start-marker,
 .-amp-carousel-end-marker {
   background-color: transparent !important;

diff --git a/extensions/amp-carousel/0.1/slidescroll.js b/extensions/amp-carousel/0.1/slidescroll.js
@@ -16,7 +16,7 @@
 import {Animation} from '../../../src/animation';
 import {BaseSlides} from './base-slides';
 import {Gestures} from '../../../src/gesture';
-import {Layout} from '../../../src/layout';
+import {isLayoutSizeDefined} from '../../../src/layout';
 import {SwipeXRecognizer} from '../../../src/gesture-recognizers';
 import {getStyle, setStyle} from '../../../src/style';
 import {numeric} from '../../../src/transition';
@@ -37,7 +37,7 @@ const CUSTOM_SNAP_TIMEOUT = 100;
 export class AmpSlideScroll extends BaseSlides {
   /** @override */
   isLayoutSupported(layout) {
-    return layout == Layout.FIXED || layout == Layout.FIXED_HEIGHT;
+    return isLayoutSizeDefined(layout);
   }
   /** @override */
   buildSlides() {

diff --git a/test/manual/amp-slidescroll.amp.html b/test/manual/amp-slidescroll.amp.html
@@ -60,7 +60,7 @@ <h1>Loopy!</h1>
   </amp-carousel>
   <h1>Autoplay</h1>
   <amp-carousel id="carousel-3" width=400 height=300 type=slides controls autoplay>
-    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" layout=fill></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=400 height=300></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=100 height=70></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=400 height=300></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" layout=fill></amp-img>
@@ -71,6 +71,32 @@ <h1>Autoplay</h1>
     <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=400 height=300></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=400 height=300></amp-img>
   </amp-carousel>
+
+  <h1>Responsive Layout</h1>
+  <amp-carousel id="carousel-4" width=400 height=300 type=slides controls layout="responsive">
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" layout=fill></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=400 height=300></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=400 height=300></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" layout=fill></amp-img>
+    <amp-youtube
+        data-videoid="mGENRKrdoGY"
+        width="400" height="300">
+    </amp-youtube>
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=400 height=300></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=400 height=300></amp-img>
+  </amp-carousel>
+
+
+  <h1>White Images</h1>
+  <amp-carousel id="carousel-5" width=400 height=300 type=slides controls>
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=100 height=70></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=100 height=70></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=100 height=70></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=100 height=70></amp-img>
+
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=100 height=70></amp-img>
+    <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=100 height=70></amp-img>
+  </amp-carousel>
 </body>
 </html>