Merge pull request #24398 from karak/karma-viewport

Added new package of "karma-viewport"

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 <https://github.com/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;

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;

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

types/karma-viewport/tslint.json

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