From 387b17a0846d1d7e902af138870bed2505450f2c Mon Sep 17 00:00:00 2001 From: karak Date: Tue, 20 Mar 2018 13:36:12 +0900 Subject: [PATCH 1/4] [karma-viewport] Added boilerplate. --- types/karma-viewport/index.d.ts | 13 ++++++++++++ types/karma-viewport/karma-viewport-tests.ts | 0 types/karma-viewport/tsconfig.json | 22 ++++++++++++++++++++ types/karma-viewport/tslint.json | 1 + 4 files changed, 36 insertions(+) create mode 100644 types/karma-viewport/index.d.ts create mode 100644 types/karma-viewport/karma-viewport-tests.ts create mode 100644 types/karma-viewport/tsconfig.json create mode 100644 types/karma-viewport/tslint.json diff --git a/types/karma-viewport/index.d.ts b/types/karma-viewport/index.d.ts new file mode 100644 index 0000000000..e03d76bb1a --- /dev/null +++ b/types/karma-viewport/index.d.ts @@ -0,0 +1,13 @@ +// Type definitions for karma-viewport 0.4 +// Project: https://github.com/squidfunk/karma-viewport +// Definitions by: My Self +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export = karma_viewport; + +declare const karma_viewport: { + "framework:viewport": string[]; + "middleware:viewport": string[]; + "preprocessor:viewport": string[]; +}; + diff --git a/types/karma-viewport/karma-viewport-tests.ts b/types/karma-viewport/karma-viewport-tests.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/types/karma-viewport/tsconfig.json b/types/karma-viewport/tsconfig.json new file mode 100644 index 0000000000..e0574b5659 --- /dev/null +++ b/types/karma-viewport/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": 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" } From 31246bf64c16091ac638ccb74a3ffa85243ddd06 Mon Sep 17 00:00:00 2001 From: karak Date: Tue, 20 Mar 2018 14:00:01 +0900 Subject: [PATCH 2/4] [karma-viewport] Added a type definition and tests of it. --- types/karma-viewport/index.d.ts | 125 ++++++++++++++++++- types/karma-viewport/karma-viewport-tests.ts | 48 +++++++ types/karma-viewport/tsconfig.json | 4 +- 3 files changed, 170 insertions(+), 7 deletions(-) diff --git a/types/karma-viewport/index.d.ts b/types/karma-viewport/index.d.ts index e03d76bb1a..451f48d8cf 100644 --- a/types/karma-viewport/index.d.ts +++ b/types/karma-viewport/index.d.ts @@ -2,12 +2,125 @@ // Project: https://github.com/squidfunk/karma-viewport // Definitions by: My Self // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// Type definition file for 'karma-viewport' +// https://www.npmjs.com/package/karma-viewport -export = karma_viewport; +declare namespace KarmaViewport { + interface Breakpoint { + name: string; + size: { + width: number, + height: number, + }; + } -declare const karma_viewport: { - "framework:viewport": string[]; - "middleware:viewport": string[]; - "preprocessor:viewport": string[]; -}; + 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; + +export = viewport; diff --git a/types/karma-viewport/karma-viewport-tests.ts b/types/karma-viewport/karma-viewport-tests.ts index e69de29bb2..d76ea9d6fd 100644 --- a/types/karma-viewport/karma-viewport-tests.ts +++ b/types/karma-viewport/karma-viewport-tests.ts @@ -0,0 +1,48 @@ +import * as viewport from 'karma-viewport'; + +// 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 index e0574b5659..def40ab217 100644 --- a/types/karma-viewport/tsconfig.json +++ b/types/karma-viewport/tsconfig.json @@ -2,11 +2,13 @@ "compilerOptions": { "module": "commonjs", "lib": [ - "es6" + "es6", + "dom" ], "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From c87f850b4943f3fb92889945ad5796e9f96d0d70 Mon Sep 17 00:00:00 2001 From: karak Date: Tue, 20 Mar 2018 14:09:39 +0900 Subject: [PATCH 3/4] [karma-viewport] Migrated to global form. --- types/karma-viewport/index.d.ts | 2 -- types/karma-viewport/karma-viewport-tests.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/types/karma-viewport/index.d.ts b/types/karma-viewport/index.d.ts index 451f48d8cf..cb220bfc5b 100644 --- a/types/karma-viewport/index.d.ts +++ b/types/karma-viewport/index.d.ts @@ -122,5 +122,3 @@ declare namespace KarmaViewport { } declare const viewport: KarmaViewport.Viewport; - -export = viewport; diff --git a/types/karma-viewport/karma-viewport-tests.ts b/types/karma-viewport/karma-viewport-tests.ts index d76ea9d6fd..f220f35d98 100644 --- a/types/karma-viewport/karma-viewport-tests.ts +++ b/types/karma-viewport/karma-viewport-tests.ts @@ -1,5 +1,3 @@ -import * as viewport from 'karma-viewport'; - // Set to 320px x 100% viewport.set(320); From b745db2194e27703c8dde8b7af4e2fd20ac5da8e Mon Sep 17 00:00:00 2001 From: karak Date: Wed, 21 Mar 2018 08:41:20 +0900 Subject: [PATCH 4/4] Fix author. --- types/karma-viewport/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/karma-viewport/index.d.ts b/types/karma-viewport/index.d.ts index cb220bfc5b..10196485ca 100644 --- a/types/karma-viewport/index.d.ts +++ b/types/karma-viewport/index.d.ts @@ -1,6 +1,6 @@ // Type definitions for karma-viewport 0.4 // Project: https://github.com/squidfunk/karma-viewport -// Definitions by: My Self +// Definitions by: Karak // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // Type definition file for 'karma-viewport' // https://www.npmjs.com/package/karma-viewport