@materializecss/materialize 2.0.0-alpha → 2.0.2-alpha

package/src/materialbox.ts

@@ -1,8 +1,42 @@
-import { Component } from "./component";
 import anim from "animejs";
-import { M } from "./global";
 
-const _defaults = {
+import { Utils } from "./utils";
+import { BaseOptions, Component, InitElements, MElement } from "./component";
+
+export interface MaterialboxOptions extends BaseOptions {
+  /**
+   * Transition in duration in milliseconds.
+   * @default 275
+   */
+  inDuration: number;
+  /**
+   * Transition out duration in milliseconds.
+   * @default 200
+   */
+  outDuration: number;
+  /**
+   * Callback function called before materialbox is opened.
+   * @default null
+   */
+  onOpenStart: (el: Element) => void;
+  /**
+   * Callback function called after materialbox is opened.
+   * @default null
+   */
+  onOpenEnd: (el: Element) => void;
+  /**
+   * Callback function called before materialbox is closed.
+   * @default null
+   */
+  onCloseStart: (el: Element) => void;
+  /**
+   * Callback function called after materialbox is closed.
+   * @default null
+   */
+  onCloseEnd: (el: Element) => void;
+}
+
+const _defaults: MaterialboxOptions = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -11,338 +45,360 @@ const _defaults = {
   onCloseEnd: null
 };
 
-  export class Materialbox extends Component {
-    el: HTMLElement;
-    overlayActive: boolean;
-    doneAnimating: boolean;
-    caption: string;
-    originalWidth: number;
-    originalHeight: number;
-    private originInlineStyles: string;
-    private placeholder: HTMLElement;
-    private _changedAncestorList: HTMLElement[];
-    private newHeight: number;
-    private newWidth: number;
-    private windowWidth: number;
-    private windowHeight: number;
-    private attrWidth: string;
-    private attrHeight: string;
-    private _overlay: HTMLElement;
-    private _photoCaption: HTMLElement;
-    private _handleMaterialboxClickBound: any;
-    private _handleWindowScrollBound: any;
-    private _handleWindowResizeBound: any;
-    private _handleWindowEscapeBound: any;
+export class Materialbox extends Component<MaterialboxOptions> {
+  /** If the materialbox overlay is showing. */
+  overlayActive: boolean;
+  /** If the materialbox is no longer being animated. */
+  doneAnimating: boolean;
+  /** Caption, if specified. */
+  caption: string;
+  /** Original width of image. */
+  originalWidth: number;
+  /** Original height of image. */
+  originalHeight: number;
+  private originInlineStyles: string;
+  private placeholder: HTMLElement;
+  private _changedAncestorList: HTMLElement[];
+  private newHeight: number;
+  private newWidth: number;
+  private windowWidth: number;
+  private windowHeight: number;
+  private attrWidth: string;
+  private attrHeight: string;
+  private _overlay: HTMLElement;
+  private _photoCaption: HTMLElement;
 
-    constructor(el, options) {
-      super(Materialbox, el, options);
-      (this.el as any).M_Materialbox = this;
-      this.options = {...Materialbox.defaults, ...options};
-      this.overlayActive = false;
-      this.doneAnimating = true;
-      this.placeholder = document.createElement('div');
-      this.placeholder.classList.add('material-placeholder');
-      this.originalWidth = 0;
-      this.originalHeight = 0;
-      this.originInlineStyles = this.el.getAttribute('style');
-      this.caption = this.el.getAttribute('data-caption') || '';
-      // Wrap
-      this.el.before(this.placeholder);
-      this.placeholder.append(this.el);
-      this._setupEventHandlers();
-    }
+  constructor(el: HTMLElement, options: Partial<MaterialboxOptions>) {
+    super(el, options, Materialbox);
+    (this.el as any).M_Materialbox = this;
 
-    static get defaults() {
-      return _defaults;
-    }
+    this.options = {
+      ...Materialbox.defaults,
+      ...options
+    };
+    
+    this.overlayActive = false;
+    this.doneAnimating = true;
+    this.placeholder = document.createElement('div');
+    this.placeholder.classList.add('material-placeholder');
+    this.originalWidth = 0;
+    this.originalHeight = 0;
+    this.originInlineStyles = this.el.getAttribute('style');
+    this.caption = this.el.getAttribute('data-caption') || '';
+    // Wrap
+    this.el.before(this.placeholder);
+    this.placeholder.append(this.el);
+    this._setupEventHandlers();
+  }
 
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
+  static get defaults(): MaterialboxOptions {
+    return _defaults;
+  }
 
-    static getInstance(el) {
-      const domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Materialbox;
-    }
+  /**
+   * Initializes instance of MaterialBox.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<MaterialboxOptions>): Materialbox;
+  /**
+   * Initializes instances of MaterialBox.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<MaterialboxOptions>): Materialbox[];
+  /**
+   * Initializes instances of MaterialBox.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<MaterialboxOptions> = {}): Materialbox | Materialbox[]{
+    return super.init(els, options, Materialbox);
+  }
 
-    destroy() {
-      this._removeEventHandlers();
-      (this.el as any).M_Materialbox = undefined;
-      // Unwrap image
-      //this.placeholder.after(this.el).remove();
-      this.placeholder.remove();
-      this.el.removeAttribute('style');
-    }
+  static getInstance(el: HTMLElement): Materialbox {
+    return (el as any).M_Materialbox;
+  }
 
-    _setupEventHandlers() {
-      this._handleMaterialboxClickBound = this._handleMaterialboxClick.bind(this);
-      this.el.addEventListener('click', this._handleMaterialboxClickBound);
-    }
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).M_Materialbox = undefined;
+    // Unwrap image
+    //this.placeholder.after(this.el).remove();
+    this.placeholder.remove();
+    this.el.removeAttribute('style');
+  }
 
-    _removeEventHandlers() {
-      this.el.removeEventListener('click', this._handleMaterialboxClickBound);
-    }
+  _setupEventHandlers() {
+    this.el.addEventListener('click', this._handleMaterialboxClick);
+  }
 
-    _handleMaterialboxClick(e) {
-      // If already modal, return to original
-      if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
-        this.close();
-      else
-        this.open();
-    }
+  _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleMaterialboxClick);
+  }
 
-    _handleWindowScroll() {
-      if (this.overlayActive) this.close();
-    }
+  _handleMaterialboxClick = () => {
+    // If already modal, return to original
+    if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
+      this.close();
+    else
+      this.open();
+  }
 
-    _handleWindowResize() {
-      if (this.overlayActive) this.close();
-    }
+  _handleWindowScroll = () => {
+    if (this.overlayActive) this.close();
+  }
 
-    _handleWindowEscape(e) {
-      // ESC key
-      if (e.keyCode === 27 && this.doneAnimating && this.overlayActive) this.close();
-    }
+  _handleWindowResize = () => {
+    if (this.overlayActive) this.close();
+  }
 
-    _makeAncestorsOverflowVisible() {
-      this._changedAncestorList = [];
-      let ancestor = this.placeholder.parentNode;
-      while (ancestor !== null && ancestor !== document) {
-        const curr = <HTMLElement>ancestor;
-        if (curr.style.overflow !== 'visible') {
-          curr.style.overflow = 'visible';
-          this._changedAncestorList.push(curr);
-        }
-        ancestor = ancestor.parentNode;
+  _handleWindowEscape = (e: KeyboardEvent) => {
+    if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) this.close();
+  }
+
+  _makeAncestorsOverflowVisible() {
+    this._changedAncestorList = [];
+    let ancestor = this.placeholder.parentNode;
+    while (ancestor !== null && ancestor !== document) {
+      const curr = <HTMLElement>ancestor;
+      if (curr.style.overflow !== 'visible') {
+        curr.style.overflow = 'visible';
+        this._changedAncestorList.push(curr);
       }
+      ancestor = ancestor.parentNode;
     }
+  }
 
-    private _offset(el) {
-      const box = el.getBoundingClientRect();
-      const docElem = document.documentElement;
-      return {
-        top: box.top + window.pageYOffset - docElem.clientTop,
-        left: box.left + window.pageXOffset - docElem.clientLeft
-      };
-    }
+  private _offset(el: HTMLElement) {
+    const box = el.getBoundingClientRect();
+    const docElem = document.documentElement;
+    return {
+      top: box.top + window.pageYOffset - docElem.clientTop,
+      left: box.left + window.pageXOffset - docElem.clientLeft
+    };
+  }
 
-    _animateImageIn() {      
-      this.el.style.maxHeight = this.newHeight.toString()+'px';
-      this.el.style.maxWidth = this.newWidth.toString()+'px';
+  _animateImageIn() {
+    this.el.style.maxHeight = this.newHeight.toString()+'px';
+    this.el.style.maxWidth = this.newWidth.toString()+'px';
 
-      const animOptions = {
-        targets: this.el, // image
-        height: [this.originalHeight, this.newHeight],
-        width: [this.originalWidth, this.newWidth],
-        left:
-          M.getDocumentScrollLeft() +
-          this.windowWidth / 2 -
-          this._offset(this.placeholder).left -
-          this.newWidth / 2,
-        top:
-          M.getDocumentScrollTop() +
-          this.windowHeight / 2 -
-          this._offset(this.placeholder).top -
-          this.newHeight / 2,
-        duration: this.options.inDuration,
-        easing: 'easeOutQuad',
-        complete: () => {
-          this.doneAnimating = true;
-          // onOpenEnd callback
-          if (typeof this.options.onOpenEnd === 'function') {
-            this.options.onOpenEnd.call(this, this.el);
-          }
+    const animOptions = {
+      targets: this.el, // image
+      height: [this.originalHeight, this.newHeight],
+      width: [this.originalWidth, this.newWidth],
+      left:
+        Utils.getDocumentScrollLeft() +
+        this.windowWidth / 2 -
+        this._offset(this.placeholder).left -
+        this.newWidth / 2,
+      top:
+        Utils.getDocumentScrollTop() +
+        this.windowHeight / 2 -
+        this._offset(this.placeholder).top -
+        this.newHeight / 2,
+      duration: this.options.inDuration,
+      easing: 'easeOutQuad',
+      complete: () => {
+        this.doneAnimating = true;
+        // onOpenEnd callback
+        if (typeof this.options.onOpenEnd === 'function') {
+          this.options.onOpenEnd.call(this, this.el);
         }
-      };
-      // Override max-width or max-height if needed
-      //const elStyle = this.el.style;
-      //console.log('mh', elStyle.maxHeight, '->', this.newHeight);
-      //console.log('mw', elStyle.maxWidth, '->', this.newWidth);
-      //if (elStyle.maxWidth !== 'none') animOptions.maxWidth = this.newWidth;
-      //if (elStyle.maxHeight !== 'none') animOptions.maxHeight = this.newHeight;
-      //console.log('>>> animate');
-      //console.log(JSON.stringify(animOptions));
-      anim(animOptions);
-    }
+      }
+    };
+    // Override max-width or max-height if needed
+    //const elStyle = this.el.style;
+    //console.log('mh', elStyle.maxHeight, '->', this.newHeight);
+    //console.log('mw', elStyle.maxWidth, '->', this.newWidth);
+    //if (elStyle.maxWidth !== 'none') animOptions.maxWidth = this.newWidth;
+    //if (elStyle.maxHeight !== 'none') animOptions.maxHeight = this.newHeight;
+    //console.log('>>> animate');
+    //console.log(JSON.stringify(animOptions));
+    anim(animOptions);
+  }
 
-    _animateImageOut() {
-      const animOptions = {
-        targets: this.el,
-        width: this.originalWidth,
-        height: this.originalHeight,
-        left: 0,
-        top: 0,
-        duration: this.options.outDuration,
-        easing: 'easeOutQuad',
-        complete: () => {
-          this.placeholder.style.height = '';
-          this.placeholder.style.width = '';
-          this.placeholder.style.position = '';
-          this.placeholder.style.top = '';
-          this.placeholder.style.left = '';
-          // Revert to width or height attribute
-          if (this.attrWidth) this.el.setAttribute('width', this.attrWidth.toString());
-          if (this.attrHeight) this.el.setAttribute('height', this.attrHeight.toString());
-          this.el.removeAttribute('style');
-          this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles);
-          // Remove class
-          this.el.classList.remove('active');
-          this.doneAnimating = true;
-          // Remove overflow overrides on ancestors
-          this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = '');
-          // onCloseEnd callback
-          if (typeof this.options.onCloseEnd === 'function') {
-            this.options.onCloseEnd.call(this, this.el);
-          }
+  _animateImageOut() {
+    const animOptions = {
+      targets: this.el,
+      width: this.originalWidth,
+      height: this.originalHeight,
+      left: 0,
+      top: 0,
+      duration: this.options.outDuration,
+      easing: 'easeOutQuad',
+      complete: () => {
+        this.placeholder.style.height = '';
+        this.placeholder.style.width = '';
+        this.placeholder.style.position = '';
+        this.placeholder.style.top = '';
+        this.placeholder.style.left = '';
+        // Revert to width or height attribute
+        if (this.attrWidth) this.el.setAttribute('width', this.attrWidth.toString());
+        if (this.attrHeight) this.el.setAttribute('height', this.attrHeight.toString());
+        this.el.removeAttribute('style');
+        this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles);
+        // Remove class
+        this.el.classList.remove('active');
+        this.doneAnimating = true;
+        // Remove overflow overrides on ancestors
+        this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = '');
+        // onCloseEnd callback
+        if (typeof this.options.onCloseEnd === 'function') {
+          this.options.onCloseEnd.call(this, this.el);
         }
-      };
-      anim(animOptions);
-    }
+      }
+    };
+    anim(animOptions);
+  }
 
-    _updateVars() {
-      this.windowWidth = window.innerWidth;
-      this.windowHeight = window.innerHeight;
-      this.caption = this.el.getAttribute('data-caption') || '';
-    }
+  _updateVars() {
+    this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
+    this.caption = this.el.getAttribute('data-caption') || '';
+  }
 
-    open() {
-      this._updateVars();
-      this.originalWidth = this.el.getBoundingClientRect().width;
-      this.originalHeight = this.el.getBoundingClientRect().height;
-      // Set states
-      this.doneAnimating = false;
-      this.el.classList.add('active');
-      this.overlayActive = true;
-      // onOpenStart callback
-      if (typeof this.options.onOpenStart === 'function') {
-        this.options.onOpenStart.call(this, this.el);
-      }
-      // Set positioning for placeholder
-      this.placeholder.style.width = this.placeholder.getBoundingClientRect().width+'px';
-      this.placeholder.style.height = this.placeholder.getBoundingClientRect().height+'px';
-      this.placeholder.style.position = 'relative';
-      this.placeholder.style.top = '0';
-      this.placeholder.style.left = '0';
-      this._makeAncestorsOverflowVisible();
-      // Set css on origin
-      this.el.style.position = 'absolute';
-      this.el.style.zIndex = '1000';
-      this.el.style.willChange = 'left, top, width, height';
-      // Change from width or height attribute to css
-      this.attrWidth = this.el.getAttribute('width');
-      this.attrHeight = this.el.getAttribute('height');
-      if (this.attrWidth) {
-        this.el.style.width = this.attrWidth+'px';
-        this.el.removeAttribute('width');
-      }
-      if (this.attrHeight) {
-        this.el.style.width = this.attrHeight+'px';
-        this.el.removeAttribute('height');
-      }
-      // Add overlay
-      this._overlay = document.createElement('div');
-      this._overlay.id = 'materialbox-overlay';
-      this._overlay.style.opacity = '0';
-      this._overlay.addEventListener('click', e => {
-        if (this.doneAnimating) this.close();
-      }, {once: true});
-      // Put before in origin image to preserve z-index layering.
-      this.el.before(this._overlay);
-      // Set dimensions if needed
-      const overlayOffset = this._overlay.getBoundingClientRect();
-      this._overlay.style.width = this.windowWidth+'px';
-      this._overlay.style.height = this.windowHeight+'px';
-      this._overlay.style.left = -1 * overlayOffset.left+'px';
-      this._overlay.style.top = -1 * overlayOffset.top+'px';
-      anim.remove(this.el);
-      anim.remove(this._overlay);
-      // Animate Overlay
+  /**
+   * Open materialbox.
+   */
+  open = () => {
+    this._updateVars();
+    this.originalWidth = this.el.getBoundingClientRect().width;
+    this.originalHeight = this.el.getBoundingClientRect().height;
+    // Set states
+    this.doneAnimating = false;
+    this.el.classList.add('active');
+    this.overlayActive = true;
+    // onOpenStart callback
+    if (typeof this.options.onOpenStart === 'function') {
+      this.options.onOpenStart.call(this, this.el);
+    }
+    // Set positioning for placeholder
+    this.placeholder.style.width = this.placeholder.getBoundingClientRect().width+'px';
+    this.placeholder.style.height = this.placeholder.getBoundingClientRect().height+'px';
+    this.placeholder.style.position = 'relative';
+    this.placeholder.style.top = '0';
+    this.placeholder.style.left = '0';
+    this._makeAncestorsOverflowVisible();
+    // Set css on origin
+    this.el.style.position = 'absolute';
+    this.el.style.zIndex = '1000';
+    this.el.style.willChange = 'left, top, width, height';
+    // Change from width or height attribute to css
+    this.attrWidth = this.el.getAttribute('width');
+    this.attrHeight = this.el.getAttribute('height');
+    if (this.attrWidth) {
+      this.el.style.width = this.attrWidth+'px';
+      this.el.removeAttribute('width');
+    }
+    if (this.attrHeight) {
+      this.el.style.width = this.attrHeight+'px';
+      this.el.removeAttribute('height');
+    }
+    // Add overlay
+    this._overlay = document.createElement('div');
+    this._overlay.id = 'materialbox-overlay';
+    this._overlay.style.opacity = '0';
+    this._overlay.addEventListener('click', e => {
+      if (this.doneAnimating) this.close();
+    }, {once: true});
+    // Put before in origin image to preserve z-index layering.
+    this.el.before(this._overlay);
+    // Set dimensions if needed
+    const overlayOffset = this._overlay.getBoundingClientRect();
+    this._overlay.style.width = this.windowWidth+'px';
+    this._overlay.style.height = this.windowHeight+'px';
+    this._overlay.style.left = -1 * overlayOffset.left+'px';
+    this._overlay.style.top = -1 * overlayOffset.top+'px';
+    anim.remove(this.el);
+    anim.remove(this._overlay);
+    // Animate Overlay
+    anim({
+      targets: this._overlay,
+      opacity: 1,
+      duration: this.options.inDuration,
+      easing: 'easeOutQuad'
+    });
+    // Add and animate caption if it exists
+    if (this.caption !== '') {
+      if (this._photoCaption) anim.remove(this._photoCaption);
+      this._photoCaption = document.createElement('div');
+      this._photoCaption.classList.add('materialbox-caption');
+      this._photoCaption.innerText = this.caption;
+      document.body.append(this._photoCaption);
+      this._photoCaption.style.display = 'inline';
       anim({
-        targets: this._overlay,
+        targets: this._photoCaption,
         opacity: 1,
         duration: this.options.inDuration,
         easing: 'easeOutQuad'
       });
-      // Add and animate caption if it exists
-      if (this.caption !== '') {        
-        if (this._photoCaption) anim.remove(this._photoCaption);
-        this._photoCaption = document.createElement('div');
-        this._photoCaption.classList.add('materialbox-caption');
-        this._photoCaption.innerText = this.caption;
-        document.body.append(this._photoCaption);
-        this._photoCaption.style.display = 'inline';
-        anim({
-          targets: this._photoCaption,
-          opacity: 1,
-          duration: this.options.inDuration,
-          easing: 'easeOutQuad'
-        });
-      }
-
-      // Resize Image
-      const widthPercent = this.originalWidth / this.windowWidth;
-      const heightPercent = this.originalHeight / this.windowHeight;
-      this.newWidth = 0;
-      this.newHeight = 0;      
-      if (widthPercent > heightPercent) {
-        // Width first
-        const ratio = this.originalHeight / this.originalWidth;
-        this.newWidth = this.windowWidth * 0.9;
-        this.newHeight = this.windowWidth * 0.9 * ratio;
-      }
-      else {
-        // Height first
-        const ratio = this.originalWidth / this.originalHeight;
-        this.newWidth = this.windowHeight * 0.9 * ratio;
-        this.newHeight = this.windowHeight * 0.9;
-      }
-      this._animateImageIn();
+    }
 
-      // Handle Exit triggers
-      this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
-      this._handleWindowResizeBound = this._handleWindowResize.bind(this);
-      this._handleWindowEscapeBound = this._handleWindowEscape.bind(this);
-      window.addEventListener('scroll', this._handleWindowScrollBound);
-      window.addEventListener('resize', this._handleWindowResizeBound);
-      window.addEventListener('keyup', this._handleWindowEscapeBound);
+    // Resize Image
+    const widthPercent = this.originalWidth / this.windowWidth;
+    const heightPercent = this.originalHeight / this.windowHeight;
+    this.newWidth = 0;
+    this.newHeight = 0;
+    if (widthPercent > heightPercent) {
+      // Width first
+      const ratio = this.originalHeight / this.originalWidth;
+      this.newWidth = this.windowWidth * 0.9;
+      this.newHeight = this.windowWidth * 0.9 * ratio;
     }
+    else {
+      // Height first
+      const ratio = this.originalWidth / this.originalHeight;
+      this.newWidth = this.windowHeight * 0.9 * ratio;
+      this.newHeight = this.windowHeight * 0.9;
+    }
+    this._animateImageIn();
 
-    close() {
-      this._updateVars();
-      this.doneAnimating = false;
-      // onCloseStart callback
-      if (typeof this.options.onCloseStart === 'function') {
-        this.options.onCloseStart.call(this, this.el);
+    // Handle Exit triggers
+    window.addEventListener('scroll', this._handleWindowScroll);
+    window.addEventListener('resize', this._handleWindowResize);
+    window.addEventListener('keyup', this._handleWindowEscape);
+  }
+
+  /**
+   * Close materialbox.
+   */
+  close = () => {
+    this._updateVars();
+    this.doneAnimating = false;
+    // onCloseStart callback
+    if (typeof this.options.onCloseStart === 'function') {
+      this.options.onCloseStart.call(this, this.el);
+    }
+    anim.remove(this.el);
+    anim.remove(this._overlay);
+    if (this.caption !== '') anim.remove(this._photoCaption);
+    // disable exit handlers
+    window.removeEventListener('scroll', this._handleWindowScroll);
+    window.removeEventListener('resize', this._handleWindowResize);
+    window.removeEventListener('keyup', this._handleWindowEscape);
+    anim({
+      targets: this._overlay,
+      opacity: 0,
+      duration: this.options.outDuration,
+      easing: 'easeOutQuad',
+      complete: () => {
+        this.overlayActive = false;
+        this._overlay.remove();
       }
-      anim.remove(this.el);
-      anim.remove(this._overlay);
-      if (this.caption !== '') anim.remove(this._photoCaption);      
-      // disable exit handlers
-      window.removeEventListener('scroll', this._handleWindowScrollBound);
-      window.removeEventListener('resize', this._handleWindowResizeBound);
-      window.removeEventListener('keyup', this._handleWindowEscapeBound);
+    });
+    this._animateImageOut();
+    // Remove Caption + reset css settings on image
+    if (this.caption !== '') {
       anim({
-        targets: this._overlay,
+        targets: this._photoCaption,
         opacity: 0,
         duration: this.options.outDuration,
         easing: 'easeOutQuad',
         complete: () => {
-          this.overlayActive = false;
-          this._overlay.remove();
+          this._photoCaption.remove();
         }
       });
-      this._animateImageOut();
-      // Remove Caption + reset css settings on image
-      if (this.caption !== '') {
-        anim({
-          targets: this._photoCaption,
-          opacity: 0,
-          duration: this.options.outDuration,
-          easing: 'easeOutQuad',
-          complete: () => {
-            this._photoCaption.remove();
-          }
-        });
-      }
     }
   }
+}