Create amp-carousel 0.2 based on amp-base-carousel #23393

sparhami · 2019-07-18T00:07:40Z

The main goal of this PR is to create a mostly API compatible update to <amp-carousel>, addressing numerous bugs. This is not strictly API compatible due to how the arrow buttons are positioned to allow automatic flipping in RTL.

This uses the same DOM structure as amp-carousel as far as slides and their classes are concerned for both type="slides" and type="carousel". This maintains the API of the existing carousel. This does not add support for media queries in attributes, handling updating the slides or any other features of <amp-base-carousel>.

Fix a bad usage of clamp
Rename some base carousel classes to not clash
Make scrollbar hiding optional, as type="carousel" does not hide the scrollbar
Use setAsowner for managing when to schedule layout for children
Use IntersectionObserver to determine when to layout/unlayout/pause/resume slides
- This is mostly important for type="carousel", where slides can be of mixed length, and we cannot rely on the current index to tell when to actually layout adjacent slides
- If IntersectionObserver is not supported, this currently skips setAsOwner and just relies on the runtime
Fix arrow button hiding when at the start/end for RTL
Fix bug where if you touch/wheel scrolled exactly when the scroll position was being reset, the current index would not be reported correctly

Will add some e2e tests in a subsequent PR to keep this from growing too large. Also, once we are comfortable with the state of the component, docs/examples can be updated to point to 0.2.

- Uses amp-base-carousel's implementation, with the amp-carousel API / styling.

- Fix race condition with reset window position and scroll.

sparhami · 2019-07-24T23:21:57Z

@alanorozco If you don't have the bandwidth to review this, feel free to re-assign.

cvializ

First pass

cvializ · 2019-07-29T19:59:30Z

bundles.config.js

@@ -270,7 +270,7 @@ exports.extensionBundles = [
  },
  {
    name: 'amp-carousel',
-    version: '0.1',
+    version: ['0.1', '0.2'],
    latestVersion: '0.1',


What effect does it have adding 0.2 but leaving latestVersion: '0.1'?

The latest version is what amp-carousel-latest will point at, which is 0.1. The background to this field is that we originally had amp-base-carousel as 0.2, but it had an incompatible API and was under experiment, which broke people relying on "latest". It was decided that the latestVersion would be locked at the existing latest version at the time of the change for all extensions, and that we would deprecate the usage so we didn't break people again in the future.

cvializ · 2019-07-29T20:02:29Z

extensions/amp-carousel/0.2/amp-carousel.js

+  /**
+   * @private
+   */
+  setupActions_() {


nit: it's unusual to have a private method before the constructor

Its something I am trying out and also trying it out for amp-stream-gallery, which I will send out later: https://github.com/sparhami/amphtml/blob/9634040f99658bb2651b5d3a48c58fd9c97b66a3/extensions/amp-stream-gallery/0.1/amp-stream-gallery.js#L53-L128

The thinking is that actions and attributes are the public API of the component, and usually the first thing I want to see in the file to figure out what it does. I can move this down for now, but there may be some way to make this less awkward. Any thoughts?

cvializ · 2019-07-29T20:05:08Z

extensions/amp-base-carousel/0.1/carousel.js

+  }
+
+  /**
+   *


nit: add descriptive comment.

This happens to me so often when I just want the red lines to go away 😂

Oops! Added comments and renamed these methods.

cvializ · 2019-07-29T20:06:38Z

extensions/amp-base-carousel/0.1/child-layout-manager.js

+ * }
+ * ```
+ */
+export class ChildLayoutManager {


Is this needed because Layers hasn't launched yet?

Yep. When layers is ready, we might either take this away, or perhaps figure out if there is some value to having a carousel specific implementation (are there cases where we know what to do better than layers, which is more general?).

I think one (not very common, but possible) case is if you are say on the first slide and want to go to the nth slide (either by clicking a pagination dot, or some programmatic action). Since we smooth scroll, layers and this code will possibly (likely) load may slides along the way.

We could be a bit smarter and say to not load any slides along the way, and only load the destination slide.

Another possible difference is that we may not want to unlayout slides (or defer it) in case a user wants to go back and forth through a carousel. Currently, I believe runtime will unlayout things that exit the extended viewport area. This code does the same for now.

This actually differs from how carousel 0.1 works, which never does unlayout on slides (though it does display: none them).

cvializ · 2019-07-29T20:08:18Z

extensions/amp-carousel/0.2/amp-carousel.js

+   * @private
+   */
+  setupActions_() {
+    this.registerAction(


Can you help me understand the difference between <amp-base-carousel> and <amp-carousel> 0.2? I see that it imports the Carousel class from amp-base-carousel but the AMP element amp-base-carousel is still around.

Sure. <amp-carousel> 0.2 is an almost exactly API compatible replacement for 0.1, with a minor breaking change on how arrow buttons are laid out (as far as I know, that should be the only breaking change, there could be more).

<amp-base-carousel> has a different API and way of doing things that makes the API considerably different. For example, the way that the equivalent type="carousel" is handled is quite different.

The idea here is that they can share an internal implementation, which fixes a lot of outstanding issues with amp-carousel without requiring developers to do too much work to figure out how to make <amp-base-carousel> work for their use case.

In the longer term, we think most developers will want to use the amp-stream-gallery and amp-inline-gallery components, with amp-base-carousel serving as a building block.

I did consider actually instantiating an <amp-base-carousel> internally here, but wasn't sure if that was a good idea for now.

cvializ

LGTM smash that merge button

…0_2_on_base

* cl/262363476 Add width and height attributes to the svg SYMBOL tag validation rules. * cl/262384419 Revision bump for #23406 * cl/262398573 Revision bump for #23393 * cl/262415464 Add devmode validation logic. * cl/262420139 s/amphtml-dev-mode/ampdevmode/ in our error strings. * cl/262430869 Convert python scripts to be python3 compatible. * cl/262440817 Revision bump for #23800 * cl/262442134 Revision bump for #23826

The main goal of this PR is to create a mostly API compatible update to `<amp-carousel>`, addressing numerous bugs. This is not strictly API compatible due to how the arrow buttons are positioned to allow automatic flipping in RTL. This uses the same DOM structure as amp-carousel as far as slides and their classes are concerned for both `type="slides"` and `type="carousel"`. This maintains the API of the existing carousel. This does not add support for media queries in attributes, handling updating the slides or any other features of `<amp-base-carousel>`. - Fix a bad usage of `clamp` - Rename some base carousel classes to not clash - Make scrollbar hiding optional, as `type="carousel"` does not hide the scrollbar - Use `setOwner` for managing when to schedule layout for children - Use `IntersectionObserver` to determine when to layout/unlayout/pause/resume slides * This is mostly important for `type="carousel"`, where slides can be of mixed length, and we cannot rely on the current index to tell when to actually layout adjacent slides * If IntersectionObserver is not supported, this currently skips `setOwner` and just relies on the runtime - Fix arrow button hiding when at the start/end for RTL - Fix bug where if you touch/wheel scrolled exactly when the scroll position was being reset, the current index would not be reported correctly

* cl/262363476 Add width and height attributes to the svg SYMBOL tag validation rules. * cl/262384419 Revision bump for ampproject#23406 * cl/262398573 Revision bump for ampproject#23393 * cl/262415464 Add devmode validation logic. * cl/262420139 s/amphtml-dev-mode/ampdevmode/ in our error strings. * cl/262430869 Convert python scripts to be python3 compatible. * cl/262440817 Revision bump for ampproject#23800 * cl/262442134 Revision bump for ampproject#23826

Sepand Parhami added 12 commits June 6, 2019 11:34

Initial code for amp-carousel 0.2.

304962f

- Uses amp-base-carousel's implementation, with the amp-carousel API / styling.

Support more autoplay stuff.

7b1302b

Add button title logic.

bd90d6d

Set button role for slides.

3e5b88b

Fix arrow positioning.

ebcf63d

Move styling closer to equivalent, pause/resume slides.

0f45b81

Change buttons hiding class name to match.

a5cfb0e

Trigger analytics event on slide change.

8c4a536

Merge branch 'master' of github.com:ampproject/amphtml

676e07d

Remove old tests, add a few simple tests.

a35bc23

Merge branch 'master' into carousel_0_2_on_base

20da4a1

Fix arrow hiding.

77c9019

googlebot added the cla: yes label Jul 18, 2019

Sepand Parhami added 2 commits July 19, 2019 16:07

Add more tests.

5241c9e

- Fix race condition with reset window position and scroll.

Handle child layout using setAsOwner.

20826cd

sparhami force-pushed the carousel_0_2_on_base branch from 7201324 to 20826cd Compare July 24, 2019 22:59

Fix bad usage of clamp.

f681dda

sparhami requested a review from alanorozco July 24, 2019 23:21

sparhami marked this pull request as ready for review July 24, 2019 23:21

Fix presubmit checks.

ab67a89

sparhami requested review from cvializ and removed request for alanorozco July 29, 2019 18:46

cvializ reviewed Jul 29, 2019

View reviewed changes

Add comment, rename methods.

d5c2695

sparhami requested a review from cvializ August 6, 2019 18:16

cvializ approved these changes Aug 6, 2019

View reviewed changes

Sepand Parhami added 3 commits August 6, 2019 12:53

Fix dep check.

10b9624

Merge branch 'master' into carousel_0_2_on_base

c9fad54

Add version 0.2 to validator.

dace9f5

Sepand Parhami added 9 commits August 6, 2019 13:39

Fix missing returns docs.

076927d

Fix types, update for owners change.

20a168c

Fix lint.

a899c05

Fix tests.

1e5c76c

Merge branch 'master' of github.com:ampproject/amphtml into carousel_…

1544df1

…0_2_on_base

Fix lint.

f58f0cf

Fix asking for owners service too early.

e5429e7

Fix selectors used in tests.

58dd559

Fix selectors again.

067c3cb

sparhami merged commit 20c7ce7 into ampproject:master Aug 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create amp-carousel 0.2 based on amp-base-carousel #23393

Create amp-carousel 0.2 based on amp-base-carousel #23393

sparhami commented Jul 18, 2019 •

edited

sparhami commented Jul 24, 2019

cvializ left a comment •

edited

cvializ Jul 29, 2019

sparhami Jul 29, 2019

cvializ Jul 29, 2019

sparhami Jul 29, 2019

cvializ Jul 29, 2019

sparhami Jul 29, 2019

cvializ Jul 29, 2019

sparhami Jul 29, 2019

cvializ Jul 29, 2019

sparhami Jul 29, 2019

cvializ left a comment

+                }
+                /**
+                 *

Create amp-carousel 0.2 based on amp-base-carousel #23393

Create amp-carousel 0.2 based on amp-base-carousel #23393

Conversation

sparhami commented Jul 18, 2019 • edited

sparhami commented Jul 24, 2019

cvializ left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cvializ left a comment

Choose a reason for hiding this comment

sparhami commented Jul 18, 2019 •

edited

cvializ left a comment •

edited