nyawach
4/24/2017 - 3:14 AM

モーダルやサイドバーで使うKlass

モーダルやサイドバーで使うKlass

import _ from "lodash";
import $ from "jquery";

const ATTR = "data-active";
const animationend = "animationend webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd";

export default class Klass {

  constructor(opts = {}){
    this.$root = opts.$root || $(".js-root");
    this.isActive = false;
  }


  open() {
    this.isActive = true;
    this.setAttr();
  }


  close() {
    this.isActive = false;
    this.setAttr();
    // animation用
    // this.$root.on(animationend, (evt) => {
    //   if(evt.target !== this.$root[0]) return;
    //   this.$root.attr(ATTR, "");
    //   this.$root.off(animationend);
    // });
  }


  toggle() {
    this.isActive = !this.isActive;
    this.setAttr();
  }


  setAttr() {
    this.$root.attr(ATTR, this.isActive);
  }

}