a medium-like popover used at mayneweb.com

ToolTipShare.js

/**
 * A Medium-like popover for a react application
 * You are free to distribute and modify the code here-in.
 *
 * @author Daveyon Mayne  <[email protected]>  https://www.mayneweb.com
 * svg by Medium.com
 */

import React, { Component } from 'react'

class ToolTipShare extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount() {
    this.onMouseUp()
  }

  onMouseUp() {
    const contentElement = document.querySelector(this.props.content)
    contentElement.addEventListener('mouseup', (e) => {

      const selectedText = this.getSelectionText()

      // Double-click can return an empty string
      if (selectedText) {
        this.showTooltip()
        this.onMouseDown()
      }

    }, false)
  }

  onMouseDown() {
    document.addEventListener('mousedown', (e) => {
      this.removeTooltipClass()
    }, false)
  }

  removeTooltipClass() {
    const toolTipElement = document.querySelector('.ToolTipShare')
    toolTipElement.classList.remove('ToolTipShare--active')
  }

  getSelectionText() {
    let text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
      text = document.selection.createRange().text;
    }

    return text;
  }

  twitterShareLink() {
    const w = '900'
    const h = '500'
    const twitUrl = 'https://twitter.com/intent/tweet'
    const originalReferer = window.location.href
    const url = originalReferer
    const text = '💬 ' + this.getSelectionText()
    const via = 'mayneweb'
    const fullUrl = `${twitUrl}?text=${text}&url=${url}&via=${via}&original_referer=${originalReferer}`

    // Fixes dual-screen position                         Most browsers      Firefox
    // Fixes dual-screen position                         Most browsers      Firefox
    const dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    const dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const left = ((width / 2) - (w / 2)) + dualScreenLeft;
    const top = ((height / 2) - (h / 2)) + dualScreenTop;
    const newWindow = window.open(fullUrl, '', 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus) {
      newWindow.focus();
    }

    this.removeTooltipClass()
  }

  showTooltip() {
    const toolTipElement = document.querySelector('.ToolTipShare')
    const toolTipElementRect = toolTipElement.getBoundingClientRect();
    const contentElement = document.querySelector(this.props.content)
    const contentElementRect = contentElement.getBoundingClientRect()
    const selection = window.getSelection()
    const oRange = selection.getRangeAt(0) //get the text range
    const selectedTextRect = oRange.getBoundingClientRect()
    const toolTipCenter = toolTipElementRect.width / 2
    const topOffset = 48
    const leftOffset = 2
    const top = (selectedTextRect.top - contentElementRect.top) - topOffset
    const left = selectedTextRect.left - contentElementRect.left
    const centerLeft = (left + (selectedTextRect.width / 2) - toolTipCenter)

    toolTipElement.style.top = `${top}px`
    toolTipElement.style.left = `${centerLeft - leftOffset}px`
    toolTipElement.classList.add('ToolTipShare--active')
  }

  render() {
    return (
      <div className="ToolTipShare">
        <div className="ToolTipShare__inner">
          <div className="ToolTipShare__inner__buttons">
            <button onClick={this.twitterShareLink.bind(this)} className="ToolTipShare__inner__buttons__item">
              <svg className="svgIcon-use" width="25" height="25"><path d="M21.725 5.338c-.744.47-1.605.804-2.513 1.006a3.978 3.978 0 0 0-2.942-1.293c-2.22 0-4.02 1.81-4.02 4.02 0 .32.034.63.07.94-3.31-.18-6.27-1.78-8.255-4.23a4.544 4.544 0 0 0-.574 2.01c.04 1.43.74 2.66 1.8 3.38-.63-.01-1.25-.19-1.79-.5v.08c0 1.93 1.38 3.56 3.23 3.95-.34.07-.7.12-1.07.14-.25-.02-.5-.04-.72-.07.49 1.58 1.97 2.74 3.74 2.8a8.49 8.49 0 0 1-5.02 1.72c-.3-.03-.62-.04-.93-.07A11.447 11.447 0 0 0 8.88 21c7.386 0 11.43-6.13 11.414-11.414.015-.21.01-.38 0-.578a7.604 7.604 0 0 0 2.01-2.08 7.27 7.27 0 0 1-2.297.645 3.856 3.856 0 0 0 1.72-2.23"></path></svg>
            </button>
          </div>
        </div>
        <div className="ToolTipShare__arrow">
          <span className="ToolTipShare__arrow__span"></span>
        </div>
      </div>
    )
  }
}

export default ToolTipShare