UNPKG

4.61 kBJavaScriptView Raw
1import Splide from '@splidejs/splide'
2import '@splidejs/splide/dist/css/splide-core.min.css'
3
4import BaseComponent from 'bootstrap/js/src/base-component.js'
5import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
6import EventHandler from 'bootstrap/js/src/dom/event-handler'
7
8const NAME = 'carousel'
9const DATA_KEY = 'bs.carousel'
10const EVENT_KEY = `.${DATA_KEY}`
11const DATA_API_KEY = '.data-api'
12
13//const EVENT_SCROLL = `scroll${EVENT_KEY}`
14
15const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
16
17const SELECTOR_CAROUSEL = '[data-bs-carousel-splide]'
18
19const CONFIG_DEFAULT = {
20 slideFocus: true,
21 i18n: {
22 prev: 'Slide precedente',
23 next: 'Slide successiva',
24 first: 'Vai alla prima slide',
25 last: 'Vai all’ultima slide',
26 slideX: 'Vai alla slide %s',
27 pageX: 'Vai a pagina %s',
28 play: 'Attiva autoplay',
29 pause: 'Pausa autoplay',
30 },
31}
32const CONFIGS = {
33 'it-carousel-landscape-abstract-three-cols': {
34 type: 'slide',
35 perPage: 3,
36 gap: 24,
37 padding: { left: 0, right: 0 },
38 arrows: false,
39 breakpoints: {
40 768: {
41 perPage: 1,
42 gap: 24,
43 padding: { left: 40, right: 40 },
44 arrows: false,
45 },
46 992: {
47 perPage: 2,
48 gap: 24,
49 padding: { left: 40, right: 40 },
50 arrows: false,
51 },
52 },
53 },
54 'it-carousel-landscape-abstract-three-cols-arrow-visible': {
55 type: 'slide',
56 perPage: 3,
57 gap: 24,
58 padding: { left: 0, right: 0 },
59 arrows: true,
60 breakpoints: {
61 768: {
62 perPage: 1,
63 gap: 24,
64 padding: { left: 40, right: 40 },
65 arrows: true,
66 },
67 992: {
68 perPage: 2,
69 gap: 24,
70 padding: { left: 40, right: 40 },
71 arrows: true,
72 },
73 },
74 },
75 'it-big-img': {
76 type: 'loop',
77 perPage: 1,
78 gap: 48,
79 padding: { left: 320, right: 320 },
80 arrows: false,
81 breakpoints: {
82 768: {
83 perPage: 1,
84 gap: 0,
85 padding: { left: 0, right: 0 },
86 arrows: false,
87 },
88 992: {
89 perPage: 1,
90 gap: 24,
91 padding: { left: 160, right: 160 },
92 arrows: false,
93 },
94 },
95 },
96 'it-standard-image': {
97 type: 'loop',
98 perPage: 3,
99 gap: 24,
100 padding: { left: 48, right: 48 },
101 arrows: false,
102 breakpoints: {
103 768: {
104 perPage: 1,
105 gap: 24,
106 padding: { left: 40, right: 40 },
107 arrows: false,
108 },
109 992: {
110 perPage: 2,
111 gap: 24,
112 padding: { left: 48, right: 48 },
113 arrows: false,
114 },
115 },
116 },
117 'it-carousel-landscape-abstract': {
118 type: 'slide',
119 perPage: 1,
120 gap: 24,
121 padding: { left: 0, right: 0 },
122 arrows: false,
123 breakpoints: {
124 768: {
125 perPage: 1,
126 gap: 24,
127 padding: { left: 0, right: 0 },
128 arrows: false,
129 },
130 992: {
131 perPage: 1,
132 gap: 24,
133 padding: { left: 24, right: 24 },
134 arrows: false,
135 },
136 },
137 },
138 'it-calendar-wrapper': {
139 type: 'slide',
140 perPage: 4,
141 gap: 0,
142 padding: { left: 0, right: 0 },
143 arrows: false,
144 breakpoints: {
145 560: {
146 perPage: 1,
147 gap: 0,
148 padding: { left: 24, right: 24 },
149 arrows: false,
150 },
151 768: {
152 perPage: 2,
153 gap: 0,
154 padding: { left: 0, right: 0 },
155 arrows: false,
156 },
157 992: {
158 perPage: 3,
159 gap: 0,
160 padding: { left: 0, right: 0 },
161 arrows: false,
162 },
163 },
164 },
165}
166
167class CarouselBI extends BaseComponent {
168 constructor(element) {
169 super(element)
170 this._config = this._getConfig()
171 this._splide = new Splide(this._element, this._config)
172
173 this._init()
174 }
175
176 dispose() {
177 this._splide.destroy()
178 super.dispose()
179 }
180 // Getters
181
182 static get NAME() {
183 return NAME
184 }
185
186 // Public
187
188 // Private
189 _init() {
190 this._splide.mount()
191 }
192
193 _getConfig() {
194 let conf = Object.assign({}, CONFIG_DEFAULT)
195 Object.keys(CONFIGS).forEach((classKey) => {
196 if (this._element.classList.contains(classKey)) {
197 conf = Object.assign({}, conf, CONFIGS[classKey])
198 }
199 })
200 return conf
201 }
202}
203
204/**
205 * ------------------------------------------------------------------------
206 * Data Api implementation
207 * ------------------------------------------------------------------------
208 */
209
210EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
211 const carousels = SelectorEngine.find(SELECTOR_CAROUSEL)
212 carousels.forEach((carousel) => {
213 CarouselBI.getOrCreateInstance(carousel)
214 })
215})
216
217export default CarouselBI