//base.js
// 默认参数
import DEFAULTS from './defaults.js';

// 常量
import { ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME } from './constants.js';

class BaseSlider {
constructor(el, options) {
if (el.nodeType !== ELEMENT_NODE)
throw new Error('实例化的时候，请传入 DOM 元素！');

// 实际参数
this.options = {
...DEFAULTS,
...options
};

const slider = el;
const sliderContent = slider.querySelector('.slider-content');
const sliderItems = sliderContent.querySelectorAll('.slider-item');

// 添加到 this 上，为了在方法中使用
this.slider = slider;
this.sliderContent = sliderContent;
this.sliderItems = sliderItems;

this.minIndex = 0;
this.maxIndex = sliderItems.length - 1;
this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

// 每个 slider-item 的宽度（每次移动的距离）
this.itemWidth = sliderItems[0].offsetWidth;

this.init();
}

// 获取修正后的索引值
// 随心所欲，不逾矩
getCorrectedIndex(index) {
if (index < this.minIndex) return this.maxIndex;
if (index > this.maxIndex) return this.minIndex;
return index;
}

// 初始化
init() {
// 为每个 slider-item 设置宽度
this.setItemsWidth();

// 为 slider-content 设置宽度
this.setContentWidth();

// 切换到初始索引 initialIndex
this.move(this.getDistance());

// 开启动画
if (this.options.animation) {
this.openAnimation();
}
}

// 为每个 slider-item 设置宽度
setItemsWidth() {
for (const item of this.sliderItems) {
item.style.width = `${this.itemWidth}px`;
}
}

// 为 slider-content 设置宽度
setContentWidth() {
this.sliderContent.style.width = `${
this.itemWidth * this.sliderItems.length
}px`;
}

// 不带动画的移动
move(distance) {
this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
}

// 带动画的移动
moveWithAnimation(distance) {
this.setAnimationSpeed(this.options.speed);
this.move(distance);
}

// 设置切换动画速度
setAnimationSpeed(speed) {
this.sliderContent.style.transitionDuration = `${speed}ms`;
}

// 获取要移动的距离
getDistance(index = this.currIndex) {
return -this.itemWidth * index;
}

// 开启动画
openAnimation() {
this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
}

// 关闭动画
closeAnimation() {
this.setAnimationSpeed(0);
}

// 切换到 index 索引对应的幻灯片
to(index) {
index = this.getCorrectedIndex(index);
if (this.currIndex === index) return;

this.currIndex = index;
const distance = this.getDistance();

if (this.options.animation) {
return this.moveWithAnimation(distance);
} else {
return this.move(distance);
}
}

// 切换上一张
prev() {
this.to(this.currIndex - 1);
}

// 切换下一张
next() {
this.to(this.currIndex + 1);
}

// 获取当前索引
getCurrIndex() {
return this.currIndex;
}
}

export default BaseSlider;

//constants.js
// base
export const ELEMENT_NODE = 1;
export const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

// keyboard
export const LEFT_KEYCODE = 37;
export const RIGHT_KEYCODE = 39;

//defaults
export default {
// 初始索引
initialIndex: 0,
// 切换时是否有动画
animation: true,
// 切换速度，单位 ms
speed: 300
};

//index.js
import Slider from './slider.js';

new Slider(document.querySelector('.slider'));

//keyboard.js

import { LEFT_KEYCODE, RIGHT_KEYCODE } from './constants.js';

const keyboard = {
bindEvent(slider) {
document.addEventListener(
'keyup',
ev => {
if (ev.keyCode === LEFT_KEYCODE) {
slider.prev();
} else if (ev.keyCode === RIGHT_KEYCODE) {
slider.next();
}
},
false
);
}
};

export default keyboard;

//slider.js
import BaseSlider from './base.js';
import Keyboard from './keyboard.js';
// import Mouse from './mouse.js';

class Slider extends BaseSlider {
constructor(el, options) {
super(el, options);
this._bindEvent();
}

_bindEvent() {
Keyboard.bindEvent(this);
// Mouse.bindEvent(this);
}
}

export default Slider;