@deephaven/golden-layout 0.19.2-beta.4 → 0.20.0

package/dist/LayoutManager.js

@@ -1,106 +1,130 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import $ from 'jquery';
-import lm from './base.js';
+import lm from "./base.js";
+import { defaultConfig } from "./config/index.js";
+import { BrowserPopout, DragSource, DragSourceFromEvent, DropTargetIndicator, TransitionIndicator } from "./controls/index.js";
+import { ConfigurationError } from "./errors/index.js";
+import { AbstractContentItem, isStack, Component, Root, RowOrColumn, Stack } from "./items/index.js";
+import { minifyConfig, unminifyConfig, EventEmitter, EventHub, ReactComponentHandler, getQueryStringParam, getUniqueId, stripTags } from "./utils/index.js";
+
 /**
  * The main class that will be exposed as GoldenLayout.
  *
- * @public
- * @constructor
- * @param {GoldenLayout config} config
- * @param {[DOM element container]} container Can be a jQuery selector string or a Dom element. Defaults to body
- *
- * @returns {VOID}
+ * @param config
+ * @param container Can be a jQuery selector string or a Dom element. Defaults to body
  */
+export default class LayoutManager extends EventEmitter {
+  /**
+   * Hook that allows to access private classes
+   */
 
-var LayoutManager = function LayoutManager(config, container) {
-  if (!$ || typeof $.noConflict !== 'function') {
-    var errorMsg = 'jQuery is missing as dependency for GoldenLayout. ';
-    errorMsg += 'Please either expose $ on GoldenLayout\'s scope (e.g. window) or add "jquery" to ';
-    errorMsg += 'your paths when using RequireJS/AMD';
-    throw new Error(errorMsg);
+  /**
+   * Takes a GoldenLayout configuration object and
+   * replaces its keys and values recursively with
+   * one letter codes
+   *
+   * @param config A GoldenLayout config object
+   * @returns minified config
+   */
+  static minifyConfig(config) {
+    return minifyConfig(config);
   }
+  /**
+   * Takes a configuration Object that was previously minified
+   * using minifyConfig and returns its original version
+   *
+   * @param minifiedConfig
+   * @returns the original configuration
+   */
+
 
-  lm.utils.EventEmitter.call(this);
-  this.isInitialised = false;
-  this._isFullPage = false;
-  this._resizeTimeoutId = null;
-  this._components = {
-    'lm-react-component': lm.utils.ReactComponentHandler
-  };
-  this._fallbackComponent = undefined;
-  this._itemAreas = [];
-  this._resizeFunction = lm.utils.fnBind(this._onResize, this);
-  this._unloadFunction = lm.utils.fnBind(this._onUnload, this);
-  this._windowBlur = this._windowBlur.bind(this);
-  this._windowFocus = this._windowFocus.bind(this);
-  this._maximisedItem = null;
-  this._maximisePlaceholder = $('<div class="lm_maximise_place"></div>');
-  this._creationTimeoutPassed = false;
-  this._subWindowsCreated = false;
-  this._dragSources = [];
-  this._updatingColumnsResponsive = false;
-  this._firstLoad = true;
-  this.width = null;
-  this.height = null;
-  this.root = null;
-  this.openPopouts = [];
-  this.selectedItem = null;
-  this.isSubWindow = false;
-  this.eventHub = new lm.utils.EventHub(this);
-  this.config = this._createConfig(config);
-  this.container = container;
-  this.dropTargetIndicator = null;
-  this.transitionIndicator = null;
-  this.tabDropPlaceholder = $('<div class="lm_drop_tab_placeholder"></div>');
-
-  if (this.isSubWindow === true) {
-    $('body').css('visibility', 'hidden');
+  static unminifyConfig(config) {
+    return unminifyConfig(config);
   }
 
-  this._typeToItem = {
-    column: lm.utils.fnBind(lm.items.RowOrColumn, this, [true]),
-    row: lm.utils.fnBind(lm.items.RowOrColumn, this, [false]),
-    stack: lm.items.Stack,
-    component: lm.items.Component
-  };
-};
-/**
- * Hook that allows to access private classes
- */
+  constructor(config, container) {
+    super();
 
+    _defineProperty(this, "isInitialised", false);
 
-LayoutManager.__lm = lm;
-/**
- * Takes a GoldenLayout configuration object and
- * replaces its keys and values recursively with
- * one letter codes
- *
- * @static
- * @public
- * @param   {Object} config A GoldenLayout config object
- *
- * @returns {Object} minified config
- */
+    _defineProperty(this, "_isFullPage", false);
 
-LayoutManager.minifyConfig = function (config) {
-  return new lm.utils.ConfigMinifier().minifyConfig(config);
-};
-/**
- * Takes a configuration Object that was previously minified
- * using minifyConfig and returns its original version
- *
- * @static
- * @public
- * @param   {Object} minifiedConfig
- *
- * @returns {Object} the original configuration
- */
+    _defineProperty(this, "_resizeTimeoutId", void 0);
+
+    _defineProperty(this, "_components", {
+      'lm-react-component': ReactComponentHandler
+    });
+
+    _defineProperty(this, "_fallbackComponent", void 0);
+
+    _defineProperty(this, "_itemAreas", []);
+
+    _defineProperty(this, "_maximisedItem", null);
+
+    _defineProperty(this, "_maximisePlaceholder", $('<div class="lm_maximise_place"></div>'));
+
+    _defineProperty(this, "_creationTimeoutPassed", false);
+
+    _defineProperty(this, "_subWindowsCreated", false);
+
+    _defineProperty(this, "_dragSources", []);
+
+    _defineProperty(this, "_updatingColumnsResponsive", false);
+
+    _defineProperty(this, "_firstLoad", true);
+
+    _defineProperty(this, "width", null);
 
+    _defineProperty(this, "height", null);
 
-LayoutManager.unminifyConfig = function (config) {
-  return new lm.utils.ConfigMinifier().unminifyConfig(config);
-};
+    _defineProperty(this, "root", void 0);
 
-lm.utils.copy(LayoutManager.prototype, {
+    _defineProperty(this, "openPopouts", []);
+
+    _defineProperty(this, "selectedItem", null);
+
+    _defineProperty(this, "isSubWindow", false);
+
+    _defineProperty(this, "eventHub", new EventHub(this));
+
+    _defineProperty(this, "config", void 0);
+
+    _defineProperty(this, "container", void 0);
+
+    _defineProperty(this, "_originalContainer", void 0);
+
+    _defineProperty(this, "dropTargetIndicator", null);
+
+    _defineProperty(this, "transitionIndicator", null);
+
+    _defineProperty(this, "tabDropPlaceholder", $('<div class="lm_drop_tab_placeholder"></div>'));
+
+    _defineProperty(this, "_typeToItem", void 0);
+
+    this._onResize = this._onResize.bind(this);
+    this._onUnload = this._onUnload.bind(this);
+    this._windowBlur = this._windowBlur.bind(this);
+    this._windowFocus = this._windowFocus.bind(this);
+    this.config = this._createConfig(config);
+    this._originalContainer = container;
+    this.container = this._getContainer();
+
+    if (this.isSubWindow) {
+      $('body').css('visibility', 'hidden');
+    }
+
+    this._typeToItem = {
+      column: RowOrColumn.bind(this, true),
+      row: RowOrColumn.bind(this, false),
+      stack: Stack,
+      component: Component
+    };
+  }
   /**
    * Register a component with the layout manager. If a configuration node
    * of type component is reached it will look up componentName and create the
@@ -112,13 +136,13 @@ lm.utils.copy(LayoutManager.prototype, {
    *		componentState: { "feedTopic": "us-bluechips" }
    *  }
    *
-   * @public
-   * @param   {String} name
-   * @param   {Function} constructor
-   *
-   * @returns {Function} cleanup function to deregister component
+   * @param name
+   * @param constructor
+   * @returns cleanup function to deregister component
    */
-  registerComponent: function registerComponent(name, constructor) {
+
+
+  registerComponent(name, constructor) {
     if (typeof constructor !== 'function' && (constructor == null || constructor.render == null || typeof constructor.render !== 'function')) {
       throw new Error('Please register a constructor function');
     }
@@ -129,43 +153,38 @@ lm.utils.copy(LayoutManager.prototype, {
 
     this._components[name] = constructor;
 
-    function cleanup() {
+    var cleanup = () => {
       if (this._components[name] === undefined) {
         throw new Error('Component ' + name + ' is not registered');
       }
 
       delete this._components[name];
-    }
-
-    return cleanup.bind(this);
-  },
+    };
 
+    return cleanup;
+  }
   /**
    * Set a fallback component to be rendered in place of unregistered components
-   *
-   * @public
-   * @param   {Function} constructor
-   *
-   * @returns {void}
+   * @param constructor
    */
-  setFallbackComponent: function setFallbackComponent(constructor) {
-    this._fallbackComponent = constructor;
-  },
 
+
+  setFallbackComponent(constructor) {
+    this._fallbackComponent = constructor;
+  }
   /**
    * Creates a layout configuration object based on the the current state
-   *
-   * @public
-   * @returns {Object} GoldenLayout configuration
+   * @param root
+   * @returns GoldenLayout configuration
    */
-  toConfig: function toConfig(root) {
-    var config, _next, i;
 
+
+  toConfig(root) {
     if (this.isInitialised === false) {
       throw new Error("Can't create config, layout not yet initialised");
     }
 
-    if (root && !(root instanceof lm.items.AbstractContentItem)) {
+    if (root && !(root instanceof AbstractContentItem)) {
       throw new Error('Root must be a ContentItem');
     }
     /*
@@ -173,23 +192,20 @@ lm.utils.copy(LayoutManager.prototype, {
      */
 
 
-    config = {
-      settings: lm.utils.copy({}, this.config.settings),
-      dimensions: lm.utils.copy({}, this.config.dimensions),
-      labels: lm.utils.copy({}, this.config.labels)
+    var config = {
+      settings: _objectSpread({}, this.config.settings),
+      dimensions: _objectSpread({}, this.config.dimensions),
+      labels: _objectSpread({}, this.config.labels),
+      content: []
     };
     /*
      * Content
      */
 
-    config.content = [];
-
-    _next = function next(configNode, item) {
-      var key, i;
-
-      for (key in item.config) {
-        if (key !== 'content') {
-          configNode[key] = item.config[key];
+    var next = function next(configNode, item) {
+      for (var _key in item.config) {
+        if (_key !== 'content') {
+          configNode[_key] = item.config[_key];
         }
       }
 
@@ -201,20 +217,19 @@ lm.utils.copy(LayoutManager.prototype, {
       if (item.contentItems.length) {
         configNode.content = [];
 
-        for (i = 0; i < item.contentItems.length; i++) {
+        for (var i = 0; i < item.contentItems.length; i++) {
           configNode.content[i] = {};
-
-          _next(configNode.content[i], item.contentItems[i]);
+          next(configNode.content[i], item.contentItems[i]);
         }
       }
     };
 
     if (root) {
-      _next(config, {
+      next(config, {
         contentItems: [root]
       });
     } else {
-      _next(config, this.root);
+      next(config, this.root);
     }
     /*
      * Retrieve config for subwindows
@@ -225,7 +240,7 @@ lm.utils.copy(LayoutManager.prototype, {
 
     config.openPopouts = [];
 
-    for (i = 0; i < this.openPopouts.length; i++) {
+    for (var i = 0; i < this.openPopouts.length; i++) {
       config.openPopouts.push(this.openPopouts[i].toConfig());
     }
     /*
@@ -233,22 +248,18 @@ lm.utils.copy(LayoutManager.prototype, {
      */
 
 
-    config.maximisedItemId = this._maximisedItem ? '__glMaximised' : null;
+    config.maximisedItemId = this._maximisedItem ? '__glMaximised' : undefined;
     return config;
-  },
-
+  }
   /**
    * Returns a previously registered component
-   *
-   * @public
-   * @param   {String} name The name used
-   *
-   * @returns {Function}
+   * @param name The name used
    */
-  getComponent: function getComponent(name) {
-    return this._components[name];
-  },
 
+
+  getComponent(name) {
+    return this._components[name];
+  }
   /**
    * Returns a fallback component to render in place of unregistered components
    *
@@ -256,10 +267,11 @@ lm.utils.copy(LayoutManager.prototype, {
    *
    * @returns {Function}
    */
-  getFallbackComponent: function getFallbackComponent() {
-    return this._fallbackComponent;
-  },
 
+
+  getFallbackComponent() {
+    return this._fallbackComponent;
+  }
   /**
    * Creates the actual layout. Must be called after all initial components
    * are registered. Recurses through the configuration and sets up
@@ -267,12 +279,10 @@ lm.utils.copy(LayoutManager.prototype, {
    *
    * If called before the document is ready it adds itself as a listener
    * to the document.ready event
-   *
-   * @public
-   *
-   * @returns {void}
    */
-  init: function init() {
+
+
+  init() {
     /**
      * Create the popout windows straight away. If popouts are blocked
      * an error is thrown on the same 'thread' rather than a timeout and can
@@ -289,7 +299,7 @@ lm.utils.copy(LayoutManager.prototype, {
 
 
     if (document.readyState === 'loading' || document.body === null) {
-      $(document).ready(lm.utils.fnBind(this.init, this));
+      $(document).ready(this.init.bind(this));
       return;
     }
     /**
@@ -300,7 +310,7 @@ lm.utils.copy(LayoutManager.prototype, {
 
 
     if (this.isSubWindow === true && this._creationTimeoutPassed === false) {
-      setTimeout(lm.utils.fnBind(this.init, this), 7);
+      setTimeout(this.init.bind(this), 7);
       this._creationTimeoutPassed = true;
       return;
     }
@@ -311,8 +321,8 @@ lm.utils.copy(LayoutManager.prototype, {
 
     this._setContainer();
 
-    this.dropTargetIndicator = new lm.controls.DropTargetIndicator(this.container);
-    this.transitionIndicator = new lm.controls.TransitionIndicator();
+    this.dropTargetIndicator = new DropTargetIndicator();
+    this.transitionIndicator = new TransitionIndicator();
     this.updateSize();
 
     this._create(this.config);
@@ -324,91 +334,84 @@ lm.utils.copy(LayoutManager.prototype, {
     this._adjustColumnsResponsive();
 
     this.emit('initialised');
-  },
-
+  }
   /**
    * Updates the layout managers size
-   *
-   * @public
-   * @param   {[int]} width  height in pixels
-   * @param   {[int]} height width in pixels
-   *
-   * @returns {void}
+   * @param width width in pixels
+   * @param height height in pixels
    */
-  updateSize: function updateSize(width, height) {
-    if (arguments.length === 2) {
-      this.width = width;
-      this.height = height;
-    } else {
-      this.width = this.container.width();
-      this.height = this.container.height();
-    }
+
+
+  updateSize(width, height) {
+    var _ref, _ref2;
+
+    this.width = (_ref = width !== null && width !== void 0 ? width : this.container.width()) !== null && _ref !== void 0 ? _ref : 0;
+    this.height = (_ref2 = height !== null && height !== void 0 ? height : this.container.height()) !== null && _ref2 !== void 0 ? _ref2 : 0;
 
     if (this.isInitialised === true) {
       this.root.callDownwards('setSize', [this.width, this.height]);
 
       if (this._maximisedItem) {
-        this._maximisedItem.element.width(this.container.width());
+        var _this$container$width, _this$container$heigh;
 
-        this._maximisedItem.element.height(this.container.height());
+        this._maximisedItem.element.width((_this$container$width = this.container.width()) !== null && _this$container$width !== void 0 ? _this$container$width : 0);
+
+        this._maximisedItem.element.height((_this$container$heigh = this.container.height()) !== null && _this$container$heigh !== void 0 ? _this$container$heigh : 0);
 
         this._maximisedItem.callDownwards('setSize');
       }
 
       this._adjustColumnsResponsive();
     }
-  },
-
+  }
   /**
    * Destroys the LayoutManager instance itself as well as every ContentItem
    * within it. After this is called nothing should be left of the LayoutManager.
-   *
-   * @public
-   * @returns {void}
    */
-  destroy: function destroy() {
-    if (this.isInitialised === false) {
+
+
+  destroy() {
+    var _this$dropTargetIndic, _this$transitionIndic;
+
+    if (this.isInitialised === false || !this.root) {
       return;
     }
 
     this._onUnload();
 
-    $(window).off('resize', this._resizeFunction);
-    $(window).off('unload beforeunload', this._unloadFunction);
+    $(window).off('resize', this._onResize);
+    $(window).off('unload beforeunload', this._onUnload);
     $(window).off('blur.lm').off('focus.lm');
     this.root.callDownwards('_$destroy', [], true);
     this.root.contentItems = [];
     this.tabDropPlaceholder.remove();
-    this.dropTargetIndicator.destroy();
-    this.transitionIndicator.destroy();
+    (_this$dropTargetIndic = this.dropTargetIndicator) === null || _this$dropTargetIndic === void 0 ? void 0 : _this$dropTargetIndic.destroy();
+    (_this$transitionIndic = this.transitionIndicator) === null || _this$transitionIndic === void 0 ? void 0 : _this$transitionIndic.destroy();
     this.eventHub.destroy();
 
     this._dragSources.forEach(function (dragSource) {
       dragSource._dragListener.destroy();
-
-      dragSource._element = null;
-      dragSource._itemConfig = null;
-      dragSource._dragListener = null;
     });
 
     this._dragSources = [];
-  },
-
+  }
   /**
    * Recursively creates new item tree structures based on a provided
    * ItemConfiguration object
    *
    * @public
-   * @param   {Object} config ItemConfig
-   * @param   {[ContentItem]} parent The item the newly created item should be a child of
+   * @param config ItemConfig
+   * @param parent The item the newly created item should be a child of
    *
-   * @returns {lm.items.ContentItem}
+   * @returns Created item
    */
-  createContentItem: function createContentItem(config, parent) {
+
+
+  createContentItem(config, parent) {
     var typeErrorMsg, contentItem;
 
     if (typeof config.type !== 'string') {
-      throw new lm.errors.ConfigurationError("Missing parameter 'type'", config);
+      throw new ConfigurationError("Missing parameter 'type'", config);
     }
 
     if (config.type === 'react-component') {
@@ -417,8 +420,8 @@ lm.utils.copy(LayoutManager.prototype, {
     }
 
     if (!this._typeToItem[config.type]) {
-      typeErrorMsg = "Unknown type '" + config.type + "'. " + 'Valid types are ' + lm.utils.objectKeys(this._typeToItem).join(',');
-      throw new lm.errors.ConfigurationError(typeErrorMsg);
+      typeErrorMsg = "Unknown type '" + config.type + "'. " + 'Valid types are ' + Object.keys(this._typeToItem).join(',');
+      throw new ConfigurationError(typeErrorMsg);
     }
     /**
      * We add an additional stack around every component that's not within a stack anyways.
@@ -427,9 +430,9 @@ lm.utils.copy(LayoutManager.prototype, {
 
     if ( // If this is a component
     config.type === 'component' && // and it's not already within a stack
-    !(parent instanceof lm.items.Stack) && // and we have a parent
+    !(parent instanceof Stack) && // and we have a parent
     !!parent && // and it's not the topmost item in a new window
-    !(this.isSubWindow === true && parent instanceof lm.items.Root)) {
+    !(this.isSubWindow === true && parent instanceof Root)) {
       config = {
         type: 'stack',
         width: config.width,
@@ -440,33 +443,30 @@ lm.utils.copy(LayoutManager.prototype, {
 
     contentItem = new this._typeToItem[config.type](this, config, parent);
     return contentItem;
-  },
-
+  }
   /**
   * Creates a popout window with the specified content and dimensions
   *
-  * @param   {Object|lm.itemsAbstractContentItem} configOrContentItem
-  * @param   {[Object]} dimensions A map with width, height, left and top
-  * @param    {[String]} parentId the id of the element this item will be appended to
+  * @param configOrContentItem
+  * @param dimensions A map with width, height, left and top
+  * @param parentId the id of the element this item will be appended to
   *                             when popIn is called
-  * @param    {[Number]} indexInParent The position of this item within its parent element
-   * @returns {lm.controls.BrowserPopout}
+  * @param indexInParent The position of this item within its parent element
+   * @returns Created popout
   */
-  createPopout: function createPopout(configOrContentItem, dimensions, parentId, indexInParent) {
-    var config = configOrContentItem,
-        isItem = configOrContentItem instanceof lm.items.AbstractContentItem,
-        self = this,
-        windowLeft,
-        windowTop,
-        offset,
-        parent,
-        child,
-        browserPopout;
-    parentId = parentId || null;
+
+
+  createPopout(configOrContentItem, dimensions, parentId, indexInParent) {
+    var config = configOrContentItem;
+    var configArray = [];
+    var isItem = configOrContentItem instanceof AbstractContentItem;
+    var self = this;
 
     if (isItem) {
-      config = this.toConfig(configOrContentItem).content;
-      parentId = lm.utils.getUniqueId();
+      var _parent2;
+
+      configArray = this.toConfig(configOrContentItem).content;
+      parentId = getUniqueId();
       /**
        * If the item is the only component within a stack or for some
        * other reason the only child of its parent the parent will be destroyed
@@ -476,34 +476,45 @@ lm.utils.copy(LayoutManager.prototype, {
        * that will remain after the item is being popped out
        */
 
-      parent = configOrContentItem.parent;
-      child = configOrContentItem;
+      var parent = configOrContentItem.parent;
+      var child = configOrContentItem;
+
+      while (((_parent = parent) === null || _parent === void 0 ? void 0 : _parent.contentItems.length) === 1 && !parent.isRoot) {
+        var _parent;
 
-      while (parent.contentItems.length === 1 && !parent.isRoot) {
+        child = parent;
         parent = parent.parent;
-        child = child.parent;
       }
 
-      parent.addId(parentId);
+      (_parent2 = parent) === null || _parent2 === void 0 ? void 0 : _parent2.addId(parentId);
 
-      if (isNaN(indexInParent)) {
-        indexInParent = lm.utils.indexOf(child, parent.contentItems);
+      if (indexInParent == undefined || Number.isNaN(indexInParent)) {
+        var _parent3;
+
+        indexInParent = (_parent3 = parent) === null || _parent3 === void 0 ? void 0 : _parent3.contentItems.indexOf(child);
       }
     } else {
-      if (!(config instanceof Array)) {
-        config = [config];
+      if (!(configOrContentItem instanceof Array)) {
+        configArray = [configOrContentItem];
+      } else {
+        configArray = configOrContentItem;
       }
     }
 
     if (!dimensions && isItem) {
-      windowLeft = window.screenX || window.screenLeft;
-      windowTop = window.screenY || window.screenTop;
-      offset = configOrContentItem.element.offset();
+      var _configOrContentItem$, _configOrContentItem$2, _configOrContentItem$3;
+
+      var windowLeft = window.screenX || window.screenLeft;
+      var windowTop = window.screenY || window.screenTop;
+      var offset = (_configOrContentItem$ = configOrContentItem.element.offset()) !== null && _configOrContentItem$ !== void 0 ? _configOrContentItem$ : {
+        left: 0,
+        top: 0
+      };
       dimensions = {
         left: windowLeft + offset.left,
         top: windowTop + offset.top,
-        width: configOrContentItem.element.width(),
-        height: configOrContentItem.element.height()
+        width: (_configOrContentItem$2 = configOrContentItem.element.width()) !== null && _configOrContentItem$2 !== void 0 ? _configOrContentItem$2 : 0,
+        height: (_configOrContentItem$3 = configOrContentItem.element.height()) !== null && _configOrContentItem$3 !== void 0 ? _configOrContentItem$3 : 0
       };
     }
 
@@ -520,7 +531,11 @@ lm.utils.copy(LayoutManager.prototype, {
       configOrContentItem.remove();
     }
 
-    browserPopout = new lm.controls.BrowserPopout(config, dimensions, parentId, indexInParent, this);
+    if (!dimensions || !parentId || indexInParent === undefined) {
+      return;
+    }
+
+    var browserPopout = new BrowserPopout(configArray, dimensions, parentId, indexInParent, this);
     browserPopout.on('initialised', function () {
       self.emit('windowOpened', browserPopout);
     });
@@ -529,52 +544,48 @@ lm.utils.copy(LayoutManager.prototype, {
     });
     this.openPopouts.push(browserPopout);
     return browserPopout;
-  },
-
+  }
   /**
    * Attaches DragListener to any given DOM element
    * and turns it into a way of creating new ContentItems
    * by 'dragging' the DOM element into the layout
    *
-   * @param   {jQuery DOM element} element
-   * @param   {Object|Function} itemConfig for the new item to be created, or a function which will provide it
-   *
-   * @returns {void}
+   * @param element
+   * @param itemConfig for the new item to be created, or a function which will provide it
    */
-  createDragSource: function createDragSource(element, itemConfig) {
+
+
+  createDragSource(element, itemConfig) {
     this.config.settings.constrainDragToContainer = false;
-    var dragSource = new lm.controls.DragSource($(element), itemConfig, this);
+    var dragSource = new DragSource(element, itemConfig, this);
 
     this._dragSources.push(dragSource);
 
     return dragSource;
-  },
-
+  }
   /**
    * Create a new item in a dragging state, given a starting mouse event to act as the initial position
    *
-   * @param   {Object|Function} itemConfig for the new item to be created, or a function which will provide it
-   * @param   {MouseEvent} event used as the starting position for the dragProxy
-   *
-   * @returns {void}
+   * @param itemConfig for the new item to be created, or a function which will provide it
+   * @param event used as the starting position for the dragProxy
    */
-  createDragSourceFromEvent: function createDragSourceFromEvent(itemConfig, event) {
-    this.config.settings.constrainDragToContainer = false;
-    return new lm.controls.DragSourceFromEvent(itemConfig, this, event);
-  },
 
+
+  createDragSourceFromEvent(itemConfig, event) {
+    this.config.settings.constrainDragToContainer = false;
+    return new DragSourceFromEvent(itemConfig, this, event);
+  }
   /**
    * Programmatically selects an item. This deselects
    * the currently selected item, selects the specified item
    * and emits a selectionChanged event
    *
-   * @param   {lm.item.AbstractContentItem} item#
-   * @param   {[Boolean]} _$silent Wheather to notify the item of its selection
-   * @event    selectionChanged
-   *
-   * @returns {VOID}
+   * @param item
+   * @param _$silent Wheather to notify the item of its selection
    */
-  selectItem: function selectItem(item, _$silent) {
+
+
+  selectItem(item, _$silent) {
     if (this.config.settings.selectionEnabled !== true) {
       throw new Error('Please set selectionEnabled to true to use this feature');
     }
@@ -593,12 +604,15 @@ lm.utils.copy(LayoutManager.prototype, {
 
     this.selectedItem = item;
     this.emit('selectionChanged', item);
-  },
-
+  }
   /*************************
    * PACKAGE PRIVATE
    *************************/
-  _$maximiseItem: function _$maximiseItem(contentItem) {
+
+
+  _$maximiseItem(contentItem) {
+    var _this$container$width2, _this$container$heigh2;
+
     if (this._maximisedItem !== null) {
       this._$minimiseItem(this._maximisedItem);
     }
@@ -610,15 +624,18 @@ lm.utils.copy(LayoutManager.prototype, {
     contentItem.element.addClass('lm_maximised');
     contentItem.element.after(this._maximisePlaceholder);
     this.root.element.prepend(contentItem.element);
-    contentItem.element.width(this.container.width());
-    contentItem.element.height(this.container.height());
+    contentItem.element.width((_this$container$width2 = this.container.width()) !== null && _this$container$width2 !== void 0 ? _this$container$width2 : 0);
+    contentItem.element.height((_this$container$heigh2 = this.container.height()) !== null && _this$container$heigh2 !== void 0 ? _this$container$heigh2 : 0);
     contentItem.callDownwards('setSize');
 
     this._maximisedItem.emit('maximised');
 
     this.emit('stateChanged');
-  },
-  _$minimiseItem: function _$minimiseItem(contentItem) {
+  }
+
+  _$minimiseItem(contentItem) {
+    var _contentItem$parent;
+
     contentItem.element.removeClass('lm_maximised');
     contentItem.removeId('__glMaximised');
 
@@ -626,12 +643,11 @@ lm.utils.copy(LayoutManager.prototype, {
 
     this._maximisePlaceholder.remove();
 
-    contentItem.parent.callDownwards('setSize');
+    (_contentItem$parent = contentItem.parent) === null || _contentItem$parent === void 0 ? void 0 : _contentItem$parent.callDownwards('setSize');
     this._maximisedItem = null;
     contentItem.emit('minimised');
     this.emit('stateChanged');
-  },
-
+  }
   /**
    * This method is used to get around sandboxed iframe restrictions.
    * If 'allow-top-navigation' is not specified in the iframe's 'sandbox' attribute
@@ -641,24 +657,21 @@ lm.utils.copy(LayoutManager.prototype, {
    * This prevented GoldenLayout popouts from popping in in codepens. The fix is to call
    * _$closeWindow on the child window's gl instance which (after a timeout to disconnect
    * the invoking method from the close call) closes itself.
-   *
-   * @packagePrivate
-   *
-   * @returns {void}
    */
-  _$closeWindow: function _$closeWindow() {
+
+
+  _$closeWindow() {
     window.setTimeout(function () {
       window.close();
     }, 1);
-  },
-  _$getArea: function _$getArea(x, y) {
-    var i,
-        area,
-        smallestSurface = Infinity,
-        mathingArea = null;
+  }
 
-    for (i = 0; i < this._itemAreas.length; i++) {
-      area = this._itemAreas[i];
+  _$getArea(x, y) {
+    var smallestSurface = Infinity;
+    var mathingArea = null;
+
+    for (var i = 0; i < this._itemAreas.length; i++) {
+      var area = this._itemAreas[i];
 
       if (x > area.x1 && x < area.x2 && y > area.y1 && y < area.y2 && smallestSurface > area.surface) {
         smallestSurface = area.surface;
@@ -667,32 +680,39 @@ lm.utils.copy(LayoutManager.prototype, {
     }
 
     return mathingArea;
-  },
-  _$createRootItemAreas: function _$createRootItemAreas() {
-    var areaSize = 50;
-    var sides = {
-      y2: 'y1',
-      x2: 'x1',
-      y1: 'y2',
-      x1: 'x2'
-    };
+  }
+  /**
+   * Creates the drop zones at the edges of the screen
+   */
 
-    for (var side in sides) {
-      var area = this.root._$getArea();
 
-      area.side = side;
-      if (sides[side][1] == '2') area[side] = area[sides[side]] - areaSize;else {
-        area[side] = area[sides[side]] + areaSize;
-      }
+  _$createRootItemAreas() {
+    var areaSize = 50;
+
+    var rootArea = _objectSpread({}, this.root._$getArea());
+
+    var areas = [_objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'left',
+      x2: rootArea.x1 + areaSize
+    }), _objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'right',
+      x1: rootArea.x2 - areaSize
+    }), _objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'top',
+      y2: rootArea.y1 + areaSize
+    }), _objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'bottom',
+      y1: rootArea.y2 - areaSize
+    })];
+    areas.forEach(area => {
       area.surface = (area.x2 - area.x1) * (area.y2 - area.y1);
+    });
 
-      this._itemAreas.push(area);
-    }
-  },
-  _$calculateItemAreas: function _$calculateItemAreas() {
-    var i,
-        area,
-        allContentItems = this._getAllContentItems();
+    this._itemAreas.push(...areas);
+  }
+
+  _$calculateItemAreas() {
+    var allContentItems = this._getAllContentItems();
 
     this._itemAreas = [];
     /**
@@ -711,52 +731,52 @@ lm.utils.copy(LayoutManager.prototype, {
 
     this._$createRootItemAreas();
 
-    for (i = 0; i < allContentItems.length; i++) {
-      if (!allContentItems[i].isStack) {
+    for (var i = 0; i < allContentItems.length; i++) {
+      var item = allContentItems[i];
+
+      if (!isStack(item)) {
         continue;
       }
 
-      area = allContentItems[i]._$getArea();
+      var area = item._$getArea();
 
       if (area === null) {
         continue;
       } else if (area instanceof Array) {
         this._itemAreas = this._itemAreas.concat(area);
       } else {
+        var _area$contentItem$_co;
+
         this._itemAreas.push(area);
 
-        var header = {};
-        lm.utils.copy(header, area);
-        lm.utils.copy(header, area.contentItem._contentAreaDimensions.header.highlightArea);
+        var header = _objectSpread(_objectSpread({}, area), (_area$contentItem$_co = area.contentItem._contentAreaDimensions) === null || _area$contentItem$_co === void 0 ? void 0 : _area$contentItem$_co.header.highlightArea);
+
         header.surface = (header.x2 - header.x1) * (header.y2 - header.y1);
 
         this._itemAreas.push(header);
       }
     }
-  },
-
+  }
   /**
    * Takes a contentItem or a configuration and optionally a parent
    * item and returns an initialised instance of the contentItem.
    * If the contentItem is a function, it is first called
    *
-   * @packagePrivate
-   *
-   * @param   {lm.items.AbtractContentItem|Object|Function} contentItemOrConfig
-   * @param   {lm.items.AbtractContentItem} parent Only necessary when passing in config
-   *
-   * @returns {lm.items.AbtractContentItem}
+   * @param contentItemOrConfig
+   * @param parent Only necessary when passing in config
    */
-  _$normalizeContentItem: function _$normalizeContentItem(contentItemOrConfig, parent) {
+
+
+  _$normalizeContentItem(contentItemOrConfig, parent) {
     if (!contentItemOrConfig) {
       throw new Error('No content item defined');
     }
 
-    if (lm.utils.isFunction(contentItemOrConfig)) {
+    if (typeof contentItemOrConfig === 'function') {
       contentItemOrConfig = contentItemOrConfig();
     }
 
-    if (contentItemOrConfig instanceof lm.items.AbstractContentItem) {
+    if (contentItemOrConfig instanceof AbstractContentItem) {
       return contentItemOrConfig;
     }
 
@@ -767,23 +787,21 @@ lm.utils.copy(LayoutManager.prototype, {
     } else {
       throw new Error('Invalid contentItem');
     }
-  },
-
+  }
   /**
    * Iterates through the array of open popout windows and removes the ones
    * that are effectively closed. This is necessary due to the lack of reliably
    * listening for window.close / unload events in a cross browser compatible fashion.
-   *
-   * @packagePrivate
-   *
-   * @returns {void}
    */
-  _$reconcilePopoutWindows: function _$reconcilePopoutWindows() {
-    var openPopouts = [],
-        i;
 
-    for (i = 0; i < this.openPopouts.length; i++) {
-      if (this.openPopouts[i].getWindow().closed === false) {
+
+  _$reconcilePopoutWindows() {
+    var openPopouts = [];
+
+    for (var i = 0; i < this.openPopouts.length; i++) {
+      var _this$openPopouts$i$g;
+
+      if (((_this$openPopouts$i$g = this.openPopouts[i].getWindow()) === null || _this$openPopouts$i$g === void 0 ? void 0 : _this$openPopouts$i$g.closed) === false) {
         openPopouts.push(this.openPopouts[i]);
       } else {
         this.emit('windowClosed', this.openPopouts[i]);
@@ -794,8 +812,7 @@ lm.utils.copy(LayoutManager.prototype, {
       this.emit('stateChanged');
       this.openPopouts = openPopouts;
     }
-  },
-
+  }
   /***************************
    * PRIVATE
    ***************************/
@@ -803,15 +820,14 @@ lm.utils.copy(LayoutManager.prototype, {
   /**
    * Returns a flattened array of all content items,
    * regardles of level or type
-   *
-   * @private
-   *
-   * @returns {void}
+   * @return Flattened array of content items
    */
-  _getAllContentItems: function _getAllContentItems() {
+
+
+  _getAllContentItems() {
     var allContentItems = [];
 
-    var addChildren = function addChildren(contentItem) {
+    var addChildren = contentItem => {
       allContentItems.push(contentItem);
 
       if (contentItem.contentItems instanceof Array) {
@@ -823,72 +839,71 @@ lm.utils.copy(LayoutManager.prototype, {
 
     addChildren(this.root);
     return allContentItems;
-  },
-
+  }
   /**
    * Binds to DOM/BOM events on init
-   *
-   * @private
-   *
-   * @returns {void}
    */
-  _bindEvents: function _bindEvents() {
+
+
+  _bindEvents() {
     if (this._isFullPage) {
-      $(window).resize(this._resizeFunction);
+      $(window).resize(this._onResize);
     }
 
-    $(window).on('unload beforeunload', this._unloadFunction).on('blur.lm', this._windowBlur).on('focus.lm', this._windowFocus);
-  },
-
+    $(window).on('unload beforeunload', this._onUnload).on('blur.lm', this._windowBlur).on('focus.lm', this._windowFocus);
+  }
   /**
    * Handles setting a class based on window focus, useful for focus indicators
    */
-  _windowBlur: function _windowBlur() {
+
+
+  _windowBlur() {
     this.root.element.addClass('lm_window_blur');
-  },
-  _windowFocus: function _windowFocus() {
-    this.root.element.removeClass('lm_window_blur');
-  },
+  }
 
+  _windowFocus() {
+    this.root.element.removeClass('lm_window_blur');
+  }
   /**
    * Debounces resize events
-   *
-   * @private
-   *
-   * @returns {void}
    */
-  _onResize: function _onResize() {
-    clearTimeout(this._resizeTimeoutId);
-    this._resizeTimeoutId = setTimeout(lm.utils.fnBind(this.updateSize, this), 100);
-  },
 
+
+  _onResize() {
+    clearTimeout(this._resizeTimeoutId);
+    this._resizeTimeoutId = window.setTimeout(this.updateSize.bind(this), 100);
+  }
   /**
    * Extends the default config with the user specific settings and applies
    * derivations. Please note that there's a seperate method (AbstractContentItem._extendItemNode)
    * that deals with the extension of item configs
    *
-   * @param   {Object} config
-   * @static
-   * @returns {Object} config
+   * @param config
+   * @returns config
    */
-  _createConfig: function _createConfig(config) {
-    var windowConfigKey = lm.utils.getQueryStringParam('gl-window');
+
+
+  _createConfig(config) {
+    var _config$settings;
+
+    var windowConfigKey = getQueryStringParam('gl-window');
 
     if (windowConfigKey) {
       this.isSubWindow = true;
-      config = localStorage.getItem(windowConfigKey);
-      config = JSON.parse(config);
-      config = new lm.utils.ConfigMinifier().unminifyConfig(config);
+      config = JSON.parse(localStorage.getItem(windowConfigKey) || '{}');
+      config = unminifyConfig(config);
       localStorage.removeItem(windowConfigKey);
     }
 
-    config = $.extend(true, {}, lm.config.defaultConfig, config);
+    config = $.extend(true, {}, defaultConfig, config);
 
     var nextNode = function nextNode(node) {
       for (var key in node) {
-        if (key !== 'props' && typeof node[key] === 'object') {
-          nextNode(node[key]);
-        } else if (key === 'type' && node[key] === 'react-component') {
+        var value = node[key];
+
+        if (key !== 'props' && typeof value === 'object' && value != null) {
+          nextNode(value);
+        } else if (key === 'type' && value === 'react-component') {
           node.type = 'component';
           node.componentName = 'lm-react-component';
         }
@@ -897,27 +912,26 @@ lm.utils.copy(LayoutManager.prototype, {
 
     nextNode(config);
 
-    if (config.settings.hasHeaders === false) {
+    if (((_config$settings = config.settings) === null || _config$settings === void 0 ? void 0 : _config$settings.hasHeaders) === false) {
       config.dimensions.headerHeight = 0;
     }
 
     return config;
-  },
-
+  }
   /**
    * This is executed when GoldenLayout detects that it is run
    * within a previously opened popout window.
-   *
-   * @private
-   *
-   * @returns {void}
    */
-  _adjustToWindowMode: function _adjustToWindowMode() {
+
+
+  _adjustToWindowMode() {
+    var _this$config$content$;
+
     var popInButton = $('<div class="lm_popin" title="' + this.config.labels.popin + '">' + '<div class="lm_icon"></div>' + '<div class="lm_bg"></div>' + '</div>');
-    popInButton.click(lm.utils.fnBind(function () {
+    popInButton.click(() => {
       this.emit('popIn');
-    }, this));
-    document.title = lm.utils.stripTags(this.config.content[0].title);
+    });
+    document.title = stripTags((_this$config$content$ = this.config.content[0].title) !== null && _this$config$content$ !== void 0 ? _this$config$content$ : '');
     $('head').append($('body link, body style, template, .gl_keep'));
     this.container = $('body').html('').css('visibility', 'visible').append(popInButton);
     /*
@@ -934,32 +948,26 @@ lm.utils.copy(LayoutManager.prototype, {
      */
 
     window.__glInstance = this;
-  },
-
+  }
   /**
    * Creates Subwindows (if there are any). Throws an error
    * if popouts are blocked.
-   *
-   * @returns {void}
    */
-  _createSubWindows: function _createSubWindows() {
-    var i, popout;
 
-    for (i = 0; i < this.config.openPopouts.length; i++) {
-      popout = this.config.openPopouts[i];
+
+  _createSubWindows() {
+    if (!this.config.openPopouts) {
+      return;
+    }
+
+    for (var i = 0; i < this.config.openPopouts.length; i++) {
+      var popout = this.config.openPopouts[i];
       this.createPopout(popout.content, popout.dimensions, popout.parentId, popout.indexInParent);
     }
-  },
+  }
 
-  /**
-   * Determines what element the layout will be created in
-   *
-   * @private
-   *
-   * @returns {void}
-   */
-  _setContainer: function _setContainer() {
-    var container = $(this.container || 'body');
+  _getContainer() {
+    var container = this._originalContainer ? $(this._originalContainer) : $('body');
 
     if (container.length === 0) {
       throw new Error('GoldenLayout container not found');
@@ -969,6 +977,16 @@ lm.utils.copy(LayoutManager.prototype, {
       throw new Error('GoldenLayout more than one container element specified');
     }
 
+    return container;
+  }
+  /**
+   * Determines what element the layout will be created in
+   */
+
+
+  _setContainer() {
+    var container = this._getContainer();
+
     if (container[0] === document.body) {
       this._isFullPage = true;
       $('html, body').css({
@@ -980,16 +998,15 @@ lm.utils.copy(LayoutManager.prototype, {
     }
 
     this.container = container;
-  },
-
+  }
   /**
    * Kicks of the initial, recursive creation chain
    *
-   * @param   {Object} config GoldenLayout Config
-   *
-   * @returns {void}
+   * @param config GoldenLayout Config
    */
-  _create: function _create(config) {
+
+
+  _create(config) {
     var errorMsg;
 
     if (!(config.content instanceof Array)) {
@@ -999,15 +1016,15 @@ lm.utils.copy(LayoutManager.prototype, {
         errorMsg = "Configuration parameter 'content' must be an array";
       }
 
-      throw new lm.errors.ConfigurationError(errorMsg, config);
+      throw new ConfigurationError(errorMsg, config);
     }
 
     if (config.content.length > 1) {
       errorMsg = "Top level content can't contain more then one element.";
-      throw new lm.errors.ConfigurationError(errorMsg, config);
+      throw new ConfigurationError(errorMsg, config);
     }
 
-    this.root = new lm.items.Root(this, {
+    this.root = new Root(this, {
       content: config.content
     }, this.container);
     this.root.callDownwards('_$init');
@@ -1015,28 +1032,26 @@ lm.utils.copy(LayoutManager.prototype, {
     if (config.maximisedItemId === '__glMaximised') {
       this.root.getItemsById(config.maximisedItemId)[0].toggleMaximise();
     }
-  },
-
+  }
   /**
    * Called when the window is closed or the user navigates away
    * from the page
-   *
-   * @returns {void}
    */
-  _onUnload: function _onUnload() {
+
+
+  _onUnload() {
     if (this.config.settings.closePopoutsOnUnload === true) {
       for (var i = 0; i < this.openPopouts.length; i++) {
         this.openPopouts[i].close();
       }
     }
-  },
-
+  }
   /**
    * Adjusts the number of columns to be lower to fit the screen and still maintain minItemWidth.
-   *
-   * @returns {void}
    */
-  _adjustColumnsResponsive: function _adjustColumnsResponsive() {
+
+
+  _adjustColumnsResponsive() {
     // If there is no min width set, or not content items, do nothing.
     if (!this._useResponsiveLayout() || this._updatingColumnsResponsive || !this.config.dimensions || !this.config.dimensions.minItemWidth || this.root.contentItems.length === 0 || !this.root.contentItems[0].isRow) {
       this._firstLoad = false;
@@ -1055,7 +1070,7 @@ lm.utils.copy(LayoutManager.prototype, {
     var minItemWidth = this.config.dimensions.minItemWidth;
     var totalMinWidth = columnCount * minItemWidth;
 
-    if (totalMinWidth <= this.width) {
+    if (this.width == null || totalMinWidth <= this.width) {
       return;
     } // Prevent updates while it is already happening.
 
@@ -1076,65 +1091,68 @@ lm.utils.copy(LayoutManager.prototype, {
     }
 
     this._updatingColumnsResponsive = false;
-  },
-
+  }
   /**
    * Determines if responsive layout should be used.
    *
-   * @returns {bool} - True if responsive layout should be used; otherwise false.
+   * @returns True if responsive layout should be used; otherwise false.
    */
-  _useResponsiveLayout: function _useResponsiveLayout() {
-    return this.config.settings && (this.config.settings.responsiveMode == 'always' || this.config.settings.responsiveMode == 'onload' && this._firstLoad);
-  },
 
+
+  _useResponsiveLayout() {
+    return this.config.settings && (this.config.settings.responsiveMode == 'always' || this.config.settings.responsiveMode == 'onload' && this._firstLoad);
+  }
   /**
    * Adds all children of a node to another container recursively.
-   * @param {object} container - Container to add child content items to.
-   * @param {object} node - Node to search for content items.
-   * @returns {void}
+   * @param container - Container to add child content items to.
+   * @param node - Node to search for content items.
    */
-  _addChildContentItemsToContainer: function _addChildContentItemsToContainer(container, node) {
+
+
+  _addChildContentItemsToContainer(container, node) {
     if (node.type === 'stack') {
       node.contentItems.forEach(function (item) {
         container.addChild(item);
         node.removeChild(item, true);
       });
     } else {
-      node.contentItems.forEach(lm.utils.fnBind(function (item) {
+      node.contentItems.forEach(item => {
         this._addChildContentItemsToContainer(container, item);
-      }, this));
+      });
     }
-  },
-
+  }
   /**
    * Finds all the stack containers.
-   * @returns {array} - The found stack containers.
+   * @returns The found stack containers.
    */
-  _findAllStackContainers: function _findAllStackContainers() {
+
+
+  _findAllStackContainers() {
     var stackContainers = [];
 
     this._findAllStackContainersRecursive(stackContainers, this.root);
 
     return stackContainers;
-  },
-
+  }
   /**
    * Finds all the stack containers.
    *
-   * @param {array} - Set of containers to populate.
-   * @param {object} - Current node to process.
-   *
-   * @returns {void}
+   * @param stackContainers Set of containers to populate.
+   * @param node Current node to process.
    */
-  _findAllStackContainersRecursive: function _findAllStackContainersRecursive(stackContainers, node) {
-    node.contentItems.forEach(lm.utils.fnBind(function (item) {
-      if (item.type == 'stack') {
+
+
+  _findAllStackContainersRecursive(stackContainers, node) {
+    node.contentItems.forEach(item => {
+      if (isStack(item)) {
         stackContainers.push(item);
       } else if (!item.isComponent) {
         this._findAllStackContainersRecursive(stackContainers, item);
       }
-    }, this));
+    });
   }
-});
-export default LayoutManager;
+
+}
+
+_defineProperty(LayoutManager, "__lm", lm);
 //# sourceMappingURL=LayoutManager.js.map