From 536734f6e0f47475388eac44a392cdeff250b614 Mon Sep 17 00:00:00 2001 From: Alexey Svetliakov Date: Tue, 10 Jan 2017 06:12:30 +0100 Subject: [PATCH 1/2] Initial commit --- smooth-scrollbar/index.d.ts | 277 +++++++++++++++++++++ smooth-scrollbar/smooth-scrollbar-tests.ts | 31 +++ smooth-scrollbar/tsconfig.json | 20 ++ smooth-scrollbar/tslint.json | 1 + 4 files changed, 329 insertions(+) create mode 100644 smooth-scrollbar/index.d.ts create mode 100644 smooth-scrollbar/smooth-scrollbar-tests.ts create mode 100644 smooth-scrollbar/tsconfig.json create mode 100644 smooth-scrollbar/tslint.json diff --git a/smooth-scrollbar/index.d.ts b/smooth-scrollbar/index.d.ts new file mode 100644 index 0000000000..7962a4f9ee --- /dev/null +++ b/smooth-scrollbar/index.d.ts @@ -0,0 +1,277 @@ +// Type definitions for smooth-scrollbar 7.2 +// Project: https://github.com/idiotWu/smooth-scrollbar +// Definitions by: Alexey Svetliakov +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export as namespace Scrollbar; + +export interface ScrollbarOptions { + /** + * Scrolling speed scale. + * @default 1 + */ + speed?: number; + /** + * Delta reduction damping, a float value between (0, 1), the lower the value is, the more smooth the scrolling will be. + * @default 0.1 + */ + damping?: number; + /** + * Minimal size for scrollbar thumb. + * @default 20 + */ + thumbMinSize?: number; + /** + * Execute listeners in synchronous or asynchronous. + * @default false + */ + syncCallbacks?: boolean; + /** + * Render scrolling by integer pixels, set to true to improve performance. + * @default true + */ + renderByPixels?: boolean; + /** + * Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge. + * When set to "auto", it will be enabled on nested scrollbars, and disabled on first-class scrollbars. + * @default "auto" + */ + continuousScrolling?: boolean | "auto"; + /** + * Experimental overscroll effect, "bounce" for iOS style effect and "glow" for Android style effect. + * Be careful when you enable this feature! + * @default false + */ + overscrollEffect?: boolean | "bounce" | "glow"; + /** + * Canvas paint color with 'glow' effect. + * @default "#87ceeb" + */ + overscrollEffectColor?: string; + /** + * The same as damping, but for overscrolling. + * @default 0.2 + */ + overscrollDamping?: number; +} + +export interface ScrollbarTargets { + readonly container: HTMLElement; + readonly content: HTMLElement; + readonly xAxis: { + readonly track: HTMLElement; + readonly thumb: HTMLElement; + }; + readonly yAxis: { + readonly track: HTMLElement; + readonly thumb: HTMLElement; + } +} + +interface ScrollIntoViewOptions { + /** + * scrolling stop offset to top edge of container + * @default 0 + */ + offsetTop?: number; + /** + * scrolling stop offset to left edge of container + * @default 0 + */ + offsetLeft?: number; + /** + * whether to scroll container when target element is visible + * @default false + */ + onlyScrollIfNeeded?: boolean; +} + +export interface ScrollStatusObject { + /** + * Scrolling direction + */ + direction: { + x: "none" | "right" | "left"; + y: "none" | "up" | "down"; + }; + /** + * Scrolling offset + */ + offset: { + x: number; + y: number; + }; + /** + * Max scroll distance in px + */ + limit: { + x: number; + y: number; + }; +} + +export default class Scrollbar { + /** + * Init scrollbar on given element, and returns scrollbar instance + * @param {HTMLElement} element Element to init scrollbar + * @param {ScrollbarOptions} options Scrollbar options + * @return {Scrollbar} Scrollbar instance + */ + static init(element: HTMLElement, options?: ScrollbarOptions): Scrollbar; + /** + * Automatically init scrollbar on all elements refer to selector scrollbar, [scrollbar], [data-scrollbar] + * @return {Scrollbar[]} An array of scrollbars + */ + static initAll(options?: ScrollbarOptions): Scrollbar[]; + /** + * Check if scrollbar exists on given element: + * @param {HTMLElement} element HTML element + * @return {boolean} + */ + static has(element: HTMLElement): boolean; + /** + * Get scrollbar on the given element + * @param {HTMLElement} element HTML element + * @return {Scrollbar|undefined} Scrollbar instance of undefined if element doesn't have scrollbar + */ + static get(element: HTMLElement): Scrollbar | undefined; + /** + * Get all scrollbar instances + * @return {Scrollbar[]} An array of scrollbar instances + */ + static getAll(): Scrollbar[]; + /** + * Remove scrollbar on the given element + * @param {HTMLElement} element HTML element + * @param {boolean} isRemoval + */ + static destroy(element: HTMLElement, isRemoval?: boolean): void; + /** + * Destroys all scrollbar instances + */ + static destroyAll(): void; + /** + * Current scrollbar targets + */ + public readonly targets: ScrollbarTargets; + /** + * Current scrolling offset + */ + public offset: { + x: number; + y: number; + }; + /** + * Max scrolling offset + */ + public limit: { + x: number; + y: number; + } + /** + * Alias for offset.y + */ + public scrollTop: number; + /** + * Alias for offset.x + */ + public scrollLeft: number; + + /** + * Scrollbars are automatically updated with 100ms debounce (or childList changes if MutationObserver is supported). + * You can call update() to force an update, this will be useful when you modified contents inside scrollbar + * @param {boolean} async By default, updating will operate synchronously, set to true to update asynchronously (in next frame). + */ + public update(async?: boolean): void; + /** + * Return the size of scrollbar container and scroll content + * @return {Object} Container and content dimensions + */ + public getSize(): { container: { width: number; height: number }; content: { width: number; height: number } }; + /** + * Like window.scrollTo(), scroll content will be set to the given position immediately. + * @param {number} x X position + * @param {number} y Y position + * @param {boolean} withoutCallbacks Set to true to disable callback functions temporarily. + */ + setPosition(x: number, y: number, withoutCallbacks?: boolean): void; + /** + * Scroll to given position with easing, callback will be invoked with instance after scrolling: + * @param {number} x X position + * @param {number} y Y position + * @param {number} duration description + * @param {Function} callback Callback + */ + scrollTo(x: number, y: number, duration?: number, callback?: (instance: this) => void): void; + /** + * Scroll target element into visible area of scrollbar, like DOM method element.scrollIntoView(). + * This will be helpful when you want to create some anchors. + * @param {HTMLElement} element Element to scroll into + * @param {ScrollIntoViewOptions} options Options + */ + scrollIntoView(element: HTMLElement, options?: ScrollIntoViewOptions): void; + /** + * Check if an element is visible in the current view area. + * @param {HTMLElement} element HTML element + * @return {boolean} True/false + */ + isVisible(element: HTMLElement): boolean; + /** + * Register scrolling listener to scrollbar instance, callbacks will be invoked in every small scrolling. + * @param {Function} listener A listener + */ + addListener(listener: (status: ScrollStatusObject) => void): void; + /** + * Remove the given listeneer from listeners collection, like Element.removeEventListener(). + * @param {Function} listener A listener + */ + removeListener(listener: (status: ScrollStatusObject) => void): void; + /** + * This is another useful method when you want to make infinite scrolling. + * Callbacks will be invoked with status object when you scrolling down over a threshold. + * @param {Function} listener A listener + * @param {number} threshold Threshold, default 50 + */ + infiniteScroll(listener: (status: ScrollStatusObject) => void, threshold?: number): void; + /** + * Remove DOM event handlers that match regex rules + * @param {RegExp[]} regexps regexps + * @example + * instance.unregisterEvents(/touch/, /key/); + */ + unregisterEvents(...regexps: RegExp[]): void; + /** + * Recover events that are unregistered. + * @param {RegExp[]} regexps regexps + */ + registerEvents(...regexps: RegExp[]): void; + /** + * Clear all movements and stop scrollbar immediately, will be useful when you want to stop scrollbar and set it to another position. + */ + clearMovement(): void; + /** + * Alias for clearMovement() method. + */ + stop(): void; + /** + * Remove this scrollbar instance + * @param {boolean} isRemoval Set to true if scrollbar being removed from DOM + */ + destroy(isRemoval?: boolean): void; + /** + * Get content element of the scrollbar, which contains all of your contents within scrollbar. + * In other words, all contents that you've put them into target element, will be moved here after you initialized the scrollbar. + * @return {HTMLElement} HTML content element + */ + getContentElem(): HTMLElement; + /** + * Show scrollbar track, you can choose whether 'x' or 'y' or 'both', default is 'both' which will show tracks both on x-axis and y-axis. + * @param {"x"|"y"|"both"} direction Track direction + */ + showTrack(direction?: "x" | "y" | "both"): void; + /** + * Like showTrack() method, but for hiding the track on specified direction. + * @param {"x"|"y"|"both"} direction Track direction + */ + hideTrack(direction?: "x" | "y" | "both"): void; +} diff --git a/smooth-scrollbar/smooth-scrollbar-tests.ts b/smooth-scrollbar/smooth-scrollbar-tests.ts new file mode 100644 index 0000000000..2072caa3c8 --- /dev/null +++ b/smooth-scrollbar/smooth-scrollbar-tests.ts @@ -0,0 +1,31 @@ +import Scrollbar from "smooth-scrollbar"; + +const elem = document.createElement("div"); + +const scrollbar = Scrollbar.init(elem, { + continuousScrolling: true, + damping: 5, + overscrollDamping: 5, + overscrollEffect: "glow", + overscrollEffectColor: "green", + renderByPixels: true, + speed: 10, + syncCallbacks: true, + thumbMinSize: 1 +}); + +Scrollbar.has(elem); +Scrollbar.get(elem) === scrollbar; + +scrollbar.targets.container; +scrollbar.targets.xAxis.track; + +scrollbar.update(true); +scrollbar.setPosition(10, 10); + +scrollbar.addListener(status => status.direction); +scrollbar.infiniteScroll(status => status.direction.y); + +scrollbar.hideTrack("both"); +scrollbar.showTrack("x"); +scrollbar.destroy(true); diff --git a/smooth-scrollbar/tsconfig.json b/smooth-scrollbar/tsconfig.json new file mode 100644 index 0000000000..be638b7a40 --- /dev/null +++ b/smooth-scrollbar/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "smooth-scrollbar-tests.ts" + ] +} diff --git a/smooth-scrollbar/tslint.json b/smooth-scrollbar/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/smooth-scrollbar/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" } From 1bb87209613b649c60c7788c89c3bedbb8d42afc Mon Sep 17 00:00:00 2001 From: Alexey Svetliakov Date: Tue, 10 Jan 2017 06:27:37 +0100 Subject: [PATCH 2/2] Linting --- smooth-scrollbar/index.d.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/smooth-scrollbar/index.d.ts b/smooth-scrollbar/index.d.ts index 7962a4f9ee..f6a65ca958 100644 --- a/smooth-scrollbar/index.d.ts +++ b/smooth-scrollbar/index.d.ts @@ -65,7 +65,7 @@ export interface ScrollbarTargets { readonly yAxis: { readonly track: HTMLElement; readonly thumb: HTMLElement; - } + }; } interface ScrollIntoViewOptions { @@ -153,41 +153,41 @@ export default class Scrollbar { /** * Current scrollbar targets */ - public readonly targets: ScrollbarTargets; + readonly targets: ScrollbarTargets; /** * Current scrolling offset */ - public offset: { + offset: { x: number; y: number; }; /** * Max scrolling offset */ - public limit: { + limit: { x: number; y: number; - } + }; /** * Alias for offset.y */ - public scrollTop: number; + scrollTop: number; /** * Alias for offset.x */ - public scrollLeft: number; + scrollLeft: number; /** * Scrollbars are automatically updated with 100ms debounce (or childList changes if MutationObserver is supported). * You can call update() to force an update, this will be useful when you modified contents inside scrollbar * @param {boolean} async By default, updating will operate synchronously, set to true to update asynchronously (in next frame). */ - public update(async?: boolean): void; + update(async?: boolean): void; /** * Return the size of scrollbar container and scroll content * @return {Object} Container and content dimensions */ - public getSize(): { container: { width: number; height: number }; content: { width: number; height: number } }; + getSize(): { container: { width: number; height: number }; content: { width: number; height: number } }; /** * Like window.scrollTo(), scroll content will be set to the given position immediately. * @param {number} x X position