From 6c29b2e8067eaf203aea999bdeeb92b8384ceed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=9D=BF=E5=8D=8E?= <lrh3321@126.com>
Date: Tue, 25 Jul 2017 22:10:09 +0800
Subject: [PATCH] Add TypeScript definitions for Viewer.js (NPM package name:
 viewerjs) (#18320)

* TypeScript definitions for Viewer.js

* use export = instead of export default
---
 types/viewerjs/index.d.ts        | 371 +++++++++++++++++++++++++++++++
 types/viewerjs/tsconfig.json     |  24 ++
 types/viewerjs/tslint.json       |   1 +
 types/viewerjs/viewerjs-tests.ts | 126 +++++++++++
 4 files changed, 522 insertions(+)
 create mode 100644 types/viewerjs/index.d.ts
 create mode 100644 types/viewerjs/tsconfig.json
 create mode 100644 types/viewerjs/tslint.json
 create mode 100644 types/viewerjs/viewerjs-tests.ts

diff --git a/types/viewerjs/index.d.ts b/types/viewerjs/index.d.ts
new file mode 100644
index 0000000000..9531447b09
--- /dev/null
+++ b/types/viewerjs/index.d.ts
@@ -0,0 +1,371 @@
+// Type definitions for viewerjs 0.7
+// Project: https://fengyuanchen.github.io/viewerjs
+// Definitions by: LRH3321 <https://github.com/lrh3321>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace Viewer {
+    type ImageSourceDelegate = (image: HTMLImageElement) => string;
+
+    type ViewerMethod = () => void;
+
+    /**
+     * Options
+     * @see {@link https://github.com/fengyuanchen/viewerjs#options}
+     */
+    interface ViewerOption {
+        /**
+         * Enable inline mode.
+         * @default false
+         */
+        inline?: boolean;
+
+        /**
+         * Show the button on the top-right of the viewer.
+         * @default true
+         */
+        button?: boolean;
+
+        /**
+         * Specify the visibility of the navbar.
+         * - `0` or `false`: hide the navbar
+         * - `1` or `true`: show the navbar
+         * - `2`: show the navbar only when screen width great then 768 pixels
+         * - `3`: show the navbar only when screen width great then 992 pixels
+         * - `4`: show the navbar only when screen width great then 1200 pixels
+         * @default true
+         */
+        navbar?: boolean | number;
+
+        /**
+         * Specify the visibility of the title (the current image's name and dimensions).
+         * `0` or `false`: hide the title
+         * `1` or `true`: show the title
+         * `2`: show the title only when screen width great then 768 pixels
+         * `3`: show the title only when screen width great then 992 pixels
+         * `4`: show the title only when screen width great then 1200 pixels
+         * @default true
+         * @description The name comes from the `alt` attribute of an image element or the image name parsed from URL.
+         */
+        title?: boolean | number;
+
+        /**
+         * Specify the visibility of the toolbar.
+         * - `0` or `false`: hide the toolbar
+         * - `1` or `true`: show the toolbar
+         * - `2`: show the toolbar only when screen width great then 768 pixels
+         * - `3`: show the toolbar only when screen width great then 992 pixels
+         * - `4`: show the toolbar only when screen width great then 1200 pixels
+         * @default true
+         */
+        toolbar?: boolean | number;
+
+        /**
+         * Show the tooltip with image ratio (percentage) when zoom in or zoom out
+         * @default true
+         */
+        tooltip?: boolean;
+
+        /**
+         * Enable to move the image.
+         * @default true
+         */
+        movable?: boolean;
+
+        /**
+         * Enable to zoom the image.
+         * @default true
+         */
+        zoomable?: boolean;
+
+        /**
+         * Enable to rotate the image.
+         * @default true
+         */
+        rotatable?: boolean;
+
+        /**
+         * Enable to scale the image.
+         * @default true
+         */
+        scalable?: boolean;
+
+        /**
+         * Enable CSS3 Transition for some special elements.
+         * @default true
+         */
+        transition?: boolean;
+
+        /**
+         * Enable to request full screen when play.
+         * @default true
+         * @description Requires the browser supports
+         * @see {@link http://caniuse.com/fullscreen}
+         */
+        fullscreen?: boolean;
+
+        /**
+         * Enable keyboard support.
+         * @default true
+         */
+        keyboard?: boolean;
+
+        /**
+         * Define interval of each image when playing.
+         * @default 5000
+         */
+        interval?: number;
+
+        /**
+         * Define the minimum width of the viewer.
+         * @default 200
+         * @description Only available in inline mode (set the `inline` option to `true`).
+         */
+        minWidth?: number;
+
+        /**
+         * Define the minimum height of the viewer.
+         * @default 100
+         * @description Only available in inline mode (set the `inline` option to `true`).
+         */
+        minHeight?: number;
+
+        /**
+         * Define the ratio when zoom the image by wheeling mouse.
+         * @default 0.1
+         */
+        zoomRatio?: number;
+
+        /**
+         * Define the min ratio of the image when zoom out.
+         * @default 0.01
+         */
+        minZoomRatio?: number;
+
+        /**
+         * Define the max ratio of the image when zoom in.
+         * @default 100
+         */
+        maxZoomRatio?: number;
+
+        /**
+         * Define the CSS `z-index` value of viewer in modal mode.
+         * @default 2015
+         */
+        zIndex?: number;
+
+        /**
+         * Define the CSS `z-index` value of viewer in inline mode.
+         * @default 0
+         */
+        zIndexInline?: number;
+
+        /**
+         * Define where to get the original image URL for viewing.
+         * @default 'src'
+         * @description If it is a string, it should be one of the attributes of each image element.
+         * @description If it is a function, it will be called on each image and should return a valid image URL.
+         */
+        url?: string | ImageSourceDelegate;
+
+        /**
+         * A shortcut of the `ready` event.
+         * @default null
+         */
+        ready?: ViewerMethod | null;
+
+        /**
+         * A shortcut of the `show` event.
+         * @default null
+         */
+        show?: ViewerMethod | null;
+
+        /**
+         * A shortcut of the `shown` event.
+         * @default null
+         */
+        shown?: ViewerMethod | null;
+
+        /**
+         * A shortcut of the `hide` event.
+         * @default null
+         */
+        hide?: ViewerMethod | null;
+
+        /**
+         * A shortcut of the `hidden` event.
+         * @default null
+         */
+        hidden?: ViewerMethod | null;
+
+        /**
+         * A shortcut of the `view` event.
+         * @default null
+         */
+        view?: ViewerMethod | null;
+
+        /**
+         * A shortcut of the `viewed` event.
+         * @default null
+         */
+        viewed?: ViewerMethod | null;
+    }
+
+    /**
+     * Change the global default options.
+     * @param options
+     */
+    function setDefaults(options: Viewer.ViewerOption): void;
+
+    /**
+     * If you have to use other viewer with the same namespace, just call the `Viewer.noConflict` static method to revert to it.
+     */
+    function noConflict(): void;
+}
+
+/** * JavaScript image viewer.
+ * @see {@link https://github.com/fengyuanchen/viewerjs}
+ */
+declare class Viewer {
+    constructor(element: Element, options?: Viewer.ViewerOption);
+
+    /**
+     * Show the viewer.
+     * @description Only available in modal mode.
+     */
+    show(): void;
+
+    /**
+     * hide the viewer.
+     * @description Only available in modal mode.
+     */
+    hide(): void;
+
+    /**
+     * View one of the images with image's index.
+     * @param index The index of the image for viewing. Default: `0`.
+     */
+    view(index?: number): void;
+
+    /**
+     * View the previous image.
+     */
+    prev(): void;
+
+    /**
+     * View the next image.
+     */
+    next(): void;
+
+    /**
+     * Move the image with relative offsets.
+     * @param offsetX Moving size (px) in the horizontal direction
+     * @param offsetY Moving size (px) in the vertical direction. If not present, its default value is `offsetX`
+     */
+    move(offsetX: number, offsetY?: number): void;
+
+    /**
+     * Move the image to an absolute point.
+     * @param x The `left` value of the image
+     * @param y The `top` value of the image. If not present, its default value is `x`.
+     */
+    moveTo(x: number, y?: number): void;
+
+    /**
+     * Zoom the image with a relative ratio
+     * @param ratio Zoom in: requires a positive number (ratio > 0). Zoom out: requires a negative number (ratio < 0)
+     * @param hasTooltip Show tooltip. Default: `false`
+     */
+    zoom(ratio: number, hasTooltip?: boolean): void;
+
+    /**
+     * Zoom the image to an absolute ratio.
+     * @param ratio Requires a positive number (ratio > 0)
+     * @param hasTooltip Show tooltip. Default: `false`
+     */
+    zoomTo(ratio: number, hasTooltip?: boolean): void;
+
+    /**
+     * Rotate the image with a relative degree.
+     * @param degree Rotate right: requires a positive number (degree > 0). Rotate left: requires a negative number (degree < 0)
+     */
+    rotate(degree: number): void;
+
+    /**
+     * Rotate the image to an absolute degree.
+     * @param degree
+     */
+    rotateTo(degree: number): void;
+
+    /**
+     * Scale the image.
+     * @param scaleX The scaling factor to apply on the abscissa of the image. When equal to `1` it does nothing.
+     * @param scaleY The scaling factor to apply on the ordinate of the image. If not present, its default value is `scaleX`.
+     */
+    scale(scaleX: number, scaleY?: number): void;
+
+    /**
+     * Scale the abscissa of the image.
+     * @param scaleX The scaling factor to apply on the abscissa of the image. When equal to `1` it does nothing.
+     */
+    scaleX(scaleX: number): void;
+
+    /**
+     * Scale the ordinate of the image.
+     * @param scaleY The scaling factor to apply on the abscissa of the image. When equal to `1` it does nothing.
+     */
+    scaleY(scaleY: number): void;
+
+    /**
+     * Play the images.
+     */
+    play(): void;
+
+    /**
+     * Stop play.
+     */
+    stop(): void;
+
+    /**
+     * Enter modal mode.
+     * @description Only available in inline mode.
+     */
+    full(): void;
+
+    /**
+     * Exit  modal mode.
+     * @description Only available in inline mode.
+     */
+    exit(): void;
+
+    /**
+     * Show the current ratio of the image with percentage.
+     * @description Requires the `tooltip` option set to `true`.
+     */
+    tooltip(): void;
+
+    /**
+     * Toggle the image size between its natural size and initial size.
+     */
+    toggle(): void;
+
+    /**
+     * Reset the image to its initial state.
+     */
+    reset(): void;
+
+    /**
+     * Update the viewer instance when the source images changed (added, removed or sorted).
+     * @description If you load images dynamically (with XMLHTTPRequest), you can use this method to add the new images to the viewer instance.
+     */
+    update(): void;
+
+    /**
+     * Destroy the viewer and remove the instance.
+     */
+    destroy(): void;
+}
+
+/** JavaScript image viewer.
+ * @see {@link https://github.com/fengyuanchen/viewerjs}
+ */
+export = Viewer;
diff --git a/types/viewerjs/tsconfig.json b/types/viewerjs/tsconfig.json
new file mode 100644
index 0000000000..ca56504f32
--- /dev/null
+++ b/types/viewerjs/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "viewerjs-tests.ts"
+    ]
+}
\ No newline at end of file
diff --git a/types/viewerjs/tslint.json b/types/viewerjs/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/viewerjs/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/viewerjs/viewerjs-tests.ts b/types/viewerjs/viewerjs-tests.ts
new file mode 100644
index 0000000000..43aba8aa0b
--- /dev/null
+++ b/types/viewerjs/viewerjs-tests.ts
@@ -0,0 +1,126 @@
+import Viewer from 'viewerjs';
+
+////////////////
+// Static Methods
+////////////////
+
+Viewer.setDefaults({});
+Viewer.noConflict();
+
+////////////////
+// Constructors
+////////////////
+
+let pictures: Element = <Element> document.querySelector('.docs-pictures');
+
+let viewer = new Viewer(pictures);
+viewer = new Viewer(pictures, {});
+viewer = new Viewer(
+    pictures,
+    {
+        // Enable inline mode
+        inline: false,
+
+        // Show the button on the top-right of the viewer
+        button: true,
+
+        // Show the navbar
+        navbar: true,
+
+        // Show the title
+        title: true,
+
+        // Show the toolbar
+        toolbar: true,
+
+        // Show the tooltip with image ratio (percentage) when zoom in or zoom out
+        tooltip: true,
+
+        // Enable to move the image
+        movable: true,
+
+        // Enable to zoom the image
+        zoomable: true,
+
+        // Enable to rotate the image
+        rotatable: true,
+
+        // Enable to scale the image
+        scalable: true,
+
+        // Enable CSS3 Transition for some special elements
+        transition: true,
+
+        // Enable to request fullscreen when play
+        fullscreen: true,
+
+        // Enable keyboard support
+        keyboard: true,
+
+        // Define interval of each image when playing
+        interval: 5000,
+
+        // Min width of the viewer in inline mode
+        minWidth: 200,
+
+        // Min height of the viewer in inline mode
+        minHeight: 100,
+
+        // Define the ratio when zoom the image by wheeling mouse
+        zoomRatio: 0.1,
+
+        // Define the min ratio of the image when zoom out
+        minZoomRatio: 0.01,
+
+        // Define the max ratio of the image when zoom in
+        maxZoomRatio: 100,
+
+        // Define the CSS `z-index` value of viewer in modal mode.
+        zIndex: 2015,
+
+        // Define the CSS `z-index` value of viewer in inline mode.
+        zIndexInline: 0,
+
+        // Define where to get the original image URL for viewing
+        // Type: String (an image attribute) or Function (should return an image URL)
+        url: 'src',
+
+        // Event shortcuts
+        ready: null,
+        show: null,
+        shown: null,
+        hide: null,
+        hidden: null,
+        view: null,
+        viewed: () => { }
+    }
+);
+
+////////////////
+// Methods
+////////////////
+
+viewer.show();
+viewer.hide();
+viewer.view();
+viewer.view(1);
+viewer.move(1);
+viewer.move(-1, 0);
+viewer.zoom(0.1);
+viewer.zoom(0.1, true);
+viewer.zoomTo(0);
+viewer.rotate(90);
+viewer.rotateTo(0);
+viewer.scale(-1); // Flip both horizontal and vertical
+viewer.scale(-1, 1); // Flip horizontal
+viewer.scaleX(-1); // Flip horizontal
+viewer.scaleY(-1); // Flip vertical
+viewer.play();
+viewer.stop();
+viewer.full();
+viewer.exit();
+viewer.tooltip();
+viewer.toggle();
+viewer.reset();
+viewer.update();
+viewer.destroy();