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

package/dist/controls/Header.js

@@ -1,109 +1,143 @@
+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 utils from '../utils/index.js';
-import HeaderButton from './HeaderButton.js';
-import Tab from './Tab.js';
+import { EventEmitter } from "../utils/index.js";
+import HeaderButton from "./HeaderButton.js";
+import Tab from "./Tab.js";
 /**
  * This class represents a header above a Stack ContentItem.
  *
- * @param {lm.LayoutManager} layoutManager
- * @param {lm.item.AbstractContentItem} parent
+ * @param layoutManager
+ * @param parent
  */
 
-var Header = function Header(layoutManager, parent) {
-  utils.EventEmitter.call(this);
-  this.layoutManager = layoutManager;
-  this.element = $(Header._template);
+export default class Header extends EventEmitter {
+  // use for scroll repeat
+  // mouse hold timeout to act as hold instead of click
+  // mouse hold acceleration
+  constructor(layoutManager, parent) {
+    var _this$layoutManager$c, _this$layoutManager$c2;
 
-  if (this.layoutManager.config.settings.selectionEnabled === true) {
-    this.element.addClass('lm_selectable');
-    this.element.on('click', utils.fnBind(this._onHeaderClick, this));
-  }
+    super();
+
+    _defineProperty(this, "layoutManager", void 0);
+
+    _defineProperty(this, "element", $(Header._template));
+
+    _defineProperty(this, "tabsContainer", void 0);
+
+    _defineProperty(this, "tabDropdownContainer", void 0);
+
+    _defineProperty(this, "tabDropdownSearch", void 0);
+
+    _defineProperty(this, "tabDropdownList", null);
+
+    _defineProperty(this, "controlsContainer", void 0);
+
+    _defineProperty(this, "parent", void 0);
+
+    _defineProperty(this, "tabs", []);
+
+    _defineProperty(this, "activeContentItem", null);
+
+    _defineProperty(this, "closeButton", null);
+
+    _defineProperty(this, "tabDropdownButton", null);
+
+    _defineProperty(this, "tabNextButton", $(Header._nextButtonTemplate));
+
+    _defineProperty(this, "tabPreviousButton", $(Header._previousButtonTemplate));
+
+    _defineProperty(this, "holdTimer", null);
+
+    _defineProperty(this, "rAF", null);
+
+    _defineProperty(this, "CLICK_TIMEOUT", 500);
+
+    _defineProperty(this, "START_SPEED", 0.01);
+
+    _defineProperty(this, "ACCELERATION", 0.0005);
+
+    _defineProperty(this, "SCROLL_LEFT", 'left');
+
+    _defineProperty(this, "SCROLL_RIGHT", 'right');
+
+    _defineProperty(this, "isDraggingTab", false);
+
+    _defineProperty(this, "isOverflowing", false);
+
+    _defineProperty(this, "isDropdownShown", false);
 
-  this.tabsContainer = this.element.find('.lm_tabs');
-  this.tabDropdownContainer = this.element.find('.lm_tabdropdown_list');
-  this.tabDropdownContainer.hide();
-  this.tabDropdownSearch = this.element.find('.lm_tabdropdown_search input');
-  this.tabDropdownList = null;
-  this._handleFilterInput = this._handleFilterInput.bind(this);
-  this._handleFilterKeydown = this._handleFilterKeydown.bind(this);
-  this.tabDropdownSearch.on('input', this._handleFilterInput);
-  this.tabDropdownSearch.on('keydown', this._handleFilterKeydown);
-  this.controlsContainer = this.element.find('.lm_controls');
-  this.parent = parent;
-  this.parent.on('resize', this._updateTabSizes, this);
-  this.tabs = [];
-  this.activeContentItem = null;
-  this.closeButton = null;
-  this.tabDropdownButton = null;
-  this.tabNextButton = $(Header._nextButtonTemplate);
-  this.tabPreviousButton = $(Header._previousButtonTemplate);
-  this._handleItemPickedUp = this._handleItemPickedUp.bind(this);
-  this._handleItemDropped = this._handleItemDropped.bind(this);
-  this._handleNextMouseEnter = this._handleNextMouseEnter.bind(this);
-  this._handleNextMouseLeave = this._handleNextMouseLeave.bind(this);
-  this._handlePreviousMouseEnter = this._handlePreviousMouseEnter.bind(this);
-  this._handlePreviousMouseLeave = this._handlePreviousMouseLeave.bind(this);
-  this._handleScrollRepeat = this._handleScrollRepeat.bind(this);
-  this._handleNextButtonMouseDown = this._handleNextButtonMouseDown.bind(this);
-  this._handlePreviousButtonMouseDown = this._handlePreviousButtonMouseDown.bind(this);
-  this._handleScrollButtonMouseDown = this._handleScrollButtonMouseDown.bind(this);
-  this._handleScrollButtonMouseUp = this._handleScrollButtonMouseUp.bind(this);
-  this._handleScrollEvent = this._handleScrollEvent.bind(this);
-  this.tabNextButton.on('mousedown', this._handleNextButtonMouseDown);
-  this.tabPreviousButton.on('mousedown', this._handlePreviousButtonMouseDown);
-  this.tabsContainer.on('scroll', this._handleScrollEvent); // use for scroll repeat
-
-  this.holdTimer = null;
-  this.rAF = null; // mouse hold timeout to act as hold instead of click
-
-  this.CLICK_TIMEOUT = 500; // mouse hold acceleration
-
-  this.START_SPEED = 0.01;
-  this.ACCELERATION = 0.0005;
-  this.SCROLL_LEFT = 'left';
-  this.SCROLL_RIGHT = 'right';
-  this.layoutManager.on('itemPickedUp', this._handleItemPickedUp);
-  this.layoutManager.on('itemDropped', this._handleItemDropped);
-  this.isDraggingTab = false;
-  this.isOverflowing = false;
-  this.isDropdownShown = false;
-  this.dropdownKeyIndex = 0; // append previous button template
-
-  this.tabsContainer.before(this.tabPreviousButton); // change reference to just the li, not the wrapping ul
-
-  this.tabPreviousButton = this.tabPreviousButton.find('>:first-child');
-  this.tabPreviousButton.hide();
-  this._showAdditionalTabsDropdown = this._showAdditionalTabsDropdown.bind(this);
-  this._hideAdditionalTabsDropdown = this._hideAdditionalTabsDropdown.bind(this);
-  this._lastVisibleTabIndex = -1;
-  this._tabControlOffset = this.layoutManager.config.settings.tabControlOffset;
-
-  this._createControls();
-};
-
-Header._template = ['<div class="lm_header">', '<ul class="lm_tabs"></ul>', '<ul class="lm_controls"></ul>', '<ul class="lm_tabdropdown_list">', '<li class="lm_tabdropdown_search"><input type="text" placeholder="Find tab..."></li>', '</ul>', '</div>'].join('');
-Header._previousButtonTemplate = ['<ul class="lm_controls">', '<li class="lm_tabpreviousbutton"></li>', '</ul>'].join('');
-Header._nextButtonTemplate = ['<li class="lm_tabnextbutton"></li>'].join('');
-utils.copy(Header.prototype, {
+    _defineProperty(this, "dropdownKeyIndex", 0);
+
+    _defineProperty(this, "_lastVisibleTabIndex", -1);
+
+    _defineProperty(this, "_tabControlOffset", void 0);
+
+    this.layoutManager = layoutManager;
+
+    if ((_this$layoutManager$c = this.layoutManager.config.settings) !== null && _this$layoutManager$c !== void 0 && _this$layoutManager$c.selectionEnabled) {
+      this.element.addClass('lm_selectable');
+      this.element.on('click', this._onHeaderClick.bind(this));
+    }
+
+    this.tabsContainer = this.element.find('.lm_tabs');
+    this.tabDropdownContainer = this.element.find('.lm_tabdropdown_list');
+    this.tabDropdownContainer.hide();
+    this.tabDropdownSearch = this.element.find('.lm_tabdropdown_search input');
+    this._handleFilterInput = this._handleFilterInput.bind(this);
+    this._handleFilterKeydown = this._handleFilterKeydown.bind(this);
+    this.tabDropdownSearch.on('input', this._handleFilterInput);
+    this.tabDropdownSearch.on('keydown', this._handleFilterKeydown);
+    this.controlsContainer = this.element.find('.lm_controls');
+    this.parent = parent;
+    this.parent.on('resize', this._updateTabSizes, this);
+    this._handleItemPickedUp = this._handleItemPickedUp.bind(this);
+    this._handleItemDropped = this._handleItemDropped.bind(this);
+    this._handleNextMouseEnter = this._handleNextMouseEnter.bind(this);
+    this._handleNextMouseLeave = this._handleNextMouseLeave.bind(this);
+    this._handlePreviousMouseEnter = this._handlePreviousMouseEnter.bind(this);
+    this._handlePreviousMouseLeave = this._handlePreviousMouseLeave.bind(this);
+    this._handleScrollRepeat = this._handleScrollRepeat.bind(this);
+    this._handleNextButtonMouseDown = this._handleNextButtonMouseDown.bind(this);
+    this._handlePreviousButtonMouseDown = this._handlePreviousButtonMouseDown.bind(this);
+    this._handleScrollButtonMouseDown = this._handleScrollButtonMouseDown.bind(this);
+    this._handleScrollButtonMouseUp = this._handleScrollButtonMouseUp.bind(this);
+    this._handleScrollEvent = this._handleScrollEvent.bind(this);
+    this.tabNextButton.on('mousedown', this._handleNextButtonMouseDown);
+    this.tabPreviousButton.on('mousedown', this._handlePreviousButtonMouseDown);
+    this.tabsContainer.on('scroll', this._handleScrollEvent);
+    this.layoutManager.on('itemPickedUp', this._handleItemPickedUp);
+    this.layoutManager.on('itemDropped', this._handleItemDropped); // append previous button template
+
+    this.tabsContainer.before(this.tabPreviousButton); // change reference to just the li, not the wrapping ul
+
+    this.tabPreviousButton = this.tabPreviousButton.find('>:first-child');
+    this.tabPreviousButton.hide();
+    this._showAdditionalTabsDropdown = this._showAdditionalTabsDropdown.bind(this);
+    this._hideAdditionalTabsDropdown = this._hideAdditionalTabsDropdown.bind(this);
+    this._tabControlOffset = (_this$layoutManager$c2 = this.layoutManager.config.settings) === null || _this$layoutManager$c2 === void 0 ? void 0 : _this$layoutManager$c2.tabControlOffset;
+
+    this._createControls();
+  }
   /**
    * Creates a new tab and associates it with a contentItem
    *
-   * @param    {lm.item.AbstractContentItem} contentItem
-   * @param    {Integer} index The position of the tab
-   *
-   * @returns {void}
+   * @param contentItem
+   * @param index The position of the tab
    */
-  createTab: function createTab(contentItem, index) {
-    var tab, i; //If there's already a tab relating to the
-    //content item, don't do anything
 
-    for (i = 0; i < this.tabs.length; i++) {
+
+  createTab(contentItem, index) {
+    //If there's already a tab relating to the
+    //content item, don't do anything
+    for (var i = 0; i < this.tabs.length; i++) {
       if (this.tabs[i].contentItem === contentItem) {
         return;
       }
     }
 
-    tab = new Tab(this, contentItem);
+    var tab = new Tab(this, contentItem);
 
     if (this.tabs.length === 0) {
       this.tabs.push(tab);
@@ -124,16 +158,15 @@ utils.copy(Header.prototype, {
     this.tabs.splice(index, 0, tab);
 
     this._updateTabSizes();
-  },
-
+  }
   /**
    * Finds a tab based on the contentItem its associated with and removes it.
    *
-   * @param    {lm.item.AbstractContentItem} contentItem
-   *
-   * @returns {void}
+   * @param contentItem
    */
-  removeTab: function removeTab(contentItem) {
+
+
+  removeTab(contentItem) {
     for (var i = 0; i < this.tabs.length; i++) {
       if (this.tabs[i].contentItem === contentItem) {
         this.tabs[i]._$destroy();
@@ -144,14 +177,17 @@ utils.copy(Header.prototype, {
     }
 
     throw new Error('contentItem is not controlled by this header');
-  },
-
+  }
   /**
    * The programmatical equivalent of clicking a Tab.
    *
-   * @param {lm.item.AbstractContentItem} contentItem
+   * @param contentItem
    */
-  setActiveContentItem: function setActiveContentItem(contentItem) {
+
+
+  setActiveContentItem(contentItem) {
+    var _this$tabs$element$ge, _this$parent$config$a;
+
     var isActive;
 
     for (var i = 0; i < this.tabs.length; i++) {
@@ -165,7 +201,7 @@ utils.copy(Header.prototype, {
     } // makes sure dropped tabs are scrollintoview, removed any re-ordering
 
 
-    this.tabs[this.parent.config.activeItemIndex].element.get(0).scrollIntoView({
+    (_this$tabs$element$ge = this.tabs[(_this$parent$config$a = this.parent.config.activeItemIndex) !== null && _this$parent$config$a !== void 0 ? _this$parent$config$a : 0].element.get(0)) === null || _this$tabs$element$ge === void 0 ? void 0 : _this$tabs$element$ge.scrollIntoView({
       inline: 'nearest'
     });
 
@@ -174,105 +210,141 @@ utils.copy(Header.prototype, {
     this._updateTabSizes();
 
     this.parent.emitBubblingEvent('stateChanged');
-  },
-
+  }
   /**
    * Programmatically operate with header position.
    *
-   * @param {string} position one of ('top','left','right','bottom') to set or empty to get it.
+   * @param position one of ('top','left','right','bottom') to set or empty to get it.
    *
-   * @returns {string} previous header position
+   * @returns previous header position
    */
-  position: function position(_position) {
+
+
+  position(position) {
     var previous = this.parent._header.show;
     if (previous && !this.parent._side) previous = 'top';
 
-    if (_position !== undefined && this.parent._header.show !== _position) {
-      this.parent._header.show = _position;
+    if (position !== undefined && this.parent._header.show !== position) {
+      this.parent._header.show = position;
 
       this.parent._setupHeaderPosition();
     }
 
     return previous;
-  },
-  // Manually attaching so wheel can be passive instead of jquery .on
+  } // Manually attaching so wheel can be passive instead of jquery .on
   // _attachWheelListener is called by parent init
-  _attachWheelListener: function _attachWheelListener() {
-    this.tabsContainer.get(0).addEventListener('wheel', this._handleWheelEvent, {
-      passive: true
-    });
-  },
-  // detach called by this.destroy
-  _detachWheelListener: function _detachWheelListener() {
-    this.tabsContainer.get(0).removeEventListener('wheel', this._handleWheelEvent, {
+
+
+  _attachWheelListener() {
+    var _this$tabsContainer$g;
+
+    (_this$tabsContainer$g = this.tabsContainer.get(0)) === null || _this$tabsContainer$g === void 0 ? void 0 : _this$tabsContainer$g.addEventListener('wheel', this._handleWheelEvent, {
       passive: true
     });
-  },
-  _handleWheelEvent: function _handleWheelEvent(event) {
-    var target = event.currentTarget; // we only care about the larger of the two deltas
+  } // detach called by this.destroy
+
+
+  _detachWheelListener() {
+    var _this$tabsContainer$g2;
+
+    (_this$tabsContainer$g2 = this.tabsContainer.get(0)) === null || _this$tabsContainer$g2 === void 0 ? void 0 : _this$tabsContainer$g2.removeEventListener('wheel', this._handleWheelEvent);
+  }
+
+  _handleWheelEvent(event) {
+    var target = event.currentTarget;
+
+    if (!(target instanceof HTMLElement)) {
+      return;
+    } // we only care about the larger of the two deltas
+
 
     var delta = Math.abs(event.deltaY) > Math.abs(event.deltaX) ? event.deltaY : event.deltaX; // jshint
 
     /* globals WheelEvent */
 
     if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+      var _this$tabsContainer$i;
+
       // Users can set OS to be in deltaMode page
       // scrolly by page units as pixels
-      delta *= this.tabsContainer.innerWidhth();
+      delta *= (_this$tabsContainer$i = this.tabsContainer.innerWidth()) !== null && _this$tabsContainer$i !== void 0 ? _this$tabsContainer$i : 1;
     } else if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
       // chrome goes 100px per 3 lines, and firefox would go 102 per 3 (17 lineheight * 3 lines * 2)
       delta *= 100 / 3;
     }
 
     target.scrollLeft += Math.round(delta);
-  },
-  // on scroll we need to check if side error might need to be disabled
-  _handleScrollEvent: function _handleScrollEvent() {
+  } // on scroll we need to check if side error might need to be disabled
+
+
+  _handleScrollEvent() {
     this._checkScrollArrows();
-  },
-  // when and item is picked up, attach mouse enter listeners to next/previous buttons
-  _handleItemPickedUp: function _handleItemPickedUp() {
+  } // when and item is picked up, attach mouse enter listeners to next/previous buttons
+
+
+  _handleItemPickedUp() {
     this.isDraggingTab = true;
     this.controlsContainer.on('mouseenter', this._handleNextMouseEnter);
     this.tabPreviousButton.on('mouseenter', this._handlePreviousMouseEnter);
-  },
-  // when an item is dropped remove listeners and cancel animation
-  _handleItemDropped: function _handleItemDropped() {
+  } // when an item is dropped remove listeners and cancel animation
+
+
+  _handleItemDropped() {
+    var _this$rAF;
+
     this.isDraggingTab = false;
-    this.rAF = window.cancelAnimationFrame(this.rAF);
+    window.cancelAnimationFrame((_this$rAF = this.rAF) !== null && _this$rAF !== void 0 ? _this$rAF : -1);
+    this.rAF = null;
     this.controlsContainer.off('mouseenter', this._handleNextMouseEnter);
     this.controlsContainer.off('mouseleave', this._handleNextMouseLeave);
     this.tabPreviousButton.off('mouseenter', this._handlePreviousMouseEnter);
     this.tabPreviousButton.off('mouseleave', this._handlePreviousMouseLeave);
-  },
-  // on next/previous enter start scroll repeat animation loop
+  } // on next/previous enter start scroll repeat animation loop
   // and attach a listener looking for mouseleave
   // cancel animation on mouse leave, and remove leave listener
-  _handleNextMouseEnter: function _handleNextMouseEnter() {
+
+
+  _handleNextMouseEnter() {
+    var _this$tabsContainer$s;
+
     this.controlsContainer.on('mouseleave', this._handleNextMouseLeave);
 
-    this._handleScrollRepeat(this.SCROLL_RIGHT, this.tabsContainer.scrollLeft());
-  },
-  _handlePreviousMouseEnter: function _handlePreviousMouseEnter() {
+    this._handleScrollRepeat(this.SCROLL_RIGHT, (_this$tabsContainer$s = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s !== void 0 ? _this$tabsContainer$s : 0);
+  }
+
+  _handlePreviousMouseEnter() {
+    var _this$tabsContainer$s2;
+
     this.tabPreviousButton.on('mouseleave', this._handlePreviousMouseLeave);
 
-    this._handleScrollRepeat(this.SCROLL_LEFT, this.tabsContainer.scrollLeft());
-  },
-  _handleNextMouseLeave: function _handleNextMouseLeave() {
-    this.rAF = window.cancelAnimationFrame(this.rAF);
+    this._handleScrollRepeat(this.SCROLL_LEFT, (_this$tabsContainer$s2 = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s2 !== void 0 ? _this$tabsContainer$s2 : 0);
+  }
+
+  _handleNextMouseLeave() {
+    var _this$rAF2;
+
+    window.cancelAnimationFrame((_this$rAF2 = this.rAF) !== null && _this$rAF2 !== void 0 ? _this$rAF2 : -1);
+    this.rAF = null;
     this.controlsContainer.off('mouseleave', this._handleNextMouseLeave);
-  },
-  _handlePreviousMouseLeave: function _handlePreviousMouseLeave() {
-    this.rAF = window.cancelAnimationFrame(this.rAF);
+  }
+
+  _handlePreviousMouseLeave() {
+    var _this$rAF3;
+
+    window.cancelAnimationFrame((_this$rAF3 = this.rAF) !== null && _this$rAF3 !== void 0 ? _this$rAF3 : -1);
+    this.rAF = null;
     this.tabPreviousButton.off('mouseleave', this._handlePreviousMouseLeave);
-  },
-  // scroll one tab to the right on mouse down
+  } // scroll one tab to the right on mouse down
   // start scrollRepeat if mouse is held down
-  _handleNextButtonMouseDown: function _handleNextButtonMouseDown() {
+
+
+  _handleNextButtonMouseDown() {
     var rightOffscreenChild;
 
     for (var i = 0; i < this.tabs.length; i += 1) {
-      if (this.tabs[i].element.get(0).offsetLeft > this.tabsContainer.get(0).offsetWidth + this.tabsContainer.scrollLeft()) {
+      var _this$tabs$i$element$, _this$tabs$i$element$2, _this$tabsContainer$g3, _this$tabsContainer$g4, _this$tabsContainer$s3;
+
+      if (((_this$tabs$i$element$ = (_this$tabs$i$element$2 = this.tabs[i].element.get(0)) === null || _this$tabs$i$element$2 === void 0 ? void 0 : _this$tabs$i$element$2.offsetLeft) !== null && _this$tabs$i$element$ !== void 0 ? _this$tabs$i$element$ : 0) > ((_this$tabsContainer$g3 = (_this$tabsContainer$g4 = this.tabsContainer.get(0)) === null || _this$tabsContainer$g4 === void 0 ? void 0 : _this$tabsContainer$g4.offsetWidth) !== null && _this$tabsContainer$g3 !== void 0 ? _this$tabsContainer$g3 : 0) + ((_this$tabsContainer$s3 = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s3 !== void 0 ? _this$tabsContainer$s3 : 0)) {
         rightOffscreenChild = this.tabs[i].element.get(0);
         break;
       }
@@ -286,16 +358,25 @@ utils.copy(Header.prototype, {
 
       this._handleScrollButtonMouseDown(this.SCROLL_RIGHT);
     } else {
-      this.tabsContainer.get(0).scrollLeft = this.tabsContainer.get(0).scrollWidth;
+      var tabsContainer = this.tabsContainer.get(0);
+
+      if (tabsContainer) {
+        var _this$tabsContainer$g5, _this$tabsContainer$g6;
+
+        tabsContainer.scrollLeft = (_this$tabsContainer$g5 = (_this$tabsContainer$g6 = this.tabsContainer.get(0)) === null || _this$tabsContainer$g6 === void 0 ? void 0 : _this$tabsContainer$g6.scrollWidth) !== null && _this$tabsContainer$g5 !== void 0 ? _this$tabsContainer$g5 : 0;
+      }
     }
-  },
-  // scroll left by one tab
+  } // scroll left by one tab
   // start scrollRepeat if mouse is held down
-  _handlePreviousButtonMouseDown: function _handlePreviousButtonMouseDown() {
+
+
+  _handlePreviousButtonMouseDown() {
     var leftOffscreenChild;
 
     for (var i = this.tabs.length - 1; i >= 0; i -= 1) {
-      if (this.tabs[i].element.get(0).offsetLeft < this.tabsContainer.scrollLeft()) {
+      var _this$tabs$i$element$3, _this$tabs$i$element$4, _this$tabsContainer$s4;
+
+      if (((_this$tabs$i$element$3 = (_this$tabs$i$element$4 = this.tabs[i].element.get(0)) === null || _this$tabs$i$element$4 === void 0 ? void 0 : _this$tabs$i$element$4.offsetLeft) !== null && _this$tabs$i$element$3 !== void 0 ? _this$tabs$i$element$3 : 0) < ((_this$tabsContainer$s4 = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s4 !== void 0 ? _this$tabsContainer$s4 : 0)) {
         leftOffscreenChild = this.tabs[i].element.get(0);
         break;
       }
@@ -309,43 +390,68 @@ utils.copy(Header.prototype, {
 
       this._handleScrollButtonMouseDown(this.SCROLL_LEFT);
     } else {
-      this.tabsContainer.get(0).scrollLeft = 0;
+      var tabsContainer = this.tabsContainer.get(0);
+
+      if (tabsContainer) {
+        tabsContainer.scrollLeft = 0;
+      }
     }
-  },
-  // when hold timer is reached start scroll repeat anim loop
+  } // when hold timer is reached start scroll repeat anim loop
   // cancel it when mouse up happens anywhere
-  _handleScrollButtonMouseDown: function _handleScrollButtonMouseDown(direction) {
+
+
+  _handleScrollButtonMouseDown(direction) {
     // closure so that scrollLeft is value at end of timer, and not start of timer
-    this.holdTimer = setTimeout(function () {
-      this._handleScrollRepeat(direction, this.tabsContainer.scrollLeft(), 100); // kickstart deltaX to be faster
+    this.holdTimer = window.setTimeout(() => {
+      var _this$tabsContainer$s5;
+
+      this._handleScrollRepeat(direction, (_this$tabsContainer$s5 = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s5 !== void 0 ? _this$tabsContainer$s5 : 0, 100); // kickstart deltaX to be faster
 
-    }.bind(this), this.CLICK_TIMEOUT);
+    }, this.CLICK_TIMEOUT);
     window.addEventListener('mouseup', this._handleScrollButtonMouseUp);
-  },
-  // cancel scroll repeat
-  _handleScrollButtonMouseUp: function _handleScrollButtonMouseUp() {
-    this.holdTimer = clearTimeout(this.holdTimer);
-    this.rAF = cancelAnimationFrame(this.rAF);
+  } // cancel scroll repeat
+
+
+  _handleScrollButtonMouseUp() {
+    var _this$holdTimer, _this$rAF4;
+
+    clearTimeout((_this$holdTimer = this.holdTimer) !== null && _this$holdTimer !== void 0 ? _this$holdTimer : -1);
+    this.holdTimer = null;
+    cancelAnimationFrame((_this$rAF4 = this.rAF) !== null && _this$rAF4 !== void 0 ? _this$rAF4 : -1);
+    this.rAF = null;
     window.removeEventListener('mouseup', this._handleScrollButtonMouseUp);
-  },
-  // disables scroll arrow if at edge of scroll area
-  _checkScrollArrows: function _checkScrollArrows() {
+  } // disables scroll arrow if at edge of scroll area
+
+
+  _checkScrollArrows() {
+    var _this$tabsContainer$s6, _this$tabsContainer$i2, _this$tabsContainer$g7;
+
     if (this.tabsContainer.scrollLeft() === 0) {
-      this.tabPreviousButton.first().attr('disabled', true);
-    } else if (this.tabsContainer.scrollLeft() + this.tabsContainer.innerWidth() === this.tabsContainer.get(0).scrollWidth) {
-      this.tabNextButton.attr('disabled', true);
+      this.tabPreviousButton.first().prop('disabled', true);
+    } else if (((_this$tabsContainer$s6 = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s6 !== void 0 ? _this$tabsContainer$s6 : 0) + ((_this$tabsContainer$i2 = this.tabsContainer.innerWidth()) !== null && _this$tabsContainer$i2 !== void 0 ? _this$tabsContainer$i2 : 0) === ((_this$tabsContainer$g7 = this.tabsContainer.get(0)) === null || _this$tabsContainer$g7 === void 0 ? void 0 : _this$tabsContainer$g7.scrollWidth)) {
+      this.tabNextButton.prop('disabled', true);
     } else {
-      this.tabNextButton.attr('disabled', false);
-      this.tabPreviousButton.first().attr('disabled', false);
+      this.tabNextButton.prop('disabled', false);
+      this.tabPreviousButton.first().prop('disabled', false);
     }
-  },
-  // scrolls the tab header container on drag tab over control buttons
+  } // scrolls the tab header container on drag tab over control buttons
   // or on press and hold of scroll arrows at either end
   // called recurisevly in an animation loop until cancelled
   // or directional end is reached
-  _handleScrollRepeat: function _handleScrollRepeat(direction, startX, deltaX, prevTimestamp) {
-    if (!deltaX) deltaX = 0;
-    var tabContainerRect = this.tabsContainer.get(0).getBoundingClientRect();
+
+
+  _handleScrollRepeat(direction, startX) {
+    var _this$rAF5;
+
+    var deltaX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    var prevTimestamp = arguments.length > 3 ? arguments[3] : undefined;
+    var tabContainer = this.tabsContainer.get(0);
+
+    if (!tabContainer) {
+      return;
+    }
+
+    var tabContainerRect = tabContainer.getBoundingClientRect();
 
     if (direction === this.SCROLL_LEFT) {
       this.tabsContainer.scrollLeft(startX - deltaX);
@@ -362,6 +468,8 @@ utils.copy(Header.prototype, {
         return;
       }
     } else if (direction === this.SCROLL_RIGHT) {
+      var _this$tabsContainer$s7, _this$tabsContainer$i3;
+
       this.tabsContainer.scrollLeft(startX + deltaX);
 
       if (this.isDraggingTab) {
@@ -370,7 +478,7 @@ utils.copy(Header.prototype, {
       } // stop loop at right edge
 
 
-      if (this.tabsContainer.scrollLeft() + this.tabsContainer.innerWidth() === this.tabsContainer.get(0).scrollWidth) {
+      if (((_this$tabsContainer$s7 = this.tabsContainer.scrollLeft()) !== null && _this$tabsContainer$s7 !== void 0 ? _this$tabsContainer$s7 : 0) + ((_this$tabsContainer$i3 = this.tabsContainer.innerWidth()) !== null && _this$tabsContainer$i3 !== void 0 ? _this$tabsContainer$i3 : 0) === tabContainer.scrollWidth) {
         this._checkScrollArrows();
 
         return;
@@ -378,42 +486,39 @@ utils.copy(Header.prototype, {
     } // setup animation loop, scroll with acceleration
 
 
-    window.cancelAnimationFrame(this.rAF);
-    this.rAF = window.requestAnimationFrame(function (timestamp) {
+    window.cancelAnimationFrame((_this$rAF5 = this.rAF) !== null && _this$rAF5 !== void 0 ? _this$rAF5 : -1);
+    this.rAF = window.requestAnimationFrame(timestamp => {
+      var _this$tabsContainer$g8, _this$tabsContainer$g9;
+
       var startTime = prevTimestamp || timestamp;
       var deltaTime = timestamp - startTime;
       var newDeltaX = this.START_SPEED * deltaTime + 0.5 * this.ACCELERATION * (deltaTime * deltaTime);
-      newDeltaX = Math.min(newDeltaX, this.tabsContainer.get(0).scrollWidth);
+      newDeltaX = Math.min(newDeltaX, (_this$tabsContainer$g8 = (_this$tabsContainer$g9 = this.tabsContainer.get(0)) === null || _this$tabsContainer$g9 === void 0 ? void 0 : _this$tabsContainer$g9.scrollWidth) !== null && _this$tabsContainer$g8 !== void 0 ? _this$tabsContainer$g8 : Infinity);
 
       this._handleScrollRepeat(direction, startX, newDeltaX, startTime);
-    }.bind(this));
-  },
-
+    });
+  }
   /**
    * Programmatically set closability.
-   *
-   * @package private
-   * @param {Boolean} isClosable Whether to enable/disable closability.
-   *
-   * @returns {Boolean} Whether the action was successful
+   * @param isClosable Whether to enable/disable closability.
+   * @returns Whether the action was successful
    */
-  _$setClosable: function _$setClosable(isClosable) {
+
+
+  _$setClosable(isClosable) {
     if (this.closeButton && this._isClosable()) {
       this.closeButton.element[isClosable ? 'show' : 'hide']();
       return true;
     }
 
     return false;
-  },
-
+  }
   /**
    * Destroys the entire header
-   *
-   * @package private
-   *
-   * @returns {void}
    */
-  _$destroy: function _$destroy() {
+
+
+  _$destroy() {
     this.emit('destroy', this);
 
     for (var i = 0; i < this.tabs.length; i++) {
@@ -428,24 +533,24 @@ utils.copy(Header.prototype, {
     this.tabDropdownSearch.off('input', this._handleFilterInput);
     this.tabDropdownSearch.off('keydown', this._handleFilterKeydown);
     this.element.remove();
-  },
-
+  }
   /**
    * get settings from header
    *
-   * @returns {string} when exists
+   * @returns when exists
    */
-  _getHeaderSetting: function _getHeaderSetting(name) {
-    if (name in this.parent._header) return this.parent._header[name];
-  },
 
+
+  _getHeaderSetting(name) {
+    if (name in this.parent._header) return this.parent._header[name];
+  }
   /**
    * Creates the popout, maximise and close buttons in the header's top right corner
-   *
-   * @returns {void}
    */
-  _createControls: function _createControls() {
-    var closeStack, popout, label, maximiseLabel, minimiseLabel, maximise, maximiseButton, tabDropdownLabel, tabOverflowNextLabel, tabOverflowPreviousLabel;
+
+
+  _createControls() {
+    var closeStack, popout, label, maximise, tabDropdownLabel, tabOverflowNextLabel, tabOverflowPreviousLabel;
     /**
      * Dropdown to show additional tabs.
      */
@@ -462,7 +567,7 @@ utils.copy(Header.prototype, {
      */
 
     if (this._getHeaderSetting('popout')) {
-      popout = utils.fnBind(this._onPopoutClick, this);
+      popout = this._onPopoutClick.bind(this);
       label = this._getHeaderSetting('popout');
       new HeaderButton(this, label, 'lm_popout', popout);
     }
@@ -472,15 +577,18 @@ utils.copy(Header.prototype, {
 
 
     if (this._getHeaderSetting('maximise')) {
-      maximise = utils.fnBind(this.parent.toggleMaximise, this.parent);
-      maximiseLabel = this._getHeaderSetting('maximise');
-      minimiseLabel = this._getHeaderSetting('minimise');
-      maximiseButton = new HeaderButton(this, maximiseLabel, 'lm_maximise', maximise);
+      maximise = this.parent.toggleMaximise.bind(this.parent);
+
+      var maximiseLabel = this._getHeaderSetting('maximise');
+
+      var minimiseLabel = this._getHeaderSetting('minimise');
+
+      var maximiseButton = new HeaderButton(this, maximiseLabel, 'lm_maximise', maximise);
       this.parent.on('maximised', function () {
-        maximiseButton.element.attr('title', minimiseLabel);
+        maximiseButton.element.attr('title', minimiseLabel !== null && minimiseLabel !== void 0 ? minimiseLabel : '');
       });
       this.parent.on('minimised', function () {
-        maximiseButton.element.attr('title', maximiseLabel);
+        maximiseButton.element.attr('title', maximiseLabel !== null && maximiseLabel !== void 0 ? maximiseLabel : '');
       });
     }
     /**
@@ -489,18 +597,19 @@ utils.copy(Header.prototype, {
 
 
     if (this._isClosable()) {
-      closeStack = utils.fnBind(this.parent.remove, this.parent);
+      closeStack = this.parent.remove.bind(this.parent);
       label = this._getHeaderSetting('close');
       this.closeButton = new HeaderButton(this, label, 'lm_close', closeStack);
     }
-  },
-
+  }
   /**
    * Shows drop down for additional tabs when there are too many to display.
    *
    * @returns {void}
    */
-  _showAdditionalTabsDropdown: function _showAdditionalTabsDropdown() {
+
+
+  _showAdditionalTabsDropdown() {
     if (this.isDropdownShown) {
       this._hideAdditionalTabsDropdown();
 
@@ -524,9 +633,10 @@ utils.copy(Header.prototype, {
     $(document).on('mousedown', this._hideAdditionalTabsDropdown);
 
     this._updateAdditionalTabsDropdown();
-  },
-  // enables synthetic keyboard navigation of the list
-  _handleFilterKeydown: function _handleFilterKeydown(e) {
+  } // enables synthetic keyboard navigation of the list
+
+
+  _handleFilterKeydown(e) {
     if (this.dropdownKeyIndex === -1) return;
 
     if (e.key === 'Escape') {
@@ -545,7 +655,7 @@ utils.copy(Header.prototype, {
     }
 
     function getNextDropdownIndex(startIndex, delta, tabDropdownList) {
-      if (tabDropdownList.length < 2) {
+      if (tabDropdownList == null || tabDropdownList.length < 2) {
         return -1;
       }
 
@@ -564,25 +674,36 @@ utils.copy(Header.prototype, {
 
 
     if (e.key === 'ArrowDown' || e.key === 'Tab' && e.shiftKey === false) {
+      var _this$tabDropdownList, _this$tabDropdownList2;
+
       e.preventDefault();
-      this.tabDropdownList.eq(this.dropdownKeyIndex).removeClass('lm_keyboard_active');
+      (_this$tabDropdownList = this.tabDropdownList) === null || _this$tabDropdownList === void 0 ? void 0 : _this$tabDropdownList.eq(this.dropdownKeyIndex).removeClass('lm_keyboard_active');
       this.dropdownKeyIndex = getNextDropdownIndex(this.dropdownKeyIndex, 1, this.tabDropdownList);
-      this.tabDropdownList.eq(this.dropdownKeyIndex).addClass('lm_keyboard_active');
+      (_this$tabDropdownList2 = this.tabDropdownList) === null || _this$tabDropdownList2 === void 0 ? void 0 : _this$tabDropdownList2.eq(this.dropdownKeyIndex).addClass('lm_keyboard_active');
     } else if (e.key === 'ArrowUp' || e.key === 'Tab') {
+      var _this$tabDropdownList3, _this$tabDropdownList4;
+
       e.preventDefault();
-      this.tabDropdownList.eq(this.dropdownKeyIndex).removeClass('lm_keyboard_active');
+      (_this$tabDropdownList3 = this.tabDropdownList) === null || _this$tabDropdownList3 === void 0 ? void 0 : _this$tabDropdownList3.eq(this.dropdownKeyIndex).removeClass('lm_keyboard_active');
       this.dropdownKeyIndex = getNextDropdownIndex(this.dropdownKeyIndex, -1, this.tabDropdownList);
-      this.tabDropdownList.eq(this.dropdownKeyIndex).addClass('lm_keyboard_active');
+      (_this$tabDropdownList4 = this.tabDropdownList) === null || _this$tabDropdownList4 === void 0 ? void 0 : _this$tabDropdownList4.eq(this.dropdownKeyIndex).addClass('lm_keyboard_active');
     }
-  },
-  // filters the list
-  _handleFilterInput: function _handleFilterInput(event) {
-    // reset keyboard index
+  } // filters the list
+
+
+  _handleFilterInput(event) {
+    if (this.tabDropdownList == null) {
+      return;
+    } // reset keyboard index
+
+
     this.tabDropdownList.eq(this.dropdownKeyIndex).removeClass('lm_keyboard_active');
     this.dropdownKeyIndex = -1;
 
     for (var i = 0; i < this.tabDropdownList.length; i++) {
-      if (this.tabs[i].contentItem.config.title.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1) {
+      var _this$tabs$i$contentI, _this$tabs$i$contentI2;
+
+      if (((_this$tabs$i$contentI = (_this$tabs$i$contentI2 = this.tabs[i].contentItem.config.title) === null || _this$tabs$i$contentI2 === void 0 ? void 0 : _this$tabs$i$contentI2.toLowerCase().indexOf(event.target.value.toLowerCase())) !== null && _this$tabs$i$contentI !== void 0 ? _this$tabs$i$contentI : -1) !== -1) {
         this.tabDropdownList.eq(i).css('display', '');
         if (this.dropdownKeyIndex === -1) this.dropdownKeyIndex = i;
       } else {
@@ -593,23 +714,24 @@ utils.copy(Header.prototype, {
     if (this.dropdownKeyIndex !== -1) {
       this.tabDropdownList.eq(this.dropdownKeyIndex).addClass('lm_keyboard_active');
     }
-  },
-
+  }
   /**
    * Hides drop down for additional tabs when needed. It is called via mousedown
    * event on document when list is open, or programmatically when drag starts,
    * or active tab changes etc.
-   *
-   * @returns {void}
    */
-  _hideAdditionalTabsDropdown: function _hideAdditionalTabsDropdown(event) {
+
+
+  _hideAdditionalTabsDropdown(event) {
+    var _this$tabDropdownCont, _this$tabDropdownButt;
+
     // dropdown already closed, do nothing
     if (!this.isDropdownShown) return;
 
-    if (event && this.tabDropdownContainer.get(0).contains(event.target)) {
+    if (event && (_this$tabDropdownCont = this.tabDropdownContainer.get(0)) !== null && _this$tabDropdownCont !== void 0 && _this$tabDropdownCont.contains(event.target)) {
       // prevent events occuring inside the list from causing a close
       return;
-    } else if (event && this.tabDropdownButton.element.get(0) === event.target) {
+    } else if (event && ((_this$tabDropdownButt = this.tabDropdownButton) === null || _this$tabDropdownButt === void 0 ? void 0 : _this$tabDropdownButt.element.get(0)) === event.target) {
       // do nothing on the mouse down so that the click event can close, rather then re-open
       return;
     }
@@ -620,72 +742,87 @@ utils.copy(Header.prototype, {
 
     this.tabDropdownContainer.find('.lm_tabs').remove();
     $(document).off('mousedown', this._hideAdditionalTabsDropdown);
-  },
-
+  }
   /**
    * Ensures additional tab drop down doesn't overflow screen, and instead becomes scrollable.
-   *
-   * @returns {void}
    */
-  _updateAdditionalTabsDropdown: function _updateAdditionalTabsDropdown() {
+
+
+  _updateAdditionalTabsDropdown() {
+    var _this$tabDropdownCont2, _this$tabDropdownCont3, _$$scrollTop, _$$height;
+
     this.tabDropdownContainer.css('max-height', '');
     var h = this.tabDropdownContainer[0].scrollHeight;
     if (h === 0) return; // height can be zero if called on a hidden or empty list
 
-    var y = this.tabDropdownContainer.offset().top - $(window).scrollTop(); // set max height of tab dropdown to be less then the viewport height - dropdown offset
+    var y = ((_this$tabDropdownCont2 = (_this$tabDropdownCont3 = this.tabDropdownContainer.offset()) === null || _this$tabDropdownCont3 === void 0 ? void 0 : _this$tabDropdownCont3.top) !== null && _this$tabDropdownCont2 !== void 0 ? _this$tabDropdownCont2 : 0) - ((_$$scrollTop = $(window).scrollTop()) !== null && _$$scrollTop !== void 0 ? _$$scrollTop : 0); // set max height of tab dropdown to be less then the viewport height - dropdown offset
 
-    if (y + h > $(window).height()) {
-      this.tabDropdownContainer.css('max-height', $(window).height() - y - 10); // 10 being a padding value
-    }
-  },
+    if (y + h > ((_$$height = $(window).height()) !== null && _$$height !== void 0 ? _$$height : 0)) {
+      var _$$height2;
 
+      this.tabDropdownContainer.css('max-height', ((_$$height2 = $(window).height()) !== null && _$$height2 !== void 0 ? _$$height2 : 0) - y - 10); // 10 being a padding value
+    }
+  }
   /**
    * Checks whether the header is closable based on the parent config and
    * the global config.
    *
-   * @returns {Boolean} Whether the header is closable.
+   * @returns Whether the header is closable.
    */
-  _isClosable: function _isClosable() {
-    return this.parent.config.isClosable && this.layoutManager.config.settings.showCloseIcon;
-  },
-  _onPopoutClick: function _onPopoutClick() {
+
+
+  _isClosable() {
+    return Boolean(this.parent.config.isClosable && this.layoutManager.config.settings.showCloseIcon);
+  }
+
+  _onPopoutClick() {
     if (this.layoutManager.config.settings.popoutWholeStack === true) {
       this.parent.popout();
     } else {
-      this.activeContentItem.popout();
-    }
-  },
+      var _this$activeContentIt;
 
+      (_this$activeContentIt = this.activeContentItem) === null || _this$activeContentIt === void 0 ? void 0 : _this$activeContentIt.popout();
+    }
+  }
   /**
    * Invoked when the header's background is clicked (not it's tabs or controls)
    *
-   * @param    {jQuery DOM event} event
-   *
-   * @returns {void}
+   * @param event
    */
-  _onHeaderClick: function _onHeaderClick(event) {
+
+
+  _onHeaderClick(event) {
     if (event.target === this.element[0]) {
       this.parent.select();
     }
-  },
-
+  }
   /**
    * Pushes the tabs to the tab dropdown if the available space is not sufficient
-   *
-   * @returns {void}
    */
-  _updateTabSizes: function _updateTabSizes() {
+
+
+  _updateTabSizes() {
     if (this.tabs.length === 0) {
       return;
     }
 
-    if (!this.isOverflowing && this.tabsContainer.get(0).scrollWidth > this.tabsContainer.get(0).clientWidth) {
-      this.tabDropdownButton.element.show();
+    var tabsContainer = this.tabsContainer.get(0);
+
+    if (!tabsContainer) {
+      return;
+    }
+
+    if (!this.isOverflowing && tabsContainer.scrollWidth > tabsContainer.clientWidth) {
+      var _this$tabDropdownButt2;
+
+      (_this$tabDropdownButt2 = this.tabDropdownButton) === null || _this$tabDropdownButt2 === void 0 ? void 0 : _this$tabDropdownButt2.element.show();
       this.tabNextButton.show();
       this.tabPreviousButton.show();
       this.isOverflowing = true;
-    } else if (this.isOverflowing && this.tabsContainer.get(0).scrollWidth <= this.tabsContainer.get(0).clientWidth) {
-      this.tabDropdownButton.element.hide();
+    } else if (this.isOverflowing && tabsContainer.scrollWidth <= tabsContainer.clientWidth) {
+      var _this$tabDropdownButt3;
+
+      (_this$tabDropdownButt3 = this.tabDropdownButton) === null || _this$tabDropdownButt3 === void 0 ? void 0 : _this$tabDropdownButt3.element.hide();
       this.tabNextButton.hide();
       this.tabPreviousButton.hide();
       this.isOverflowing = false;
@@ -693,6 +830,12 @@ utils.copy(Header.prototype, {
 
     if (this.isOverflowing) this._checkScrollArrows();
   }
-});
-export default Header;
+
+}
+
+_defineProperty(Header, "_template", ['<div class="lm_header">', '<ul class="lm_tabs"></ul>', '<ul class="lm_controls"></ul>', '<ul class="lm_tabdropdown_list">', '<li class="lm_tabdropdown_search"><input type="text" placeholder="Find tab..."></li>', '</ul>', '</div>'].join(''));
+
+_defineProperty(Header, "_previousButtonTemplate", ['<ul class="lm_controls">', '<li class="lm_tabpreviousbutton"></li>', '</ul>'].join(''));
+
+_defineProperty(Header, "_nextButtonTemplate", ['<li class="lm_tabnextbutton"></li>'].join(''));
 //# sourceMappingURL=Header.js.map