tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02: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';
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();
});

12
src/js/_events.js
View File

@ -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',

5
src/js/_layout.js
View File

@ -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">',

26
src/js/_main.js
View File

@ -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}`);
});
});
}