diff --git a/src/js/_components/_ui.carousel.js b/src/js/_components/_ui.carousel.js index 0a84630..df97ae6 100755 --- a/src/js/_components/_ui.carousel.js +++ b/src/js/_components/_ui.carousel.js @@ -5,7 +5,7 @@ import 'jquery-hammerjs/jquery.hammer'; import Events from '../_events'; -const CarouselUI = (($) => { +const CarouselUI = ($ => { // Constants const NAME = 'CarouselUI'; @@ -13,7 +13,7 @@ const CarouselUI = (($) => { // Static methods static each(callback) { - $('.js-carousel').each((i, e) => { + $(`js${NAME}, .js-carousel`).each((i, e) => { callback(i, $(e)); }); } @@ -37,36 +37,49 @@ const CarouselUI = (($) => { // create carousel-controls if ($e.data('indicators')) { const $indicators = $('
    '); - $indicators.append(`
  1. `); + $indicators.append( + `
  2. `, + ); for (let i = 1; i < count; i++) { - $indicators.append(`
  3. `); + $indicators.append( + `
  4. `, + ); } $e.prepend($indicators); } // create arrows if ($e.data('arrows')) { - $e.prepend(`Previous`); - $e.prepend(`Next`); + $e.prepend( + `Previous`, + ); + $e.prepend( + `Next`, + ); } // init carousel $e.carousel(); - const $youtubeSlides = $e.find('iframe[src^="https://www.youtube.com/embed/"]'); + const $youtubeSlides = $e.find( + 'iframe[src^="https://www.youtube.com/embed/"]', + ); $e.on('slide.bs.carousel', () => { if ($youtubeSlides.length) { $youtubeSlides.each((i, e) => { const $e = $(e); try { - $e.data('player', new YT.Player(e, { - events: { - 'onReady': () => { - $e.data('player').pauseVideo(); + $e.data( + 'player', + new YT.Player(e, { + events: { + onReady: () => { + $e.data('player').pauseVideo(); + }, }, - }, - })); + }), + ); $e.data('player').pauseVideo(); } catch (e) {} @@ -74,28 +87,31 @@ const CarouselUI = (($) => { } }); - $e.find('.carousel-control-prev').on('click', (e) => { + $e.find('.carousel-control-prev').on('click', e => { e.preventDefault(); $e.carousel('prev'); }); - $e.find('.carousel-control-next').on('click', (e) => { + $e.find('.carousel-control-next').on('click', e => { e.preventDefault(); $e.carousel('next'); }); // init touch swipes - $e.hammer().bind('swipeleft panleft', (e) => { + $e.hammer().bind(Events.SWIPELEFT, e => { $(event.target).carousel('next'); }); - $e.hammer().bind('swiperight panright', (e) => { + $e.hammer().bind(Events.SWIPERIGHT, e => { $(event.target).carousel('prev'); }); /*$e.find('.carousel-item').hammer().bind('tap', (event) => { $(event.target).carousel('next'); });*/ + + $e.addClass(`js${NAME}-active`); + $e.trigger(Events.CAROUSEL_READY); }); } @@ -106,7 +122,7 @@ const CarouselUI = (($) => { } } - $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { + $(window).on(`${Events.LODEDANDREADY}`, () => { CarouselUI.init(); }); diff --git a/src/js/_events.js b/src/js/_events.js index 8d47be9..fa82736 100755 --- a/src/js/_events.js +++ b/src/js/_events.js @@ -4,13 +4,25 @@ module.exports = { AJAX: 'ajax-load', + TABHIDDEN: 'tab-hidden', + TABFOCUSED: 'tab-focused', + OFFLINE: 'offline', + ONLINE: 'online', LOADED: 'load', + SWIPELEFT: 'swipeleft panleft', + SWIPERIGHT: 'swiperight panright', + ALLERTAPPEARED: 'alert-appeared', + ALERTREMOVED: 'alert-removed', + LODEDANDREADY: 'load-ready', + LAZYIMAGEREADY: 'image-lazy-bg-loaded', + LAZYIMAGESREADY: 'images-lazy-loaded', MAPLOADED: 'map-loaded', MAPAPILOADED: 'map-api-loaded', MAPMARKERCLICK: 'map-marker-click', MAPPOPUPCLOSE: 'map-popup-close', SCROLL: 'scroll', RESIZE: 'resize', + CAROUSEL_READY: 'bs.carousel.ready', SET_TARGET_UPDATE: 'set-target-update', RESTORE_FIELD: 'restore-field', FORM_INIT_BASICS: 'form-basics', diff --git a/src/js/_layout.js b/src/js/_layout.js index 54edc84..93e5d9b 100755 --- a/src/js/_layout.js +++ b/src/js/_layout.js @@ -4,7 +4,7 @@ import $ from 'jquery'; import Events from './_events'; -const LayoutUI = (($) => { +const LayoutUI = ($ => { // Constants const W = window; const D = document; @@ -28,6 +28,9 @@ const LayoutUI = (($) => { console.log(`Initializing: ${NAME}`); // your custom UI + // Fire further js when layout is ready + $(W).trigger(Events.LODEDANDREADY); + // Custom fonts $Body.append( '', diff --git a/src/js/_main.js b/src/js/_main.js index d109582..e18c116 100755 --- a/src/js/_main.js +++ b/src/js/_main.js @@ -15,7 +15,7 @@ import FormBasics from './_components/_ui.form.basics'; import SmoothScroll from 'smooth-scroll'; const smoothScroll = SmoothScroll(); -const MainUI = (($) => { +const MainUI = ($ => { // Constants const W = window; const D = document; @@ -39,11 +39,11 @@ const MainUI = (($) => { if (D.visibilityState === HiddenName) { console.log('Tab: hidden'); $Body.addClass('is-hidden'); - $Body.trigger('tabHidden'); + $Body.trigger(Events.TABHIDDEN); } else { console.log('Tab: focused'); $Body.removeClass('is-hidden'); - $Body.trigger('tabFocused'); + $Body.trigger(Events.TABFOCUSED); } }); @@ -52,11 +52,11 @@ const MainUI = (($) => { if (!navigator.onLine) { console.log('Tab: offline'); $Body.addClass('is-offline'); - $Body.trigger('offline'); + $Body.trigger(Events.OFFLINE); } else { console.log('Tab: online'); $Body.removeClass('is-offline'); - $Body.trigger('online'); + $Body.trigger(Events.ONLINE); } }; @@ -174,7 +174,7 @@ const MainUI = (($) => { // // scroll links - $('.js-scrollTo').on('click', (e) => { + $('.js-scrollTo').on('click', e => { e.preventDefault(); const el = e.currentTarget; const $el = $(e.currentTarget); @@ -203,7 +203,7 @@ const MainUI = (($) => { } // data-set links - $('[data-set-target]').on('click', (e) => { + $('[data-set-target]').on('click', e => { const $el = $(e.currentTarget); const $target = $($el.data('set-target')); @@ -227,7 +227,7 @@ const MainUI = (($) => { }); // emulate links - $('.a[data-href]').on('click', (e) => { + $('.a[data-href]').on('click', e => { const $el = $(e.currentTarget); const href = $el.data('href'); if (!href.length) { @@ -306,7 +306,7 @@ const MainUI = (($) => { $AlertNotify[0].play(); } - $(W).trigger('alert-appeared'); + $(W).trigger(`${Events.ALLERTAPPEARED}`); } // hide site-wide alert @@ -321,7 +321,7 @@ const MainUI = (($) => { $AlertNotify[0].stop(); } - $(W).trigger('alert-removed'); + $(W).trigger(`${Events.ALLERTREMOVED}`); } // load all images @@ -349,7 +349,7 @@ const MainUI = (($) => { $el.addClass('loaded'); $el.removeClass('loading'); - $el.trigger('image-lazy-loaded'); + $el.trigger(`${Events.LAZYIMAGEREADY}`); }); } }); @@ -369,7 +369,7 @@ const MainUI = (($) => { $el.addClass('loaded'); $el.removeClass('loading'); - $el.trigger('image-lazy-bg-loaded'); + $el.trigger(`${Events.LAZYIMAGEREADY}`); }); } }); @@ -382,7 +382,7 @@ const MainUI = (($) => { AjaxUI.preload($imgLazyUrls).then(() => { console.log('All images are loaded!'); - $(W).trigger('images-lazy-loaded'); + $(W).trigger(`${Events.LAZYIMAGESREADY}`); }); }); }