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                 if (element === TooltipManager.element) {
  16                         return;
  17                 }
  18                 // remove listeners for current element
  19                 TooltipManager.removeEventListeners();
  20                 TooltipManager.element = element;
  21                 if (element) {
  22                         // make sure new element is clean
  23                         TooltipManager.removeEventListeners();
  24                         TooltipManager.element.addEventListener('mousedown', TooltipManager.onScrollRemoveTooltip, true);
  25                         TooltipManager.element.addEventListener('scroll', TooltipManager.onScrollRemoveTooltip, true);
  26                 }
  27         }
  28
  29         static removeEventListeners() {
  30                 if (TooltipManager.element) {
  31                         TooltipManager.element.removeEventListener('mousedown', TooltipManager.onScrollRemoveTooltip, true);
  32                         TooltipManager.element.removeEventListener('scroll', TooltipManager.onScrollRemoveTooltip, true);
  33                 }
  34         }
  35
  36         static onScrollRemoveTooltip() {
  37                 TooltipManager.hideTooltip();
  38         }
  39
  40         static showTooltip(dom, timeout = 2500) {
  41                 TooltipManager.hideTooltip();
  42                 const data = d3.select(dom).attr('data-tip');
  43                 const tip = d3.select(TooltipManager.element).selectAll('.tooltip-indicator').data([data]);
  44                 const rect = dom.getBoundingClientRect();
  45                 // position is handled fairly well by CSS for the bottom (default) position
  46                 // new code will be needed to support other positions, e.g. top, left, etc.
  47                 const position = {
  48                         opacity: 0,
  49                         position: 'absolute',
  50                         'pointer-events': 'none',
  51                         top: rect.bottom + 'px' ,
  52                         left: (rect.left + (rect.width / 2)) + 'px'
  53                 };
  54                 const enter = tip.enter('div').append('div').classed('tooltip-indicator', true);
  55                 enter.append('i').classed('tooltip-indicator-arrow arrow-up', true);
  56                 enter.append('span').classed('tooltip-indicator-content', true);
  57                 tip.style(position).transition().style('opacity', 1);
  58                 tip.select('span').html(d => d);
  59                 if (timeout > 0) {
  60                         TooltipManager.timeoutId = setTimeout(() => tip.transition().style('opacity', 0), timeout);
  61                 }
  62                 tip.exit().remove();
  63         }
  64
  65         static hideTooltip() {
  66                 clearTimeout(TooltipManager.timeoutId);
  67                 d3.selectAll('.tooltip-indicator').remove();
  68         }
  69
  70 }
  71
  72 TooltipManager.addEventListeners();
  73
  74 export default TooltipManager;