@slidy/plugins
Version:
Simple plugins functions for @slidy/core
516 lines (515 loc) • 17.8 kB
TypeScript
/// <reference types="node" />
declare module "packages/core/src/types" {
/**
* Slidy options object
* @see https://github.com/Valexr/slidy/tree/master/packages/core#options
*/
export interface Options {
/**
* Sliding index
*/
index?: number;
/**
* Sliding position. Setter working only in `snap: undefined` mode;
*/
position?: number;
/**
* Clamping sliding by index: `clamp - index + clamp`
*/
clamp?: number;
/**
* Part of gap padding both start/end edges of slide `gap * indent`
*/
indent?: number;
/**
* How many pixels to drag in the RAF `~16ms` to start move, `0` when sliding
*/
sensity?: number;
/**
* Sliding gravity: `0(space) ~ 1(eath) ~ 2(underground)`
*/
gravity?: number;
/**
* Sliding duration in ms
*/
duration?: number;
/**
* Custom slide animation.
* @see https://github.com/Valexr/Slidy/tree/master/packages/animation
*/
animation?: AnimationFunc;
/**
* Inertion scroll easing behaviour.
* @see https://github.com/Valexr/Slidy/tree/master/packages/easing
*/
easing?: EasingFunc;
/**
* Slidy plugins.
* @see https://github.com/Valexr/Slidy/tree/master/packages/plugins
*/
plugins?: ReturnType<PluginFunc>[];
/**
* Control coordinate axis: `'x'`, `'y'`.
*/
axis?: Axis;
/**
* Snapping side: `'start', 'center', 'end', 'deck', undefined`. Default clamp sliding by edges.
*/
snap?: Snap;
/**
* Makes the slideshow continious.
*/
loop?: boolean;
/**
* Children move direction
* @readonly
*/
direction?: number;
/**
* Children vertical flow
* @readonly
*/
vertical?: boolean;
/**
* Children reverse flow: `-1` or `1`
* @readonly
*/
reverse?: number;
/**
* Children full width size gaps > target node size
* @readonly
*/
scrollable?: boolean;
/**
* Scroll position on one of the edges
* @readonly
*/
edged?: boolean;
}
type Axis = 'x' | 'y' | 'both';
type Snap = 'start' | 'center' | 'end' | 'deck';
export interface UniqEvent extends PointerEvent {
touches: TouchList;
deltaX: number;
deltaY: number;
}
export type EventMap = [string, EventListener, AddEventListenerOptions?];
export type Detail = Record<string, any> | HTMLCollectionOf<Child> | HTMLElement | Options | string;
/** Easing function.
* @param t value from 0 to 1
* @returns value from 0 to 1
* @default linear
* @see https://easings.net
*/
export type EasingFunc = (t: number) => number;
export interface Child extends HTMLElement {
i: number;
index: number;
active: number;
size: number;
dist: number;
track: number;
turn: number;
exp: number;
}
export type AnimationArgs = {
node: HTMLElement;
child: Child;
options: Partial<Options>;
translate: string;
};
/**
* Animation function
* @see https://github.com/Valexr/Slidy/tree/master/packages/animation
* ```ts
* AnimationArgs = {
* node: HTMLElement;
* child: Child;
* options: Partial<Options>;
* translate: string;
* }
* ```
*/
export type AnimationFunc = (args: AnimationArgs) => Partial<CSSStyleDeclaration>;
export type PluginArgs = {
node: HTMLElement;
options: Options;
instance: SlidyInstance;
};
/**
* Plugin function
* @see https://github.com/Valexr/Slidy/tree/master/packages/plugin
*
* ```ts
* PluginArgs = {
* node: HTMLElement,
* options: Options,
* instance: SlidyInstance
* }
* ```
*/
export type PluginFunc = (params?: unknown) => (args: PluginArgs) => void;
export interface Dom {
edges: (index?: number) => boolean;
distance: (index: number, snap?: Options['snap']) => number;
index(target: number): number;
position(replace?: boolean): number;
swap(dir: number): number;
sense(e: UniqEvent, pos: number, sensity?: number): boolean;
animate(): void;
}
export interface SlidyInstance {
/**
* Init slidy() instance
*/
init: (node: HTMLElement) => void;
/**
* Update any property in options
*/
update: (options: Partial<Options>) => void;
/**
* Scroll to `index` or `position`
*/
to: (index: number, position?: number) => void;
/**
* Remove event listners, observers & defaulted props on `slidy()` instance
*/
destroy: () => Promise<void>;
}
}
declare module "packages/core/src/lib/utils" {
import type { Options, PluginFunc } from "packages/core/src/types";
const assign: {
<T extends {}, U>(target: T, source: U): T & U;
<T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
<T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
(target: object, ...sources: any[]): any;
}, entries: {
<T>(o: {
[s: string]: T;
} | ArrayLike<T>): [string, T][];
(o: {}): [string, any][];
};
const abs: (x: number) => number, exp: (x: number) => number, floor: (x: number) => number, max: (...values: number[]) => number, round: (x: number) => number, sign: (x: number) => number;
function clamp(mn: number, val: number, mx: number): number;
function throttle(fn: (args: any) => void, ms: number, th?: boolean | number, wait?: boolean, tm?: NodeJS.Timeout): (args: any) => void;
function loop(array: string | any[] | HTMLCollection | Array<Partial<Options>> | PluginFunc[], cb: (item: typeof array[number], i: number, array: any) => void): string | any[] | HTMLCollection | Partial<Options>[] | PluginFunc[];
export { assign, abs, exp, floor, max, round, sign, clamp, entries, loop, throttle };
}
declare module "packages/core/src/lib/env" {
import type { Options, UniqEvent, Detail, EventMap } from "packages/core/src/types";
const X: (e: UniqEvent | WheelEvent, options: Partial<Options>) => boolean;
function mount(node: HTMLElement, count?: number): Promise<unknown>;
function indexing(node: HTMLElement, options: Partial<Options>, index: number): number;
function coordinate(e: UniqEvent, options: Partial<Options>): number;
function dispatch(node: HTMLElement, name: string, detail?: Detail): void;
function listen(node: Window | HTMLElement, events: EventMap[], on?: boolean): void;
export { mount, listen, dispatch, indexing, coordinate, X };
}
declare module "packages/core/src/lib/dom" {
import type { Dom, Options } from "packages/core/src/types";
export function dom(node: HTMLElement, options: Partial<Options>): Dom;
}
declare module "packages/core/src/lib/slidy" {
import type { Options, SlidyInstance } from "packages/core/src/types";
/**
* Simple, configurable, nested & reusable sliding action script
* @see https://github.com/Valexr/slidy/tree/master/packages/core
*/
export function slidy(node: HTMLElement, opts: Partial<Options>): SlidyInstance;
}
declare module "packages/core/src/index" {
export { slidy } from "packages/core/src/lib/slidy";
export type { Options, SlidyInstance, EasingFunc, AnimationFunc, AnimationArgs, PluginFunc, PluginArgs, EventMap, } from "packages/core/src/types";
}
declare module "packages/plugins/src/types" {
export type { PluginArgs, PluginFunc, EventMap } from "packages/core/src/index";
export type TimerInstace = {
play: () => void;
pause: () => void;
resume: () => void;
stop: () => void;
};
}
declare module "packages/plugins/src/lib/log" {
import type { PluginArgs } from "packages/plugins/src/types";
export function log(params?: any): ({ node, options, instance }: PluginArgs) => null;
}
declare module "packages/plugins/src/utils/index" {
function loop<T>(array: ArrayLike<T>, cb: (item: typeof array[number], i: number) => void): ArrayLike<T>;
export { loop };
}
declare module "packages/plugins/src/utils/env" {
import type { EventMap } from "packages/plugins/src/types";
function listen(node: HTMLElement, events: EventMap[], on?: boolean): void;
function dispatch(node: HTMLElement, event: string, detail?: EventInit): boolean;
export { listen, dispatch };
}
declare module "packages/plugins/src/utils/timer" {
import type { TimerInstace } from "packages/plugins/src/types";
function timer(callback: () => void, interval: number, delay?: number): TimerInstace;
export { timer, type TimerInstace };
}
declare module "packages/plugins/src/lib/play" {
import type { PluginArgs } from "packages/plugins/src/types";
type Params = Partial<{
duration: number;
delay: number;
}>;
export function play(params?: Params, cb?: () => void, state?: number): ({ node, options, instance }: PluginArgs) => import("packages/plugins/src/types").TimerInstace;
}
declare module "packages/plugins/src/lib/marquee" {
import type { PluginArgs } from "packages/plugins/src/types";
export function marquee(params?: {
duration: number;
delay: number;
}): ({ node, options, instance }: PluginArgs) => import("packages/plugins/src/types").TimerInstace;
}
declare module "packages/plugins/src/lib/fool" {
import type { PluginArgs } from "packages/plugins/src/types";
/**
* Changes axis depending on the parity of the slide index.
*
* Plug it on at April Fool's Day and you won't get fired!
*/
export function fool(): ({ node, instance }: PluginArgs) => void;
}
declare module "assets/icons/index" {
export const iconChevron: {
viewBox: string;
path: string;
};
export const iconPause: {
viewBox: string;
path: string;
};
export const iconPlay: {
viewBox: string;
path: string;
};
export const iconStop: {
viewBox: string;
path: string;
};
}
declare module "packages/plugins/src/lib/autoplay/button" {
const iconPath: {
play: string;
pause: string;
stop: string;
};
class AutoplayButton extends HTMLElement {
constructor();
setDuration(duration: number): void;
get path0(): SVGPathElement;
get button(): HTMLButtonElement;
get path1(): SVGPathElement;
get animation(): {
pause(): void;
cancel(): void;
play(): void;
};
}
function button(onclick: () => void): readonly [AutoplayButton, HTMLButtonElement, SVGPathElement];
export { button, iconPath };
export type { AutoplayButton };
}
declare module "packages/plugins/src/lib/autoplay/utils" {
type AnyFunction = (...args: any[]) => void;
type EventsMap<T extends string, K extends AnyFunction> = {
[key in T]: K;
};
type Listenable = {
addEventListener(key: string, listener: AnyFunction): void;
removeEventListener(key: string, listener: AnyFunction): void;
};
/**
* Listen to events, and return function to unlisten
*/
const eventListener: <Listeners extends EventsMap<string, AnyFunction>>(el: Listenable, listeners: Listeners) => () => void;
/**
* `items`.includes(`c`)
*/
const eql: <T>(c: T, ...items: T[]) => boolean;
export { eventListener, eql };
}
declare module "packages/plugins/src/lib/autoplay/task-queue" {
type VoidFunction = (() => void);
type AwaitQueueItem = {
await: number;
};
type Queue = (VoidFunction | AwaitQueueItem)[];
type Timeout = NodeJS.Timeout;
class TaskQueue {
protected queue: Queue;
protected timeoutId: Timeout;
protected index: number;
protected off: number;
protected time: number;
constructor(queue: Queue);
start(): void;
pause(): void;
stop(): void;
protected runNextTask(): void;
}
export { TaskQueue };
}
declare module "packages/plugins/src/lib/autoplay/timer" {
import type { AutoplayButton } from "packages/plugins/src/lib/autoplay/button";
const enum State {
Idle = 0,
Running = 1,
Paused = 2,
Delayed = 3
}
interface TimerAdditionalProps {
readonly animation: AutoplayButton['animation'];
readonly delay: number;
readonly interval: number;
set state(value: 0 | 1 | 2);
}
function timer(callback: () => void, props: TimerAdditionalProps, state?: State): {
play(): void;
pause(): void;
stop(): void;
};
export { timer, };
}
declare module "packages/plugins/src/lib/autoplay/types" {
import type { PluginArgs } from "packages/plugins/src/types";
export interface PlayI18NDict {
play: string;
stop: string;
}
export interface PlayProps {
/**
* The i18n localization dictionary
*/
i18n?: PlayI18NDict;
/**
* Defines the autoplay duration time in ms
*/
duration?: number;
/**
* Defines the autoplay delay time in ms
*/
delay?: number;
/**
* Defines the autoplay state - `Idle` or `Running`
* @default false
*/
autoplay?: boolean;
/**
* Node, into which the button will be mounted
* @default undefined
*/
target?: HTMLElement | string;
}
export type AutoplayPluginFunc = (params?: PlayProps) => (plugin: PluginArgs) => void;
}
declare module "packages/plugins/src/lib/autoplay/index" {
import type { AutoplayPluginFunc } from "packages/plugins/src/lib/autoplay/types";
export const autoplay: AutoplayPluginFunc;
export * from "packages/plugins/src/lib/autoplay/types";
}
declare module "packages/plugins/src/lib/audio/types" {
import type { PluginArgs } from "packages/plugins/src/types";
/**
* Events to listen to
*/
type Events = 'resize' | 'mutate' | 'mount' | 'move' | 'index' | 'keys' | 'update' | 'destroy';
/**
* Note Block to play a melody
*/
type Note = {
/**
* Note frequency
*/
freq: number;
/**
* Note duration
*/
dur: number;
};
type AudioProps = Partial<Record<Events, Note[]>>;
type AudioPluginFunc = (props?: AudioProps) => (args: PluginArgs) => void;
export type { Events, Note, AudioProps, AudioPluginFunc };
}
declare module "packages/plugins/src/lib/audio/default" {
const frequencies: {
readonly C4: 261.63;
readonly E4: 329.63;
readonly G4: 392;
readonly Bell: 1567.98;
readonly Beep: 493.88;
};
const melodies: {
index: ({
freq: 261.63;
dur: number;
} | {
freq: 329.63;
dur: number;
} | {
freq: 392;
dur: number;
})[];
keys: ({
freq: 493.88;
dur: number;
} | {
freq: 1567.98;
dur: number;
})[];
};
export { frequencies, melodies };
}
declare module "packages/plugins/src/lib/audio/audio" {
const play: (context: AudioContext, frequency: number, duration: number) => void;
export { play };
}
declare module "packages/plugins/src/lib/audio/index" {
import type { AudioPluginFunc } from "packages/plugins/src/lib/audio/types";
const audio: AudioPluginFunc;
export { audio };
export type { Events, Note, AudioProps, AudioPluginFunc } from "packages/plugins/src/lib/audio/types";
}
declare module "packages/plugins/src/lib/share/types" {
import type { PluginArgs } from "packages/plugins/src/types";
/**
* What to share
*/
type ShareType = 'url';
/**
* Where to mount the button
*/
type ShareMountTarget = HTMLElement | string | undefined;
interface ShareProps {
type: ShareType;
target: ShareMountTarget;
}
type SharePluginFunc = (props?: ShareProps) => (args: PluginArgs) => void;
export type { ShareType, ShareMountTarget, ShareProps, SharePluginFunc };
}
declare module "packages/plugins/src/lib/share/button" {
class ShareButton extends HTMLElement {
constructor();
}
const createButton: (onclick: () => void) => ShareButton;
export { createButton };
}
declare module "packages/plugins/src/lib/share/index" {
import type { SharePluginFunc } from "packages/plugins/src/lib/share/types";
const share: SharePluginFunc;
export { share };
}
declare module "@slidy/plugins" {
export { log } from "packages/plugins/src/lib/log";
export { play } from "packages/plugins/src/lib/play";
export { marquee } from "packages/plugins/src/lib/marquee";
export { fool } from "packages/plugins/src/lib/fool";
export { autoplay } from "packages/plugins/src/lib/autoplay/index";
export { audio } from "packages/plugins/src/lib/audio/index";
export { share } from "packages/plugins/src/lib/share/index";
export type { PluginArgs, PluginFunc } from "packages/plugins/src/types";
}