Added type definitions for scrollbooster (#42745)

* Added type definitions for scrollbooster

* Added new lines for better readability

* Added more info on the project

* Extending the correct linter

types/scrollbooster/index.d.ts

@@ -0,0 +1,55 @@
+// Type definitions for scrollbooster 2.2
+// Project: https://github.com/ilyashubin/scrollbooster
+// Definitions by: Chris <https://github.com/chrisneven>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+export interface Position {
+    x?: number;
+    y?: number;
+}
+
+export interface ScrollingState {
+    isMoving: boolean;
+    isDragging: boolean;
+    position: Required<Position>;
+    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<ScrollBoosterOptions>): void;
+
+    getState(): ScrollingState;
+
+    destroy(): void;
+}

types/scrollbooster/scrollbooster-tests.ts

@@ -0,0 +1,47 @@
+import ScrollBooster from 'scrollbooster';
+
+const viewport = document.querySelector<HTMLDivElement>('.viewport');
+const content = document.querySelector<HTMLDivElement>('.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();

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"
+    ]
+}

types/scrollbooster/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}