From 06364eb68aeb2a407004b6e048a58e185a0624fd Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Fri, 1 Jul 2022 20:50:26 -0700 Subject: [PATCH] Initial adaptation to embla 7. --- package.json | 2 +- src/components/embla-plugins/automedia.ts | 46 ++++++++++++++++------- src/components/embla-plugins/lazyload.ts | 30 ++++++++++----- yarn.lock | 8 ++-- 4 files changed, 58 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 67ac1304..662e65a9 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "crypto": "^1.0.1", "custom-card-helpers": "^1.9.0", "date-fns": "^2.28.0", - "embla-carousel": "^6.2.0", + "embla-carousel": "^7.0.0-rc01", "embla-carousel-wheel-gestures": "^2.1.1", "home-assistant-js-websocket": "^7.1.0", "keycharm": "^0.4.0", diff --git a/src/components/embla-plugins/automedia.ts b/src/components/embla-plugins/automedia.ts index 5a19b6be..e77cebcd 100644 --- a/src/components/embla-plugins/automedia.ts +++ b/src/components/embla-plugins/automedia.ts @@ -1,4 +1,6 @@ -import { EmblaCarouselType, EmblaPluginType } from 'embla-carousel'; +import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'; +import { CreateOptionsType } from 'embla-carousel/components/Options.js'; +import { CreatePluginType } from 'embla-carousel/components/Plugins.js'; import { AutoMuteCondition, AutoPauseCondition, @@ -7,8 +9,8 @@ import { FrigateCardMediaPlayer, } from '../../types.js'; -export type AutoMediaPluginOptionsType = { - playerSelector: string; +export type AutoMediaPluginOptionsType = CreateOptionsType<{ + playerSelector?: string; // Note: Neither play nor unmute will activate on selection. The caller is // expected to call the `play()` or `unmute()` methods manually when the media @@ -18,16 +20,22 @@ export type AutoMediaPluginOptionsType = { autoUnmuteCondition?: AutoUnmuteCondition; autoPauseCondition?: AutoPauseCondition; autoMuteCondition?: AutoMuteCondition; +}>; + +export const defaultOptions: AutoMediaPluginOptionsType = { + active: true, + breakpoints: {}, }; -export const defaultOptions: Partial = {}; - -export type AutoMediaPluginType = EmblaPluginType & { - play: () => void; - pause: () => void; - mute: () => void; - unmute: () => void; -}; +export type AutoMediaPluginType = CreatePluginType< + { + play: () => void; + pause: () => void; + mute: () => void; + unmute: () => void; + }, + AutoMediaPluginOptionsType +>; /** * An Embla plugin to take automated actions on media (e.g. pause, unmute, etc). @@ -37,8 +45,13 @@ export type AutoMediaPluginType = EmblaPluginType & export function AutoMediaPlugin( userOptions?: AutoMediaPluginOptionsType, ): AutoMediaPluginType { - const options = Object.assign({}, defaultOptions, userOptions); + const optionsHandler = EmblaCarousel.optionsHandler(); + const optionsBase = optionsHandler.merge( + defaultOptions, + AutoMediaPlugin.globalOptions, + ); + let options: AutoMediaPluginType['options']; let carousel: EmblaCarouselType; let slides: HTMLElement[]; @@ -47,6 +60,7 @@ export function AutoMediaPlugin( */ function init(embla: EmblaCarouselType): void { carousel = embla; + options = optionsHandler.atMedia(self.options); slides = carousel.slideNodes(); // Frigate card media autoplays when the media loads not necessarily when the @@ -131,7 +145,9 @@ export function AutoMediaPlugin( * @returns A FrigateCardMediaPlayer object or `null`. */ function getPlayer(slide: HTMLElement | undefined): FrigateCardMediaPlayer | null { - return slide?.querySelector(options.playerSelector) as FrigateCardMediaPlayer | null; + return options.playerSelector + ? (slide?.querySelector(options.playerSelector) as FrigateCardMediaPlayer | null) + : null; } /** @@ -196,7 +212,7 @@ export function AutoMediaPlugin( const self: AutoMediaPluginType = { name: 'AutoMediaPlugin', - options, + options: optionsHandler.merge(optionsBase, userOptions), init, destroy, play, @@ -206,3 +222,5 @@ export function AutoMediaPlugin( }; return self; } + +AutoMediaPlugin.globalOptions = undefined; diff --git a/src/components/embla-plugins/lazyload.ts b/src/components/embla-plugins/lazyload.ts index 772ab3ff..98f15876 100644 --- a/src/components/embla-plugins/lazyload.ts +++ b/src/components/embla-plugins/lazyload.ts @@ -1,7 +1,9 @@ -import { EmblaCarouselType, EmblaEventType, EmblaPluginType } from 'embla-carousel'; +import { CreateOptionsType } from 'embla-carousel/components/Options'; +import { CreatePluginType } from 'embla-carousel/components/Plugins'; +import EmblaCarousel, { EmblaCarouselType, EmblaEventType } from 'embla-carousel'; import { LazyUnloadCondition } from '../../types'; -export type LazyloadOptionsType = { +export type LazyloadOptionsType = CreateOptionsType<{ // Number of slides to lazyload left/right of selected (0 == only selected // slide). lazyLoadCount?: number; @@ -9,18 +11,25 @@ export type LazyloadOptionsType = { lazyLoadCallback?: (index: number, slide: HTMLElement) => void; lazyUnloadCallback?: (index: number, slide: HTMLElement) => void; -}; +}>; -export const defaultOptions: Partial = { +export const defaultOptions: LazyloadOptionsType = { + active: true, + breakpoints: {}, lazyLoadCount: 0, }; -export type LazyloadType = EmblaPluginType & { - hasLazyloaded: (index: number) => boolean; -}; +export type LazyloadType = CreatePluginType< + { + hasLazyloaded(index: number): boolean; + }, + LazyloadOptionsType +>; export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType { - const options = Object.assign({}, defaultOptions, userOptions); + const optionsHandler = EmblaCarousel.optionsHandler(); + const optionsBase = optionsHandler.merge(defaultOptions, Lazyload.globalOptions); + let options: LazyloadType['options']; let carousel: EmblaCarouselType; let slides: HTMLElement[]; @@ -34,6 +43,7 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType { */ function init(embla: EmblaCarouselType): void { carousel = embla; + options = optionsHandler.atMedia(self.options); slides = carousel.slideNodes(); if (options.lazyLoadCallback) { @@ -138,10 +148,12 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType { const self: LazyloadType = { name: 'Lazyload', - options, + options: optionsHandler.merge(optionsBase, userOptions), init, destroy, hasLazyloaded, }; return self; } + +Lazyload.globalOptions = undefined; diff --git a/yarn.lock b/yarn.lock index 5004f5f7..8da90b3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1162,10 +1162,10 @@ embla-carousel-wheel-gestures@^2.1.1: dependencies: wheel-gestures "^2.2.5" -embla-carousel@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-6.2.0.tgz#c16b18abe50e05ccd03d0b8d0b738f6a87aea1e0" - integrity sha512-dSNsiQ7nmSQJZgbYfZCLdzrnznHwpaAcdJFcMRKgm/pjH1doOgxmfsvlMy4VfO4J11hLz8jm/W8WxSSDqfuu4w== +embla-carousel@^7.0.0-rc01: + version "7.0.0-rc01" + resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-7.0.0-rc01.tgz#7c9adfd7302b85c2de9354b7ef6343f16a696eb7" + integrity sha512-IBTSKcPw7u9K0zoLvsnWYsijKsI0msFqzNp6ASIthTXiMZNJNGQt8k0ax7KqUVinDZeNM07WPWqYsjrvUM/Epw== emojis-list@^3.0.0: version "3.0.0"