forked from henrygd/bigger-picture
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.d.ts
115 lines (110 loc) · 6.91 KB
/
index.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
interface options {
/** The data source for the displayed items. See [Item Properties](https://github.com/henrygd/bigger-picture#item-properties) for details.
*
* If using NodeList or Node, the information is passed via data attributes. If using Array, the information is passed via object. */
items: HTMLElement|HTMLCollection|NodeList|item[];
/** If the specified node matches a node in `items` (or matches the `element` value on an item if using an array), the gallery will start at that position.
*
* For example, you could use this inside a click handler by passing `event.target`. (See [codesandbox demo](https://codesandbox.io/s/bigger-picture-basic-gallery-o4kb82) for example.) */
el?: HTMLElement|EventTarget;
/** Start position of gallery (zero-indexed). If using `el` this will be ignored. */
position?: number;
/** Controls the size of the displayed item. Use `1` to fill item to screen edges. */
scale?: number;
/** Overrides the default intro animation. Currently `fadeup` is the only alternative. */
intro?: string;
/** Specifies that the lightbox is inline. Interaction events are modified to avoid hijacking scroll and tab press. */
inline?: boolean;
/** Hides the close button and prevents the lightbox from closing unless the [`close`](https://github.com/henrygd/bigger-picture#close) method is called. Recommended to use in combination with an inline gallery. */
noClose?: boolean;
/** Return a truthy value to disable pinch zoom. Function is executed at the time of the pinch. Supplies `container` - the gallery's wrapper element.
*
* ```js
* bp.open({
* noPinch: (container) => container.clientWidth < 800,
* })
* ```
*/
noPinch?: () => any;
/** Specify wrapper element to trap focus within on tab press. Useful when mounting a gallery inside a custom layout. */
focusWrap?: HTMLElement|EventTarget;
/** Restricts an image's maximum zoom level to `maxZoom` times the starting size, even if the item's `width` / `height` is larger. For example, a `maxZoom` of 2 on an image that is 800px wide when zoomed out would limit the image to a maximum zoom of 1600px width. */
maxZoom?: number;
/** Executes just before intro animation. Supplies `container` - the gallery's wrapper element, and `activeItem` - an object containing the currently displayed item's data. */
onOpen?: (container: HTMLElement, activeItem: item) => void;
/** Executes just after the active item is updated. Supplies `container` and `activeItem`. */
onUpdate?: (container?: HTMLElement, activeItem?: item) => void;
/** Executes just before outro animation. Supplies `container` and `activeItem`. */
onClose?: (container?: HTMLElement, activeItem?: item) => void;
/** Executes just after the lightbox has been closed and removed from the page. */
onClosed?: () => void;
/** Executes when the dimensions of the gallery (not the window) are changed. Supplies `container` and `activeItem`. */
onResize?: (container?: HTMLElement, activeItem?: item) => void;
/** Executes when an image is clicked. Return a truthy value to prevent zooming. Supplies `container` and `activeItem`. */
onImageClick?: (container?: HTMLElement, activeItem?: item) => any;
/** Executes when an error is thrown when loading an item (image, audio, video or iframe). */
onError?: (container?: HTMLElement, activeItem?: item, error?: Error) => void;
}
interface item {
[key: string]: any;
/** Largest possible width of media item in pixels. Not required for HTML, which can be sized via CSS. */
width?: string|number;
/** Largest possible height of media item in pixels. Not required for HTML, which can be sized via CSS. */
height?: string|number;
/** URL or path to image used for thumbnail displayed before media loads. */
thumb?: string;
/** URL or path to full image. Can be a `srcset` value.
*
* When using `srcset`, the `sizes` value will update automatically when an image is zoomed. You may override this behavior by setting the [`sizes`](https://github.com/henrygd/bigger-picture#sizes) value. */
img?: string;
/** For native video and audio, an array of objects specifying [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-src) (required) and [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type) (optional). A string may be used if it is JSON parsable. Each object will create a `source` element, and all key / value pairs in the object will be added as attributes. */
sources?: object[]|string;
/** HTML that will be rendered in the container. When using HTML, please control dimensions with CSS. No need to pass `width` or `height`.
*
* For advanced use, you can pass an empty string, then mount a component using the [`onOpen`](https://github.com/henrygd/bigger-picture#onopen) method:
*
* ```js
* // mounting svelte component (firewatch example from demo site)
* onOpen(container) {
* new Firewatch({
* target: container.querySelector('.bp-html'),
* })
* },
``` */
html?: string;
/** Image alternative text */
alt?: string;
/** Title attribute for iframes */
title?: string;
/** Text to be displayed using built in caption. You may pass html tags and styles can be overriden via CSS. */
caption?: string;
/** Sets the sizes attribute if you're using `srcset`. */
sizes?: string;
/** Restricts an image's maximum zoom level to `maxZoom` times the starting size, even if the item's `width` / `height` is larger. For example, a `maxZoom` of 2 on an image that is 800px wide when zoomed out would limit the image to a maximum zoom of 1600px width.
*
* If `maxZoom` is set on an individual item it will override the value set in options. Attribute name is `data-max-zoom`. */
maxZoom?: number;
/** Array of text track data to use with videos. String option is just a stringified array. See the [MDN page on track elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) for more information. */
tracks?: string|object[];
/** To control the default open / close animation, add a property `element` to each item that contains a node on the page. The active item's `element` will be where the animation opens from / closes to. If you're not using the default scale animation, this is not needed. */
element?: HTMLElement|EventTarget;
}
export interface BiggerPictureInstance {
/** Opens the instance. */
open: (options: options) => void;
/** Closes the lightbox. */
close: () => void;
/** Changes to next item in gallery. */
next: () => void;
/** Changes to previous item in gallery. */
prev: () => void;
/** Changes to `position` item in gallery (zero-indexed). */
setPosition: (options: {position: number}) => void;
}
interface initObject {
/** Specifies parent element inside which the gallery will be mounted */
target: HTMLElement;
}
/** Initializes BiggerPicture instance */
declare function BiggerPicture(options: initObject) : BiggerPictureInstance
export default BiggerPicture