diff --git a/photoswipe/photoswipe-tests.ts b/photoswipe/photoswipe-tests.ts new file mode 100644 index 0000000000..79125bd05f --- /dev/null +++ b/photoswipe/photoswipe-tests.ts @@ -0,0 +1,209 @@ +/// + +function test_defaultUI() { + var items: PhotoSwipeUI_Default.Item[] = [ + { + src: "path/to/image.jpg", + w: 100, + h: 200, + specialProperty: true + }, + { + src: "path/to/image2.jpg", + w: 1000, + h: 2000, + specialProperty: false + } + ]; + + var options: PhotoSwipe.Options = { + index: 3, + getThumbBoundsFn: function(index) { + return {x: 100, y: 100, w: 100}; + }, + showAnimationDuration: 333, + hideAnimationDuration: 333, + showHideOpacity: false, + bgOpacity: 1, + spacing: 0.12, + allowNoPanText: true, + maxSpreadZoom: 2, + getDoubleTapZoom: function(isMouseClick, item) { + if (isMouseClick) { + return 1; + } else { + return item.initialZoomLevel < 0.7 ? 1 : 1.5; + } + }, + loop: true, + pinchToClose: true, + closeOnScroll: true, + closeOnVerticalDrag: true, + mouseUsed: false, + escKey: true, + arrowKeys: true, + history: true, + galleryUID: 3, + errorMsg: '
The image could not be loaded.
', + preload: [1, 1], + mainClass: "", + getNumItemsFn: () => { return 2; }, + focus: true, + isClickableElement: function(el) { + return el.tagName === 'A'; + }, + mainScrollEndFriction: 0.35, + panEndFriction: 0.35 + }; + + var photoSwipe: PhotoSwipe; + var uiOptions: PhotoSwipeUI_Default.Options = { + barsSize: {top: 44, bottom: 'auto'}, + timeToIdle: 4000, + timeToIdleOutside: 1000, + loadingIndicatorDelay: 1000, + addCaptionHTMLFn: function(item, captionEl, isFake) { + if (!item.title) { + ( captionEl.children[0]).innerHTML = ''; + return false; + } + ( captionEl.children[0]).innerHTML = item.title; + return true; + }, + closeEl: true, + captionEl: true, + fullscreenEl: true, + zoomEl: true, + shareEl: true, + counterEl: true, + arrowEl: true, + preloaderEl: true, + tapToClose: false, + tapToToggleControls: true, + clickToCloseNonZoomable: true, + closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], + indexIndicatorSep: ' / ', + shareButtons: [ + {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} + ], + getImageURLForShare: function( shareButtonData ) { + // `shareButtonData` - object from shareButtons array + // + // `pswp` is the gallery instance object, + // you should define it by yourself + // + return photoSwipe.currItem.src || ''; + }, + getPageURLForShare: function( shareButtonData ) { + return window.location.href; + }, + getTextForShare: function( shareButtonData ) { + return ( photoSwipe.currItem).title || ''; + }, + parseShareButtonOut: function(shareButtonData, shareButtonOut) { + return shareButtonOut; + } + }; + + var pswpElement = document.getElementById("gallery"); + photoSwipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, uiOptions); + +} + +function test_photoSwipeMethods() { + var photoSwipe: PhotoSwipe; + + photoSwipe.init(); + + alert(photoSwipe.currItem.src); + alert(photoSwipe.viewportSize.x); + photoSwipe.ui.init(); + photoSwipe.bg.style.borderStyle = "1px solid red"; + photoSwipe.container.style.borderStyle = "1px solid red"; + photoSwipe.options.timeToIdle = 2000; + alert(photoSwipe.getCurrentIndex() === 3); + alert(photoSwipe.getZoomLevel() === 1); + alert(photoSwipe.isDragging()); + + photoSwipe.goTo(9); + photoSwipe.next(); + photoSwipe.prev(); + + photoSwipe.updateSize(true); + + photoSwipe.close(); + photoSwipe.zoomTo(2, + { x: 250, y: 250 }, + 2000, + (x) => { return x*x*(3-2*x); }, + (zoomValue) => { console.log("zoom value is now" + zoomValue); }); + photoSwipe.applyZoomPan(1, 0, 0); + + photoSwipe.items[photoSwipe.getCurrentIndex()].src = "new/path/to/image.jpg"; + photoSwipe.invalidateCurrItems(); +} + +function test_photoSwipeEvents() { + var photoSwipe: PhotoSwipe; + + photoSwipe.listen('beforeChange', () => {}); + photoSwipe.listen('afterChange', () => {}); + photoSwipe.listen('beforeChange', () => {}); + photoSwipe.listen('imageLoadComplete', (idx: number, item: PhotoSwipeUI_Default.Item) => { + item.w *= 2; + }); + photoSwipe.listen('resize', () => {}); + photoSwipe.listen('gettingData', (idx: number, item: PhotoSwipeUI_Default.Item) => { + item.title = "abc"; + }); + photoSwipe.listen('mouseUsed', () => {}); + photoSwipe.listen('initialZoomIn', () => {}); + photoSwipe.listen('initialZoomInEnd', () => {}); + photoSwipe.listen('initialZoomOut', () => {}); + photoSwipe.listen('initialZoomOutEnd', () => {}); + photoSwipe.listen('parseVerticalMargin', (item: PhotoSwipeUI_Default.Item) => { + item.vGap.top = 20; + item.vGap.bottom = 40; + }); + photoSwipe.listen('close', () => {}); + photoSwipe.listen('unbindEvents', () => {}); + photoSwipe.listen('destroy', () => {}); + photoSwipe.listen('preventDragEvent', (e: MouseEvent, isDown: boolean, preventObj: {prevent: boolean}) => { + if (e.x > 50 && isDown) { + preventObj.prevent = true; + } + }); + + photoSwipe.listen('foo', (a, b, c) => { + alert(a + b + c); + }); + photoSwipe.shout('foo', 1, 2, 3); +} + +function test_customUI() { + var pswpElement = document.getElementById("gallery2"); + var myPhotoSwipe = new PhotoSwipe(pswpElement, MyUI, [], { + bgOpacity: 0, + index: 3, + foo: 123, + bar: "abc" + }); +} + +interface MyUIOptions extends PhotoSwipe.Options { + foo: number; + bar: string; +} + +class MyUI implements PhotoSwipe.UI { + constructor(pswp: PhotoSwipe, framework: PhotoSwipe.UIFramework) { + // dummy + } + + init() { + // dummy + } +} diff --git a/photoswipe/photoswipe.d.ts b/photoswipe/photoswipe.d.ts new file mode 100644 index 0000000000..b09fe75ddf --- /dev/null +++ b/photoswipe/photoswipe.d.ts @@ -0,0 +1,898 @@ +// Type definitions for PhotoSwipe 4.0.7 +// Project: http://photoswipe.com/ +// Definitions by: Xiaohan Zhang +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module 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; + + /** + * 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; + } + + 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 module 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; + } +}