Skip to content

Commit

Permalink
Rename amp-carousel 0.2 to amp-base-carousel (#21034)
Browse files Browse the repository at this point in the history
  • Loading branch information
Sepand Parhami committed Feb 26, 2019
1 parent 420db9d commit 1dfd587
Show file tree
Hide file tree
Showing 55 changed files with 142 additions and 136 deletions.
8 changes: 7 additions & 1 deletion bundles.config.js
Expand Up @@ -77,6 +77,12 @@ exports.extensionBundles = [
{name: 'amp-audio', version: '0.1', type: TYPES.MEDIA},
{name: 'amp-auto-ads', version: '0.1', type: TYPES.AD},
{name: 'amp-auto-lightbox', version: '0.1', type: TYPES.MISC},
{
name: 'amp-base-carousel',
version: '0.1',
options: {hasCss: true},
type: TYPES.MISC,
},
{name: 'amp-beopinion', version: '0.1', type: TYPES.MISC},
{name: 'amp-bind', version: '0.1', type: TYPES.MISC},
{
Expand All @@ -102,7 +108,7 @@ exports.extensionBundles = [
{name: 'amp-call-tracking', version: '0.1', type: TYPES.MISC},
{
name: 'amp-carousel',
version: ['0.1', '0.2'],
version: '0.1',
options: {hasCss: true},
type: TYPES.MISC,
},
Expand Down
Expand Up @@ -16,7 +16,7 @@

@import 'carousel.css';

amp-carousel {
amp-base-carousel {
display: block;
overflow: hidden;
}
Expand Down
Expand Up @@ -16,7 +16,7 @@

import {ActionSource} from './action-source';
import {ActionTrust} from '../../../src/action-constants';
import {CSS} from '../../../build/amp-carousel-0.2.css';
import {CSS} from '../../../build/amp-base-carousel-0.1.css';
import {Carousel} from './carousel.js';
import {
ResponsiveAttributes,
Expand Down Expand Up @@ -282,7 +282,7 @@ class AmpCarousel extends AMP.BaseElement {
}

/**
* Updates the UI of the <amp-carousel> itself, but not the internal
* Updates the UI of the <amp-base-carousel> itself, but not the internal
* implementation.
* @private
*/
Expand Down Expand Up @@ -345,10 +345,10 @@ class AmpCarousel extends AMP.BaseElement {
}
}

AMP.extension('amp-carousel', '0.2', AMP => {
if (!isExperimentOn(AMP.win, 'amp-carousel-v2')) {
AMP.extension('amp-base-carousel', '0.1', AMP => {
if (!isExperimentOn(AMP.win, 'amp-base-carousel')) {
return;
}

AMP.registerElement('amp-carousel', AmpCarousel, CSS);
AMP.registerElement('amp-base-carousel', AmpCarousel, CSS);
});
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

const TAG_NAME = 'amp-carousel';
const TAG_NAME = 'amp-base-carousel';
const SLOTTED_CLASS = 'i-amphtml-carousel-slotted';
const SPACER_CLASS = 'i-amphtml-carousel-spacer';
const SCROLLER_SELECTOR = `${TAG_NAME} .i-amphtml-carousel-scroll`;
Expand Down
Expand Up @@ -54,12 +54,12 @@ describes.endtoend('AMP carousel arrows', {
let nextArrowSlot;

beforeEach(async() => {
await controller.navigateTo('http://localhost:8000/test/manual/amp-carousel-0-2/non-looping.amp.html');
await controller.navigateTo('http://localhost:8000/test/manual/amp-base-carousel/non-looping.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/non-looping.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/non-looping.amp.html');

prevArrowSlot = await getPrevArrowSlot(controller);
nextArrowSlot = await getNextArrowSlot(controller);
Expand Down Expand Up @@ -91,12 +91,12 @@ describes.endtoend('AMP carousel arrows', {
let nextArrow;

beforeEach(async() => {
await controller.navigateTo('http://localhost:8000/test/manual/amp-carousel-0-2/custom-arrows.amp.html');
await controller.navigateTo('http://localhost:8000/test/manual/amp-base-carousel/custom-arrows.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/custom-arrows.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/custom-arrows.amp.html');

nextArrow = await getNextArrow(controller);
prevArrow = await getPrevArrow(controller);
Expand Down
Expand Up @@ -34,15 +34,15 @@ describes.endtoend('AMP carousel autoadvance', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/autoadvance.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/autoadvance.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);
await controller.setWindowRect({
width: pageWidth,
height: pageHeight,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/autoadvance.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/autoadvance.amp.html');
});

it('should move forwards', async() => {
Expand Down
Expand Up @@ -37,16 +37,16 @@ describes.endtoend('AMP carousel', {
controller = env.controller;
ampDriver = env.ampDriver;

await controller.navigateTo('http://localhost:8000/test/manual/amp-carousel-0-2/basic.amp.html');
await controller.navigateTo('http://localhost:8000/test/manual/amp-base-carousel/basic.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.setWindowRect({
width: pageWidth,
height: pageHeight,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/basic.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/basic.amp.html');
});

it('should render correctly', async() => {
Expand Down
Expand Up @@ -36,15 +36,15 @@ describes.endtoend('AMP carousel grouping', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/grouping-move-by-2.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/grouping-move-by-2.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);
await controller.setWindowRect({
width: pageWidth,
height: pageHeight,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/grouping-move-by-2.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/grouping-move-by-2.amp.html');
});

describe('snapping', () => {
Expand Down
Expand Up @@ -29,16 +29,16 @@ describes.endtoend('AMP carousel', {
controller = env.controller;
ampDriver = env.ampDriver;

await controller.navigateTo('http://localhost:8000/test/manual/amp-carousel-0-2/initial-slide.amp.html');
await controller.navigateTo('http://localhost:8000/test/manual/amp-base-carousel/initial-slide.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.setWindowRect({
width: pageWidth,
height: pageHeight,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/initial-slide.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/initial-slide.amp.html');
});

it('should render with the correct initial slide', async() => {
Expand Down
Expand Up @@ -39,9 +39,9 @@ describes.endtoend('AMP carousel max-swipe', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/max-swipe-one.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/max-swipe-one.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.setWindowRect({
width: pageWidth,
Expand All @@ -52,7 +52,7 @@ describes.endtoend('AMP carousel max-swipe', {
describe('looping', () => {
beforeEach(async() => {
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/max-swipe-one.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/max-swipe-one.amp.html');
});

it('should only show one slide on each side initially', async() => {
Expand Down
Expand Up @@ -41,9 +41,9 @@ describes.endtoend('AMP carousel mixed length slides', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/mixed-lengths-no-snap.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/mixed-lengths-no-snap.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.setWindowRect({
width: pageWidth,
Expand All @@ -59,7 +59,7 @@ describes.endtoend('AMP carousel mixed length slides', {

beforeEach(async() => {
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/mixed-lengths-no-snap.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/mixed-lengths-no-snap.amp.html');
});

it('should have the correct initial slide positions', async() => {
Expand Down Expand Up @@ -94,7 +94,7 @@ describes.endtoend('AMP carousel mixed length slides', {

beforeEach(async() => {
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/mixed-lengths.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/mixed-lengths.amp.html');
});

it('should have the correct initial slide positions', async() => {
Expand Down
Expand Up @@ -38,15 +38,15 @@ describes.endtoend('Non-looping AMP carousel', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/non-looping.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/non-looping.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);
await controller.setWindowRect({
width: pageWidth,
height: pageHeight,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/non-looping.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/non-looping.amp.html');
});

it('should render correctly', async() => {
Expand Down
Expand Up @@ -34,16 +34,16 @@ describes.endtoend('AMP Carousel responsive attributes', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/responsive.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/responsive.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);

await controller.setWindowRect({
width: 1000,
height: 600,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/responsive.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/responsive.amp.html');
});

it('should layout correctly initially', async() => {
Expand Down
Expand Up @@ -42,15 +42,15 @@ describes.endtoend('Vertical AMP carousel', {
ampDriver = env.ampDriver;

await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/vertical.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/vertical.amp.html');
await ampDriver.toggleExperiment('layers', true);
await ampDriver.toggleExperiment('amp-carousel-v2', true);
await ampDriver.toggleExperiment('amp-base-carousel', true);
await controller.setWindowRect({
width: pageWidth,
height: pageHeight,
});
await controller.navigateTo(
'http://localhost:8000/test/manual/amp-carousel-0-2/vertical.amp.html');
'http://localhost:8000/test/manual/amp-base-carousel/vertical.amp.html');
});

it('should render correctly', async() => {
Expand Down
Expand Up @@ -6,9 +6,9 @@
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
<style amp-custom>
amp-carousel img {
amp-base-carousel img {
object-fit: cover;
}
</style>
Expand All @@ -17,11 +17,11 @@
</head>
<body>
<h1>An Auto Advancing Carousel</h1>
<amp-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" auto-advance="true">
<amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" auto-advance="true">
<amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
</amp-carousel>
</amp-base-carousel>
<button on="tap:carousel-1.prev()">Prev</button>
<button on="tap:carousel-1.next()">Next</button>
<button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
Expand Down
Expand Up @@ -6,9 +6,9 @@
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
<style amp-custom>
amp-carousel img {
amp-base-carousel img {
object-fit: cover;
}
</style>
Expand All @@ -17,15 +17,15 @@
</head>
<body>
<h1>A Basic carousel, with looping</h1>
<amp-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true">
<amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true">
<amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
<amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
</amp-carousel>
</amp-base-carousel>
<button on="tap:carousel-1.prev()">Prev</button>
<button on="tap:carousel-1.next()">Next</button>
<button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
Expand Down
Expand Up @@ -7,9 +7,9 @@
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
<style amp-custom>
amp-carousel img {
amp-base-carousel img {
object-fit: cover;
}
</style>
Expand All @@ -25,7 +25,7 @@
</script>
</amp-state>
<h1>Using bind to control the slide</h1>
<amp-carousel
<amp-base-carousel
id="carousel-1"
width="300" height="200"
layout="responsive"
Expand All @@ -52,7 +52,7 @@ <h1>Using bind to control the slide</h1>
<div>
<amp-img src="./img/lilacgradient.png" width=300 height=200 layout="responsive"></amp-img>
</div>
</amp-carousel>
</amp-base-carousel>
<button id="slide-0"
on="tap:AMP.setState({'carousel': {'slide': 0}})">
Set slide to 0
Expand Down

0 comments on commit 1dfd587

Please sign in to comment.