skyquake/plugins/composer/src/src/libraries/TooltipManager.js

   1 /*global Element*/
   2 /**
   3  * Created by onvelocity on 2/22/16.
   4  */
   5
   6 'use strict';
   7
   8 import d3 from 'd3'
   9
  10 import '../styles/TooltipManager.scss'
  11
  12 class TooltipManager {
  13
  14         static addEventListeners(element = document.body) {
  15                 TooltipManager.element = element;
  16                 TooltipManager.removeEventListeners();
  17                 TooltipManager.element.addEventListener('mousedown', TooltipManager.onScrollRemoveTooltip, true);
  18                 TooltipManager.element.addEventListener('scroll', TooltipManager.onScrollRemoveTooltip, true);
  19         }
  20
  21         static removeEventListeners() {
  22                 if (TooltipManager.element) {
  23                         TooltipManager.element.removeEventListener('mousedown', TooltipManager.onScrollRemoveTooltip, true);
  24                         TooltipManager.element.removeEventListener('scroll', TooltipManager.onScrollRemoveTooltip, true);
  25                 }
  26         }
  27
  28         static onScrollRemoveTooltip() {
  29                 TooltipManager.hideTooltip();
  30         }
  31
  32         static showTooltip(dom, timeout = 2500) {
  33                 TooltipManager.hideTooltip();
  34                 const data = d3.select(dom).attr('data-tip');
  35                 const tip = d3.select(TooltipManager.element).selectAll('.tooltip-indicator').data([data]);
  36                 const rect = dom.getBoundingClientRect();
  37                 // position is handled fairly well by CSS for the bottom (default) position
  38                 // new code will be needed to support other positions, e.g. top, left, etc.
  39                 const position = {
  40                         opacity: 0,
  41                         position: 'absolute',
  42                         'pointer-events': 'none',
  43                         top: rect.bottom + 'px' ,
  44                         left: (rect.left + (rect.width / 2)) + 'px'
  45                 };
  46                 const enter = tip.enter('div').append('div').classed('tooltip-indicator', true);
  47                 enter.append('i').classed('tooltip-indicator-arrow arrow-up', true);
  48                 enter.append('span').classed('tooltip-indicator-content', true);
  49                 tip.style(position).transition().style('opacity', 1);
  50                 tip.select('span').html(d => d);
  51                 if (timeout > 0) {
  52                         TooltipManager.timeoutId = setTimeout(() => tip.transition().style('opacity', 0), timeout);
  53                 }
  54                 tip.exit().remove();
  55         }
  56
  57         static hideTooltip() {
  58                 clearTimeout(TooltipManager.timeoutId);
  59                 d3.selectAll('.tooltip-indicator').remove();
  60         }
  61
  62 }
  63
  64 TooltipManager.addEventListeners();
  65
  66 export default TooltipManager;