ES6 jQuery Accordion

es6-jquery-accordion

class productsAccordion {
    
    constructor($productsAccordion) {
        this.$drawer = $productsAccordion;
        this.$header = null;
        this.headerHeight = null;
        this.expandedSize = null;
    }
    
    getGroup(){
        this.$header = this.$drawer.find('[data-js=accordion-header]').eq(0);
    }

    checkForImages(){
        let hasImages = this.$drawer.find('.products-accordion-widget__images-group').length;
        if(hasImages){ 
            return true;
        }
    }
    
    getExpandedSizes(){
        this.headerHeight = this.$header.outerHeight();
        this.expandedSize = this.$drawer[0].scrollHeight;
    }

    setCollapsedHeight(){
        this.$drawer.css('max-height' , this.headerHeight);
    }

    setExpandedHeight(){
        this.$drawer.css('max-height' , this.expandedSize);
    }

    openFirstDrawer(){
        this.$header.addClass('open');
        this.$drawer.addClass('open');
        this.setExpandedHeight();
    }

    closeOtherDrawers(){
        this.$drawer.siblings('[data-js=accordion-drawer]')
        .css('max-height' , this.headerHeight)
        .removeClass('open')
        .find('[data-js=accordion-header]').removeClass('open');
    }    

    toggleDrawer() {
        this.$header.toggleClass('open');

        if( parseInt(this.$drawer.css('max-height')) <= this.headerHeight){ 
            this.$drawer.css('max-height' , this.expandedSize);
            this.closeOtherDrawers();
        } else{
            this.setCollapsedHeight();
        }
    }

    addEventListeners() {
        this.$header.on('click', this.toggleDrawer.bind(this));
    }

    destroyAccordion(){
        this.$header.addClass('static').attr('data-js', "");
        this.$drawer.addClass('static').attr('data-js', "");
    }

    shouldInit(){
        const accordionExists = this.$drawer.length;
        return [accordionExists].every((truthy) => truthy); 
    }

    init(index) {
        if( !this.shouldInit() ) {
            return false;
        }
        
        this.getGroup();
        this.checkForImages();

        if( this.checkForImages() ){
            this.destroyAccordion();
            return false;
        }

        this.getExpandedSizes();

        if( index !== 0 ){
            this.setCollapsedHeight();
        } else{
            this.openFirstDrawer();
        }

        this.addEventListeners();
    }
}

export default () => {
    const $target = $('[data-js=accordion-drawer]');

    $.each($target, (index, elem) => {
        const $elem = $(elem);
        const instance = new productsAccordion($elem);

        instance.init(index);
    });
};