toggle chatting slider( 간단한 토글 슬라이더 기능)

토글 슬라이드

var spa = (function ( $ ) {
    // 모듈 스코프 변수 선언
    var
    // 상수 설정
    configMap = {
        extended_height : 334,
        extended_title : 'Click to retract',
        retracted_height : 16,
        retracted_title : 'Click to extend',
        template_html : '<div class="chat-slider"><\/div>'
    },

        // 그 외 나머지 모듈 스코프 변수 선언
        $chatSlider,
        toggleSlider, onClickSlider, initModule;

    // DOM 메서드 /toggleSlider/
    // 슬라이더 높이를 조정
    //
    toggleSlider = function () {
        var
        slider_height = $chatSlider.height();

        // 슬라이더가 닫혀 있으면 연다
        if ( slider_height === configMap.retracted_height ) {
            $chatSlider
                .animate({ height : configMap.extended_height })
                .attr( 'title', configMap.extended_title )
            return true;
        }

        // 슬라이더가 열려 있으면 닫는다
        else if ( slider_height === configMap.extended_height ) {
            $chatSlider
                .animate({ height : configMap.retracted_height })
                .attr( 'title', configMap.retracted_title );
            return true;
        }
        // 슬라이더 상태가 전환되는 동안에는 아무 일도 하지 않는다
        return false;
    }

    // 이벤트 핸들러 /oncickSlider/
    // 클릭 이벤트를 받고 toggleSlider를 호출
    //
    onClickSlider = function ( event ) {
        toggleSlider();
        return false;
    };

    // public 메서드 /initModule/
    // 초기 상태 설정 및 기능 제공
    //
    initModule = function ( $container ) {

        // HTML 렌더링
        $container.html( configMap.template_html );
        console.log($container);
        $chatSlider = $container.find( '.chat-slider' );


        // 슬라이더 높이 및 제목 초기화
        // 클릭 이벤트와 이벤트 핸들러 바인딩 $chatSlider
        $chatSlider
            .attr( 'title', configMap.retracted_title )
            .click( onClickSlider );

        return true;
    };

    return { initModule : initModule };

}( jQuery ));

// DOM이 준비되면 SPA를 실행 제이쿼리의 ready 메서드를
//
$(function(){
    spa.initModule( $('#chat') );
});

See the Pen spa 채팅슬라이드 토글 by jaeheekim (@jaehee) on CodePen.

Jaehee's e-room