Untitled
unknown
plain_text
4 years ago
3.3 kB
7
Indexable
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)); // });
Editor is loading...