fix: add typescript definitions

package.json

@@ -4,6 +4,7 @@
   "description": "JavaScript UI Component Library",
   "main": "dist/fancybox.umd.js",
   "module": "dist/fancybox.esm.js",
+  "types": "types/index.d.ts",
   "style": "dist/fancybox.css",
   "files": [
     "dist/",

types/Carousel/Carousel.d.ts

@@ -0,0 +1,226 @@
+import { Panzoom } from '../Panzoom/Panzoom';
+import { Base } from '../shared/Base/Base';
+import { AutoplayOptions } from './plugins/Autoplay/Autoplay';
+import { NavigationOptions } from './plugins/Navigation/Navigation';
+import { SyncOptions } from './plugins/Sync/Sync';
+
+export class Carousel extends Base {
+
+  Panzoom: Panzoom;
+
+  $container: HTMLElement;
+  $track: any;
+  $viewport: any;
+
+  contentWidth: number;
+  page: any;
+  pageIndex: any;
+  pages: any[];
+  prevPage: any;
+  prevPageIndex: any;
+  slides: any;
+  state: string;
+  viewportWidth: number;
+
+  /**
+   * Carousel constructor
+   * @constructs Carousel
+   * @param {HTMLElement} $container - Carousel container
+   * @param {Object} [options] - Options for Carousel
+   */
+  constructor($container: HTMLElement, options?: Partial<CarouselOptions>);
+
+
+  /**
+   * Slide to next page, if possible
+   */
+  slideNext(): void;
+
+  /**
+   * Slide to previous page, if possible
+   */
+  slidePrev(): void;
+
+  /**
+   * Perform initialization
+   */
+  init(): void;
+
+
+  /**
+   * Initialize layout; create necessary elements
+   */
+  initLayout(): void;
+
+  /**
+   * Fill `slides` array with objects from existing nodes and/or `slides` option
+   */
+  initSlides(): void;
+
+
+  /**
+   * Do all calculations related to slide size and paging
+   */
+  updateMetrics(): void;
+
+
+  /**
+   * Calculate slide element width (including left, right margins)
+   * @param {Object} node
+   * @returns {Number} Width in px
+   */
+  getSlideMetrics(node: any): number;
+
+  /**
+   *
+   * @param {number} index Index of the slide
+   * @returns {number|null} Index of the page if found, or null
+   */
+  findPageForSlide(index: number): number | null;
+
+  /**
+   * Slides carousel to given page
+   * @param {Number} page - New index of active page
+   * @param {Object} [params] - Additional options
+   */
+  slideTo(page: number, params?: any): void;
+
+  /**
+   * Initialise main Panzoom instance
+   */
+  initPanzoom(): void;
+
+
+  updatePanzoom(): void;
+
+  manageSlideVisiblity(): void;
+
+  /**
+   * Creates main DOM element for virtual slides,
+   * lazy loads images inside regular slides
+   * @param {Object} slide
+   */
+  createSlideEl(slide: any): any;
+
+  /**
+   * Removes main DOM element of given slide
+   * @param {Object} slide
+   */
+  removeSlideEl(slide: any): void;
+
+  /**
+   * Toggles selected class name and aria-hidden attribute for slides based on visibility
+   */
+  markSelectedSlides(): void;
+
+  /**
+   * Perform all calculations and center current page
+   */
+  updatePage(): void;
+
+  /**
+   * Process `Panzoom.beforeTransform` event to remove slides moved out of viewport and
+   * to create necessary ones
+   */
+  onBeforeTransform(): void;
+
+  /**
+   * Seamlessly flip position of infinite carousel, if needed; this way x position stays low
+   */
+  manageInfiniteTrack(): boolean;
+
+  /**
+   * Process `Panzoom.touchEnd` event; slide to next/prev page if needed
+   * @param {object} panzoom
+   */
+  onTouchEnd(panzoom: object, event: any): void;
+
+  /**
+   * Slides to the closest page (useful, if carousel is changed manually)
+   * @param {Object} [params] - Object containing additional options
+   */
+  slideToClosest(params?: any): void;
+
+  /**
+   * Returns index of closest page to given x position
+   * @param {Number} xPos
+   */
+  getPageFromPosition(xPos: number): any[];
+
+  /**
+   * Changes active page
+   * @param {Number} page - New index of active page
+   * @param {Boolean} toClosest - to closest page based on scroll distance (for infinite navigation)
+   */
+  setPage(page: number, toClosest: boolean): number;
+
+  /**
+   * Clean up
+   */
+  destroy(): void;
+}
+
+export interface CarouselSlide {
+  html: string;
+
+  [key: string]: any;
+}
+
+export interface CarouselOptions {
+  // Virtual slides. Each object should have at least `html` property that will be used to set content,
+  // example: `slides: [{html: 'First slide'}, {html: 'Second slide'}]`
+  slides: CarouselSlide[];
+
+  // Number of slides to preload before/after visible slides
+  preload: number;
+
+  // Number of slides to group into the page,
+  // if `auto` - group all slides that fit into the viewport
+  slidesPerPage: 'auto' | number;
+
+  // Index of initial page
+  initialPage: number;
+
+  // Index of initial slide
+  initialSlide: number;
+
+  // Panzoom friction while changing page
+  friction: number;
+
+  // Should center active page
+  center: boolean;
+
+  // Should carousel scroll infinitely
+  infinite: boolean;
+
+  // Should the gap be filled before first and after last slide if `infinite: false`
+  fill: boolean;
+
+  // Should Carousel settle at any position after a swipe.
+  dragFree: boolean;
+
+  // Prefix for CSS classes, must be the same as the  SCSS `$carousel-prefix` variable
+  prefix: string;
+
+  // Class names for DOM elements (without prefix)
+  classNames: Partial<{
+    viewport: string;
+    track: string;
+    slide: string;
+
+    // Classname toggled for slides inside current page
+    slideSelected: string;
+  }>;
+
+  // Localization of strings
+  l10n: {
+    NEXT: string;
+    PREV: string;
+    GOTO: string;
+  };
+
+  Autoplay?: false | Partial<AutoplayOptions>;
+  Dots?: boolean;
+  Navigation?: false | Partial<NavigationOptions>;
+  Sync?: false | Partial<SyncOptions>;
+}

types/Carousel/plugins/Autoplay/Autoplay.d.ts

@@ -0,0 +1,35 @@
+import { Carousel } from '../../Carousel';
+
+export class Autoplay {
+  constructor(carousel: Carousel);
+
+  carousel: Carousel;
+  state: string;
+  events: {
+    ready: () => void;
+    settle: () => void;
+  };
+
+  onReady(): void;
+
+  onSettle(): void;
+
+  onMouseEnter(): void;
+
+  onMouseLeave(): void;
+
+  set(): void;
+
+  timer: number;
+
+  clear(): void;
+
+  start(): void;
+
+  stop(): void;
+}
+
+export interface AutoplayOptions {
+  timeout: number;
+  hoverPause: boolean;
+}

types/Carousel/plugins/Dots/Dots.d.ts

@@ -0,0 +1,46 @@
+import { Carousel } from '../../Carousel';
+
+export class Dots {
+  constructor(carousel: Carousel);
+
+  carousel: Carousel;
+  $list: HTMLOListElement;
+  events: {
+    change: () => void;
+    refresh: () => void;
+  };
+
+  /**
+   * Build wrapping DOM element containing all dots
+   */
+  buildList(): HTMLOListElement;
+
+  /**
+   * Remove wrapping DOM element
+   */
+  removeList(): void;
+
+  /**
+   * Remove existing dots and create fresh ones
+   */
+  rebuildDots(): void;
+
+  /**
+   * Mark active dot by toggling class name
+   */
+  setActiveDot(): void;
+
+  /**
+   * Process carousel `change` event
+   */
+  onChange(): void;
+
+  /**
+   * Process carousel `refresh` event
+   */
+  onRefresh(): void;
+
+  attach(): void;
+
+  detach(): void;
+}

types/Carousel/plugins/Navigation/Navigation.d.ts

@@ -0,0 +1,50 @@
+import { Carousel } from '../../Carousel';
+
+export class Navigation {
+  constructor(carousel: Carousel);
+
+  $container: HTMLDivElement;
+  $prev: HTMLButtonElement;
+  $next: HTMLButtonElement;
+  carousel: Carousel;
+
+  /**
+   *  Process carousel `refresh` and `change` events to enable/disable buttons if needed
+   */
+  onRefresh(): void;
+
+  /**
+   * Shortcut to get option for this plugin
+   * @param {String} name option name
+   * @returns option value
+   */
+  option(name: string): any;
+
+  /**
+   * Creates and returns new button element with default class names and click event
+   * @param {String} type
+   */
+  createButton(type: string): HTMLButtonElement;
+
+  /**
+   * Build necessary DOM elements
+   */
+  build(): void;
+
+  cleanup(): void;
+
+  attach(): void;
+
+  detach(): void;
+}
+
+export interface NavigationOptions {
+  prevTpl: string;
+  nextTpl: string;
+  classNames: Partial<{
+    main: string;
+    button: string;
+    next: string;
+    prev: string;
+  }>
+}

types/Carousel/plugins/Sync/Sync.d.ts

@@ -0,0 +1,69 @@
+import { Panzoom } from '../../../Panzoom/Panzoom';
+import { Carousel } from '../../Carousel';
+
+export class Sync {
+  constructor(carousel: Carousel);
+
+  carousel: Carousel;
+  selectedIndex: number;
+  friction: number;
+  target: Carousel;
+  nav: any;
+
+  /**
+   * Process main carousel `ready` event; bind events and set initial page
+   */
+  onNavReady(): void;
+
+  /**
+   * Process main carousel `click` event
+   * @param {Object} panzoom
+   * @param {Object} event
+   */
+  onNavClick(carousel: Carousel, panzoom: Panzoom, event: any): void;
+
+  /**
+   * Process main carousel `createSlide` event
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onNavCreateSlide(carousel: Carousel, slide: any): void;
+
+  /**
+   * Process target carousel `change` event
+   * @param {Object} target
+   */
+  onTargetChange(): void;
+
+  /**
+   * Make this one as main carousel and selected carousel as navigation
+   * @param {Object} nav Carousel
+   */
+  addAsTargetFor(nav: any): void;
+
+  /**
+   * Make this one as navigation carousel for selected carousel
+   * @param {Object} target
+   */
+  addAsNavFor(target: any): void;
+
+  /**
+   * Attach event listeners on both carousels
+   */
+  attachEvents(): void;
+
+  /**
+   * Toggle classname for slides that marks currently selected slides
+   * @param {Number} selectedIndex
+   */
+  markSelectedSlide(selectedIndex: number): void;
+
+  attach(carousel: Carousel): void;
+
+  detach(): void;
+}
+
+export interface SyncOptions {
+  target: Carousel;
+  friction: number;
+}

types/Fancybox/Fancybox.d.ts

@@ -0,0 +1,379 @@
+import { Base } from '../shared/Base/Base';
+
+export class Fancybox extends Base {
+  /**
+   * Create new Fancybox instance with provided options
+   * Example:
+   *   Fancybox.show([{ src : 'https://lipsum.app/id/1/300x225' }]);
+   * @param {Array} items - Gallery items
+   * @param {Object} [options] - Optional custom options
+   * @returns {Object} Fancybox instance
+   */
+  static show(items: any[], options?: any): any;
+
+  /**
+   * Starts Fancybox if event target matches any opener or target is `trigger element`
+   * @param {Event} event - Click event
+   * @param {Object} [options] - Optional custom options
+   */
+  static fromEvent(event: Event, options?: any): boolean;
+
+  /**
+   * Starts Fancybox using selector
+   * @param {String} opener - Valid CSS selector string
+   * @param {Object} [options] - Optional custom options
+   */
+  static fromOpener(opener: string, options?: any): false | Fancybox;
+
+  /**
+   * Attach a click handler function that starts Fancybox to the selected items, as well as to all future matching elements.
+   * @param {String} selector - Selector that should match trigger elements
+   * @param {Object} [options] - Custom options
+   */
+  static bind(selector: string, options?: any): void;
+
+  /**
+   * Remove the click handler that was attached with `bind()`
+   * @param {String} selector - A selector which should match the one originally passed to .bind()
+   */
+  static unbind(selector: string): void;
+
+  /**
+   * Immediately destroy all instances (without closing animation) and clean up all bindings..
+   */
+  static destroy(): void;
+
+  /**
+   * Retrieve instance by identifier or the top most instance, if identifier is not provided
+   * @param {String|Numeric} [id] - Optional instance identifier
+   */
+  static getInstance(id?: string | number): any;
+
+  /**
+   * Close all or topmost currently active instance.
+   * @param {boolean} [all] - All or only topmost active instance
+   * @param {any} [arguments] - Optional data
+   */
+  static close(all?: boolean, args?: any): void;
+
+  /**
+   * Slide topmost currently active instance to next page
+   */
+  static next(): void;
+
+  /**
+   * Slide topmost currently active instance to previous page
+   */
+  static prev(): void;
+
+  /**
+   * Fancybox constructor
+   * @constructs Fancybox
+   * @param {Object} [options] - Options for Fancybox
+   */
+  constructor(items: any, options?: any);
+
+  state: string;
+
+  $root: any;
+  $container: any;
+  $backdrop: any;
+  $carousel: any;
+  id: any;
+  items: any[];
+  lastFocus: EventTarget;
+  $closeButton: any;
+
+  Carousel: any;
+
+  /**
+   * Bind event handlers for referencability
+   */
+  bindHandlers(): void;
+
+  /**
+   * Set up a functions that will be called whenever the specified event is delivered
+   */
+  attachEvents(): void;
+
+  /**
+   * Removes previously registered event listeners
+   */
+  detachEvents(): void;
+
+  /**
+   * Initialize layout; create main container, backdrop nd layout for main carousel
+   */
+  initLayout(): Fancybox;
+
+
+  /**
+   * Prepares slides for the corousel
+   * @returns {Array} Slides
+   */
+  setItems(items: any): any[];
+
+
+  /**
+   * Initialize main Carousel that will be used to display the content
+   * @param {Array} slides
+   */
+  initCarousel(): Fancybox;
+
+
+  /**
+   * Process `createSlide` event to create caption element inside new slide
+   */
+  onCreateSlide(carousel: any, slide: any): void;
+
+  /**
+   * Handle Carousel `settle` event
+   */
+  onSettle(): void;
+
+  /**
+   * Handle focus event
+   * @param {Event} event - Focus event
+   */
+  onFocus(event: Event): void;
+
+  /**
+   * Handle click event on the container
+   * @param {Event} event - Click event
+   */
+  onClick(event: Event): void;
+
+  /**
+   * Handle panzoom `touchMove` event; Disable dragging if content of current slide is scaled
+   */
+  onTouchMove(): boolean;
+
+  /**
+   * Handle panzoom `touchEnd` event; close when quick flick up/down is detected
+   * @param {Object} panzoom - Panzoom instance
+   */
+  onTouchEnd(panzoom: any): void;
+
+  /**
+   * Handle `afterTransform` event; change backdrop opacity based on current y position of panzoom
+   * @param {Object} panzoom - Panzoom instance
+   */
+  onTransform(panzoom: any): void;
+
+  /**
+   * Handle `mousedown` event to mark that the mouse is in use
+   */
+  onMousedown(): void;
+
+  /**
+   * Handle `keydown` event; trap focus
+   * @param {Event} event Keydown event
+   */
+  onKeydown(event: Event): void;
+
+  /**
+   * Get the active slide. This will be the first slide from the current page of the main carousel.
+   */
+  getSlide(): any;
+
+  /**
+   * Place focus on the first focusable element inside current slide
+   * @param {Event} [event] - Focus event
+   */
+  focus(event?: Event): void;
+
+
+  /**
+   * Hide vertical page scrollbar and adjust right padding value of `body` element to prevent content from shifting
+   * (otherwise the `body` element may become wider and the content may expand horizontally).
+   */
+  hideScrollbar(): void;
+
+  /**
+   * Stop hiding vertical page scrollbar
+   */
+  revealScrollbar(): void;
+
+  /**
+   * Remove content for given slide
+   * @param {Object} slide - Carousel slide
+   */
+  clearContent(slide: any): void;
+
+  /**
+   * Set new content for given slide
+   * @param {Object} slide - Carousel slide
+   * @param {HTMLElement|String} html - HTML element or string containing HTML code
+   * @param {Object} [opts] - Options
+   */
+  setContent(slide: any, html: HTMLElement | string, opts?: any): Element;
+
+  /**
+   * Create close button if needed
+   * @param {Object} slide
+   */
+  manageCloseButton(slide: any): void;
+
+
+  /**
+   * Make content visible for given slide and optionally start CSS animation
+   * @param {Object} slide - Carousel slide
+   */
+  revealContent(slide: any): void;
+
+  /**
+   * Add class name to given HTML element and wait for `animationend` event to execute callback
+   * @param {HTMLElement} $el
+   * @param {String} className
+   * @param {Function} callback - A callback to run
+   */
+  animateCSS($element: any, className: string, callback: Function): void;
+
+  /**
+   * Mark given slide as `done`, e.g., content is loaded and displayed completely
+   * @param {Object} slide - Carousel slide
+   */
+  done(slide: any): void;
+
+  /**
+   * Set error message as slide content
+   * @param {Object} slide - Carousel slide
+   * @param {String} message - Error message, can contain HTML code and template variables
+   */
+  setError(slide: any, message: string): void;
+
+  /**
+   * Create loading indicator inside given slide
+   * @param {Object} slide - Carousel slide
+   */
+  showLoading(slide: any): void;
+
+  /**
+   * Remove loading indicator from given slide
+   * @param {Object} slide - Carousel slide
+   */
+  hideLoading(slide: any): void;
+
+  /**
+   * Slide carousel to next page
+   */
+  next(): void;
+
+  /**
+   * Slide carousel to previous page
+   */
+  prev(): void;
+
+  /**
+   * Slide carousel to selected page with optional parameters
+   * Examples:
+   *    Fancybox.getInstance().jumpTo(2);
+   *    Fancybox.getInstance().jumpTo(3, {friction: 0})
+   * @param  {...any} args - Arguments for Carousel `slideTo` method
+   */
+  jumpTo(...args: any[]): void;
+
+  /**
+   * Start closing the current instance
+   * @param {Event} [event] - Optional click event
+   */
+  close(event?: Event): void;
+
+  /**
+   * Clean up after closing fancybox
+   */
+  destroy(): void;
+}
+
+type KeyboardAction = 'next' | 'prev' | 'close';
+
+export interface FancyboxLocale {
+  CLOSE: string;
+  NEXT: string;
+  PREV: string;
+  MODAL: string;
+  ERROR: string;
+  IMAGE_ERROR: string;
+  ELEMENT_NOT_FOUND: string;
+  AJAX_NOT_FOUND: string;
+  AJAX_FORBIDDEN: string;
+  IFRAME_ERROR: string;
+  TOGGLE_ZOOM: string;
+  TOGGLE_THUMBS: string;
+  TOGGLE_SLIDESHOW: string;
+  TOGGLE_FULLSCREEN: string;
+  DOWNLOAD: string;
+}
+
+export interface FancyboxOptions {
+  // Index of active slide on the start
+  startIndex: number,
+
+  // Number of slides to preload before and after active slide
+  preload: number,
+
+  // Should navigation be infinite
+  infinite: boolean,
+
+  // Class name to be applied to the content to reveal it
+  showClass: 'fancybox-zoomInUp' | 'fancybox-fadeIn' | 'fancybox-zoomInUp' | false
+
+  // Class name to be applied to the content to hide it
+  hideClass: 'fancybox-fadeOut' | 'fancybox-fadeOut' | 'fancybox-zoomOutDown' | false
+
+  // Should backdrop and UI elements fade in/out on start/close
+  animated: boolean,
+
+  // If browser scrollbar should be hidden
+  hideScrollbar: boolean,
+
+  // Element containing main structure
+  parentEl: HTMLElement,
+
+  // Custom class name or multiple space-separated class names for the container
+  mainClass: string,
+
+  // Set focus on first focusable element after displaying content
+  autoFocus: boolean,
+
+  // Trap focus inside Fancybox
+  trapFocus: boolean,
+
+  // Set focus back to trigger element after closing Fancybox
+  placeFocusBack: boolean,
+
+  // Action to take when the user clicks on the backdrop
+  click: KeyboardAction
+
+  // Position of the close button - over the content or at top right corner of viewport
+  closeButton: 'inside' | 'outside'
+
+  // Allow user to drag content up/down to close instance
+  dragToClose: boolean,
+
+  // Enable keyboard navigation
+  keyboard: {
+    Escape: KeyboardAction,
+    Delete: KeyboardAction,
+    Backspace: KeyboardAction,
+    PageUp: KeyboardAction,
+    PageDown: KeyboardAction,
+    ArrowUp: KeyboardAction,
+    ArrowDown: KeyboardAction,
+    ArrowRight: KeyboardAction,
+    ArrowLeft: KeyboardAction,
+  },
+
+  // HTML templates for various elements
+  template: {
+    // Close button icon
+    closeButton: string;
+    // Loading indicator icon
+    spinner: string;
+
+    // Main container element
+    main: null,
+  },
+
+  l10n: FancyboxLocale,
+}

types/Fancybox/plugins/Hash/Hash.d.ts

@@ -0,0 +1,61 @@
+import { Fancybox } from '../../Fancybox';
+
+export class Hash {
+  /**
+   * Start fancybox from current URL hash,
+   * this will be called on page load OR/AND after changing URL hash
+   * @param {Class} Fancybox
+   */
+  static startFromUrl(): void;
+
+  /**
+   * Handle `hash` change, change gallery item to current index or start/close current instance
+   */
+  static onHashChange(): any;
+
+  /**
+   * Add event bindings that will start new Fancybox instance based in the current URL
+   */
+  static create(fancybox: Fancybox): void;
+
+  static destroy(): void;
+
+  /**
+   * Helper method to split URL hash into useful pieces
+   */
+  static getParsedURL(): {
+    hash: string;
+    slug: string;
+    index: number;
+  };
+
+
+  fancybox: Fancybox;
+  events: {
+    initCarousel: (fancybox: Fancybox) => void;
+    'Carousel.change': (fancybox: Fancybox) => void;
+    closing: () => void;
+  };
+  hasCreatedHistory: boolean;
+  origHash: string;
+  timer: number;
+
+  constructor(fancybox: Fancybox);
+
+
+  /**
+   * Process `Carousel.ready` and `Carousel.change` events to update URL hash
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   */
+  onChange(fancybox: Fancybox): void;
+
+  /**
+   * Process `closing` event to clean up
+   */
+  onClosing(): void;
+
+  attach(fancybox: Fancybox): void;
+
+  detach(fancybox: Fancybox): void;
+}

types/Fancybox/plugins/Html/Html.d.ts

@@ -0,0 +1,158 @@
+import { Carousel } from '../../../Carousel/Carousel';
+import { Fancybox } from '../../Fancybox';
+
+export class Html {
+  constructor(fancybox: Fancybox);
+
+  fancybox: Fancybox;
+  events: {
+    init: () => void;
+    ready: () => void;
+    'Carousel.createSlide': (fancybox: Fancybox, carousel: Carousel, slide: any) => void;
+    'Carousel.removeSlide': (fancybox: Fancybox, carousel: Carousel, slide: any) => void;
+    'Carousel.selectSlide': (fancybox: Fancybox, carousel: Carousel, slide: any) => void;
+    'Carousel.unselectSlide': (fancybox: Fancybox, carousel: Carousel, slide: any) => void;
+    'Carousel.refresh': (fancybox: Fancybox, carousel: Carousel) => void;
+  };
+
+  /**
+   * Check if each gallery item has type when fancybox starts
+   */
+  onInit(): void;
+
+  /**
+   * Set content type for the slide
+   * @param {Object} slide
+   */
+  processType(slide: any): void;
+
+  /**
+   * Start loading content when Fancybox is ready
+   */
+  onReady(): void;
+
+  /**
+   * Process `Carousel.createSlide` event to create image content
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onCreateSlide(fancybox: Fancybox, carousel: Carousel, slide: any): void;
+
+  /**
+   * Retrieve and set slide content
+   * @param {Object} slide
+   */
+  loadInlineContent(slide: any): void;
+
+  /**
+   * Makes AJAX request and sets response as slide content
+   * @param {Object} slide
+   */
+  loadAjaxContent(slide: any): void;
+
+  /**
+   * Creates iframe as slide content, preloads if needed before displaying
+   * @param {Object} slide
+   */
+  loadIframeContent(slide: any): void;
+
+  /**
+   * Set CSS max/min width/height properties of the content to have the correct aspect ratio
+   * @param {Object} slide
+   */
+  setAspectRatio(slide: any): void;
+
+  /**
+   * Adjust the width and height of the iframe according to the content dimensions, or defined sizes
+   * @param {Object} slide
+   */
+  resizeIframe(slide: any): void;
+
+  /**
+   * Process `Carousel.onRefresh` event,
+   * trigger iframe autosizing and set content aspect ratio for each slide
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   */
+  onRefresh(fancybox: Fancybox, carousel: Carousel): void;
+
+  /**
+   * Process `Carousel.onCreateSlide` event to set content
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  setContent(slide: any): void;
+
+  /**
+   * Process `Carousel.onSelectSlide` event to start video
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onSelectSlide(fancybox: Fancybox, carousel: Carousel, slide: any): void;
+
+  /**
+   * Attempts to begin playback of the media
+   * @param {Object} slide
+   */
+  playVideo(slide: any): void;
+
+  /**
+   * Process `Carousel.onUnselectSlide` event to pause video
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onUnselectSlide(fancybox: Fancybox, carousel: Carousel, slide: any): void;
+
+  /**
+   * Process `Carousel.onRemoveSlide` event to do clean up
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onRemoveSlide(fancybox: Fancybox, carousel: Carousel, slide: any): void;
+
+  /**
+   * Process `window.message` event to mark video iframe element as `ready`
+   * @param {Object} e - Event
+   */
+  onMessage(e: any): void;
+
+  attach(): void;
+
+  detach(): void;
+}
+
+export interface HtmlOptions {
+  // General options for any video content (Youtube, Vimeo, HTML5 video)
+  video: {
+    autoplay: boolean;
+    ratio: number;
+  };
+  // Youtube embed parameters
+  youtube: {
+    autohide: boolean;
+    fs: boolean;
+    rel: boolean;
+    hd: boolean;
+    wmode: 'transparent';
+    enablejsapi: boolean;
+    html5: boolean;
+  };
+  // Vimeo embed parameters
+  vimeo: {
+    hd: boolean;
+    show_title: boolean;
+    show_byline: boolean;
+    show_portrait: boolean;
+    fullscreen: boolean;
+  };
+  // HTML5 video parameters
+  html5video: {
+    tpl: string;
+    format: '';
+  };
+}

types/Fancybox/plugins/Image/Image.d.ts

@@ -0,0 +1,176 @@
+import { Carousel } from '../../../Carousel/Carousel';
+import { PanzoomOptions } from '../../../Panzoom/Panzoom';
+import { Fancybox } from '../../Fancybox';
+
+export class Image {
+  constructor(fancybox: Fancybox);
+
+  fancybox: Fancybox;
+  events: {
+    ready: () => void;
+    closing: (fancybox: Fancybox) => void;
+    done: (fancybox: Fancybox, slide: any) => void;
+    'Carousel.change': (fancybox: Fancybox, carousel: Carousel) => void;
+    'Carousel.createSlide': (fancybox: Fancybox, carousel: Carousel, slide: any) => void;
+    'Carousel.removeSlide': (fancybox: Fancybox, carousel: Carousel, slide: any) => void;
+  };
+
+  /**
+   * Handle `ready` event to start loading content
+   */
+  onReady(): void;
+
+  /**
+   * Handle `done` event to update cursor
+   * @param {Object} fancybox
+   * @param {Object} slide
+   */
+  onDone(fancybox: Fancybox, slide: any): void;
+
+  /**
+   * Handle `closing` event to clean up all slides and to start zoom-out animation
+   * @param {Object} fancybox
+   */
+  onClosing(fancybox: Fancybox): void;
+
+  clickTimer: any;
+
+  /**
+   * Process `Carousel.createSlide` event to create image content
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onCreateSlide(fancybox: Fancybox, carousel: Carousel, slide: any): void;
+
+  /**
+   * Handle `Carousel.removeSlide` event to do clean up the slide
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   * @param {Object} slide
+   */
+  onRemoveSlide(fancybox: Fancybox, carousel: Carousel, slide: any): void;
+
+  /**
+   * Build DOM elements and add event listeners
+   * @param {Object} slide
+   */
+  setContent(slide: any): void;
+
+  /**
+   * Handle image state change, display error or start revealing image
+   * @param {Object} slide
+   */
+  onImageStatusChange(slide: any): void;
+
+  /**
+   * Make image zoomable and draggable using Panzoom
+   * @param {Object} slide
+   */
+  initSlidePanzoom(slide: any): void;
+
+  /**
+   * Start zoom-in animation if possible, or simply reveal content
+   * @param {Object} slide
+   */
+  revealContent(slide: any): void;
+
+  /**
+   * Get zoom info for selected slide
+   * @param {Object} slide
+   */
+  getZoomInfo(slide: any): {
+    top: number;
+    left: number;
+    scale: number;
+    opacity: any;
+  };
+
+  /**
+   * Determine if it is possible to do zoom-in animation
+   */
+  canZoom(slide: any): boolean;
+
+  /**
+   * Perform zoom-in animation
+   */
+  zoomIn(): void;
+
+  /**
+   * Perform zoom-out animation
+   */
+  zoomOut(): void;
+
+  /**
+   * Set the type of mouse cursor to indicate if content is zoomable
+   * @param {Object} slide
+   */
+  handleCursor(slide: any): void;
+
+  /**
+   * Handle `wheel` event
+   * @param {Object} slide
+   * @param {Object} event
+   */
+  onWheel(slide: any, event: any): void;
+
+  /**
+   * Handle `click` and `dblclick` events
+   * @param {Object} slide
+   * @param {Object} event
+   */
+  onClick(slide: any, event: any): boolean;
+
+  /**
+   * Handle `Carousel.change` event to reset zoom level for any zoomed in/out content
+   * and to revel content of the current page
+   * @param {Object} fancybox
+   * @param {Object} carousel
+   */
+  onPageChange(fancybox: Fancybox, carousel: Carousel): void;
+
+  attach(): void;
+
+  detach(): void;
+}
+
+export interface ImageOptions {
+  // Class name for slide element indicating that content can be zoomed in
+  canZoomInClass: string,
+
+  // Class name for slide element indicating that content can be zoomed out
+  canZoomOutClass: string,
+
+  // Do zoom animation from thumbnail image when starting or closing fancybox
+  zoom: boolean,
+
+  // Animate opacity while zooming
+  zoomOpacity: 'auto' | boolean,
+
+  // Zoom animation friction
+  zoomFriction: number,
+
+  // Disable zoom animation if thumbnail is visible only partly
+  ignoreCoveredThumbnail: boolean,
+
+  // Enable guestures
+  touch: boolean,
+
+  // Action to be performed when user clicks on the image
+  click: 'toggleZoom' | 'next' | 'close';
+
+  // Action to be performed when double-click event is detected on the image
+  doubleClick: 'toggleZoom';
+
+  // Action to be performed when user rotates a wheel button on a pointing device
+  wheel: 'zoom' | 'slide' | 'close';
+
+  // How image should be resized to fit its container
+  fit: 'contain' | 'contain-w' | 'cover';
+
+  // Should create wrapping element around the image
+  wrap: boolean;
+
+  // Custom Panzoom options
+  Panzoom: PanzoomOptions,
+}

types/Fancybox/plugins/ScrollLock/ScrollLock.d.ts

@@ -0,0 +1,52 @@
+import { Fancybox } from '../../Fancybox';
+
+export class ScrollLock {
+  fancybox: Fancybox;
+  viewport: VisualViewport;
+  pendingUpdate: any;
+  startY: any;
+
+  constructor(fancybox: Fancybox);
+
+  /**
+   * Process `initLayout` event to attach event listeners and resize viewport if needed
+   */
+  onReady(): void;
+
+  /**
+   * Handle `resize` event to call `updateViewport`
+   */
+  onResize(): void;
+
+  /**
+   * Scale $container proportionally to actually fit inside browser,
+   * e.g., disable viewport zooming
+   */
+  updateViewport(): void;
+
+  /**
+   * Handle `touchstart` event to mark drag start position
+   * @param {Object} event
+   */
+  onTouchstart(event: any): void;
+
+  /**
+   * Handle `touchmove` event to fix scrolling on mobile devices (iOS)
+   * @param {Object} event
+   */
+  onTouchmove(event: any): void;
+
+  /**
+   * Handle `wheel` event
+   */
+  onWheel(event: any): void;
+
+  /**
+   * Clean everything up
+   */
+  cleanup(): void;
+
+  attach(): void;
+
+  detach(): void;
+}

types/Fancybox/plugins/Thumbs/Thumbs.d.ts

@@ -0,0 +1,90 @@
+import { Carousel, CarouselOptions } from '../../../Carousel/Carousel';
+import { Fancybox } from '../../Fancybox';
+
+export class Thumbs {
+  constructor(fancybox: Fancybox);
+
+  fancybox: Fancybox;
+  $container: HTMLDivElement;
+  state: string;
+  events: {
+    prepare: () => void;
+    closing: () => void;
+    keydown: (fancybox: Fancybox, key: string) => void;
+  };
+
+  Carousel: Carousel;
+
+  /**
+   * Process `prepare` event to build the layout
+   */
+  onPrepare(): void;
+
+  /**
+   * Process `closing` event to disable all events
+   */
+  onClosing(): void;
+
+  /**
+   * Process `keydown` event to enable thumbnail list toggling using keyboard key
+   * @param {Object} fancybox
+   * @param {String} key
+   */
+  onKeydown(fancybox: Fancybox, key: string): void;
+
+  /**
+   * Build layout and init thumbnail Carousel
+   */
+  build(): void;
+
+  /**
+   * Process all fancybox slides to get all thumbnail images
+   */
+  getSlides(): {
+    html: string;
+    customClass: string;
+  }[];
+
+  /**
+   * Toggle visibility of thumbnail list
+   * Tip: you can use `Fancybox.getInstance().plugins.Thumbs.toggle()` from anywhere in your code
+   */
+  toggle(): void;
+
+  /**
+   * Show thumbnail list
+   */
+  show(): void;
+
+  /**
+   * Hide thumbnail list
+   */
+  hide(): void;
+
+  /**
+   * Reset the state
+   */
+  cleanup(): void;
+
+  attach(): void;
+
+  detach(): void;
+}
+
+
+export interface ThumbsOptions {
+  // The minimum number of images in the gallery to display thumbnails
+  minSlideCount: number,
+
+  // Minimum screen height to display thumbnails
+  minScreenHeight: number,
+
+  // Automatically show thumbnails when opened
+  autoStart: boolean,
+
+  // Keyboard shortcut to toggle thumbnail container
+  key: string,
+
+  // Customize Carousel instance
+  Carousel: CarouselOptions,
+}

types/Fancybox/plugins/Toolbar/Toolbar.d.ts

@@ -0,0 +1,86 @@
+import { Fancybox } from '../../../Fancybox/Fancybox';
+import { Slideshow } from '../../../shared/utils/Slideshow';
+
+export class Toolbar {
+  constructor(fancybox: Fancybox);
+
+  fancybox: Fancybox;
+  $container: HTMLDivElement;
+  state: string;
+  events: {
+    init: () => void;
+    prepare: () => void;
+    done: (fancybox: Fancybox, slide: any) => void;
+    keydown: (fancybox: Fancybox, key: any, event: any) => void;
+    closing: () => void;
+    'Carousel.change': () => void;
+    'Carousel.settle': () => void;
+    'Carousel.Panzoom.touchStart': () => void;
+    'Image.startAnimation': (fancybox: Fancybox, slide: any) => void;
+    'Image.afterUpdate': (fancybox: Fancybox, slide: any) => void;
+  };
+  Slideshow: Slideshow;
+
+  onInit(): void;
+
+  onPrepare(): void;
+
+  onFsChange(): void;
+
+  onSettle(): void;
+
+  onChange(): void;
+
+  onDone(fancybox: Fancybox, slide: any): void;
+
+  onRefresh(slide: any): void;
+
+  onKeydown(fancybox: Fancybox, key: any, event: any): void;
+
+  onClosing(): void;
+
+  /**
+   * Create link, button or `div` element for the toolbar
+   * @param {Object} obj
+   * @returns HTMLElement
+   */
+  createElement(obj: any): HTMLAnchorElement | HTMLButtonElement | HTMLDivElement;
+
+  /**
+   * Create all DOM elements
+   */
+  build(): void;
+
+  /**
+   * Update element state depending on index of current slide
+   */
+  update(): void;
+
+  cleanup(): void;
+
+  attach(): void;
+
+  detach(): void;
+}
+
+type ToolbarActionType = 'counter' | 'prev' | 'next' | 'download' | 'zoom' | 'slideshow' | 'fullscreen' | 'thumbs' | 'close';
+
+export interface ToolbarItem {
+  position: string,
+  type: 'div' | 'buttons' | 'links',
+  class: string,
+  html: string,
+  attr: Record<string, any>,
+  click: (e: PointerEvent) => void;
+}
+
+export interface ToolbarOptions {
+  // What toolbar items to display
+  display: ToolbarActionType[],
+
+  // Only create a toolbar item if there is at least one image in the group
+  autoEnable: boolean,
+
+  // Toolbar items; can be links, buttons or `div` elements
+  items: Record<ToolbarActionType, ToolbarItem>,
+}

types/Panzoom/Panzoom.d.ts

@@ -0,0 +1,301 @@
+import { Base } from '../shared/Base/Base';
+import { PointerTracker } from '../shared/utils/PointerTracker';
+
+export class Panzoom extends Base {
+  /**
+   * Panzoom constructor
+   * @constructs Panzoom
+   * @param {HTMLElement} $viewport Panzoom container
+   * @param {Object} [options] Options for Panzoom
+   */
+  constructor($container: any, options?: any);
+
+  state: string;
+  $container: any;
+  $content: any;
+  $viewport: any;
+  updateRate: any;
+  container: {
+    width: any;
+    height: any;
+  };
+  viewport: any;
+  content: any;
+  transform: any;
+  changedDelta: number;
+  lockAxis: string;
+  _dragOffset: {
+    x: number;
+    y: number;
+    scale: number;
+    time: number;
+  };
+  friction: any;
+  pointerTracker: PointerTracker;
+  resizeObserver: ResizeObserver;
+  updateTimer: any;
+  velocity: {
+    x: number;
+    y: number;
+    scale: number;
+  };
+  dragStart: {
+    rect: any;
+    x: any;
+    y: any;
+    scale: any;
+  };
+  dragPosition: any;
+  dragOffset: {
+    x: number;
+    y: number;
+    scale: number;
+    time: number;
+  };
+
+  rAF: number;
+
+  /**
+   * Create references to container, viewport and content elements
+   */
+  initLayout(): void;
+
+  /**
+   * Restore instance variables to default values
+   */
+  resetValues(): void;
+
+  /**
+   * Handle `load` event
+   * @param {Event} event
+   */
+  onLoad(event: Event): void;
+
+  /**
+   * Handle `click` event
+   * @param {Event} event
+   */
+  onClick(event: Event): void;
+
+  /**
+   * Handle `wheel` event
+   * @param {Event} event
+   */
+  onWheel(event: Event): void;
+
+  /**
+   * Change zoom level depending on scroll direction
+   * @param {Event} event `wheel` event
+   */
+  zoomWithWheel(event: Event): void;
+
+  /**
+   * Change zoom level depending on click coordinates
+   * @param {Event} event `click` event
+   */
+  zoomWithClick(event: Event): void;
+
+  /**
+   * Attach load, wheel and click event listeners, initialize `resizeObserver` and `PointerTracker`
+   */
+  attachEvents(): void;
+
+  initObserver(): void;
+
+  /**
+   * Restore drag related variables to default values
+   */
+  resetDragPosition(): void;
+
+  /**
+   * Trigger update events before/after resizing content and viewport
+   * @param {Boolean} silently Should trigger `afterUpdate` event at the end
+   */
+  updateMetrics(silently: boolean): void;
+
+  /**
+   * Increase zoom level
+   * @param {Number} [step] Zoom ratio; `0.5` would increase scale from 1 to 1.5
+   */
+  zoomIn(step?: number): void;
+
+  /**
+   * Decrease zoom level
+   * @param {Number} [step] Zoom ratio; `0.5` would decrease scale from 1.5 to 1
+   */
+  zoomOut(step?: number): void;
+
+  /**
+   * Toggles zoom level between max and base levels
+   * @param {Object} [options] Additional options
+   */
+  toggleZoom(props?: {}): void;
+
+  /**
+   * Animate to given zoom level
+   * @param {Number} scale New zoom level
+   * @param {Object} [options] Additional options
+   */
+  zoomTo(scale?: number, {x, y}?: any): void;
+
+  /**
+   * Calculate difference for top/left values if content would scale at given coordinates
+   * @param {Number} scale
+   * @param {Number} x
+   * @param {Number} y
+   * @returns {Object}
+   */
+  getZoomDelta(scale: number, x?: number, y?: number): any;
+
+  /**
+   * Animate to given positon and/or zoom level
+   * @param {Object} [options] Additional options
+   */
+  panTo({x, y, scale, friction, ignoreBounds}?: any): void;
+
+  /**
+   * Start animation loop
+   */
+  startAnimation(): void;
+
+  /**
+   * Process animation frame
+   */
+  animate(): void;
+
+  /**
+   * Calculate boundaries
+   */
+  getBounds(scale: any): {
+    boundX: any;
+    boundY: any;
+  };
+
+  /**
+   * Change animation velocity if boundary is reached
+   */
+  setEdgeForce(): void;
+
+  /**
+   * Change dragging position if boundary is reached
+   */
+  setDragResistance(): void;
+
+  /**
+   * Set velocity to move content to drag position
+   */
+  setDragForce(): void;
+
+  /**
+   * Update end values based on current velocity and friction;
+   */
+  recalculateTransform(): void;
+
+  /**
+   * Check if content is currently animating
+   * @returns {Boolean}
+   */
+  isAnimating(): boolean;
+
+  /**
+   * Set content `style.transform` value based on current animation frame
+   */
+  setTransform(final: any): void;
+
+  /**
+   * Stop animation loop
+   */
+  endAnimation(silently: any): void;
+
+  /**
+   * Update the class name depending on whether the content is scaled
+   */
+  handleCursor(): void;
+
+  /**
+   * Remove observation and detach event listeners
+   */
+  detachEvents(): void;
+
+  /**
+   * Clean up
+   */
+  destroy(): void;
+}
+
+export type PanzoomRatioFn = () => number;
+export type PanzoomEventCallback = () => void;
+
+export interface PanzoomOptions {
+  // Enable touch guestures
+  touch: boolean,
+
+  // Enable zooming
+  zoom: boolean,
+
+  // Enable pinch gesture to zoom in/out using two fingers
+  pinchToZoom: boolean,
+
+  // Disable dragging if scale level is equal to value of `baseScale` option
+  panOnlyZoomed: boolean,
+
+  // Lock axis while dragging,
+  // possible values: false | "x" | "y" | "xy"
+  lockAxis: boolean | 'x' | 'y' | 'xy',
+
+  // * All friction values are inside [0, 1) interval,
+  // * where 0 would change instantly, but 0.99 would update extremely slowly
+
+  // Friction while panning/dragging
+  friction: number,
+
+  // Friction while decelerating after drag end
+  decelFriction: number,
+
+  // Friction while scaling
+  zoomFriction: number,
+
+  // Bounciness after hitting the edge
+  bounceForce: number,
+
+  // Initial scale level
+  baseScale: number,
+
+  // Minimum scale level
+  minScale: number,
+
+  // Maximum scale level
+  maxScale: number,
+
+  // Default scale step while zooming
+  step: number,
+
+  // Allow to select text,
+  // if enabled, dragging will be disabled when text selection is detected
+  textSelection: boolean,
+
+  // Add `click` event listener,
+  // possible values: true | false | function | "toggleZoom"
+  click: boolean | 'toggleZoom' | PanzoomEventCallback,
+
+  // Add `wheel` event listener,
+  // possible values: true | false | function |  "zoom"
+  wheel: boolean | 'zoom' | PanzoomEventCallback,
+
+  // Value for zoom on mouse wheel
+  wheelFactor: number,
+
+  // Number of wheel events after which it should stop preventing default behaviour of mouse wheel
+  wheelLimit: number,
+
+  // Class name added to `$viewport` element to indicate if content is draggable
+  draggableClass: string,
+
+  // Class name added to `$viewport` element to indicate that user is currently dragging
+  draggingClass: string,
+
+  // Content will be scaled by this number,
+  // this can also be a function which should return a number, for example:
+  // ratio: function() { return 1 / (window.devicePixelRatio || 1) }
+  ratio: number | PanzoomRatioFn,
+}

types/Panzoom/plugins/Controls/Controls.d.ts

@@ -0,0 +1,36 @@
+import { Panzoom } from "../../Panzoom";
+
+export class Controls {
+    constructor(panzoom: Panzoom);
+    panzoom: any;
+    $container: any;
+    /**
+     * Create and append new button to the container
+     * @param {String} name - Button name
+     * @param {Boolean} withClickEvent - Should add default click handler, it will use `name` as method name
+     */
+    addButton(name: string, withClickHandler?: boolean): HTMLButtonElement;
+    /**
+     * Create container with default buttons
+     */
+    createContainer(): void;
+    /**
+     * Clean up container
+     */
+    removeContainer(): void;
+    attach(): void;
+    detach(): void;
+}
+
+
+export interface ControlsOptions {
+    l10n: {
+        ZOOMIN: string;
+        ZOOMOUT: string;
+    }
+    buttons: string[];
+    tpl: {
+        zoomIn: string;
+        zoomOut: string;
+    }
+}

types/index.d.ts

@@ -0,0 +1,33 @@
+import { Carousel, CarouselOptions, CarouselSlide } from "./Carousel/Carousel";
+import { Autoplay, AutoplayOptions } from "./Carousel/plugins/Autoplay/Autoplay";
+import { Dots } from "./Carousel/plugins/Dots/Dots";
+import { Navigation, NavigationOptions } from "./Carousel/plugins/Navigation/Navigation";
+import { Sync, SyncOptions } from "./Carousel/plugins/Sync/Sync";
+import { Fancybox, FancyboxOptions } from "./Fancybox/Fancybox";
+import { Hash } from "./Fancybox/plugins/Hash/Hash";
+import { Html, HtmlOptions } from "./Fancybox/plugins/Html/Html";
+import { Image, ImageOptions } from "./Fancybox/plugins/Image/Image";
+import { ScrollLock } from "./Fancybox/plugins/ScrollLock/ScrollLock";
+import { Thumbs, ThumbsOptions } from "./Fancybox/plugins/Thumbs/Thumbs";
+import { Toolbar, ToolbarActionType, ToolbarItem, ToolbarOptions } from "./Fancybox/plugins/Toolbar/Toolbar";
+import { Panzoom } from "./Panzoom/Panzoom";
+import { Controls } from "./Panzoom/plugins/Controls/Controls";
+
+export {
+    Autoplay, AutoplayOptions,
+    Dots,
+    Navigation, NavigationOptions,
+    Sync, SyncOptions,
+    Carousel, CarouselOptions, CarouselSlide,
+
+    Hash,
+    Html, HtmlOptions,
+    Image, ImageOptions,
+    ScrollLock,
+    Thumbs, ThumbsOptions,
+    Toolbar, ToolbarActionType, ToolbarItem, ToolbarOptions,
+
+    Fancybox, FancyboxOptions,
+
+    Panzoom, Controls,
+}

types/shared/Base/Base.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Base class, all components inherit from this class
+ */
+export class Base {
+    /**
+     * Base constructor
+     * @param {Object} [options] - Options as `key: value` pairs
+     */
+    constructor(options?: any);
+    options: any;
+    plugins: any[];
+    events: {};
+    /**
+     * Retrieve option value by key, supports subkeys
+     * @param {String} key Option name
+     * @param {*} [fallback] Fallback value for non-existing key
+     * @returns {*}
+     */
+    option(key: string, fallback?: any, ...rest: any[]): any;
+    /**
+     * Simple l10n support - replaces object keys
+     * found in template with corresponding values
+     * @param {String} str String containing values to localize
+     * @param {Array} params Substitute parameters
+     * @returns {String}
+     */
+    localize(str: string, params?: any[]): string;
+    /**
+     * Subscribe to an event
+     * @param {String} name
+     * @param {Function} callback
+     * @returns {Object}
+     */
+    on(name: string, callback: Function): any;
+    /**
+     * Subscribe to an event only once
+     * @param {String} name
+     * @param {Function} callback
+     * @returns {Object}
+     */
+    once(name: string, callback: Function): any;
+    /**
+     * Unsubscribe event with name and callback
+     * @param {String} name
+     * @param {Function} callback
+     * @returns {Object}
+     */
+    off(name: string, callback: Function): any;
+    /**
+     * Emit an event.
+     * If present, `"*"` handlers are invoked after name-matched handlers.
+     * @param {String} name
+     * @param  {...any} details
+     * @returns {Boolean}
+     */
+    trigger(name: string, ...details: any[]): boolean;
+    /**
+     * Add given plugins to this instance,
+     * this will end up calling `attach` method of each plugin
+     * @param {Object} Plugins
+     * @returns {Object}
+     */
+    attachPlugins(plugins: any): any;
+    /**
+     * Remove all plugin instances from this instance,
+     * this will end up calling `detach` method of each plugin
+     * @returns {Object}
+     */
+    detachPlugins(): any;
+}

types/shared/utils/Fullscreen.d.ts

@@ -0,0 +1,10 @@
+export namespace Fullscreen {
+    const pageXOffset: number;
+    const pageYOffset: number;
+    function element(): any;
+    function element(): any;
+    function activate(element: any): void;
+    function activate(element: any): void;
+    function deactivate(): void;
+    function deactivate(): void;
+}

types/shared/utils/PointerTracker.d.ts

@@ -0,0 +1,21 @@
+export class PointerTracker {
+    constructor(_element: any, { start, move, end }?: {
+        start?: () => true;
+        move?: () => void;
+        end?: () => void;
+    });
+    _element: any;
+    startPointers: any[];
+    currentPointers: any[];
+    _pointerStart: (event: any) => void;
+    _touchStart: (event: any) => void;
+    _move: (event: any) => void;
+    _triggerPointerEnd: (pointer: any, event: any) => boolean;
+    _pointerEnd: (event: any) => void;
+    _touchEnd: (event: any) => void;
+    _startCallback: () => true;
+    _moveCallback: () => void;
+    _endCallback: () => void;
+    stop(): void;
+    _triggerPointerStart(pointer: any, event: any): boolean;
+}

types/shared/utils/Slideshow.d.ts

@@ -0,0 +1,16 @@
+import { Fancybox } from "../../Fancybox/Fancybox";
+
+export class Slideshow {
+    constructor(fancybox: Fancybox);
+    fancybox: Fancybox;
+    active: boolean;
+    handleVisibilityChange(): void;
+    isActive(): boolean;
+    setTimer(): void;
+    timer: any;
+    $progress: any;
+    clearTimer(): void;
+    activate(): void;
+    deactivate(): void;
+    toggle(): void;
+}