Popup.js

/**
 * A Popup component
 *
 * @constructor
 * @param {object}  options - The options object for the popup
 * @param {string}  options.container - The d3 Selection
 * @param {string}  options.content - Html String
 */
class Popup {
  constructor(options = {}) {
    this.options = options;

    this.closePopup = this.closePopup.bind(this);
  }

  showPopup() {
    const { container } = this.options;

    const containerY = container.node().getBoundingClientRect().y;

    container.select('.oecd-chart__info-popup')
      .classed('oecd-chart__info-popup--active', true)
      .style('top', `${containerY}px`);
  }

  closePopup() {
    const { container } = this.options;

    container.select('.oecd-chart__info-popup')
      .classed('oecd-chart__info-popup--active', false);
  }

  render() {
    const { container, content } = this.options;

    const popupNode =
    container
      .append('div')
      .attr('class', 'oecd-chart__info-popup')
      .html(content);

    popupNode
      .append('span')
      .attr('class', 'info-popup__close-button')
      .text('x')
      .on('click', this.closePopup);
  }
}

export default Popup;