diff --git a/types/zenscroll/index.d.ts b/types/zenscroll/index.d.ts new file mode 100644 index 0000000000..4f46064a50 --- /dev/null +++ b/types/zenscroll/index.d.ts @@ -0,0 +1,28 @@ +// Type definitions for zenscroll 4.0 +// Project: https://zengabor.github.io/zenscroll/ +// Definitions by: Hamed Fathi +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare var zenScroll: ZenScroll.zenscroll; +export = zenScroll; +export as namespace zenScroll; + +declare namespace ZenScroll { + interface setupOption { + defaultDuration: number; + edgeOffset: number; + } + + interface zenscroll { + setup(defaultDuration?: number, edgeOffset?: number): setupOption; + to(elem: HTMLElement, duration?: number, onDone?: () => void): void; + toY(targetY: number, duration?: number, onDone?: () => void): void; + intoView(elem: HTMLElement, duration?: number, onDone?: () => void): void; + center(elem: HTMLElement, duration?: number, offset?: number, onDone?: () => void): void; + stop(): void; + moving(): boolean; + getY(): number; + getTopOf(elem: HTMLElement): number; + createScroller(scrollContainer: HTMLElement, defaultDuration?: number, edgeOffset?: number): zenscroll; + } +} diff --git a/types/zenscroll/tsconfig.json b/types/zenscroll/tsconfig.json new file mode 100644 index 0000000000..89fc59c020 --- /dev/null +++ b/types/zenscroll/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "zenscroll-tests.ts" + ] +} \ No newline at end of file diff --git a/types/zenscroll/tslint.json b/types/zenscroll/tslint.json new file mode 100644 index 0000000000..2750cc0197 --- /dev/null +++ b/types/zenscroll/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } \ No newline at end of file diff --git a/types/zenscroll/zenscroll-tests.ts b/types/zenscroll/zenscroll-tests.ts new file mode 100644 index 0000000000..204d911816 --- /dev/null +++ b/types/zenscroll/zenscroll-tests.ts @@ -0,0 +1,57 @@ +import * as zenscroll from 'zenscroll'; + +// Scroll to the top of an element +const about = document.getElementById("about"); +zenscroll.to(about); + +// Scroll to a specific vertical position +zenscroll.toY(50); + +// Scroll an element into view +const image1 = document.getElementById("imageSample"); +zenscroll.intoView(image1, 400, () => console.log('scrolled')); + +// Scrolls the element to the center of the screen +zenscroll.center(image1); + +const duration = 500; // milliseconds +const offset = 200; // pixels +zenscroll.center(image1, duration, offset); + +// Set the duration of the scroll +zenscroll.toY(50, 100); // 100ms == 0.1 second +zenscroll.to(about, 500); // 500ms == half a second +zenscroll.center(image1, 2000); // 2 seconds +zenscroll.to(about, 0); // 0 milliseconds == no smoothing + +// Scroll inside a scrollable DIV +const defaultDuration = 500; +const edgeOffset = 30; +const myDiv = document.getElementById("container"); +const myScroller = zenscroll.createScroller(myDiv, defaultDuration, edgeOffset); +const target = document.getElementById("item4"); +myScroller.center(target); +myScroller.toY(500); +myScroller.intoView(target); + +// Execute something when the scrolling is done +zenscroll.intoView(myDiv, 100, () => myScroller.center(target)); +zenscroll.intoView(myDiv, 100, () => myScroller.toY(35)); +zenscroll.intoView(myDiv, 100, () => myScroller.intoView(target)); + +// Change settings +zenscroll.setup(defaultDuration, edgeOffset); +myScroller.setup(500, 10); +zenscroll.setup(777); // only updates defaultDuration to 777 +zenscroll.setup(null, 42); // only updates edgeOffset to 42 +const currentSettings = zenscroll.setup(); +const dd = currentSettings.defaultDuration; +const eo = currentSettings.edgeOffset; + +// Additional functions +const isScrolling = zenscroll.moving(); +zenscroll.stop(); +const bodyY = zenscroll.getY(); +const myDivY = myScroller.getY(); +const myElemY = zenscroll.getTopOf(about); +const relativeTopOfElem = myScroller.getTopOf(about);