144 lines
4.7 KiB
JavaScript
144 lines
4.7 KiB
JavaScript
/**
|
|
* @typedef {Object} SliderArg
|
|
* @property {string} next_ref - сслыка на иконку вперед
|
|
* @property {string} previous_ref - ссылка на иконку назадъ
|
|
* @property {{main: HTMLStyleElement, next: HTMLElement, previous: HTMLElement}} slider - разграниченный слайдер
|
|
* @property {Array<string>} images - массив ссылок
|
|
*/
|
|
|
|
/**
|
|
* Класс для создания слайдера
|
|
* @class
|
|
* @property {HTMLElement} main - DOM-элемент для слайдов
|
|
* @property {number} current_slide - текущий слайд
|
|
* @property {Array<HTMLElement>} slides - слайды
|
|
*/
|
|
class Slider {
|
|
/**
|
|
* @param {SliderArg} arg
|
|
*/
|
|
constructor ({slider: {main, next, previous}, next_ref, previous_ref, images = null}) {
|
|
/** Безопасный вызов */
|
|
recovery(
|
|
self => {
|
|
/** Инъекция DOM-элементов (слайдер) */
|
|
Object.entries({main, next, previous}).forEach(([name, value]) => {
|
|
if (value instanceof HTMLElement)
|
|
self[name] = value
|
|
else throw new Error(`Невалидный аргумент ${value}`)
|
|
})
|
|
|
|
/** Инициалиазация кнопок */
|
|
Object.entries({
|
|
[next_ref]: {
|
|
element: next,
|
|
func: this.next_slide
|
|
},
|
|
[previous_ref]: {
|
|
element: previous,
|
|
func: this.previous_slide
|
|
}
|
|
}).forEach(
|
|
([ref, {element, func}]) => {
|
|
element.src = ref
|
|
element.onclick = func.bind(self)
|
|
}
|
|
)
|
|
|
|
self.current_slide = 0
|
|
self.slides = []
|
|
|
|
/** Инициализация фыфок (з****лся эти JSDoc'и писать)*/
|
|
if(Array.isArray(images))
|
|
images.forEach(self.add_slide)
|
|
},
|
|
(...e) => {
|
|
console.log("Ошибка при инициалиазции slider-page");
|
|
e.forEach(er => {throw er});
|
|
}
|
|
) (this)
|
|
}
|
|
|
|
/**
|
|
* Обновляет слайдер (смещает на 80vw * current_slide)
|
|
* @method
|
|
*/
|
|
update_slider = recovery(
|
|
() => this.main.style.transform = `translateX(-${this.current_slide * 80}vw)`,
|
|
(...e) => {
|
|
console.log("Ошибка при обновлении слайдера (Slider.update_slider)")
|
|
e.forEach(er => {throw er})
|
|
}
|
|
)
|
|
|
|
/**
|
|
* Переключает на следующий слайд
|
|
* @method
|
|
*/
|
|
next_slide = recovery(
|
|
() => {
|
|
if (this.current_slide < this.slides.length - 1)
|
|
this.current_slide++
|
|
else
|
|
this.current_slide = 0
|
|
this.update_slider()
|
|
},
|
|
(...e) => {
|
|
console.log("Ошибка при переключении на следующий слайд")
|
|
e.forEach(er => {throw er})
|
|
}
|
|
)
|
|
|
|
/**
|
|
* Переключает на предыдущий слайд
|
|
* @method
|
|
*/
|
|
previous_slide = recovery(
|
|
() => {
|
|
if (this.current_slide > 0)
|
|
this.current_slide--
|
|
else
|
|
this.current_slide = this.slides.length - 1
|
|
this.update_slider()
|
|
},
|
|
(...e) => {
|
|
console.log("Ошибка при переключении на следующий слайд")
|
|
e.forEach(er => {throw er})
|
|
}
|
|
)
|
|
|
|
/**
|
|
* Добавление новых слайдов
|
|
* @method
|
|
*/
|
|
add_slide = recovery(
|
|
slide_ref => {
|
|
/** Изображение */
|
|
const img = document.createElement('img')
|
|
/** Применение стилей */
|
|
img.classList.add('slide')
|
|
/** Линковка ссылки */
|
|
img.src = slide_ref
|
|
|
|
/** Регистрация слайда в dom-элементе */
|
|
this.main.appendChild(img)
|
|
/** Регистрация в массиве */
|
|
this.slides.push(img)
|
|
},
|
|
(...e) => {
|
|
console.log("Ошибка при добавлении слайда")
|
|
e.forEach(er => {throw er})
|
|
}
|
|
)
|
|
|
|
clear = recovery(
|
|
() => {
|
|
this.main.innerHTML = ''
|
|
},
|
|
(...e) => {
|
|
console.log("Ошибка при очищении")
|
|
e.forEach(er => {throw er})
|
|
}
|
|
)
|
|
|
|
} |