diff --git a/types/karma-viewport/index.d.ts b/types/karma-viewport/index.d.ts new file mode 100644 index 0000000000..10196485ca --- /dev/null +++ b/types/karma-viewport/index.d.ts @@ -0,0 +1,124 @@ +// Type definitions for karma-viewport 0.4 +// Project: https://github.com/squidfunk/karma-viewport +// Definitions by: Karak +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// Type definition file for 'karma-viewport' +// https://www.npmjs.com/package/karma-viewport + +declare namespace KarmaViewport { + interface Breakpoint { + name: string; + size: { + width: number, + height: number, + }; + } + + interface Config { + /** Context selector */ + context: string; + /** Breakpoints */ + breakpoints: Breakpoint[]; + } + + class Viewport { + /** + * Create viewport resizer + * + * @param config - Configuration + * @param context - Initialization context + */ + constructor(config: Config, context: Window); + + /** + * Load and embed document into viewport + * + * @param url - URL of document to load + * @param cb - Callback to execute after document was loaded + */ + load(url: string, cb: () => void): void; + + /** + * Set viewport to number or array + */ + set(width: number, height?: number): void; + + /** + * Set viewport to breakpoint identifier + */ + set(name: string): void; + + /** + * Reset viewport + */ + reset(): void; + + /** + * Execute a callback for all breakpoints between the first and last given + * + * @example + * viewport.between("mobile", "tablet", name => { + * ... + * }) + * + * @param first - First breakpoint name + * @param last - Last breakpoint name + * @param cb - Callback to execute after resizing + */ + between(first: string, last: string, cb: (name: string) => void): void; + + /** + * Execute a callback for all breakpoints + * + * @example + * viewport.each(name => { + * ... + * }) + * + * @param cb - Callback to execute after resizing + */ + each(cb: (name: string) => void): void; + + /** + * Execute a callback starting at the given breakpoint + * + * @example + * viewport.from("tablet", name => { + * ... + * }) + * + * @param first - First breakpoint name + * @param cb - Callback to execute after resizing + */ + from(first: string, cb: (name: string) => void): void; + + /** + * Execute a callback ending at the given breakpoint + * + * @example + * viewport.to("tablet", name => { + * ... + * }) + * + * @param last - Last breakpoint name + * @param cb - Callback to execute after resizing + */ + to(last: string, cb: (name: string) => void): void; + + /** + * Retrieve configuration + * + * @return Configuration + */ + readonly config: Config; // get config() + + /** + * Retrieve context element + * + * @return context element + */ + readonly element: HTMLIFrameElement; // get element() + } +} + +declare const viewport: KarmaViewport.Viewport; diff --git a/types/karma-viewport/karma-viewport-tests.ts b/types/karma-viewport/karma-viewport-tests.ts new file mode 100644 index 0000000000..f220f35d98 --- /dev/null +++ b/types/karma-viewport/karma-viewport-tests.ts @@ -0,0 +1,46 @@ +// Set to 320px x 100% +viewport.set(320); + +// Set to 320px x 480px +viewport.set(320, 480); + +// Set to 320px x 480px by breakpoints +viewport.set("mobile"); + +// Reset to 100% x 100% +viewport.reset(); + +// Load entire webpages for testing: +viewport.load("/path/to/fixture.html", () => console.log('done')); + +// Run tests for mobile, tablet and screen +viewport.each(name => { + // ... +}); + +// Run tests for tablet and screen +viewport.from("tablet", name => { + // ... +}); + +// Run tests for mobile and tablet +viewport.to("tablet", name => { + // ... +}); + +// Run tests for tablet and screen +viewport.between("tablet", "screen", name => { + // ... +}); + +// get config +viewport.config.breakpoints.forEach(breakpoint => { + const name: string = breakpoint.name; + const width: number = breakpoint.size.width; + const height: number = breakpoint.size.height; +}); + +const contextSelector: string = viewport.config.context; + +// get element +const iframe: HTMLIFrameElement = viewport.element; diff --git a/types/karma-viewport/tsconfig.json b/types/karma-viewport/tsconfig.json new file mode 100644 index 0000000000..def40ab217 --- /dev/null +++ b/types/karma-viewport/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "karma-viewport-tests.ts" + ] +} diff --git a/types/karma-viewport/tslint.json b/types/karma-viewport/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/karma-viewport/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }