100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import {
|
|
Carousel,
|
|
type CarouselItem,
|
|
type CarouselInterface,
|
|
type CarouselOptions,
|
|
type IndicatorItem,
|
|
Modal,
|
|
type ModalInterface,
|
|
} from 'flowbite';
|
|
|
|
class CustomCarousel extends HTMLElement {
|
|
_slide: boolean;
|
|
_items: CarouselItem[];
|
|
_options: CarouselOptions;
|
|
_carousel: CarouselInterface;
|
|
|
|
_modalEl: HTMLElement;
|
|
_modal: ModalInterface;
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this._slide = this.getAttribute('data-custom-carousel') === 'slide';
|
|
this._items = this._getItems();
|
|
this._options = this._getOptions();
|
|
this._carousel = new Carousel(this, this._items, this._options);
|
|
|
|
if (this._slide && this._items.length > 0) this._carousel.cycle();
|
|
|
|
this._modalEl = this.querySelector('[data-custom-carousel-modal]') as HTMLElement || undefined;
|
|
this._modal = new Modal(this._modalEl);
|
|
|
|
window.addEventListener("load", this._attachHandlers);
|
|
|
|
}
|
|
|
|
_getItems = (): CarouselItem[] => {
|
|
let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
|
|
|
|
return Array.from(customItems).map(
|
|
(item): CarouselItem => {
|
|
return {
|
|
el: item as HTMLElement,
|
|
position: Number(item.getAttribute("data-custom-carousel-item"))
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
_getOptions = (): CarouselOptions => {
|
|
let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
|
|
|
|
return {
|
|
defaultPosition: 0,
|
|
interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
|
|
|
|
indicators: {
|
|
activeClasses: 'border-2 border-caperren-green bg-black',
|
|
inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
|
|
items: Array.from(customIndicators).map(
|
|
(item, index): IndicatorItem => {
|
|
return {
|
|
el: item as HTMLElement,
|
|
position: Number(item.getAttribute('data-custom-carousel-slide-to'))
|
|
}
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
_attachHandlers = (): void => {
|
|
// Carousel controls
|
|
this.querySelector(
|
|
'[data-custom-carousel-next]'
|
|
)?.addEventListener('click', () => this._carousel.next());
|
|
this.querySelector(
|
|
'[data-custom-carousel-prev]'
|
|
)?.addEventListener('click', () => this._carousel.prev());
|
|
|
|
// Close fullscreen modal
|
|
this._modalEl.querySelector('[data-custom-carousel-modal-hide]')?.addEventListener('click', () => this._modal.hide())
|
|
|
|
// Click to open fullscreen modal
|
|
this._items.forEach((item) => {
|
|
item.el.addEventListener('click', () => {
|
|
const imgCloned = item.el.querySelector('img')?.cloneNode() as Node;
|
|
const imageDiv = this._modalEl.querySelector('[data-custom-carousel-modal-image]') as HTMLElement || undefined;
|
|
|
|
imageDiv.innerHTML = '';
|
|
imageDiv?.appendChild(imgCloned);
|
|
|
|
this._modal.show();
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
customElements.define('custom-carousel', CustomCarousel) |