162 lines
4.5 KiB
JavaScript
162 lines
4.5 KiB
JavaScript
(function() {
|
|
var $, win;
|
|
$ = this.jQuery || window.jQuery;
|
|
win = $(window);
|
|
|
|
$.fn.wpjCarousel = function(options) {
|
|
options = $.extend(
|
|
{
|
|
itemsOnPage: 1,
|
|
gutter: 0,
|
|
controlsText: ['<i class="fc icons_caret-left"></i>', '<i class="fc icons_caret-right"></i>'],
|
|
responsive: null
|
|
/*
|
|
* 644: {
|
|
* itemsOnPage: 1,
|
|
* gutter: 0
|
|
* }
|
|
* */
|
|
},
|
|
options || {}
|
|
);
|
|
|
|
var container = this,
|
|
html_container = container.find('.container'),
|
|
gallery = container.find('[data-wpj-carousel]'),
|
|
items = gallery.children(),
|
|
items_count = items.length,
|
|
item_width = 0,
|
|
step = item_width,
|
|
gutter = options.gutter,
|
|
itemsOnPage = options.itemsOnPage,
|
|
position = 0,
|
|
prev_button,
|
|
next_button;
|
|
|
|
var init = function() {
|
|
container.addClass('wpj-carousel-container');
|
|
gallery.addClass('wpj-carousel-gallery');
|
|
createNavigation();
|
|
updateValues();
|
|
};
|
|
|
|
var updateValues = function() {
|
|
// todo: onresize: position (pokud budu odrollovaný, nepřesáhnout stránku
|
|
// todo 2: dědit gutter
|
|
var win_width = win.width(),
|
|
container_width = html_container ? html_container.width() : container.width();
|
|
|
|
if(container_width === 0) {
|
|
const $some_container = $('main').find('.container');
|
|
if ($some_container[0]) {
|
|
container_width = $some_container.width();
|
|
}
|
|
}
|
|
|
|
gutter = options.gutter;
|
|
itemsOnPage = options.itemsOnPage;
|
|
|
|
if (options.responsive) {
|
|
$.each(options.responsive, function(index, value) {
|
|
if (win_width >= index) {
|
|
gutter = value.gutter ? value.gutter : options.gutter;
|
|
itemsOnPage = value.itemsOnPage ? value.itemsOnPage : options.itemsOnPage;
|
|
}
|
|
});
|
|
}
|
|
|
|
item_width = (container_width + gutter) / itemsOnPage;
|
|
step = item_width;
|
|
|
|
items.css({
|
|
width: item_width,
|
|
paddingRight: gutter
|
|
});
|
|
|
|
updateNavigation();
|
|
};
|
|
|
|
var createNavigation = function() {
|
|
var navigation =
|
|
'<div class="wpj-carousel-controls">' +
|
|
'<button data-controls="prev" tabindex="-1" aria-hidden="true">' +
|
|
options.controlsText[0] +
|
|
'</button>' +
|
|
'<button data-controls="next" tabindex="-1" aria-hidden="true">' +
|
|
options.controlsText[1] +
|
|
'</button>' +
|
|
'</div>';
|
|
|
|
container.append(navigation);
|
|
|
|
prev_button = container.find('button[data-controls="prev"]');
|
|
next_button = container.find('button[data-controls="next"]');
|
|
|
|
prev_button.on('click', function() {
|
|
move('prev');
|
|
});
|
|
next_button.on('click', function() {
|
|
move('next');
|
|
});
|
|
|
|
updateNavigation();
|
|
};
|
|
|
|
var move = function(direction) {
|
|
position = direction === 'prev' ? position - 1 : position + 1;
|
|
|
|
if (position <= 0) {
|
|
position = 0;
|
|
} else if (position >= items_count - itemsOnPage) {
|
|
position = items_count - itemsOnPage;
|
|
}
|
|
|
|
var move_step = position * step * -1;
|
|
gallery.css({
|
|
left: move_step
|
|
});
|
|
|
|
updateNavigation();
|
|
};
|
|
|
|
var updateNavigation = function() {
|
|
if (position > 0) {
|
|
prev_button.removeClass('disabled');
|
|
} else {
|
|
prev_button.addClass('disabled');
|
|
}
|
|
|
|
if (position < items_count - itemsOnPage) {
|
|
next_button.removeClass('disabled');
|
|
} else {
|
|
next_button.addClass('disabled');
|
|
}
|
|
};
|
|
|
|
win.on('resize', function(e) {
|
|
updateValues();
|
|
});
|
|
|
|
gallery.on('touchstart', function(e) {
|
|
var touch_start = e.changedTouches[0].clientX;
|
|
|
|
$(this).on('touchend', function(e) {
|
|
var touch_end = e.changedTouches[0].clientX;
|
|
var distance = touch_end - touch_start;
|
|
|
|
if (distance < -30) {
|
|
move('next');
|
|
} else if (distance > 30) {
|
|
move('prev');
|
|
}
|
|
|
|
gallery.off('touchmove touchend');
|
|
});
|
|
});
|
|
|
|
init();
|
|
|
|
return this;
|
|
};
|
|
}.call(this));
|