mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-06-04 19:42:46 +08:00
Add TypeScript definitions for Viewer.js (NPM package name: viewerjs) (#18320)
* TypeScript definitions for Viewer.js * use export = instead of export default
This commit is contained in:
刘睿华
371
types/viewerjs/index.d.ts
vendored
Normal file
371
types/viewerjs/index.d.ts
vendored
Normal file
@@ -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;
|
||||
24
types/viewerjs/tsconfig.json
Normal file
24
types/viewerjs/tsconfig.json
Normal file
@@ -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"
|
||||
]
|
||||
}
|
||||
1
types/viewerjs/tslint.json
Normal file
1
types/viewerjs/tslint.json
Normal file
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
126
types/viewerjs/viewerjs-tests.ts
Normal file
126
types/viewerjs/viewerjs-tests.ts
Normal file
@@ -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();
|
||||
Reference in New Issue
Block a user