-
Notifications
You must be signed in to change notification settings - Fork 30k
/
index.d.ts
388 lines (378 loc) · 17.4 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
// Type definitions for mCustomScrollbar 2.8.2
// Project: https://github.com/malihu/malihu-custom-scrollbar-plugin
// Definitions by: Sarah Williams <https://github.com/flurg>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
/// <reference types="jquery" />
declare namespace MCustomScrollbar {
type Factory = (jQuery: JQueryStatic) => void;
interface CustomScrollbarOptions {
/**
* Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string)
*/
setWidth?: boolean|number|string;
/**
* Set the height of your content (overwirtes CSS height), value in pixels (integer) or percentage (string)
*/
setHeight?: boolean|number|string;
/**
* Set the initial css top property of content, accepts string values (css top position).
* Example: setTop: "-100px".
*/
setTop? : number|string;
/**
* Set the initial css top property of content, accepts string values (css top position).
* Example: setTop: "-100px".
*/
setLeft? : number|string;
/**
* Define content’s scrolling axis (the type of scrollbars added to the element: vertical and/of horizontal).
* Available values: "y", "x", "yx". y -vertical, x - horizontal, yx - vertical and horizontal
*/
axis?: "x"|"y"|"yx";
/**
* Set the position of scrollbar in relation to content.
* Available values: "inside", "outside".
* Setting scrollbarPosition: "inside" (default) makes scrollbar appear inside the element.
* Setting scrollbarPosition: "outside" makes scrollbar appear outside the element.
* Note that setting the value to "outside" requires your element (or parent elements)
* to have CSS position: relative (otherwise the scrollbar will be positioned in relation to document’s root element).
*/
scrollbarPosition?: "inside"|"outside";
/**
* Always keep scrollbar(s) visible, even when there’s nothing to scroll.
* 0 – disable (default)
* 1 – keep dragger rail visible
* 2 – keep all scrollbar components (dragger, rail, buttons etc.) visible
*/
alwaysShowScrollbar?: number;
/**
* Make scrolling snap to a multiple of a fixed number of pixels. Useful in cases like scrolling tabular data,
* image thumbnails or slides and you need to prevent scrolling from stopping half-way your elements.
* Note that your elements must be of equal width or height in order for this to work properly.
* To set different values for vertical and horizontal scrolling, use an array: [y,x]
*/
snapAmount?: number|[number,number];
/**
* Set an offset (in pixels) for the snapAmount option. Useful when for example you need to offset the
* snap amount of table rows by the table header.
*/
snapOffset?: number;
/**
* Enable or disable auto-expanding the scrollbar when cursor is over or dragging the scrollbar.
*/
autoExpandScrollbar?: boolean;
/**
* Scrolling inertia (easing), value in milliseconds (0 for no scrolling inertia)
*/
scrollInertia?: number;
/**
* Mouse wheel support
*/
mouseWheel?: {
/**
* Enable or disable content scrolling via mouse-wheel.
*/
enable?: boolean;
/**
* Set the mouse-wheel scrolling amount (in pixels).
* The default value "auto" adjusts scrolling amount according to scrollable content length.
*/
scrollAmount?: "auto"|number;
/**
* Define the mouse-wheel scrolling axis when both vertical and horizontal scrollbars are present.
* Set axis: "y" (default) for vertical or axis: "x" for horizontal scrolling.
*/
axis?: "x"|"y";
/**
* Prevent the default behaviour which automatically scrolls the parent element when end
* or beginning of scrolling is reached (same bahavior with browser’s native scrollbar).
*/
preventDefault?: boolean;
/**
* Set the number of pixels one wheel notch scrolls. The default value “auto” uses the OS/browser value.
*/
deltaFactor?: number;
/**
* Enable or disable mouse-wheel (delta) acceleration.
* Setting normalizeDelta: true translates mouse-wheel delta value to -1 or 1.
*/
normalizeDelta?:boolean;
/**
* Invert mouse-wheel scrolling direction.
* Set to true to scroll down or right when mouse-wheel is turned upwards.
*/
invert?: boolean;
/**
* Set the tags that disable mouse-wheel when cursor is over them.
* Default value: ["select","option","keygen","datalist","textarea"]
*/
disableOver?: string[];
}
/**
* Keyboard support
*/
keyboard?:{
/**
* Enable or disable content scrolling via keyboard.
*/
enable?: boolean;
/**
* Set the keyboard arrows scrolling amount (in pixels).
* The default value "auto" adjusts scrolling amount according to scrollable content length.
*/
scrollAmount?: "auto"|number;
/**
* Define the buttons scrolling type/behavior.
* scrollType: "stepless" – continuously scroll content while pressing the button (default)
* scrollType: "stepped" – each button click scrolls content by a certain amount (defined in scrollAmount option above)
*/
scrollType?: "stepless"|"stepped";
}
/**
* Mouse wheel scrolling pixels amount, value in pixels (integer) or "auto" (script calculates and sets pixels amount according to content length)
*/
mouseWheelPixels?: any;
/**
* Auto-adjust scrollbar height/width according to content, values: true, false
*/
autoDraggerLength?: boolean;
/**
* Automatically hide the scrollbar when idle or mouse is not over the content
*/
autoHideScrollbar?: boolean;
scrollButtons?: {
/**
* Enable or disable scroll buttons.
*/
enable?: boolean;
/**
* Define the buttons scrolling type/behavior.
* scrollType: "stepless" – continuously scroll content while pressing the button (default)
* scrollType: "stepped" – each button click scrolls content by a certain amount (defined in scrollAmount option above)
*/
scrollType?: "stepless"|"stepped";
/**
* Set a tabindex value for the buttons.
*/
tabindex?: number;
/**
* Scroll buttons pixels scrolling amount, value in pixels or "auto"
*/
scrollAmount?: "auto"|number ;
}
advanced?: {
/**
* Update scrollbars on browser resize (for fluid content blocks and layouts based on percentages), values: true, false. Set to false only when you content has fixed dimensions
*/
updateOnBrowserResize?: boolean;
/**
* Auto-update scrollbars on content resize (useful when adding/changing content progrmatically), value: true, false. Setting this to true makes the script check for content
* length changes (every few milliseconds) and automatically call plugin's update method to adjust the scrollbar accordingly
*/
updateOnContentResize?: boolean;
/**
* Update scrollbar(s) automatically each time an image inside the element is fully loaded.
* Default value is auto which triggers the function only on "x" and "yx" axis (if needed).
* The value should be true when your content contains images and you need the function to trigger on any axis.
*/
updateOnImageLoad?: "auto"|boolean;
/**
* Add extra selector(s) that’ll release scrollbar dragging upon mouseup, pointerup, touchend etc.
* Example: extraDraggableSelectors: ".myClass, #myID"
*/
extraDraggableSelectors?: string;
/**
* Add extra selector(s) that’ll allow scrollbar dragging upon mousemove/up, pointermove/up, touchend etc.
* Example: releaseDraggableSelectors: ".myClass, #myID"
*/
releaseDraggableSelectors?: string;
/**
* Set the auto-update timeout in milliseconds.
* Default timeout: 60
*/
autoUpdateTimeout?: number;
/**
* Update scrollbar(s) automatically when the amount and size of specific selectors changes.
* Useful when you need to update the scrollbar(s) automatically, each time a type of element is added, removed or changes its size.
* For example, setting updateOnSelectorChange: "ul li" will update scrollbars each time list-items inside the element are changed.
* Setting the value to true, will update scrollbars each time any element is changed.
* To disable (default) set to false.
*/
updateOnSelectorChange?: string|boolean;
/**
* Auto-expanding content's width on horizontal scrollbars, values: true, false. Set to true if you have horizontal scrollbr on content that change on-the-fly. Demo contains
* blocks with images and horizontal scrollbars that use this option parameter
*/
autoExpandHorizontalScroll?: boolean;
/**
* Set the list of elements/selectors that will auto-scroll content to their position when focused.
* For example, when pressing TAB key to focus input fields, if the field is out of the viewable area the content
* will scroll to its top/left position (same bahavior with browser’s native scrollbar).
* To completely disable this functionality, set autoScrollOnFocus: false.
* Default:
* "input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']"
*/
autoScrollOnFocus?: boolean|string;
/**
* Normalize mouse wheel delta (-1/1), values: true, false
*/
normalizeMouseWheelDelta?: boolean;
}
/**
* Enable or disable content touch-swipe scrolling for touch-enabled devices.
* To completely disable, set contentTouchScroll: false.
* Integer values define the axis-specific minimum amount required for scrolling momentum (default: 25).
*/
contentTouchScroll?: boolean|number;
/**
* Enable or disable document touch-swipe scrolling for touch-enabled devices.
*/
documentTouchScroll?: boolean;
/**
* All of the following callbacks option have examples in the callback demo - http://manos.malihu.gr/tuts/custom-scrollbar-plugin/callbacks_example.html
*/
callbacks?: {
/**
* A function to call when plugin markup is created.
*/
onCreate?: () => void;
/**
* A function to call when scrollbars have initialized
*/
onInit?: () => void;
/**
* User defined callback function, triggered on scroll start event. You can call your own function(s) each time a scroll event begins
*/
onScrollStart?: () => void;
/**
* User defined callback function, triggered on scroll event. Call your own function(s) each time a scroll event completes
*/
onScroll?: () => void;
/**
* A function to call when scrolling is completed and content is scrolled all the way to the end (bottom/right)
*/
onTotalScroll?: () => void;
/**
* A function to call when scrolling is completed and content is scrolled back to the beginning (top/left)
*/
onTotalScrollBack?: () => void;
/**
* Set an offset for which the onTotalScroll callback is triggered.
* Its value is in pixels.
*/
onTotalScrollOffset?: number;
/**
* Set an offset for which the onTotalScrollBack callback is triggered.
* Its value is in pixels
*/
onTotalScrollBackOffset?: number;
/**
* User defined callback function, triggered while scrolling
*/
whileScrolling?: () => void;
/**
* Set the behavior of calling onTotalScroll and onTotalScrollBack offsets.
* By default, callback offsets will trigger repeatedly while content is scrolling within the offsets.
* Set alwaysTriggerOffsets: false when you need to trigger onTotalScroll and onTotalScrollBack callbacks once, each time scroll end or beginning is reached.
*/
alwaysTriggerOffsets?: boolean;
/**
* A function to call when content becomes long enough and vertical scrollbar is added.
*/
onOverflowY?: () => void;
/**
* A function to call when content becomes wide enough and horizontal scrollbar is added.
*/
onOverflowX?: () => void;
/**
* A function to call when content becomes short enough and vertical scrollbar is removed.
*/
onOverflowYNone?: () => void;
/**
* A function to call when content becomes narrow enough and horizontal scrollbar is removed.
*/
onOverflowXNone?: () => void;
/**
* A function to call right before scrollbar(s) are updated.
*/
onBeforeUpdate?: () => void;
/**
* A function to call when scrollbar(s) are updated.
*/
onUpdate?: () => void;
/**
* A function to call each time an image inside the element is fully loaded and scrollbar(s) are updated.
*/
onImageLoad?: () => void;
/**
* A function to call each time a type of element is added, removed or changes its size and scrollbar(s) are updated.
*/
onSelectorChange?: () => void;
}
/**
* Set a scrollbar ready-to-use theme. See themes demo for all themes - http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scrollbar_themes_demo.html
*/
theme?: string;
/**
* Enable or disable applying scrollbar(s) on all elements matching the current selector, now and in the future.
* Set live: true when you need to add scrollbar(s) on elements that do not yet exist in the page.
* These could be elements added by other scripts or plugins after some action by the user takes place (e.g. lightbox markup may not exist untill the user clicks a link).
* If you need at any time to disable or enable the live option, set live: "off" and "on" respectively.
* You can also tell the script to disable live option after the first invocation by setting live: "once".
*/
live?: string|boolean;
/**
* Set the matching set of elements (instead of the current selector) to add scrollbar(s), now and in the future.
*/
liveSelector?: string;
}
interface ScrollToParameterOptions {
/**
* Scroll-to animation speed, value in milliseconds
*/
scrollInertia?: number;
/**
* Scroll-to animation easing, values: "linear", "easeOut", "easeInOut".
*/
scrollEasing?: string;
/**
* Scroll scrollbar dragger (instead of content) to a number of pixels, values: true, false
*/
moveDragger?: boolean;
/**
* Set a timeout for the method (the default timeout is 60 ms in order to work with automatic scrollbar update), value in milliseconds.
*/
timeout?: number;
/**
* Trigger user defined callback after scroll-to completes, value: true, false
*/
callbacks?: boolean;
}
}
interface JQuery {
/**
* Calls specified methods on the scrollbar "update", "stop", "disable", "destroy"
*
* @param method Method name to call on scrollbar e.g. "update", "stop"
*/
mCustomScrollbar(method: string): JQuery;
/**
* Calls the scrollTo method on the scrollbar
*
* @param scrollTo Method name as a string "scrollTo"
* @param parameter String or pixel integer value to specify where to scroll to e.g. "bottom", "top" or 20
* @param options Override default options
*/
mCustomScrollbar(scrollTo: string, parameter: any, options?: MCustomScrollbar.ScrollToParameterOptions): JQuery;
/**
* Creates a new mCustomScrollbar with the specified or default options
*
* @param options Override default options
*/
mCustomScrollbar(options?: MCustomScrollbar.CustomScrollbarOptions): JQuery;
}
declare module "malihu-custom-scrollbar-plugin" {
var factory: MCustomScrollbar.Factory;
export = factory;
}