1 | import Splide from '@splidejs/splide'
|
2 | import '@splidejs/splide/dist/css/splide-core.min.css'
|
3 |
|
4 | import BaseComponent from 'bootstrap/js/src/base-component.js'
|
5 | import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
|
6 | import EventHandler from 'bootstrap/js/src/dom/event-handler'
|
7 |
|
8 | const NAME = 'carousel'
|
9 | const DATA_KEY = 'bs.carousel'
|
10 | const EVENT_KEY = `.${DATA_KEY}`
|
11 | const DATA_API_KEY = '.data-api'
|
12 |
|
13 |
|
14 |
|
15 | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
16 |
|
17 | const SELECTOR_CAROUSEL = '[data-bs-carousel-splide]'
|
18 |
|
19 | const 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 | }
|
32 | const 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 |
|
167 | class 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 |
|
181 |
|
182 | static get NAME() {
|
183 | return NAME
|
184 | }
|
185 |
|
186 |
|
187 |
|
188 |
|
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 |
|
207 |
|
208 |
|
209 |
|
210 | EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
211 | const carousels = SelectorEngine.find(SELECTOR_CAROUSEL)
|
212 | carousels.forEach((carousel) => {
|
213 | CarouselBI.getOrCreateInstance(carousel)
|
214 | })
|
215 | })
|
216 |
|
217 | export default CarouselBI
|