window.js

const config = { attributes: true, childList: true, subtree: true };
let observer;
/**
 * Class representing an iframe window from Contentstack UI. Not available for Custom Widgets.
 */

class Window {
  /**
   * @hideconstructor
   */
  constructor(connection, type, emitter, state = 'half_width') {
    this._connection = connection;
    this._autoResizingEnabled = false;
    this._resizingEnabled = false;
    this.type = type;
    this.state = state;
    this._emitter = emitter;
  }

  /**
   * This method activates the resize button that gives you the provision to resize the window size of your Dashboard Widget.
   * @return {external:Promise}  A promise object which will resolve when a resize button is visible on the Dashboard Widget.
   */
  enableResizing() {
    if (this.type !== 'DASHBOARD') { return Promise.resolve(); }
    this._resizingEnabled = true;
    return this._connection.sendToParent('window', { action: 'enableResizing' });
  }


  /**
   * This function executes the callback function whenever a Dashboard Widget extension is maximized or minimized. Only applicable on Dashboard Widget extensions.
   * @param {function} callback Function to be called when a Dashboard Widget extension is maximized or minimized
   * @return {boolean} Will return true
   */

  onDashboardResize(callback) {
    const windowObj = this;
    if (this.type !== 'DASHBOARD') {
      return false;
    }
    if (callback && typeof (callback) === 'function') {
      windowObj._emitter.on('dashboardResize', (event) => {
        windowObj.state = event.state;
        callback(event.state);
      });
    } else {
      throw Error('Callback must be a function');
    }
    return true;
  }


  /**
   * This method updates the extension height on Contentstack UI.
   * If the ‘height’ argument is not passed, it will calculate the scroll height and set the height of extension window accordingly.
   * @param {string|number} height Desired height of the iframe window
   * @return {external:Promise}  A promise object which will be resolved when Contentstack UI sends an acknowledgement stating that the height has been updated.
   */
  updateHeight(height) {
    if (this.type === 'DASHBOARD' && this.state === 'half_width') { return Promise.resolve(); }
    if (!height || isNaN(height)) {
      this._height = Math.ceil(document.documentElement.getBoundingClientRect().height);
    } else if (this._height === height) {
      return Promise.resolve();
    } else {
      this._height = height;
    }
    return this._connection.sendToParent('resize', this._height);
  }

  /**
   * This method enables auto resizing of the extension height.
   * @return {Window}.
   */
  enableAutoResizing() {
    if (this._autoResizingEnabled || (this.state === 'half_width' && this.type === 'DASHBOARD')) {
      return this;
    }
    this._autoResizingEnabled = true;
    observer = new MutationObserver(this.updateHeight.bind(this));
    observer.observe(window.document.body, config);
    return this;
  }

  /**
   * This method disables auto resizing of the extension height.
   * @return {Window}.
   */
  disableAutoResizing() {
    if (!this._autoResizingEnabled) {
      return this;
    }
    this._autoResizingEnabled = false;
    observer.disconnect();
    return this;
  }
}

export default Window;