-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix standalone inline-gallery - expose thumbnail/pagination elements (#…
…36670) * fix standalone inline-gallery - expose thumbnail/pagination elements * fix dep-check allowlist after refactor * fix fixture and readme
- Loading branch information
Showing
11 changed files
with
183 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import {defineElement} from './web-component'; | ||
| defineElement(); |
29 changes: 29 additions & 0 deletions
29
extensions/amp-inline-gallery/1.0/pagination-base-element.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import {CSS} from './pagination.jss'; | ||
| import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props'; | ||
| import {BentoInlineGalleryPagination} from './pagination'; | ||
| import {PreactBaseElement} from '#preact/base-element'; | ||
|
|
||
| export const TAG = 'bento-inline-gallery-pagination'; | ||
|
|
||
| /** @extends {PreactBaseElement<BaseCarouselDef.CarouselApi>} */ | ||
| export class PaginationBaseElement extends PreactBaseElement {} | ||
|
|
||
| /** @override */ | ||
| PaginationBaseElement['Component'] = BentoInlineGalleryPagination; | ||
|
|
||
| /** @override */ | ||
| PaginationBaseElement['props'] = { | ||
| 'inset': {attr: 'inset', type: 'boolean', media: true}, | ||
| }; | ||
|
|
||
| /** @override */ | ||
| PaginationBaseElement['layoutSizeDefined'] = true; | ||
|
|
||
| /** @override */ | ||
| PaginationBaseElement['shadowCss'] = CSS; | ||
|
|
||
| /** @override */ | ||
| PaginationBaseElement['usesShadowDom'] = true; | ||
|
|
||
| /** @override */ | ||
| PaginationBaseElement['useContexts'] = [CarouselContextProp]; |
32 changes: 32 additions & 0 deletions
32
extensions/amp-inline-gallery/1.0/thumbnails-base-element.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/component.jss'; | ||
| import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props'; | ||
| import {PreactBaseElement} from '#preact/base-element'; | ||
| import {CSS as THUMBNAIL_CSS} from './thumbnails.jss'; | ||
| import {BentoInlineGalleryThumbnails} from './thumbnails'; | ||
|
|
||
| export const TAG = 'bento-inline-gallery-thumbnails'; | ||
|
|
||
| /** @extends {PreactBaseElement<BaseCarouselDef.CarouselApi>} */ | ||
| export class ThumbnailsBaseElement extends PreactBaseElement {} | ||
|
|
||
| /** @override */ | ||
| ThumbnailsBaseElement['Component'] = BentoInlineGalleryThumbnails; | ||
|
|
||
| /** @override */ | ||
| ThumbnailsBaseElement['props'] = { | ||
| 'aspectRatio': {attr: 'aspect-ratio', type: 'number', media: true}, | ||
| 'children': {passthroughNonEmpty: true}, | ||
| 'loop': {attr: 'loop', type: 'boolean', media: true}, | ||
| }; | ||
|
|
||
| /** @override */ | ||
| ThumbnailsBaseElement['layoutSizeDefined'] = true; | ||
|
|
||
| /** @override */ | ||
| ThumbnailsBaseElement['usesShadowDom'] = true; | ||
|
|
||
| /** @override */ | ||
| ThumbnailsBaseElement['shadowCss'] = CAROUSEL_CSS + THUMBNAIL_CSS; | ||
|
|
||
| /** @override */ | ||
| ThumbnailsBaseElement['useContexts'] = [CarouselContextProp]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import {BaseElement, TAG} from './base-element'; | ||
| import { | ||
| TAG as THUMBNAIL_TAG, | ||
| ThumbnailsBaseElement, | ||
| } from './thumbnails-base-element'; | ||
| import { | ||
| TAG as PAGINATION_TAG, | ||
| PaginationBaseElement, | ||
| } from './pagination-base-element'; | ||
|
|
||
| /** | ||
| * Registers `<bento-inline-gallery> component to CustomElements registry | ||
| */ | ||
| export function defineElement() { | ||
| customElements.define(TAG, BaseElement.CustomElement(BaseElement)); | ||
| defineThumbnailsElement(); | ||
| definePaginationElement(); | ||
| } | ||
|
|
||
| /** | ||
| * Registers `<bento-inline-gallery-pagination> component to CustomElements registry | ||
| */ | ||
| export function definePaginationElement() { | ||
| customElements.define( | ||
| PAGINATION_TAG, | ||
| PaginationBaseElement.CustomElement(PaginationBaseElement) | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Registers `<bento-inline-gallery-thumbnails> component to CustomElements registry | ||
| */ | ||
| export function defineThumbnailsElement() { | ||
| customElements.define( | ||
| THUMBNAIL_TAG, | ||
| ThumbnailsBaseElement.CustomElement(ThumbnailsBaseElement) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="https://cdn.ampproject.org/bento.js"></script> | ||
|
|
||
| <script async src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"> | ||
|
|
||
| <script async src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"> | ||
| <body> | ||
| <bento-inline-gallery id="inline-gallery"> | ||
| <bento-inline-gallery-thumbnails style="height: 100px;" loop></bento-inline-gallery-thumbnails> | ||
|
|
||
| <bento-base-carousel style="height: 200px;" snap-align="center" visible-count="3" loop> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80" | ||
| data-thumbnail-src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=120&q=80" | ||
| /> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80" | ||
| data-thumbnail-src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80" | ||
| /> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80" | ||
| data-thumbnail-src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80" | ||
| /> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80" | ||
| data-thumbnail-src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80" | ||
| /> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80" | ||
| data-thumbnail-src="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80" | ||
| /> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80" | ||
| data-thumbnail-src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80" | ||
| /> | ||
| </bento-base-carousel> | ||
|
|
||
| <bento-inline-gallery-pagination style="height: 20px;"></bento-inline-gallery-pagination> | ||
| </bento-inline-gallery> | ||
| </body> | ||
| </html> |