Method render

src/View/Pipe.js:49–99

* Renders view. * @protected * @return {HTMLElement}

()

   * @return {HTMLElement}
   */
  render () {
    this._$content = View.createElement('div', {
      className: 'pipe__content'
    })

    this._$scrollHandleLeft = View.createElement('div', {
      className:
        'pipe__scroll-handle pipe__scroll-handle--left ' +
        'pipe__scroll-handle--disabled',
      onMouseEnter: this.scrollHandleDidStart.bind(this, 0),
      onDragEnter: this.scrollHandleDidStart.bind(this, 0),
      onMouseLeave: this.scrollHandleDidStop.bind(this),
      onDragLeave: this.scrollHandleDidStop.bind(this)
    })

    this._$scrollHandleRight = View.createElement('div', {
      className: 'pipe__scroll-handle pipe__scroll-handle--right',
      onMouseEnter: this.scrollHandleDidStart.bind(this, 1),
      onDragEnter: this.scrollHandleDidStart.bind(this, 1),
      onMouseLeave: this.scrollHandleDidStop.bind(this),
      onDragLeave: this.scrollHandleDidStop.bind(this)
    })

    // Bind to existing pipe element if any
    let $root = document.querySelector('.pipe')
    if ($root === null) {
      $root = View.createElement('div')
      $root.classList.add('pipe')
    }

    // Bind drag events
    $root.ondrop = this.dragDidDrop.bind(this)
    $root.ondragenter = this.dragDidEnterPipe.bind(this)
    $root.ondragover = this.dragDidOverPipe.bind(this)

    // Bind to existing scrollable if any
    this._$scrollable = $root.querySelector('.pipe__scrollable')
    if (this._$scrollable === null) {
      this._$scrollable = View.createElement('div', {
        className: 'pipe__scrollable'
      })
    }

    this._$scrollable.appendChild(this._$content)
    this._$scrollable.appendChild(this._$scrollHandleLeft)
    this._$scrollable.appendChild(this._$scrollHandleRight)

    $root.appendChild(this._$scrollable)
    $root.addEventListener('wheel', this.mouseDidWheel.bind(this))
    return $root
  }

  /**
   * Injects subview's root element into own DOM structure.