import $ from 'jquery';
import 'hammerjs/hammer';
import 'jquery-hammerjs/jquery.hammer';
import Events from '../_events';
const CarouselUI = (($) => {
// Constants
const NAME = 'CarouselUI';
class CarouselUI {
// Static methods
static each(callback) {
$('.js-carousel').each((i, e) => {
callback(i, $(e));
});
}
static init() {
this.dispose();
this.each((i, e) => {
const $e = $(e),
id = `Carousel${i}`;
$e.attr('id', id);
$e.data('id', i);
const $items = $(e).find('.carousel-item'),
count = $items.length;
if (!count) {
return;
}
// create carousel-controls
if ($e.data('indicators')) {
const $indicators = $('
');
$indicators.append(``);
for (let i = 1; i < count; i++) {
$indicators.append(``);
}
$e.prepend($indicators);
}
// create arrows
if ($e.data('arrows')) {
$e.prepend(`Previous`);
$e.prepend(`Next`);
}
// init carousel
$e.carousel();
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').pauseVideo();
} catch (e) {}
});
}
});
$e.find('.carousel-control-prev').on('click', (e) => {
e.preventDefault();
$e.carousel('prev');
});
$e.find('.carousel-control-next').on('click', (e) => {
e.preventDefault();
$e.carousel('next');
});
// init touch swipes
$e.hammer().bind('swipeleft panleft', (e) => {
$(event.target).carousel('next');
});
$e.hammer().bind('swiperight panright', (e) => {
$(event.target).carousel('prev');
});
/*$e.find('.carousel-item').hammer().bind('tap', (event) => {
$(event.target).carousel('next');
});*/
});
}
static dispose() {
this.each((i, e) => {
$(e).carousel('dispose');
});
}
}
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
CarouselUI.init();
});
return CarouselUI;
})($);
export default CarouselUI;