IMPROVEMENT: Events system synchronization
This commit is contained in:
Tony Air
parent
b1484f66f7
commit
45fbc7c8d1
|
|
@ -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 = $('<ol class="carousel-indicators"></ol>');
|
||||
$indicators.append(`<li data-target="#${ id }" data-slide-to="0" class="active"></li>`);
|
||||
$indicators.append(
|
||||
`<li data-target="#${id}" data-slide-to="0" class="active"></li>`,
|
||||
);
|
||||
for (let i = 1; i < count; i++) {
|
||||
$indicators.append(`<li data-target="#${ id }" data-slide-to="${ i }"></li>`);
|
||||
$indicators.append(
|
||||
`<li data-target="#${id}" data-slide-to="${i}"></li>`,
|
||||
);
|
||||
}
|
||||
$e.prepend($indicators);
|
||||
}
|
||||
|
||||
// create arrows
|
||||
if ($e.data('arrows')) {
|
||||
$e.prepend(`<i class="carousel-control-prev" data-target="#${ id }" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>`);
|
||||
$e.prepend(`<i class="carousel-control-next" data-target="#${ id }" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>`);
|
||||
$e.prepend(
|
||||
`<i class="carousel-control-prev" data-target="#${id}" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>`,
|
||||
);
|
||||
$e.prepend(
|
||||
`<i class="carousel-control-next" data-target="#${id}" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>`,
|
||||
);
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
'<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">',
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue