@types/photoswipe
Advanced tools
| { | ||
| "name": "@types/photoswipe", | ||
| "version": "4.1.6", | ||
| "description": "TypeScript definitions for photoswipe", | ||
| "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/photoswipe", | ||
| "version": "5.2.5", | ||
| "description": "Stub TypeScript definitions entry for photoswipe, which provides its own types definitions", | ||
| "main": "", | ||
| "scripts": {}, | ||
| "license": "MIT", | ||
| "contributors": [ | ||
| { | ||
| "name": "Xiaohan Zhang", | ||
| "githubUsername": "hellochar", | ||
| "url": "https://github.com/hellochar" | ||
| }, | ||
| { | ||
| "name": "PikachuEXE", | ||
| "githubUsername": "PikachuEXE", | ||
| "url": "https://github.com/PikachuEXE" | ||
| }, | ||
| { | ||
| "name": "RazDva122", | ||
| "githubUsername": "Razdva122", | ||
| "url": "https://github.com/Razdva122" | ||
| } | ||
| ], | ||
| "main": "", | ||
| "types": "index.d.ts", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", | ||
| "directory": "types/photoswipe" | ||
| "dependencies": { | ||
| "photoswipe": "*" | ||
| }, | ||
| "scripts": {}, | ||
| "dependencies": {}, | ||
| "typesPublisherContentHash": "7c4a41106cdc00e6f02bf34acf033c5b669e801af028092a50bc7592ae340101", | ||
| "typeScriptVersion": "4.5" | ||
| "deprecated": "This is a stub types definition. photoswipe provides its own type definitions, so you do not need this installed." | ||
| } |
+2
-14
@@ -1,15 +0,3 @@ | ||
| # Installation | ||
| > `npm install --save @types/photoswipe` | ||
| This is a stub types definition for @types/photoswipe (https://photoswipe.com). | ||
| # Summary | ||
| This package contains type definitions for photoswipe (http://photoswipe.com/). | ||
| # Details | ||
| Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/photoswipe. | ||
| ### Additional Details | ||
| * Last updated: Tue, 07 Nov 2023 09:09:39 GMT | ||
| * Dependencies: none | ||
| # Credits | ||
| These definitions were written by [Xiaohan Zhang](https://github.com/hellochar), [PikachuEXE](https://github.com/PikachuEXE), and [RazDva122](https://github.com/Razdva122). | ||
| photoswipe provides its own type definitions, so you don't need @types/photoswipe installed! |
| import * as PhotoSwipe from "../../index"; | ||
| /** | ||
| * 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<PhotoSwipeUI_Default.Options> { | ||
| constructor(pswp: PhotoSwipe<PhotoSwipeUI_Default.Options>, 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 | ||
| */ | ||
| export 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 } | undefined; | ||
| /** | ||
| * Adds class pswp__ui--idle to pswp__ui element when mouse isn't moving for timeToIdle milliseconds. | ||
| * | ||
| * Default 4000. | ||
| */ | ||
| timeToIdle?: number | undefined; | ||
| /** | ||
| * Adds class pswp__ui--idle to pswp__ui element when mouse leaves the window for timeToIdleOutside milliseconds. | ||
| * | ||
| * Default 1000. | ||
| */ | ||
| timeToIdleOutside?: number | undefined; | ||
| /** | ||
| * Delay in milliseconds until loading indicator is displayed. | ||
| * | ||
| * Default 1000. | ||
| */ | ||
| loadingIndicatorDelay?: number | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * Whether to show the close button. | ||
| * | ||
| * Default true. | ||
| */ | ||
| closeEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the caption. | ||
| * | ||
| * Default true. | ||
| */ | ||
| captionEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the fullscreen button. | ||
| * | ||
| * Default true. | ||
| */ | ||
| fullscreenEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the zoom button. | ||
| * | ||
| * Default true. | ||
| */ | ||
| zoomEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the share button. | ||
| * | ||
| * Default true. | ||
| */ | ||
| shareEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the current image's index in the gallery (located in top-left corner by default). | ||
| * | ||
| * Default true. | ||
| */ | ||
| counterEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the left/right directional arrows. | ||
| * | ||
| * Default true. | ||
| */ | ||
| arrowEl?: boolean | undefined; | ||
| /** | ||
| * Whether to show the preloader element. | ||
| * | ||
| * Default true. | ||
| */ | ||
| preloaderEl?: boolean | undefined; | ||
| /** | ||
| * Tap on sliding area should close gallery. | ||
| * | ||
| * Default false. | ||
| */ | ||
| tapToClose?: boolean | undefined; | ||
| /** | ||
| * Tap should toggle visibility of controls. | ||
| * | ||
| * Default true. | ||
| */ | ||
| tapToToggleControls?: boolean | undefined; | ||
| /** | ||
| * Mouse click on image should close the gallery, only when image is smaller than size of the viewport. | ||
| * | ||
| * Default true. | ||
| */ | ||
| clickToCloseNonZoomable?: boolean | undefined; | ||
| /** | ||
| * 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[] | undefined; | ||
| /** | ||
| * Separator for "1 of X" counter. | ||
| * | ||
| * Default ' / '. | ||
| */ | ||
| indexIndicatorSep?: string | undefined; | ||
| /** | ||
| * 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[] | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| } | ||
| export 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 | undefined; | ||
| } | ||
| /** | ||
| * Extra properties that the Default UI accepts. | ||
| */ | ||
| export interface Item extends PhotoSwipe.Item { | ||
| /** | ||
| * The caption for this item. | ||
| */ | ||
| title?: string | undefined; | ||
| } | ||
| } | ||
| export = PhotoSwipeUI_Default; | ||
| export as namespace PhotoSwipeUI_Default; |
| declare namespace PhotoSwipe { | ||
| /** | ||
| * A specific slide in the PhotoSwipe gallery. The terms "item", "slide", and "slide object" are used interchangeably. | ||
| */ | ||
| export interface Item { | ||
| /** | ||
| * The url of this image. | ||
| */ | ||
| src?: string | undefined; | ||
| /** | ||
| * The width of this image. | ||
| */ | ||
| w?: number | undefined; | ||
| /** | ||
| * The height of this image. | ||
| */ | ||
| h?: number | undefined; | ||
| /** | ||
| * The url to small image placeholder, large image will be loaded on top | ||
| */ | ||
| msrc?: string | undefined; | ||
| /** | ||
| * HTML content instead of image. | ||
| */ | ||
| html?: string | undefined; | ||
| /** | ||
| * Internal property added by PhotoSwipe. | ||
| */ | ||
| loadError?: boolean | undefined; | ||
| /** | ||
| * Internal property added by PhotoSwipe. | ||
| */ | ||
| vGap?: { top: number; bottom: number } | undefined; | ||
| /** | ||
| * Internal property added by PhotoSwipe. | ||
| * This number is computed to be this item's smaller dimension divided by the larger dimension. | ||
| */ | ||
| fitRatio?: number | undefined; | ||
| /** | ||
| * Internal property added by PhotoSwipe. | ||
| */ | ||
| initialZoomLevel?: number | undefined; | ||
| /** | ||
| * Internal property added by PhotoSwipe. | ||
| */ | ||
| bounds?: any; | ||
| /** | ||
| * Internal property added by PhotoSwipe. | ||
| */ | ||
| initialPosition?: any; | ||
| /** | ||
| * Custom IDs for each slide object that are used when forming URL | ||
| */ | ||
| pid?: string | number | undefined; | ||
| } | ||
| /** | ||
| * Options for the base PhotoSwipe class. Derived from http://photoswipe.com/documentation/options.html | ||
| */ | ||
| export interface Options { | ||
| /** | ||
| * Start slide index. 0 is the first slide. Must be integer, not a string. | ||
| * | ||
| * Default 0. | ||
| */ | ||
| index?: number | undefined; | ||
| /** | ||
| * 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 }) | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * Spacing ratio between slides. For example, 0.12 will render as a 12% of sliding viewport width (rounded). | ||
| * | ||
| * Default 0.12. | ||
| */ | ||
| spacing?: number | undefined; | ||
| /** | ||
| * 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. | ||
| */ | ||
| allowPanToNext?: boolean | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * Close gallery on page scroll. Option works just for devices without hardware touch support. | ||
| * | ||
| * Default true. | ||
| */ | ||
| closeOnScroll?: boolean | undefined; | ||
| /** | ||
| * Close gallery when dragging vertically and when image is not zoomed. Always false when mouse is used. | ||
| * | ||
| * Default true. | ||
| */ | ||
| closeOnVerticalDrag?: boolean | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * esc keyboard key to close PhotoSwipe. Option can be changed dynamically (yourPhotoSwipeInstance.options.escKey = false;). | ||
| * | ||
| * Default true. | ||
| */ | ||
| escKey?: boolean | undefined; | ||
| /** | ||
| * Keyboard left or right arrow key navigation. Option can be changed dynamically (yourPhotoSwipeInstance.options.arrowKeys = false;). | ||
| * | ||
| * Default true. | ||
| */ | ||
| arrowKeys?: boolean | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| /** | ||
| * Enables custom IDs for each slide object that are used when forming URL. | ||
| * If option set set to true, slide objects must have pid (picture identifier) property that can be a string or an integer. | ||
| * | ||
| * Default false. | ||
| */ | ||
| galleryPIDs?: boolean | undefined; | ||
| /** | ||
| * Error message when image was not loaded. %url% will be replaced by URL of image. | ||
| * | ||
| * Default is: | ||
| * | ||
| * <div class="pswp__error-msg"><a href="%url%" target="_blank">The image</a> could not be loaded.</div> | ||
| */ | ||
| errorMsg?: string | undefined; | ||
| /** | ||
| * 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[] | undefined; | ||
| /** | ||
| * String with name of class that will be added to root element of PhotoSwipe (.pswp). Can contain multiple classes separated by space. | ||
| */ | ||
| mainClass?: string | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * Will set focus on PhotoSwipe element after it's open. | ||
| * | ||
| * Default true. | ||
| */ | ||
| focus?: boolean | undefined; | ||
| /** | ||
| * 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) | undefined; | ||
| /** | ||
| * 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 | undefined; | ||
| } | ||
| export 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<MyUIOptions> { | ||
| * constructor(pswp: PhotoSwipe<MyUIOptions>, framework: PhotoSwipe.UIFramework) { | ||
| * } | ||
| * } | ||
| * | ||
| * var pswpWithMyUI = new PhotoSwipe<MyUIOptions>(element, MyUI, items, {foo: 1, bar: "abc"}); | ||
| */ | ||
| export interface UI<T extends Options> { | ||
| /** | ||
| * Called by PhotoSwipe after it constructs the UI. | ||
| */ | ||
| init: () => void; | ||
| } | ||
| } | ||
| /** | ||
| * Base PhotoSwipe class. Derived from http://photoswipe.com/documentation/api.html | ||
| */ | ||
| declare class PhotoSwipe<T extends PhotoSwipe.Options> { | ||
| /** | ||
| * 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<PhotoSwipeUI_Default.Options>( 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<T>, framework: PhotoSwipe.UIFramework) => PhotoSwipe.UI<T>) | 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<T>; | ||
| /** | ||
| * 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; | ||
| } | ||
| export = PhotoSwipe; | ||
| export as namespace PhotoSwipe; |
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Wildcard dependency
QualityPackage has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
1
-83.33%1733
-95.08%1
Infinity%3
-40%0
-100%2
100%1
Infinity%1
Infinity%3
-81.25%2
Infinity%+ Added
+ Added