webpack-bootstrap-ui-kit/src/js/_components/_ui.multislider.js
2020-09-09 22:40:58 +07:00

230 lines
5.0 KiB
JavaScript
Executable File

'use strict';
import $ from 'jquery';
import Events from '../_events';
import MainUI from '../_main';
import 'hammerjs/hammer';
import 'jquery-hammerjs/jquery.hammer';
import '../../scss/_components/_ui.multislider.scss';
const W = window;
const MultiSlider = (($) => {
// Constants
const NAME = 'jsMultiSlider';
const DATA_KEY = NAME;
const $BODY = $('body');
class MultiSlider {
// Constructor
constructor(el) {
this.dispose();
console.log(`${NAME}: init ...`);
const ui = this;
const $el = $(el);
ui.$el = $el;
ui.sliding = false;
$el.wrap(`<div class="${NAME}-container"></div>`);
ui.$elContainer = $el.parent(`.${NAME}-container`);
$el.wrap(`<div class="${NAME}-slides-container"></div>`);
ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`);
ui.addControls();
ui.calculate();
$(W).on('resize', () => {
ui.$elContainer
.find('.act-slider-prev,.act-slider-next')
.removeClass('disabled');
ui.calculate();
});
ui.$elContainer.addClass(`${NAME}-active`);
$el.addClass(`${NAME}-active`);
}
calculate() {
const ui = this;
ui.$slides = ui.$el.find('.slide');
ui.numberOfSlides = ui.$slides.length;
ui.containerWidth = ui.$el.parent().width();
ui.maxPos = ui.numberOfSlides - ui.numToDisplay();
ui.slideWidth = ui.containerWidth / ui.numToDisplay();
ui.$slides.css('width', `${ui.slideWidth}px`);
ui.$el.css('width', ui.slideWidth * ui.numberOfSlides);
ui.currPos = 0;
ui.slide(0);
}
numToDisplay() {
const ui = this;
const size = MainUI.detectBootstrapScreenSize();
let num = ui.$el.data(`length-${size}`);
num = num ? num : ui.$el.data('length');
console.log(`${NAME}: size ${size} | num ${num}`);
return num ? num : 1;
}
addControls() {
const ui = this;
const $e = ui.$el;
// actions
ui.$elContainer.append(
'<div class="slider-actions">' +
'<a href="#" class="act act-slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' +
'<a href="#" class="act act-slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' +
'</div>',
);
ui.$prevBtn = ui.$elContainer.find('.act-slider-prev');
ui.$nextBtn = ui.$elContainer.find('.act-slider-next');
ui.$prevBtn.on('click', (e) => {
e.preventDefault();
if ($(e.currentTarget).hasClass('disabled')) {
return false;
}
ui.prev();
});
ui.$nextBtn.on('click', (e) => {
e.preventDefault();
if ($(e.currentTarget).hasClass('disabled')) {
return false;
}
ui.next();
});
// init touch swipes
$e.hammer().bind('swipeleft panleft', (e) => {
ui.next();
});
$e.hammer().bind('swiperight panright', (e) => {
ui.prev();
});
}
next() {
const ui = this;
if (ui.sliding) {
return;
}
ui.currPos++;
ui.slide(ui.currPos);
}
prev() {
const ui = this;
if (ui.sliding) {
return;
}
ui.currPos--;
ui.slide(ui.currPos);
}
slide(pos) {
const ui = this;
if (ui.sliding) {
return;
}
ui.sliding = true;
if (ui.$nextBtn.length) {
if (pos >= ui.maxPos) {
ui.$nextBtn.addClass('disabled');
} else {
ui.$nextBtn.removeClass('disabled');
}
}
if (ui.$prevBtn.length) {
if (pos <= 0) {
ui.$prevBtn.addClass('disabled');
} else {
ui.$prevBtn.removeClass('disabled');
}
}
ui.$el.animate(
{
left: `${-(pos * ui.slideWidth)}px`,
},
'slow',
'swing',
() => {
ui.sliding = false;
},
);
}
dispose() {
const ui = this;
if (ui.$elContainer) {
ui.$el.parent().find('.slider-actions').remove();
}
if (ui.$el) {
ui.$el.hammer().unbind('swipeleft panleft swiperight panright');
}
console.log(`Disposing: ${NAME}`);
ui.$el = null;
}
static _jQueryInterface() {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
if (!data) {
data = new MultiSlider(this);
$el.data(DATA_KEY, data);
}
});
}
}
// jQuery interface
$.fn[NAME] = MultiSlider._jQueryInterface;
$.fn[NAME].Constructor = MultiSlider;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return MultiSlider._jQueryInterface;
};
// auto-apply
$(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => {
$(`.${NAME}`).each((i, el) => {
$(el).jsMultiSlider();
});
});
return MultiSlider;
})($);
export default MultiSlider;