Untitled

export class Utils {
    constructor() {
        this.$ = window.jQuery;
        this.$window = this.$(window);
        this.$body = $('html, body');
        this.scrollSpeed = 700;
        this.cssClassesSizes = 'xs sm md ps lg xl';
        this.sizes = {
            'xs': 480,
            'sm': 768,
            'md': 1080, //Portal size
            'ps': 1440,
            'lg': 1920,
            'xl': 1000000000000
        } // screen sizes in asc order

        // screen size
        this.screenSize = 'xl';
        this.setUpScreenSize();
        this.addScreenSizeCssClassOnHtmlTag();
        this.backToTop();
        this.setScroll();
        this.scrollEffect();
    }

    setUpScreenSize() {
        let width = this.$window.width();

        for (let size in this.sizes) {
            if (width < this.sizes[size]) {
                this.screenSize = size;
                break;
            }
        }
    }

    observeSize(callback) {
        let fn = callback || ((ev) => {});

        this.$(window).on('resize', (ev) => {
            fn(ev);
        });
    }

    updateScreenSizeCssClassOnHtmlTag() {
        this.observeSize((() => {
            this.setUpScreenSize();
            this.cleanScreenSizeCssClassOnHtmlTag();
            this.addScreenSizeCssClassOnHtmlTag();
        }).bind(this));
    }

    addScreenSizeCssClassOnHtmlTag() {
        this.$('html').addClass(this.screenSize);
    }

    cleanScreenSizeCssClassOnHtmlTag() {
        this.$('html').removeClass(this.cssClassesSizes);
    }

    backToTop() {
        let container = document.createElement('div'),
            buttonObject = '<div class="back-to-top"></div>';

        container.innerHTML = buttonObject;
        document.body.appendChild(container);

        document.getElementsByClassName('back-to-top')[0].addEventListener('click', (e) => {
            this.$body.animate({
                scrollTop: this.$body.offset().top
            }, this.scrollSpeed);
        });
    }

    setScroll() {
        console.log(this);
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
        location.hostname == this.hostname) {

        let target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        
            if (target.length) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
            }, 800, function() {
                let $target = $(target);
                    $target.focus();
                    if ($target.not(":focus")) {
                        $target.attr('tabindex', '-1');
                        $target.focus();
                    };
            });
        }
    }
    }

   scrollEffect() {
       let anchors = $('a[href*="#"]').not('[href="#"]').not('[href="#0"]')

       anchors.forEach(item => {
           item.addEventListener('click', this.setScroll.bind(this, item));
       })
   }
        
}
    
// this.elements.gallonsCounterButtons && this.elements.gallonsCounterButtons.forEach(item => {
//     item.addEventListener('click', this.handleGallonsCounterButtonClick.bind(this, item));
// });