Detect view

viewChange.js

class slider extends utilities{
    constructor() {
        super(); 
        /* -----------------------------------------------------------
         * slider() function should place before 
         * viewChangeEevent Because those function listion event
         * & viewChangeEvent trigger events( mobileView or desktopView)
         * ----------------------------------------------------------- */
        Query('.andels-slider').length > 0 && this.slider();
        this.viewChangeEvent();      
    }
    
    slider() {
        let sliderInstance = jQuery('.andels-slider'),
            slickIsLoaded = false;
        
        jQuery(document).on('mobileView', ()=> {
            if (slickIsLoaded) {
                sliderInstance.slick('unslick');
                slickIsLoaded = false;
            }
        });
        
        jQuery(document).on('desktopView', ()=> {
            slickIsLoaded = true;
            sliderInstance.slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                dots: false,
                infinite: true,
                arrow: true,
                cssEase: 'linear',
                adaptiveHeight: true

            });
        })
    }
        
}


/* Utilities class */
class utilities {
    viewChangeEvent() {
        let mobileView,
            mobileBreakPoint = 767;

        const isMobile = (resize = false) => {
            let windowWidth = jQuery(window).width();
            if (!resize) {
                mobileView = windowWidth < mobileBreakPoint ? true : false;
            }
            if (windowWidth < mobileBreakPoint && mobileView) {
                mobileView = false;
                jQuery(document).trigger('mobileView');

            } else if (windowWidth > mobileBreakPoint && !mobileView) {
                mobileView = true;
                jQuery(document).trigger('desktopView');
            }
        }; 

        jQuery(document).ready(() => { isMobile(); });
        jQuery(window).resize(() => { isMobile(true); });
    }
}