substance/ui/Overlay.js

Substance is a JavaScript library for web-based content editing. It provides building blocks for realizing custom text editors and web-based publishing systems.

import ToolPanel from './ToolPanel'

/*
  A default implementation to render the content for the overlay (aka popup) tools.
*/
class Overlay extends ToolPanel {

  didMount() {
    super.didMount()
    if (!this.context.scrollPane) {
      throw new Error('Requires scrollPane context')
    }
    this.context.scrollPane.on('selection:positioned', this._onSelectionPositioned, this)
  }

  dispose() {
    super.dispose()
    this.context.scrollPane.off(this)
  }

  render($$) {
    let el = $$('div').addClass('sc-overlay')
    el.addClass('sm-hidden')
    el.addClass('sm-theme-'+this.getTheme())
    el.append(
      $$('div').addClass('se-active-tools').append(
        this.renderEntries($$)
      ).ref('entriesContainer')
    )
    return el
  }

  show(hints) {
    this.el.removeClass('sm-hidden')
    this._position(hints)
  }

  hide() {
    this.el.addClass('sm-hidden')
  }

  _onSelectionPositioned(hints) {
    if (this.hasEnabledTools()) {
      this.el.removeClass('sm-hidden')
      let overlayWidth = this.el.htmlProp('offsetWidth')
      let selRect = hints.selectionRect
      let selectionMaxWidth = selRect.width
      // By default, Overlays are aligned center/bottom to the selection
      this.el.css('top', selRect.top + selRect.height)
      let leftPos = selRect.left + selectionMaxWidth/2 - overlayWidth/2
      // Must not exceed left bound
      leftPos = Math.max(leftPos, 0)
      // Must not exceed right bound
      let maxLeftPos = selRect.left + selectionMaxWidth + selRect.right - overlayWidth
      leftPos = Math.min(leftPos, maxLeftPos)
      this.el.css('left', leftPos)
    } else {
      this.el.addClass('sm-hidden')
    }
  }

  getTheme() {
    return this.props.theme || 'dark'
  }

}

export default Overlay