import BaseComponent from '../../../general/js/base-component';
import { tns } from "../../../../node_modules/tiny-slider/src/tiny-slider"
export default class HeroComponent extends BaseComponent {
constructor() {
super(...arguments);
this.slider = this.refs.slider;
this.flag = false;
this.size = 1280;
this.tinySlider = null;
this.desktop = {
'mode': 'gallery',
'item': 1,
'controls': false,
'nav': false,
"gutter": 20,
"fixedWidth": false,
"swipeAngle": false,
"mouseDrag": true,
'nav': true,
'container': this.slider
};
this.mobile = {
'controls': false,
"gutter": 20,
"fixedWidth": 250,
"swipeAngle": false,
"mouseDrag": true,
'nav': true,
'container': this.slider
};
this.initSlider = this.initSlider.bind(this);
this.updatedSlider = this.updatedSlider.bind(this);
this.init();
}
init() {
this.addListener(document, 'DOMContentLoaded', this.initSlider);
this.addListener(window, 'resize', this.updatedSlider);
}
initSlider(event) {
let windowWidth = window.innerWidth;
if (windowWidth <= this.size) {
this.tinySlider = tns(this.mobile);
}
if (windowWidth >= this.size) {
this.tinySlider = tns(this.desktop);
}
}
updatedSlider(event) {
let windowWidth = window.innerWidth;
if (!this.flag && windowWidth <= this.size) {
console.log('window меньше 1280px');
this.tinySlider.destroy();
this.tinySlider = tns(this.mobile);
this.flag = true;
}
if (this.flag && windowWidth >= this.size) {
console.log('window больше 1280px');
this.tinySlider.destroy();
this.tinySlider = tns(this.desktop);
this.flag = false;
}
}
}