view.js

import View from './view';

export default class ModalView extends View {
  constructor(controller, options) {
    super(controller);
    this.node = options.node;
    this.overlay = options.overlay;
    this.triggers = options.triggers;
    this.init();
  }

  init() {
    super.init();
    this.addEventListeners();
  }

  update = (data) => {
    if (data.isOpen) {
      this.open();
    } else {
      this.close();
    }
  }

  open() {
    this.node.classList.add('is-open');
    this.overlay.classList.add('is-open');
  }

  close() {
    this.node.classList.remove('is-open');
    this.overlay.classList.remove('is-open');
    this.node.classList.add('is-closed');
    this.overlay.classList.add('is-closed');
  }

  handleOverlayClick = (e) => {
    if (e.target !== e.currentTarget) return;
    this.controller.close();
  }

  addEventListeners = () => {
    this.triggers.open.forEach(node => node.addEventListener('click', this.controller.open));
    this.triggers.close.forEach(node => node.addEventListener('click', this.controller.close));
    document.addEventListener('keydown', this.handleKeypress);
  }
}