Classical amp-inline-gallery-captions (0.1)

[caroqliu]

This PR introduces #26076 into the codebase under experimental amp-inline-gallery-captions flag with minimal changes, primarily to check in the WIP as a baseline to jump off of going forward.

Demo

[dvoytenko]

A bit surprised by it. Does it mean we are actually not allowing any links in captions? How do "more" and "less" buttons work?

[caroqliu]

It's because this implementation doesn't actually have any interactivity or interactive descendants in the amp-inline-gallery-captions element, which is effectively just a fixed height block of space that gets covered by captions elements in a different tree (amp-inline-gallery-slide). Agreed it is a bit unconventional and likely not necessary, but it should not be harmful.

<amp-inline-gallery layout="container">
    <amp-base-carousel>
      <amp-inline-gallery-slide>
        <amp-img></amp-img>
        <!-- clickable and slotted into an amp-truncate-text element added to amp-inline-gallery-slide -->
        <span class="caption" slot="caption"> 
          The first slide's caption.
        </span>
        <span class="attribution" slot="attribution">This is an attribution (not truncated).</span>
      </amp-inline-gallery-slide>
      ... 
    </amp-base-carousel>
    <amp-inline-gallery-captions layout="fixed-height" height="3.75em">
    </amp-inline-gallery-captions>
  </amp-inline-gallery>

[dvoytenko]

What is this for?

[caroqliu]

It's to match with this part, which based on CHILDREN_FOR_PROGRESS_SELECTOR calls updateProgress for both -pagination and -captions:

amphtml/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js

Lines 110 to 118 in 33aa4de

	updateProgress_(slides, total, index, offset) {
	iterateCursor(
	scopedQuerySelectorAll(this.element, CHILDREN_FOR_PROGRESS_SELECTOR),
	(el) => {
	el.getImpl().then((pagination) => {
	pagination.updateProgress(slides, total, index, offset);
	});
	}
	);

We can either move the unneeded slides to the end for pagination or separate it out -- for now I've done the former:
Unused:

Suggested change

	updateProgress(slides, total, index, offset) {
	updateProgress(total, index, offset, unusedSlides) {

Separate:

  updateProgress_(total, index, offset) {
    iterateCursor(
      scopedQuerySelectorAll(this.element, PAGINATION_SELECTOR),
      (el) => {
        el.getImpl().then((pagination) => {
          pagination.updateProgress(total, index, offset);
        });
      }
    );

    iterateCursor(
      scopedQuerySelectorAll(this.element, CAPTION_SELECTOR),
      (el) => {
        el.getImpl().then((caption) => {
          caption.updateProgress(slides, total, index, offset);
        });
      }
    );
  }