flexi-js/src/DropDown.js

A responsive and flexible css scheme.

import "./poly/element.closest";

export default class DropDown {

  constructor() {
    if (window.addEventListener) {
      window.addEventListener('click', this._onClick.bind(this));
      window.addEventListener('touch', this._onClick.bind(this));
    }
  }

  _onClick(evt) {
    let elem = evt.target,
        container = elem.closest('.flexi'),
        node = elem.closest('.flexi > *'),
        activeContainer = this._activeContainer,
        activeNode = this._activeNode;

    if (container != activeContainer) {
      if (activeContainer) {
        activeContainer.classList.remove('active');
      }
      if (container) {
        container.classList.add('active');
      }
      this._activeContainer = container;
    }

    if (node != activeNode) {
      if (activeNode) {
        activeNode.classList.remove('active');
      }
      if (node) {
        node.classList.add('active');
      }
      this._activeNode = node;
    }
  }

}