triplexlab/examples/accordions/component02/app.js

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

(function () {
  console.log(tr);
  new tr.Accordions({
    targets: '.tr_container',
    firstItemActive: true, // 첫번째 아이템을 활성화 할건지 여부체크 true or false (기본 값으로 false)
    duration: 0.8, // 활성화되는 시간을 컨트롤 할수 있습니다.(기본 값으로 0.4초를 가지고 있습니다.)
    autoplay: false, // 각각의 리스트를 자동으로 플레이를 시킬지 여부체크 true or false (기본 값으로 false)
    loop: false, // autoplay를 무한 반복 시킬것인지 여부체크 true or false (기본 값으로 false)
    eventClick(e){  // 이벤트 클릭에 콜백 정의 (필수 입력값입니다.)
      const _selfSib = $(e.currentTarget).siblings().find('.tr_acc_box');
      const _self = $(e.currentTarget).find('.tr_acc_box');
      this.unactive(_selfSib); // height: 0의 스타일 정의되어 있습니다. 인자로 비활성화 시킬 target나머지 들을 넣으세요.
      this.active(_self); // height: 'auto'의 스타일 정의되어 있습니다. 인자로 활성화 시킬 target을 넣으세요.
    }
  });

  new tr.Ratio({
    targets: {
      startEl: '.tr_container', // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
      endEl: '.tr_item', // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
      eventEl: '.btn-wrap-js', // 더보고 혹은 (숫자 증가) 기능 추가할경우, 클릭 대상의 Components를 선택자로 선언 합니다.
    },
    additems: 5, // 추가 하고 싶은 항목의 객수를 뜻합니다.(1개 이상의 값을 넣어야만 실행 가능합니다.)
    addClassName: 'more_active', // numbering이라는 클래스 위치에 또다른 클래스를 추가할수 있습니다.
    template: function (idIdx, current, total, addClassName = 'none') {
      // template라는 키로 더보기 버튼 템플릿을 직접 만들수 있습니다.
      return `<a href="javascript:;" class="numbering ${addClassName}">
                <span>MORE</span>
                <span data-id="${idIdx}" class="current">${current}</span>
                <span> / </span>
                <span class="total">${total}</span>
            </a>`;
    },
  });
})();