text: /// //////////////////////////////////////////////////////////
  // TabManager
  // By Philippe Leefsma, April 2016
  //
  /// //////////////////////////////////////////////////////////
  import UIComponent from 'UIComponent'
  import 'dragula/dist/dragula.min.css'
  import dragula from 'dragula'
  import './TabManager.scss'
  
  export default class TabManager extends UIComponent {
    /// ////////////////////////////////////////////////////////////////
    //
    //
    /// ////////////////////////////////////////////////////////////////
    constructor (container, opts = {}) {
      super()
  
      this.tabsHeaderId = this.guid()
      this.containerId = this.guid()
      this.class = this.guid()
      this.nbTabs = 0
  
      var html = `
        <div id="${this.containerId}" class="c${this.class} sbtabs">
          <ul id="${this.tabsHeaderId}" class="headers">
          </ul>
        </div>
      `
  
      $(container).append(html)
  
      if (opts.allowDrag) {
        this.drake = dragula(
          [$(`#${this.tabsHeaderId}`)[0]],
          { removeOnSpill: false })
  
        var drakeEvents = [
          'drag', 'dragend', 'drop', 'cancel', 'remove'
        ]
  
        drakeEvents.forEach((event) => {
          this.drake.on(event, () => {
            this.emit('drake.' + event, arguments)
          })
        })
      }
    }
  
    /// ////////////////////////////////////////////////////////////////
    //
    //
    /// ////////////////////////////////////////////////////////////////
    addTab (tabInfo) {
      this.nbTabs++
  
      var tabHeaderLinkId = this.guid()
      var tabHeaderId = this.guid()
  
      var tabId = this.guid()
  
      var tabHtml = `
        <li id="${tabHeaderId}" tabId="${tabId}">
          <a id="${tabHeaderLinkId}" tabId="${tabId}" class="sbtab-link">
            <label tabId="${tabId}">
              ${tabInfo.name}
            </label>
          </a>
        </li>
      `
  
      $('#' + this.tabsHeaderId).append(tabHtml)
  
      var nbTabs = this.nbTabs
  
      $(`#${this.tabsHeaderId} > li`).each(function (idx) {
        $(this).css({
          width: `calc(${99 / nbTabs}% - 2px)`,
          left: `calc(${idx * (99 / nbTabs)}% + 2px)`
        })
      })
  
      var containerHtml = `
  
        <div id="${tabId}">
          ${tabInfo.html}
        </div>
      `
  
      $('#' + this.containerId).append(containerHtml)
  
      if (tabInfo.active) { this.setActiveTab(tabId) }
  
      $('#' + tabHeaderLinkId).click((e) => {
        var id = $(e.target).attr('tabId')
  
        this.setActiveTab(id)
      })
  
      return tabId
    }
  
    /// ////////////////////////////////////////////////////////////////
    //
    //
    /// ////////////////////////////////////////////////////////////////
    setActiveTab (tabId) {
      var _this = this
  
      $(`.c${this.class} .sbtab-link`).each((idx, element) => {
        var id = $(element).attr('tabId')
  
        if (id != tabId) {
          $(element).removeClass('active')
          $('#' + id).css('display', 'none')
  
          _this.emit('tab.visible', {
            id: id,
            name: $(element).text()
          })
        } else {
          $(element).addClass('active')
          $('#' + id).css('display', 'block')
        }
      })
    }
  
    /// ////////////////////////////////////////////////////////////////
    //
    //
    /// ////////////////////////////////////////////////////////////////
    clear () {
      $(`#${this.tabsHeaderId} > li`).remove()
      $(`#${this.containerId} > div`).remove()
  
      this.nbTabs = 0
    }
  }
  