// Type definitions for PhotoSwipe 4.0.8 // Project: http://photoswipe.com/ // Definitions by: Xiaohan Zhang // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare namespace PhotoSwipe { /** * A specific slide in the PhotoSwipe gallery. The terms "item", "slide", and "slide object" are used interchangeably. */ interface Item { /** * The url of this image. */ src: string; /** * The width of this image. */ w: number; /** * The height of this image. */ h: number; /** * Internal property added by PhotoSwipe. */ loadError?: boolean; /** * Internal property added by PhotoSwipe. */ vGap?: {top: number; bottom: number}; /** * Internal property added by PhotoSwipe. * This number is computed to be this item's smaller dimension divided by the larger dimension. */ fitRatio?: number; /** * Internal property added by PhotoSwipe. */ initialZoomLevel?: number; /** * Internal property added by PhotoSwipe. */ bounds?: any; /** * Internal property added by PhotoSwipe. */ initialPosition?: any; } /** * Options for the base PhotoSwipe class. Derived from http://photoswipe.com/documentation/options.html */ interface Options { /** * Start slide index. 0 is the first slide. Must be integer, not a string. * * Default 0. */ index?: number; /** * Function should return an object with coordinates from which initial zoom-in animation will start (or zoom-out animation will end). * Object should contain three properties: x (X position, relative to document), y (Y position, relative to document), w (width of the element). * Height will be calculated automatically based on size of large image. * For example if you return {x:0,y:0,w:50} zoom animation will start in top left corner of your page. * Function has one argument - index of the item that is opening or closing. * * Default undefined. */ getThumbBoundsFn?: (index: number) => { x: number; y: number; w: number }; /** * Initial zoom-in transition duration in milliseconds. Set to 0 to disable. Besides this JS option, you need also to change transition duration in PhotoSwipe CSS file: * .pswp--animate_opacity, * .pswp__bg, * .pswp__caption, * .pswp__top-bar, * .pswp--has_mouse .pswp__button--arrow--left, * .pswp--has_mouse .pswp__button--arrow--right{ * -webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1); * transition: opacity 333ms cubic-bezier(.4,0,.22,1); * } * * Default 333. */ showAnimationDuration?: number; /** * The same as the previous option, just for closing (zoom-out) transition. * After PhotoSwipe is opened pswp--open class will be added to the root element, you may use it to apply different transition duration in CSS. * * Default 333. */ hideAnimationDuration?: number; /** * If set to false background opacity and image scale will be animated (image opacity is always 1). * If set to true root PhotoSwipe element opacity and image scale will be animated. * Enable it when dimensions of your small thumbnail don't match dimensions of large image. * * Default false. */ showHideOpacity?: boolean; /** * Background (.pswp__bg) opacity. * Should be a number from 0 to 1, e.g. 0.7. * This style is defined via JS, not via CSS, as this value is used for a few gesture-based transitions. * * Default 1. */ bgOpacity?: number; /** * Spacing ratio between slides. For example, 0.12 will render as a 12% of sliding viewport width (rounded). * * Default 0.12. */ spacing?: number; /** * Allow swipe navigation to next/prev item when current item is zoomed. * Option is always false on devices that don't have hardware touch support. * * Default true. */ allowNoPanText?: boolean; /** * Maximum zoom level when performing spread (zoom) gesture. 2 means that image can be zoomed 2x from original size. * Try to avoid huge values here, as too big image may cause memory issues on mobile (especially on iOS). * * Default 2. */ maxSpreadZoom?: number; /** * Function should return zoom level to which image will be zoomed after double-tap gesture, or when user clicks on zoom icon, or mouse-click on image itself. * If you return 1 image will be zoomed to its original size. * Function is called each time zoom-in animation is initiated. So feel free to return different values for different images based on their size or screen DPI. * * Default is: * * function(isMouseClick, item) { * * // isMouseClick - true if mouse, false if double-tap * // item - slide object that is zoomed, usually current * // item.initialZoomLevel - initial scale ratio of image * // e.g. if viewport is 700px and image is 1400px, * // initialZoomLevel will be 0.5 * * if(isMouseClick) { * * // is mouse click on image or zoom icon * * // zoom to original * return 1; * * // e.g. for 1400px image: * // 0.5 - zooms to 700px * // 2 - zooms to 2800px * * } else { * * // is double-tap * * // zoom to original if initial zoom is less than 0.7x, * // otherwise to 1.5x, to make sure that double-tap gesture always zooms image * return item.initialZoomLevel < 0.7 ? 1 : 1.5; * } * } */ getDoubleTapZoom?: (isMouseClick: boolean, item: Item) => number; /** * Loop slides when using swipe gesture.If set to true you'll be able to swipe from last to first image. * Option is always false when there are less than 3 slides. * This option has no relation to arrows navigation. Arrows loop is turned on permanently. You can modify this behavior by making custom UI. * * Default true. */ loop?: boolean; /** * Pinch to close gallery gesture. The gallery’s background will gradually fade out as the user zooms out. When the gesture is complete, the gallery will close. * * Default true. */ pinchToClose?: boolean; /** * Close gallery on page scroll. Option works just for devices without hardware touch support. * * Default true. */ closeOnScroll?: boolean; /** * Close gallery when dragging vertically and when image is not zoomed. Always false when mouse is used. * * Default true. */ closeOnVerticalDrag?: boolean; /** * Option allows you to predefine if mouse was used or not. * Some PhotoSwipe feature depend on it, for example default UI left/right arrows will be displayed only after mouse is used. * If set to false, PhotoSwipe will start detecting when mouse is used by itself, mouseUsed event triggers when mouse is found. * * default false. */ mouseUsed?: boolean; /** * esc keyboard key to close PhotoSwipe. Option can be changed dynamically (yourPhotoSwipeInstance.options.escKey = false;). * * Default true. */ escKey?: boolean; /** * Keyboard left or right arrow key navigation. Option can be changed dynamically (yourPhotoSwipeInstance.options.arrowKeys = false;). * * Default true. */ arrowKeys?: boolean; /** * If set to false disables history module (back button to close gallery, unique URL for each slide). You can also just exclude history.js module from your build. * * Default true. */ history?: boolean; /** * Gallery unique ID. Used by History module when forming URL. For example, second picture of gallery with UID 1 will have URL: http://example.com/#&gid=1&pid=2. * * Default 1. */ galleryUID?: number; /** * Error message when image was not loaded. %url% will be replaced by URL of image. * * Default is: * *
The image could not be loaded.
*/ errorMsg?: string; /** * Lazy loading of nearby slides based on direction of movement. * Should be an array with two integers, first one - number of items to preload before current image, second one - after the current image. * E.g. if you set it to [1,3], it'll load 1 image before the current, and 3 images after current. Values can not be less than 1. * * Default [1, 1]. */ preload?: number[]; /** * String with name of class that will be added to root element of PhotoSwipe (.pswp). Can contain multiple classes separated by space. */ mainClass?: string; /** * NOTE: this property will be ignored in future versions of PhotoSwipe. * * @deprecated */ mainScrollEndFriction?: number; /** * NOTE: this property will be ignored in future versions of PhotoSwipe. * * @deprecated */ panEndFriction?: number; /** * Function that should return total number of items in gallery. Don't put very complex code here, function is executed very often. * * By default it returns length of slides array. */ getNumItemsFn?: () => number; /** * Will set focus on PhotoSwipe element after it's open. * * Default true. */ focus?: boolean; /** * Function should check if the element (el) is clickable. * If it is – PhotoSwipe will not call preventDefault and click event will pass through. * Function should be as light is possible, as it's executed multiple times on drag start and drag release. * * Default is: * * function(el) { * return el.tagName === 'A'; * } */ isClickableElement?: (el: HTMLElement) => boolean; /** * Controls whether PhotoSwipe should expand to take up the entire viewport. * If false, the PhotoSwipe element will take the size of the positioned parent of the template. Take a look at the FAQ for more * information. */ modal?: boolean; } interface UIFramework { [name: string]: any; } /** * Base type for PhotoSwipe user interfaces. * T is the type of options that this PhotoSwipe.UI uses. * * To build your own PhotoSwipe.UI class: * * (1) Write an interface for the custom UI's Options that extends PhotoSwipe.Options. * (2) Write your custom class, implementing the PhotoSwipe.UI interface. * (3) Pass in your custom interface to the type parameter T of the PhotoSwipe.UI interface. * * Example: * * // (1) * interface MyUIOptions extends PhotoSwipe.Options { * foo: number; * bar: string; * } * * // (2) and (3) * class MyUI implements PhotoSwipe.UI { * constructor(pswp: PhotoSwipe, framework: PhotoSwipe.UIFramework) { * } * } * * var pswpWithMyUI = new PhotoSwipe(element, MyUI, items, {foo: 1, bar: "abc"}); */ interface UI { /** * Called by PhotoSwipe after it constructs the UI. */ init: () => void; } } /** * Base PhotoSwipe class. Derived from http://photoswipe.com/documentation/api.html */ declare class PhotoSwipe { /** * Constructs a PhotoSwipe. * * Note: By default Typescript will not correctly typecheck the options parameter. Make sure to * explicitly annotate the type of options being passed into the constructor like so: * * new PhotoSwipe( element, PhotoSwipeUI_Default, items, options ); * * It accepts 4 arguments: * * (1) PhotoSwipe element (it must be added to DOM). * (2) PhotoSwipe UI class. If you included default photoswipe-ui-default.js, class will be PhotoSwipeUI_Default. Can be "false". * (3) Array with objects (slides). * (4) Options. */ constructor(pswpElement: HTMLElement, uiConstructor: (new (pswp: PhotoSwipe, framework: PhotoSwipe.UIFramework) => PhotoSwipe.UI) | boolean, items: PhotoSwipe.Item[], options: T); /** * Current slide object. */ currItem: PhotoSwipe.Item; /** * Items in this gallery. PhotoSwipe will (almost) dynamically respond to changes in this array. * To add, edit, or remove slides after PhotoSwipe is opened, you just need to modify the items array. * * For example, you can push new slide objects into the items array: * * pswp.items.push({ * src: "path/to/image.jpg", * w:1200, * h:500 * }); * * If you changed slide that is CURRENT, NEXT or PREVIOUS (which you should try to avoid) – you need to call method that will update their content: * * // sets a flag that slides should be updated * pswp.invalidateCurrItems(); * // updates the content of slides * pswp.updateSize(true); * * If you're using the DefaultUI, call pswp.ui.update() to update that as well. Also note: * * (1) You can't reassign whole array, you can only modify it (e.g. use splice to remove elements). * (2) If you're going to remove current slide – call goTo method before. * (3) There must be at least one slide. * (4) This technique is used to serve responsive images. */ items: PhotoSwipe.Item[]; /** * Size of the current viewport. */ viewportSize: { x: number; y: number; }; /** * The Framework. Holds utility methods. */ framework: PhotoSwipe.UIFramework; /** * The ui instance constructed by PhotoSwipe. */ ui: PhotoSwipe.UI; /** * The background element (with class .pswp__bg). */ bg: HTMLElement; /** * The container element (with class .pswp__container). */ container: HTMLElement; /** * Options for this PhotoSwipe. This object is a copy of the options parameter passed into the constructor. * Some properties in options are dynamically modifiable. */ options: T; /** * Current item index. */ getCurrentIndex(): number; /** * Current zoom level. */ getZoomLevel(): number; /** * Whether one (or more) pointer is used. */ isDragging(): boolean; /** * Whether two (or more) pointers are used. */ isZooming(): boolean; /** * true wehn transition between is running (after swipe). */ isMainScrollAnimating(): boolean; /** * Initialize and open gallery (you can bind events before this method). */ init(): void; /** * Go to slide by index. */ goTo(index: number): void; /** * Go to the next slide. */ next(): void; /** * Go to the previous slide. */ prev(): void; /** * Update gallery size * @param {boolean} `force` If you set it to `true`, size of the gallery will be updated even if viewport size hasn't changed. */ updateSize(force: boolean): void; /** * Close gallery. Calls destroy() after closing. */ close(): void; /** * Destroy gallery (unbind listeners, free memory). Automatically called after close(). */ destroy(): void; /** * Zoom in/out the current slide to a specified zoom level, optionally with animation. * * @param {number} `destZoomLevel` Destination scale number. Set to 1 for unzoomed. * Use `pswp.currItem.fitRatio - image` to zoom the image to perfectly fit into the viewport. * @param {object} `centerPoint` The center of the zoom, relative to viewport. * @param {number} `speed` Animation duration in milliseconds. Can be 0. * @param {function} `easingFn` Easing function (optional). Set to false to use default easing. * This method is passed in the percentage that the animation is finished (from 0 to 1) and should return an eased value (which should be 0 at the start and 1 at the end). * @param {function} `updateFn` Function will be called on each update frame (optional). * This method is passed the eased zoom level. * * Example below will 2x zoom to center of slide: * * pswp.zoomTo(2, {x:pswp.viewportSize.x/2,y:pswp.viewportSize.y/2}, 2000, false, function(now) {}); * */ zoomTo(destZoomLevel: number, centerPoint: {x: number; y: number}, speed: number, easingFn?: (k: number) => number, updateFn?: (now: number) => void): void; /** * Apply zoom and pan to the current slide * * @param {number} `zoomLevel` * @param {int} `panX` * @param {int} `panY` * * For example: `pswp.applyZoomPan(1, 0, 0)` * will zoom current image to the original size * and will place it on top left corner. * */ applyZoomPan(zoomLevel: number, panX: number, panY: number): void; /** * Call this method after dynamically modifying the current, next, or previous slide in the items array. */ invalidateCurrItems(): void; /** * PhotoSwipe uses very simple Event/Messaging system. * It has two methods shout (triggers event) and listen (handles event). * For now there is no method to unbind listener, but all of them are cleared when PhotoSwipe is closed. */ listen(eventName: string, callback: (...args: any[]) => void): void; /** * Called before slides change (before the content is changed ,but after navigation). Update UI here. */ listen(eventName: 'beforeChange', callback: () => void): void; /** * Called after slides change (after content has changed). */ listen(eventName: 'afterChange', callback: () => void): void; /** * Called when an image is loaded. */ listen(eventName: 'imageLoadComplete', callback: (index: number, item: PhotoSwipe.Item) => void): void; /** * Called when the viewport size changes. */ listen(eventName: 'resize', callback: () => void): void; /** * Triggers when PhotoSwipe reads slide object data, which happens before content is set, or before lazy-loading is initiated. * Use it to dynamically change properties of the slide object. */ listen(eventName: 'gettingData', callback: (index: number, item: PhotoSwipe.Item) => void): void; /** * Called when mouse is first used (triggers only once). */ listen(eventName: 'mouseUsed', callback: () => void): void; /** * Called when opening zoom in animation starting. */ listen(eventName: 'initialZoomIn', callback: () => void): void; /** * Called when opening zoom in animation finished. */ listen(eventName: 'initialZoomInEnd', callback: () => void): void; /** * Called when closing zoom out animation started. */ listen(eventName: 'initialZoomOut', callback: () => void): void; /** * Called when closing zoom out animation finished. */ listen(eventName: 'initialZoomOutEnd', callback: () => void): void; /** * Allows overriding vertical margin for individual items. * * Example: * * pswp.listen('parseVerticalMargin', function(item) { * var gap = item.vGap; * * gap.top = 50; // There will be 50px gap from top of viewport * gap.bottom = 100; // and 100px gap from the bottom * }); */ listen(eventName: 'parseVerticalMargin', callback: (item: PhotoSwipe.Item) => void): void; /** * Called when the gallery starts closing. */ listen(eventName: 'close', callback: () => void): void; /** * Gallery unbinds events (triggers before closing animation). */ listen(eventName: 'unbindEvents', callback: () => void): void; /** * Called after the gallery is closed and the closing animation finishes. * Clean up your stuff here. */ listen(eventName: 'destroy', callback: () => void): void; /** * Allow to call preventDefault on down and up events. */ listen(eventName: 'preventDragEvent', callback: (e: MouseEvent, isDown: boolean, preventObj: {prevent: boolean}) => void): void; /** * Triggers eventName event with args passed through to listeners. */ shout(eventName: string, ...args: any[]): void; } /** * Default UI class for PhotoSwipe. This class is largely undocumented and doesn't seem to have a public facing API. */ declare class PhotoSwipeUI_Default implements PhotoSwipe.UI { constructor(pswp: PhotoSwipe, framework: PhotoSwipe.UIFramework); init(): void; /** * Call this method to update the UI after the items array has been modified in the original PhotoSwipe element. */ update(): void; } declare namespace PhotoSwipeUI_Default { /** * Options for the PhotoSwipe Default UI. Derived from http://photoswipe.com/documentation/options.html */ interface Options extends PhotoSwipe.Options { /** * Size of top & bottom bars in pixels. "bottom" parameter can be 'auto' (will calculate height of caption). * Option applies only when mouse is used, or when width of screen is more than 1200px. * Also look at `parseVerticalMargin` event. * * Default {top: 44, bottom: "auto"}. */ barsSize?: { top: number; bottom: number | string }; /** * Adds class pswp__ui--idle to pswp__ui element when mouse isn't moving for timeToIdle milliseconds. * * Default 4000. */ timeToIdle?: number; /** * Adds class pswp__ui--idle to pswp__ui element when mouse leaves the window for timeToIdleOutside milliseconds. * * Default 1000. */ timeToIdleOutside?: number; /** * Delay in milliseconds until loading indicator is displayed. * * Default 1000. */ loadingIndicatorDelay?: number; /** * Function to build caption markup. The function takes three parameters: * * item - slide object * captionEl - caption DOM element * isFake - true when content is added to fake caption container * (used to get size of next or previous caption) * * Return whether to show the caption or not. * * Default is: * * function(item, captionEl, isFake) { * if(!item.title) { * captionEl.children[0].innerHTML = ''; * return false; * } * captionEl.children[0].innerHTML = item.title; * return true; * } * */ addCaptionHTMLFn?: (item: Item, captionEl: HTMLElement, isFake: boolean) => boolean; /** * Whether to show the close button. * * Default true. */ closeEl?: boolean; /** * Whether to show the caption. * * Default true. */ captionEl?: boolean; /** * Whether to show the fullscreen button. * * Default true. */ fullscreenEl?: boolean; /** * Whether to show the zoom button. * * Default true. */ zoomEl?: boolean; /** * Whether to show the share button. * * Default true. */ shareEl?: boolean; /** * Whether to show the current image's index in the gallery (located in top-left corner by default). * * Default true. */ counterEl?: boolean; /** * Whether to show the left/right directional arrows. * * Default true. */ arrowEl?: boolean; /** * Whether to show the preloader element. * * Default true. */ preloaderEl?: boolean; /** * Tap on sliding area should close gallery. * * Default false. */ tapToClose?: boolean; /** * Tap should toggle visibility of controls. * * Default true. */ tapToToggleControls?: boolean; /** * Mouse click on image should close the gallery, only when image is smaller than size of the viewport. * * Default true. */ clickToCloseNonZoomable?: boolean; /** * Element classes that should close PhotoSwipe when clicked on. * In HTML markup, class should always start with "pswp__", e.g.: "pswp__item", "pswp__caption". * * "pswp__ui--over-close" class will be added to root element of UI when mouse is over one of these elements * By default it's used to highlight the close button. * * Default ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar']. */ closeElClasses?: string[]; /** * Separator for "1 of X" counter. * * Default ' / '. */ indexIndicatorSep?: string; /** * The entries that show up when you click the Share button. * * Default is: * * [ * {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u='}, * {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text=&url='}, * {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url=&media=&description='}, * {id:'download', label:'Download image', url:'', download:true} * ] * */ shareButtons?: ShareButtonData[]; /** * A callback that should return the URL for the currently selected image. The callback is passed * the shareButtonData entry that was clicked on. * * Default is: * * function( shareButtonData ) { * // `shareButtonData` - object from shareButtons array * // * // `pswp` is the gallery instance object, * // you should define it by yourself * // * return pswp.currItem.src || ''; * } * */ getImageURLForShare?: (shareButtonData: ShareButtonData) => string; /** * A callback that should return the "Page" associated with the selected image. (e.g. on Facebook, the shared * content will be associated with the returned page). The callback is passed the shareButtonData entry that * was clicked on. * * Default is: * * function( shareButtonData ) { * return window.location.href; * } * */ getPageURLForShare?: (shareButtonData: ShareButtonData) => string; /** * A callback that should return the Text associated with the selected image. The callback is passed * the shareButtonData entry that was clicked on. * * Default is: * * function( shareButtonData ) { * return pswp.currItem.title || ''; * } * */ getTextForShare?: (shareButtonData: ShareButtonData) => string; /** * A final output callback that you can use to further modify the share button's HTML. The callback is passed * (1) the shareButtonData entry being generated, and (2) the default HTML generated by PhotoSwipUI_Default. * * Default is: * * function(shareButtonData, shareButtonOut) { * return shareButtonOut; * } * */ parseShareButtonOut?: (shareButtonData: ShareButtonData, shareButtonOut: string) => string; } interface ShareButtonData { /** * An id for this share button entry. The share element associated with this entry will be classed with * 'pswp__share--' + id */ id: string; /** * The user-visible text to display for this entry. */ label: string; /** * The full sharing endpoint URL for this social media site (e.g. Facebook's is facebook.com/sharer/sharer.php), with URL parameters. * PhotoSwipUI_Default treats the URL specially. In the url string, any of the following text is treated specially: * '{{url}}', '{{image_url}}, '{{raw_image_url}}, '{{text}}'. PhotoSwipeUI_Default will replace each of them with the following value: * * {{url}} becomes the (URIEncoded) url to the current "Page" (as returned by getPageURLForShare). * {{image_url}} becomes the (URIEncoded) url of the selected image (as returned by getImageURLForShare). * {{raw_image_url}} becomes the raw url of the selected image (as returned by getImageURLForShare). * {{text}} becomes the (URIEncoded) share text of the selected image (as returned by getTextForShare). */ url: string; /** * Whether this link is a direct download button or not. * * Default false. */ download?: boolean; } /** * Extra properties that the Default UI accepts. */ interface Item extends PhotoSwipe.Item { /** * The caption for this item. */ title?: string; } } declare module "photoswipe" { export default PhotoSwipe; }