You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.7 KiB
99 lines
2.7 KiB
import { Plugin } from "../../../shared/Base/Plugin";
|
|
import type { Carousel } from "../../Carousel";
|
|
import { OptionsType as CarouselOptionsType } from "../../../Carousel/options";
|
|
export type ThumbsOptionsType = {
|
|
/**
|
|
* Customize carousel options
|
|
*/
|
|
Carousel?: Partial<CarouselOptionsType>;
|
|
/**
|
|
* Class names for DOM elements
|
|
*/
|
|
classes: {
|
|
container?: string;
|
|
viewport?: string;
|
|
track?: string;
|
|
slide?: string;
|
|
isResting?: string;
|
|
isSelected?: string;
|
|
isLoading?: string;
|
|
hasThumbs?: string;
|
|
};
|
|
/**
|
|
* Minimum number of slides with thumbnails in the carousel to create Thumbs
|
|
*/
|
|
minCount: number;
|
|
/**
|
|
* Optional event listeners
|
|
*/
|
|
on?: Record<"ready", (...any: any) => void>;
|
|
/**
|
|
* Change where thumbnail container is appended
|
|
*/
|
|
parentEl?: HTMLElement | null | (() => HTMLElement | null);
|
|
/**
|
|
* Template for the thumbnail element
|
|
*/
|
|
thumbTpl: string;
|
|
/**
|
|
* Choose a type - "classic" (syncs two instances of the carousel) or "modern" (Apple Photos style)
|
|
*/
|
|
type: "classic" | "modern";
|
|
};
|
|
export declare const defaultOptions: ThumbsOptionsType;
|
|
declare module "../../../Carousel/options" {
|
|
interface PluginsOptionsType {
|
|
Thumbs: Boolean | Partial<ThumbsOptionsType>;
|
|
}
|
|
}
|
|
declare module "../../../Carousel/types" {
|
|
interface slideType {
|
|
thumbSrc?: string;
|
|
thumbClipWidth?: number;
|
|
thumbWidth?: number;
|
|
thumbHeight?: number;
|
|
thumbSlideEl?: HTMLElement;
|
|
}
|
|
}
|
|
export declare enum States {
|
|
Init = 0,
|
|
Ready = 1,
|
|
Hidden = 2,
|
|
Disabled = 3
|
|
}
|
|
export declare class Thumbs extends Plugin<Carousel, ThumbsOptionsType, "ready"> {
|
|
static defaults: ThumbsOptionsType;
|
|
type: "modern" | "classic";
|
|
container: HTMLElement | null;
|
|
track: HTMLElement | null;
|
|
private carousel;
|
|
private panzoom;
|
|
private thumbWidth;
|
|
private thumbClipWidth;
|
|
private thumbHeight;
|
|
private thumbGap;
|
|
private thumbExtraGap;
|
|
private shouldCenter;
|
|
state: States;
|
|
private formatThumb;
|
|
private getSlides;
|
|
private getProgress;
|
|
private onInitSlide;
|
|
private onInitSlides;
|
|
private onRefreshM;
|
|
private onChangeM;
|
|
private onClickModern;
|
|
private onTransformM;
|
|
private buildClassic;
|
|
private buildModern;
|
|
private updateModern;
|
|
private refreshModern;
|
|
private centerModern;
|
|
private lazyLoadModern;
|
|
private resizeModernSlide;
|
|
private getModernThumbPos;
|
|
build(): void;
|
|
cleanup(): void;
|
|
attach(): void;
|
|
detach(): void;
|
|
}
|
|
|