tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 09:05:45 +00:00
Code Issues Projects Releases Wiki Activity

IMPROVEMENT: Events system synchronization

Browse Source
This commit is contained in:
Tony Air 2020-02-10 04:22:21 +07:00
parent b1484f66f7
commit 45fbc7c8d1
4 changed files with 63 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/js/_components/_ui.carousel.js
View File

@ -5,7 +5,7 @@ import 'jquery-hammerjs/jquery.hammer';
import Events from '../_events'; import Events from '../_events';
const CarouselUI = (($) => { const CarouselUI = ($ => {
// Constants // Constants
const NAME = 'CarouselUI'; const NAME = 'CarouselUI';
@ -13,7 +13,7 @@ const CarouselUI = (($) => {
// Static methods // Static methods
static each(callback) { static each(callback) {
$('.js-carousel').each((i, e) => { $(`js${NAME}, .js-carousel`).each((i, e) => {
callback(i, $(e)); callback(i, $(e));
}); });
} }
@ -37,36 +37,49 @@ const CarouselUI = (($) => {
// create carousel-controls // create carousel-controls
if ($e.data('indicators')) { if ($e.data('indicators')) {
const $indicators = $('<ol class="carousel-indicators"></ol>'); 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++) { 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); $e.prepend($indicators);
} }
// create arrows // create arrows
if ($e.data('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(
$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>`); `<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 // init carousel
$e.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', () => { $e.on('slide.bs.carousel', () => {
if ($youtubeSlides.length) { if ($youtubeSlides.length) {
$youtubeSlides.each((i, e) => { $youtubeSlides.each((i, e) => {
const $e = $(e); const $e = $(e);
try { try {
$e.data('player', new YT.Player(e, { $e.data(
events: { 'player',
'onReady': () => { new YT.Player(e, {
$e.data('player').pauseVideo(); events: {
onReady: () => {
$e.data('player').pauseVideo();
},
}, },
}, }),
})); );
$e.data('player').pauseVideo(); $e.data('player').pauseVideo();
} catch (e) {} } 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.preventDefault();
$e.carousel('prev'); $e.carousel('prev');
}); });
$e.find('.carousel-control-next').on('click', (e) => { $e.find('.carousel-control-next').on('click', e => {
e.preventDefault(); e.preventDefault();
$e.carousel('next'); $e.carousel('next');
}); });
// init touch swipes // init touch swipes
$e.hammer().bind('swipeleft panleft', (e) => { $e.hammer().bind(Events.SWIPELEFT, e => {
$(event.target).carousel('next'); $(event.target).carousel('next');
}); });
$e.hammer().bind('swiperight panright', (e) => { $e.hammer().bind(Events.SWIPERIGHT, e => {
$(event.target).carousel('prev'); $(event.target).carousel('prev');
}); });
/*$e.find('.carousel-item').hammer().bind('tap', (event) => { /*$e.find('.carousel-item').hammer().bind('tap', (event) => {
$(event.target).carousel('next'); $(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(); CarouselUI.init();
}); });

12
src/js/_events.js
View File

@ -4,13 +4,25 @@
module.exports = { module.exports = {
AJAX: 'ajax-load', AJAX: 'ajax-load',
TABHIDDEN: 'tab-hidden',
TABFOCUSED: 'tab-focused',
OFFLINE: 'offline',
ONLINE: 'online',
LOADED: 'load', 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', MAPLOADED: 'map-loaded',
MAPAPILOADED: 'map-api-loaded', MAPAPILOADED: 'map-api-loaded',
MAPMARKERCLICK: 'map-marker-click', MAPMARKERCLICK: 'map-marker-click',
MAPPOPUPCLOSE: 'map-popup-close', MAPPOPUPCLOSE: 'map-popup-close',
SCROLL: 'scroll', SCROLL: 'scroll',
RESIZE: 'resize', RESIZE: 'resize',
CAROUSEL_READY: 'bs.carousel.ready',
SET_TARGET_UPDATE: 'set-target-update', SET_TARGET_UPDATE: 'set-target-update',
RESTORE_FIELD: 'restore-field', RESTORE_FIELD: 'restore-field',
FORM_INIT_BASICS: 'form-basics', FORM_INIT_BASICS: 'form-basics',

5
src/js/_layout.js
View File

@ -4,7 +4,7 @@ import $ from 'jquery';
import Events from './_events'; import Events from './_events';
const LayoutUI = (($) => { const LayoutUI = ($ => {
// Constants // Constants
const W = window; const W = window;
const D = document; const D = document;
@ -28,6 +28,9 @@ const LayoutUI = (($) => {
console.log(`Initializing: ${NAME}`); console.log(`Initializing: ${NAME}`);
// your custom UI // your custom UI
// Fire further js when layout is ready
$(W).trigger(Events.LODEDANDREADY);
// Custom fonts // Custom fonts
$Body.append( $Body.append(
'<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">', '<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">',

26
src/js/_main.js
View File

@ -15,7 +15,7 @@ import FormBasics from './_components/_ui.form.basics';
import SmoothScroll from 'smooth-scroll'; import SmoothScroll from 'smooth-scroll';
const smoothScroll = SmoothScroll(); const smoothScroll = SmoothScroll();
const MainUI = (($) => { const MainUI = ($ => {
// Constants // Constants
const W = window; const W = window;
const D = document; const D = document;
@ -39,11 +39,11 @@ const MainUI = (($) => {
if (D.visibilityState === HiddenName) { if (D.visibilityState === HiddenName) {
console.log('Tab: hidden'); console.log('Tab: hidden');
$Body.addClass('is-hidden'); $Body.addClass('is-hidden');
$Body.trigger('tabHidden'); $Body.trigger(Events.TABHIDDEN);
} else { } else {
console.log('Tab: focused'); console.log('Tab: focused');
$Body.removeClass('is-hidden'); $Body.removeClass('is-hidden');
$Body.trigger('tabFocused'); $Body.trigger(Events.TABFOCUSED);
} }
}); });
@ -52,11 +52,11 @@ const MainUI = (($) => {
if (!navigator.onLine) { if (!navigator.onLine) {
console.log('Tab: offline'); console.log('Tab: offline');
$Body.addClass('is-offline'); $Body.addClass('is-offline');
$Body.trigger('offline'); $Body.trigger(Events.OFFLINE);
} else { } else {
console.log('Tab: online'); console.log('Tab: online');
$Body.removeClass('is-offline'); $Body.removeClass('is-offline');
$Body.trigger('online'); $Body.trigger(Events.ONLINE);
} }
}; };
@ -174,7 +174,7 @@ const MainUI = (($) => {
// //
// scroll links // scroll links
$('.js-scrollTo').on('click', (e) => { $('.js-scrollTo').on('click', e => {
e.preventDefault(); e.preventDefault();
const el = e.currentTarget; const el = e.currentTarget;
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
@ -203,7 +203,7 @@ const MainUI = (($) => {
} }
// data-set links // data-set links
$('[data-set-target]').on('click', (e) => { $('[data-set-target]').on('click', e => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
const $target = $($el.data('set-target')); const $target = $($el.data('set-target'));
@ -227,7 +227,7 @@ const MainUI = (($) => {
}); });
// emulate links // emulate links
$('.a[data-href]').on('click', (e) => { $('.a[data-href]').on('click', e => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
const href = $el.data('href'); const href = $el.data('href');
if (!href.length) { if (!href.length) {
@ -306,7 +306,7 @@ const MainUI = (($) => {
$AlertNotify[0].play(); $AlertNotify[0].play();
} }
$(W).trigger('alert-appeared'); $(W).trigger(`${Events.ALLERTAPPEARED}`);
} }
// hide site-wide alert // hide site-wide alert
@ -321,7 +321,7 @@ const MainUI = (($) => {
$AlertNotify[0].stop(); $AlertNotify[0].stop();
} }
$(W).trigger('alert-removed'); $(W).trigger(`${Events.ALLERTREMOVED}`);
} }
// load all images // load all images
@ -349,7 +349,7 @@ const MainUI = (($) => {
$el.addClass('loaded'); $el.addClass('loaded');
$el.removeClass('loading'); $el.removeClass('loading');
$el.trigger('image-lazy-loaded'); $el.trigger(`${Events.LAZYIMAGEREADY}`);
}); });
} }
}); });
@ -369,7 +369,7 @@ const MainUI = (($) => {
$el.addClass('loaded'); $el.addClass('loaded');
$el.removeClass('loading'); $el.removeClass('loading');
$el.trigger('image-lazy-bg-loaded'); $el.trigger(`${Events.LAZYIMAGEREADY}`);
}); });
} }
}); });
@ -382,7 +382,7 @@ const MainUI = (($) => {
AjaxUI.preload($imgLazyUrls).then(() => { AjaxUI.preload($imgLazyUrls).then(() => {
console.log('All images are loaded!'); console.log('All images are loaded!');
$(W).trigger('images-lazy-loaded'); $(W).trigger(`${Events.LAZYIMAGESREADY}`);
}); });
}); });
} }