import { create, append } from './util.js';
export default class Slide {
state = {
data: [],
show: [],
currIdx: -5,
range: 5,
}
constructor($target, data) {
this.state.data = data;
this.$target =$target;
this.$slide = create('div');
this.$slide.style = "position: relative; display: flex; justify-content: center;"
this.$slide.onclick = e => this.setShow(e.target.dataset.left, this.state.currIdx);
append(this.$slide);
this.setShow(false);
this.render();
console.log('SLIDE CREATED', this);
}
setState = (nextData) => {
this.state = nextData;
this.render();
}
setShow = (isLeft) => {
let { data, show, currIdx, range } = this.state;
const len = data.length;
currIdx += len;
if (isLeft == 1) {
console.log('>>> ', isLeft);
for (let i = range - 1; i >= 0; i--) {
currIdx--;
show[i] = (currIdx) % len;
}
} else {
for (let i = 0; i < range; i++) {
show[i] = (currIdx + range) % len;
currIdx++;
}
}
this.setState({ ...this.state, currIdx: currIdx % len, show});
console.log(isLeft, this.state.currIdx);
return show;
}
render = () => {
const dataTempleate = this.state.data.length != 0 && this.state.data.map((n, i) => `
<div
class="slide-item ${this.state.show.indexOf(i) == -1 && "hide"}"
style="width: 50px;"
>${n}</div>
`).join('');
const view = `
<article style="display: flex; align-items: center; justify-content: center;">
<span class="arrow" data-left="1"> < </span>
${dataTempleate}
<span class="arrow" data-left=""> > </span>
</article>
`;
this.$slide.innerHTML = this.state.data.length == 0 ? '로딩 실패' : `${view}`;
}
}