From 2f2608a9adda429e8f413484d5d8bf498303ce5a Mon Sep 17 00:00:00 2001 From: CarbonAtom Date: Fri, 7 Jul 2017 11:04:47 -0400 Subject: [PATCH] [perfect-scrollbar] Updated to v0.7.1. Added global var and vanilla events. Improved jsdoc. --- types/perfect-scrollbar/index.d.ts | 137 +++++++++++++----- .../perfect-scrollbar-tests.ts | 2 + 2 files changed, 105 insertions(+), 34 deletions(-) diff --git a/types/perfect-scrollbar/index.d.ts b/types/perfect-scrollbar/index.d.ts index 74852a513c..bceaf35faa 100644 --- a/types/perfect-scrollbar/index.d.ts +++ b/types/perfect-scrollbar/index.d.ts @@ -1,21 +1,66 @@ -// Type definitions for perfect-scrollbar v0.6.12 +// Type definitions for perfect-scrollbar v0.7.1 // Project: https://github.com/noraesae/perfect-scrollbar // Definitions by: Kombu +// Cyrus // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 /// +interface HTMLElementEventMap { + /** + * This event fires when the y-axis is scrolled in either direction. + */ + 'ps-scroll-y': CustomEvent, + /** + * This event fires when the x-axis is scrolled in either direction. + */ + 'ps-scroll-x': CustomEvent, + /** + * This event fires when scrolling upwards. + */ + 'ps-scroll-up': CustomEvent, + /** + * This event fires when scrolling downwards. + */ + 'ps-scroll-down': CustomEvent, + /** + * This event fires when scrolling to the left. + */ + 'ps-scroll-left': CustomEvent, + /** + * This event fires when scrolling to the right. + */ + 'ps-scroll-right': CustomEvent, + /** + * This event fires when scrolling reaches the start of the y-axis. + */ + 'ps-y-reach-start': CustomEvent, + /** + * This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll). + */ + 'ps-y-reach-end': CustomEvent, + /** + * This event fires when scrolling reaches the start of the x-axis. + */ + 'ps-x-reach-start': CustomEvent, + /** + * This event fires when scrolling reaches the end of the x-axis. + */ + 'ps-x-reach-end': CustomEvent +} + /** - * https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/default-setting.js#L3 - * https://github.com/noraesae/perfect-scrollbar#optional-parameters + * @see https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/default-setting.js#L3 + * @see https://github.com/noraesae/perfect-scrollbar#optional-parameters */ interface PerfectScrollbarSettings { /** * It is a list of handlers to use to scroll the element. - * https://github.com/noraesae/perfect-scrollbar#handlers - * https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/initialize.js#L9 + * @see https://github.com/noraesae/perfect-scrollbar#handlers + * @see https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/initialize.js#L9 + * @default ['click-rail', 'drag-scrollbar', keyboard', 'wheel', 'touch'] */ handlers?: ('click-rail' | 'drag-scrollbar' | @@ -26,69 +71,87 @@ interface PerfectScrollbarSettings { /** * When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels. - * https://github.com/noraesae/perfect-scrollbar#maxscrollbarlength + * @see https://github.com/noraesae/perfect-scrollbar#maxscrollbarlength + * @default null */ maxScrollbarLength?: number; /** * When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels. - * https://github.com/noraesae/perfect-scrollbar#minscrollbarlength + * @see https://github.com/noraesae/perfect-scrollbar#minscrollbarlength + * @default null */ minScrollbarLength?: number; /** * The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. * Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels. - * https://github.com/noraesae/perfect-scrollbar#scrollxmarginoffset + * @see https://github.com/noraesae/perfect-scrollbar#scrollxmarginoffset + * @default 0 */ scrollXMarginOffset?: number; /** * The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. * Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels. - * https://github.com/noraesae/perfect-scrollbar#scrollymarginoffset + * @see https://github.com/noraesae/perfect-scrollbar#scrollymarginoffset + * @default 0 */ scrollYMarginOffset?: number; /** - * When set to false, when clicking on a rail, the click event will be allowed to propagate. - * https://github.com/noraesae/perfect-scrollbar#stoppropagationonclick + * @deprecated + * @description When set to false, when clicking on a rail, the click event will be allowed to propagate. + * @see https://github.com/noraesae/perfect-scrollbar#stoppropagationonclick */ stopPropagationOnClick?: boolean; /** * When set to true, the scroll bar in X axis will not be available, regardless of the content width. - * https://github.com/noraesae/perfect-scrollbar#suppressscrollx + * @see https://github.com/noraesae/perfect-scrollbar#suppressscrollx + * @default false */ suppressScrollX?: boolean; /** * When set to true, the scroll bar in Y axis will not be available, regardless of the content height. - * https://github.com/noraesae/perfect-scrollbar#suppressscrolly + * @see https://github.com/noraesae/perfect-scrollbar#suppressscrolly + * @default false */ suppressScrollY?: boolean; /** * If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element. - * https://github.com/noraesae/perfect-scrollbar#swipepropagation + * @see https://github.com/noraesae/perfect-scrollbar#swipepropagation + * @default true */ swipePropagation?: boolean; + /** + * If this option is true, swipe scrolling will be eased. + * @see https://github.com/noraesae/perfect-scrollbar#swipeeasing + * @default true + */ + swipeEasing?:boolean; + /** * When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar. - * https://github.com/noraesae/perfect-scrollbar#usebothwheelaxes + * @see https://github.com/noraesae/perfect-scrollbar#usebothwheelaxes + * @default false */ useBothWheelAxes?: boolean; /** * If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element. - * https://github.com/noraesae/perfect-scrollbar#wheelpropagation + * @see https://github.com/noraesae/perfect-scrollbar#wheelpropagation + * @default false */ wheelPropagation?: boolean; /** * The scroll speed applied to mousewheel event. - * https://github.com/noraesae/perfect-scrollbar#wheelspeed + * @see https://github.com/noraesae/perfect-scrollbar#wheelspeed + * @default 1 */ wheelSpeed?: number; @@ -98,33 +161,39 @@ interface PerfectScrollbarSettings { * The class name is prepended with `ps-theme-`. * So default theme class name is `ps-theme-default`. * In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. - * https://github.com/noraesae/perfect-scrollbar#theme + * @see https://github.com/noraesae/perfect-scrollbar#theme + * @default 'default' */ theme?: string; } +interface PerfectScrollbar { + /** + * @see https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/initialize.js#L19 + */ + initialize(element: HTMLElement, settings?: PerfectScrollbarSettings): void; + + /** + * @see https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/update.js#L9 + */ + update(element: HTMLElement): void; + + /** + * @see https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/destroy.js#L7 + */ + destroy(element: HTMLElement): void; +} + +declare const Ps: PerfectScrollbar; + declare module 'perfect-scrollbar' { - - /** - * https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/initialize.js#L19 - */ - export function initialize(element: HTMLElement, settings?: PerfectScrollbarSettings): void; - - /** - * https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/update.js#L9 - */ - export function update(element: HTMLElement): void; - - /** - * https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/plugin/destroy.js#L7 - */ - export function destroy(element: HTMLElement): void; + export = Ps; } interface JQuery { /** - * https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/adaptor/jquery.js#L6 + * @see https://github.com/noraesae/perfect-scrollbar/blob/master/src/js/adaptor/jquery.js#L6 */ perfectScrollbar(settingOrCommand?: PerfectScrollbarSettings | 'update' | 'destroy'): JQuery; } diff --git a/types/perfect-scrollbar/perfect-scrollbar-tests.ts b/types/perfect-scrollbar/perfect-scrollbar-tests.ts index 6bd9854658..4ba80d1294 100644 --- a/types/perfect-scrollbar/perfect-scrollbar-tests.ts +++ b/types/perfect-scrollbar/perfect-scrollbar-tests.ts @@ -36,3 +36,5 @@ $('#container').perfectScrollbar() // Initialize $('#container').perfectScrollbar({ /*...*/ }) // with options $('#container').perfectScrollbar('update') // Update $('#container').perfectScrollbar('destroy') // Destroy + +container.addEventListener('ps-x-reach-start', () => { });