diff --git a/types/scrollbooster/index.d.ts b/types/scrollbooster/index.d.ts new file mode 100644 index 0000000000..1a5e7262c8 --- /dev/null +++ b/types/scrollbooster/index.d.ts @@ -0,0 +1,55 @@ +// Type definitions for scrollbooster 2.2 +// Project: https://github.com/ilyashubin/scrollbooster +// Definitions by: Chris +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export interface Position { + x?: number; + y?: number; +} + +export interface ScrollingState { + isMoving: boolean; + isDragging: boolean; + position: Required; + dragOffset: number; + borderCollision: { + left: boolean; + right: boolean; + top: boolean; + bottom: boolean; + }; +} + +export interface ScrollBoosterOptions { + content?: HTMLElement | null; + viewport: HTMLElement | null; + scrollMode?: 'transform' | 'native'; + direction?: 'horizontal' | 'vertical' | 'all'; + bounce?: boolean; + textSelection?: boolean; + inputsFocus?: boolean; + pointerMode?: 'touch' | 'mouse' | 'all'; + friction?: number; + bounceForce?: number; + emulateScroll?: boolean; + onUpdate?: (state: ScrollingState) => void; + onClick?: (state: ScrollingState, event: Event) => void; + shouldScroll?: (state: ScrollingState, event: Event) => boolean; +} + +export default class ScrollBooster { + constructor(options: ScrollBoosterOptions); + + setPosition(position: Position): void; + + scrollTo(position: Position): void; + + updateMetrics(): void; + + updateOptions(options: Partial): void; + + getState(): ScrollingState; + + destroy(): void; +} diff --git a/types/scrollbooster/scrollbooster-tests.ts b/types/scrollbooster/scrollbooster-tests.ts new file mode 100644 index 0000000000..6ff4e7063e --- /dev/null +++ b/types/scrollbooster/scrollbooster-tests.ts @@ -0,0 +1,47 @@ +import ScrollBooster from 'scrollbooster'; + +const viewport = document.querySelector('.viewport'); +const content = document.querySelector('.scrollable-content'); + +const sb = new ScrollBooster({ + viewport, + content, + bounce: true, + textSelection: false, + emulateScroll: true, + bounceForce: 0.1, + friction: 0.1, + direction: 'all', + inputsFocus: true, + pointerMode: 'all', + scrollMode: 'transform', + onUpdate: state => { + // state contains useful metrics: position, dragOffset, isDragging, isMoving, borderCollision + // you can control scroll rendering manually without 'scrollMethod' option: + if (content) { + content.style.transform = `translate( + ${-state.position.x}px, + ${-state.position.y}px + )`; + } + }, + shouldScroll: (_, event) => { + // disable scroll if clicked on button + const isButton = (event.target as HTMLElement).nodeName.toLowerCase() === 'button'; + return !isButton; + }, + onClick: (state, event) => { + // prevent default link event + const isLink = (event.target as HTMLElement).nodeName.toLowerCase() === 'link'; + if (isLink) { + event.preventDefault(); + console.log(state); // ScrollingState object + } + }, +}); + +// methods usage examples: +sb.updateMetrics(); +sb.scrollTo({ x: 100, y: 100 }); +sb.updateOptions({ emulateScroll: false }); +sb.destroy(); diff --git a/types/scrollbooster/tsconfig.json b/types/scrollbooster/tsconfig.json new file mode 100644 index 0000000000..1cac7e8b51 --- /dev/null +++ b/types/scrollbooster/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "dom", + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "scrollbooster-tests.ts" + ] +} diff --git a/types/scrollbooster/tslint.json b/types/scrollbooster/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/scrollbooster/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}