@materializecss/materialize 2.0.3-beta → 2.0.4

package/src/forms.ts

@@ -1,132 +0,0 @@
-import { Utils } from "./utils";
-
-export class Forms {
-
-  /**
-   * Resizes the given TextArea after updating the
-   *  value content dynamically.
-   * @param textarea TextArea to be resized
-   */
-  static textareaAutoResize(textarea: HTMLTextAreaElement){
-    if (!textarea) {
-      console.error('No textarea element found');
-      return;
-    }
-    // Textarea Auto Resize
-    let hiddenDiv: HTMLDivElement = document.querySelector('.hiddendiv');
-    if (!hiddenDiv) {
-      hiddenDiv = document.createElement('div');
-      hiddenDiv.classList.add('hiddendiv', 'common');
-      document.body.append(hiddenDiv);
-    }
-    const style = getComputedStyle(textarea);
-    // Set font properties of hiddenDiv
-    const fontFamily = style.fontFamily; //textarea.css('font-family');
-    const fontSize = style.fontSize; //textarea.css('font-size');
-    const lineHeight = style.lineHeight; //textarea.css('line-height');
-    // Firefox can't handle padding shorthand.
-    const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top');
-    const paddingRight = style.paddingRight; //textarea.css('padding-right');
-    const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom');
-    const paddingLeft = style.paddingLeft; //textarea.css('padding-left');
-
-    if (fontSize) hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize);
-    if (fontFamily) hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily);
-    if (lineHeight) hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight);
-    if (paddingTop) hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop);
-    if (paddingRight) hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight);
-    if (paddingBottom) hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom);
-    if (paddingLeft) hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft);
-
-    // Set original-height, if none
-    if (!textarea.hasAttribute('original-height'))
-      textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
-
-    if (textarea.getAttribute('wrap') === 'off') {
-      hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal')
-      hiddenDiv.style.whiteSpace = 'pre';  //.css('white-space', 'pre');
-    }
-
-    hiddenDiv.innerText = textarea.value + '\n';
-
-    const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
-    hiddenDiv.innerHTML = content;
-
-    // When textarea is hidden, width goes crazy.
-    // Approximate with half of window size
-    if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
-      hiddenDiv.style.width = textarea.getBoundingClientRect().width +'px'; // ('width', textarea.width() + 'px');
-    }
-    else {
-      hiddenDiv.style.width = (window.innerWidth / 2)+'px' //css('width', window.innerWidth / 2 + 'px');
-    }
-
-    // Resize if the new height is greater than the
-    // original height of the textarea
-    const originalHeight = parseInt(textarea.getAttribute('original-height'));
-    const prevLength = parseInt(textarea.getAttribute('previous-length'));
-    if (isNaN(originalHeight)) return;
-    if (originalHeight <= hiddenDiv.clientHeight) {
-      textarea.style.height = hiddenDiv.clientHeight+'px';  //css('height', hiddenDiv.innerHeight() + 'px');
-    }
-    else if (textarea.value.length < prevLength) {
-    // In case the new height is less than original height, it
-    // means the textarea has less text than before
-    // So we set the height to the original one
-      textarea.style.height = originalHeight+'px';
-    }
-    textarea.setAttribute('previous-length', textarea.value.length.toString());
-  };
-
-  static Init(){
-    document.addEventListener("DOMContentLoaded", () => {
-
-      document.addEventListener('keyup', (e: KeyboardEvent) => {
-        const target = <HTMLInputElement>e.target;
-        // Radio and Checkbox focus class
-        if (target instanceof HTMLInputElement && ['radio','checkbox'].includes(target.type)) {
-          // TAB, check if tabbing to radio or checkbox.
-          if (Utils.keys.TAB.includes(e.key)) {
-            target.classList.add('tabbed');
-            target.addEventListener('blur', e => target.classList.remove('tabbed'), {once: true});
-          }
-        }
-      });
-
-      document.querySelectorAll('.materialize-textarea').forEach((textArea: HTMLTextAreaElement) => {
-          Forms.textareaAutoResize(textArea);
-      });
-
-      // File Input Path
-      document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput: HTMLInputElement) => {
-          Forms.InitFileInputPath(fileInput);
-      });
-
-    });
-  }
-
-  static InitTextarea(textarea: HTMLTextAreaElement){
-        // Save Data in Element
-        textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
-        textarea.setAttribute('previous-length', textarea.value.length.toString());
-        Forms.textareaAutoResize(textarea);
-
-        textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea));
-        textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea));
-  }
-
-  static InitFileInputPath(fileInput: HTMLInputElement){
-        fileInput.addEventListener('change', e => {
-          const fileField = fileInput.closest('.file-field');
-          const pathInput = <HTMLInputElement>fileField.querySelector('input.file-path');
-          const files = fileInput.files;
-          const filenames = [];
-          for (let i = 0; i < files.length; i++) {
-            filenames.push(files[i].name);
-          }
-          pathInput.value = filenames.join(', ');
-          pathInput.dispatchEvent(new Event('change',{bubbles:true, cancelable:true, composed:true}));
-        });
-  }
-  
-}

package/src/global.ts

@@ -1,114 +0,0 @@
-import { Autocomplete } from './autocomplete';
-import { FloatingActionButton } from './buttons';
-import { Cards } from './cards';
-import { Carousel } from './carousel';
-import { CharacterCounter } from './characterCounter';
-import { Chips } from './chips';
-import { Collapsible } from './collapsible';
-import { Datepicker } from './datepicker';
-import { Dropdown } from './dropdown';
-import { Forms } from './forms';
-import { Materialbox } from './materialbox';
-import { Modal } from './modal';
-import { Parallax } from './parallax';
-import { Pushpin } from './pushpin';
-import { ScrollSpy } from './scrollspy';
-import { FormSelect } from './select';
-import { Sidenav } from './sidenav';
-import { Slider } from './slider';
-import { Tabs } from './tabs';
-import { TapTarget } from './tapTarget';
-import { Timepicker } from './timepicker';
-import { Toast, ToastOptions } from './toasts';
-import { Tooltip } from './tooltip';
-import { Waves } from './waves';
-import { Range } from './range';
-import { Utils } from './utils';
-
-export class M {
-  static version = '2.0.3-beta';
-
-  static Autocomplete: typeof Autocomplete = Autocomplete;
-  static Tabs: typeof Tabs = Tabs;
-  static Carousel: typeof Carousel = Carousel;
-  static Dropdown: typeof Dropdown = Dropdown;
-  static FloatingActionButton: typeof FloatingActionButton = FloatingActionButton;
-  static Chips: typeof Chips = Chips;
-  static Collapsible: typeof Collapsible = Collapsible;
-  static Datepicker: typeof Datepicker = Datepicker;
-  static CharacterCounter: typeof CharacterCounter = CharacterCounter;
-  static Forms: typeof Forms = Forms;
-  static FormSelect: typeof FormSelect = FormSelect;
-  static Modal: typeof Modal = Modal;
-  static Pushpin: typeof Pushpin = Pushpin;
-  static Materialbox: typeof Materialbox = Materialbox;
-  static Parallax: typeof Parallax = Parallax;
-  static Slider: typeof Slider = Slider;
-  static Timepicker: typeof Timepicker = Timepicker;
-  /** Creates a toast. */
-  static toast: (opt: Partial<ToastOptions>) => Toast = (opt) => new Toast(opt) ;
-  static Tooltip: typeof Tooltip = Tooltip;
-  static Sidenav: typeof Sidenav = Sidenav;
-  static TapTarget: typeof TapTarget = TapTarget;
-  static ScrollSpy: typeof ScrollSpy = ScrollSpy;
-  static Range: typeof Range = Range;
-  static Waves: typeof Waves = Waves;
-  static Utils: typeof Utils = Utils;
-
-  static {
-    document.addEventListener('keydown', Utils.docHandleKeydown, true);
-    document.addEventListener('keyup', Utils.docHandleKeyup, true);
-    document.addEventListener('focus', Utils.docHandleFocus, true);
-    document.addEventListener('blur', Utils.docHandleBlur, true);
-    Cards.Init();
-    Forms.Init();
-    Chips.Init();
-    Waves.Init();
-    Range.Init();
-  }
-
-  /**
-   * Automatically initialize components.
-   * @param context Root element to initialize. Defaults to `document.body`.
-   */
-  static AutoInit(context: HTMLElement = document.body) {
-    let registry = {
-      Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
-      Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
-      Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
-      Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
-      Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'),
-      Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
-      Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
-      Modal: context.querySelectorAll('.modal:not(.no-autoinit)'),
-      Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
-      Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
-      ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
-      FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
-      Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
-      Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
-      TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
-      Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
-      Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
-      FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)'),
-    };
-    M.Autocomplete.init(registry.Autocomplete, {});
-    M.Carousel.init(registry.Carousel, {});
-    M.Chips.init(registry.Chips, {});
-    M.Collapsible.init(registry.Collapsible, {});
-    M.Datepicker.init(registry.Datepicker, {});
-    M.Dropdown.init(registry.Dropdown, {});
-    M.Materialbox.init(registry.Materialbox, {});
-    M.Modal.init(registry.Modal, {});
-    M.Parallax.init(registry.Parallax, {});
-    M.Pushpin.init(registry.Pushpin, {});
-    M.ScrollSpy.init(registry.ScrollSpy, {});
-    M.FormSelect.init(registry.FormSelect, {});
-    M.Sidenav.init(registry.Sidenav, {});
-    M.Tabs.init(registry.Tabs, {});
-    M.TapTarget.init(registry.TapTarget, {});
-    M.Timepicker.init(registry.Timepicker, {});
-    M.Tooltip.init(registry.Tooltip, {});
-    M.FloatingActionButton.init(registry.FloatingActionButton, {});
-  }
-}

package/src/index.ts

@@ -1,26 +0,0 @@
-export * from './global';
-export { Autocomplete } from './autocomplete';
-export { FloatingActionButton } from './buttons';
-export { Cards } from './cards';
-export { Carousel } from './carousel';
-export { CharacterCounter } from './characterCounter';
-export { Chips } from './chips';
-export { Collapsible } from './collapsible';
-export { Datepicker } from './datepicker';
-export { Dropdown } from './dropdown';
-export { Forms } from './forms';
-export { Materialbox } from './materialbox';
-export { Modal } from './modal';
-export { Parallax } from './parallax';
-export { Pushpin } from './pushpin';
-export { ScrollSpy } from './scrollspy';
-export { FormSelect } from './select';
-export { Sidenav } from './sidenav';
-export { Slider } from './slider';
-export { Tabs } from './tabs';
-export { TapTarget } from './tapTarget';
-export { Timepicker } from './timepicker';
-export { Toast } from './toasts';
-export { Tooltip } from './tooltip';
-export { Waves } from './waves';
-export { Range } from './range';

package/src/materialbox.ts

@@ -1,404 +0,0 @@
-import anim from "animejs";
-
-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,
-  onOpenEnd: null,
-  onCloseStart: null,
-  onCloseEnd: null
-};
-
-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: HTMLElement, options: Partial<MaterialboxOptions>) {
-    super(el, options, Materialbox);
-    (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();
-  }
-
-  static get defaults(): MaterialboxOptions {
-    return _defaults;
-  }
-
-  /**
-   * 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);
-  }
-
-  static getInstance(el: HTMLElement): Materialbox {
-    return (el as any).M_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');
-  }
-
-  _setupEventHandlers() {
-    this.el.addEventListener('click', this._handleMaterialboxClick);
-  }
-
-  _removeEventHandlers() {
-    this.el.removeEventListener('click', this._handleMaterialboxClick);
-  }
-
-  _handleMaterialboxClick = () => {
-    // If already modal, return to original
-    if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
-      this.close();
-    else
-      this.open();
-  }
-
-  _handleWindowScroll = () => {
-    if (this.overlayActive) this.close();
-  }
-
-  _handleWindowResize = () => {
-    if (this.overlayActive) this.close();
-  }
-
-  _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: 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';
-
-    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);
-  }
-
-  _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);
-  }
-
-  _updateVars() {
-    this.windowWidth = window.innerWidth;
-    this.windowHeight = window.innerHeight;
-    this.caption = this.el.getAttribute('data-caption') || '';
-  }
-
-  /**
-   * 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._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
-    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();
-      }
-    });
-    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();
-        }
-      });
-    }
-  }
-}