triplexlab/src/js/Actives/toggleDynamic.js

프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻‍💻🧑🏻‍💻

import { _tr } from '../Helpers/DomApi.js';
import Actives from '../Helpers/basic.js';

export default class ToggleDynamic extends Actives {
  /**
     * @param {Options | object}
     * @example
     * const my = new tr.ToggleDynamic({
            targets: {
                startEl: '.faq_inner',
                endEl: '.faq_item',
                eventEl: '.btn',
            },
            addClassName: 'active'
        });
     */
  constructor(el) {
    super(el);
    this.initHandler();
  }
  /**
   * 특정 조건에만 실행하는 메소드
   */
  initHandler() {
    const { startEl, endEl, eventEl } = this.el.targets;
    const _evnEl = _tr(eventEl);

    const handler = self => {
      const listInner = _tr(endEl).closest(startEl)[0];
      super.toggle(listInner);
      super.toggle(self);
    };
    /** 이벤트 핸들러 함수(즉시 실행) */
    (() => {
      _evnEl.reduce((arr, cur, idx, src) => {
        cur.addEventListener('click', e => {
          e.preventDefault();
          handler(e.currentTarget);
        });
      }, 0);
    })();
  }
}