Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit f737038

Browse files
author
Łukasz Florczak
committed
Breakpoints and responsive settings support
1 parent 8542f78 commit f737038

File tree

1 file changed

+108
-46
lines changed

1 file changed

+108
-46
lines changed

‎src/Agile.vue‎

Lines changed: 108 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<template>
2-
<div class="agile" :class="{'agile--fade': fade_}">
2+
<div class="agile" :class="{'agile--fade': settings.fade}">
33
<div class="agile__list">
44
<div class="agile__track"
5-
:style="{width: width.track + 'px', transform: 'translate(-' + transform + 'px)', transition: 'transform ' + timing_ + ' ' + transitionDelay + 'ms'}">
5+
:style="{width: width.track + 'px', transform: 'translate(-' + transform + 'px)', transition: 'transform ' + settings.timing + ' ' + transitionDelay + 'ms'}">
66
<slot></slot>
77
</div>
88

9-
<ul v-if="dots_" class="agile__dots">
9+
<ul v-if="settings.dots" class="agile__dots">
1010
<li v-for="n in slidesCount" class="agile__dot"
1111
:class="{'agile__dot--current': n - 1 === currentSlide}">
1212
<button @click="setSlide(n - 1)">{{n}}</button>
1313
</li>
1414
</ul>
1515

16-
<button v-if="arrows_" class="agile__arrow agile__arrow--prev"
17-
:disabled="currentSlide === 0 && !infinite_" @click="prevSlide" v-html="arrow_">
16+
<button v-if="settings.arrows" class="agile__arrow agile__arrow--prev"
17+
:disabled="currentSlide === 0 && !settings.infinite" @click="prevSlide" v-html="settings.arrow">
1818
</button>
19-
<button v-if="arrows_" class="agile__arrow agile__arrow--next"
20-
:disabled="currentSlide === slidesCount - 1 && !infinite_" @click="nextSlide" v-html="arrow_">
19+
<button v-if="settings.arrows" class="agile__arrow agile__arrow--next"
20+
:disabled="currentSlide === slidesCount - 1 && !settings.infinite" @click="nextSlide"
21+
v-html="settings.arrow">
2122
</button>
2223
</div>
2324
</div>
@@ -63,6 +64,11 @@
6364
default: true
6465
},
6566
67+
mobileFirst: {
68+
type: Boolean,
69+
default: true
70+
},
71+
6672
options: {
6773
type: Object,
6874
default: function () {
@@ -80,6 +86,13 @@
8086
default: true
8187
},
8288
89+
responsive: {
90+
type: Object,
91+
default: function () {
92+
return null
93+
}
94+
},
95+
8396
speed: {
8497
type: Number,
8598
default: 300
@@ -117,50 +130,65 @@
117130
track: 0
118131
},
119132
slidesToShow: 1,
120-
arrow_: this.arrow,
121-
arrows_: this.arrows,
122-
autoplay_: this.autoplay,
123-
autoplaySpeed_: this.autoplaySpeed,
124-
dots_: this.dots,
125-
fade_: this.fade,
126-
infinite_: this.infinite,
127-
pauseOnDotsHover_: this.pauseOnDotsHover,
128-
pauseOnHover_: this.pauseOnHover,
129-
speed_: this.speed,
130-
timing_: this.timing
133+
defaultSettings: {
134+
arrow: this.arrow,
135+
arrows: this.arrows,
136+
autoplay: this.autoplay,
137+
autoplaySpeed: this.autoplaySpeed,
138+
dots: this.dots,
139+
fade: this.fade,
140+
infinite: this.infinite,
141+
mobileFirst: this.mobileFirst,
142+
pauseOnDotsHover: this.pauseOnDotsHover,
143+
pauseOnHover: this.pauseOnHover,
144+
responsive: this.responsive,
145+
speed: this.speed,
146+
timing: this.timing
147+
},
148+
settings: {}
131149
}
132150
},
133151
134-
mounted () {
152+
beforeMount () {
135153
// Read settings from options object
136154
if (this.options) {
137155
for (let key in this.options) {
138-
this[key + '_'] = this.options[key]
156+
this.defaultSettings[key] = this.options[key]
139157
}
140158
}
141159
160+
// Sort breakpoints
161+
if (this.defaultSettings.responsive) {
162+
this.defaultSettings.responsive.sort(this.compare)
163+
}
164+
165+
// Set first load settings
166+
Object.assign(this.settings, this.defaultSettings)
167+
142168
// Protection against contradictory settings
143-
if (this.autoplay_) {
144-
this.infinite_ = true
169+
if (this.settings.autoplay) {
170+
this.settings.infinite = true
145171
}
146172
147-
if (this.pauseOnDotsHover_) {
148-
this.dots_ = true
173+
if (this.settings.pauseOnDotsHover) {
174+
this.settings.dots = true
149175
}
176+
},
150177
178+
mounted () {
151179
// Prepare list
152180
this.el.list = this.$el.getElementsByClassName('agile__list')[0]
153181
154182
// Prepare dots
155-
if (this.dots_) {
183+
if (this.settings.dots) {
156184
this.el.dots = this.$el.getElementsByClassName('agile__dots')[0].children
157185
}
158186
159187
// Prepare slides
160188
this.el.slides = this.$el.getElementsByClassName('agile__track')[0].children
161189
this.slidesCount = this.el.slides.length
162190
163-
if (this.infinite_ && !this.fade_) {
191+
if (this.settings.infinite && !this.settings.fade) {
164192
this.allSlidesCount = this.slidesCount + 2
165193
} else {
166194
this.allSlidesCount = this.slidesCount
@@ -170,7 +198,7 @@
170198
this.el.slides[i].classList.add('agile__slide')
171199
172200
// Prepare slides for fade mode
173-
if (this.fade_) {
201+
if (this.settings.fade) {
174202
this.el.slides[i].style.transition = 'opacity ' + this.timing + ' ' + this.speed + 'ms'
175203
}
176204
}
@@ -179,7 +207,7 @@
179207
this.el.track = this.$el.getElementsByClassName('agile__track')[0]
180208
181209
// Prepare infinity mode
182-
if (this.infinite_ && !this.fade_) {
210+
if (this.settings.infinite && !this.settings.fade) {
183211
let firstSlide = this.el.track.firstChild.cloneNode(true)
184212
let lastSlide = this.el.track.lastChild.cloneNode(true)
185213
@@ -191,7 +219,7 @@
191219
}
192220
193221
// Prepare autoplay
194-
if (this.autoplay_) {
222+
if (this.settings.autoplay) {
195223
this.startAutoplay()
196224
}
197225
@@ -213,13 +241,13 @@
213241
}
214242
215243
// Autoplay
216-
if (this.autoplay_) {
217-
if (this.pauseOnHover_) {
244+
if (this.settings.autoplay) {
245+
if (this.settings.pauseOnHover) {
218246
this.el.track.addEventListener('mouseover', this.stopAutoplay)
219247
this.el.track.addEventListener('mouseout', this.startAutoplay)
220248
}
221249
222-
if (this.pauseOnDotsHover_) {
250+
if (this.settings.pauseOnDotsHover) {
223251
for (let i = 0; i < this.slidesCount; ++i) {
224252
this.el.dots[i].addEventListener('mouseover', this.stopAutoplay)
225253
this.el.dots[i].addEventListener('mouseout', this.startAutoplay)
@@ -241,13 +269,13 @@
241269
this.el.track.removeEventListener('mousemove', this.handleMouseMove)
242270
}
243271
244-
if (this.autoplay_) {
245-
if (this.pauseOnHover_) {
272+
if (this.settings.autoplay) {
273+
if (this.settings.pauseOnHover) {
246274
this.el.track.removeEventListener('mouseover', this.stopAutoplay)
247275
this.el.track.removeEventListener('mouseout', this.startAutoplay)
248276
}
249277
250-
if (this.pauseOnDotsHover_) {
278+
if (this.settings.pauseOnDotsHover) {
251279
for (let i = 0; i < this.slidesCount; ++i) {
252280
this.el.dots[i].removeEventListener('mouseover', this.stopAutoplay)
253281
this.el.dots[i].removeEventListener('mouseout', this.startAutoplay)
@@ -265,6 +293,16 @@
265293
}
266294
},
267295
296+
compare (a, b) {
297+
if (a.breakpoint < b.breakpoint) {
298+
return this.defaultSettings.mobileFirst ? -1 : 1
299+
} else if (a.breakpoint > b.breakpoint) {
300+
return this.defaultSettings.mobileFirst ? 1 : -1
301+
} else {
302+
return 0
303+
}
304+
},
305+
268306
handleMouseDown (e) {
269307
if (!e.touches) {
270308
e.preventDefault()
@@ -321,12 +359,12 @@
321359
322360
setSlide (n, transition = true, autoplayTimeout = true) {
323361
// Reset autoplay timeout and set new
324-
if (this.autoplay_ && autoplayTimeout) {
362+
if (this.settings.autoplay && autoplayTimeout) {
325363
this.stopAutoplay()
326364
this.startAutoplay()
327365
}
328366
329-
if (this.fade_) {
367+
if (this.settings.fade) {
330368
// Disable transition for initial slide
331369
if (transition === false) {
332370
this.el.slides[n].style.transition = '0ms'
@@ -340,7 +378,7 @@
340378
this.el.slides[i].classList.remove('agile__slide--expiring')
341379
}
342380
343-
if (this.infinite_ && n < 0) {
381+
if (this.settings.infinite && n < 0) {
344382
n = this.slidesCount - 1
345383
} else if (n >= this.slidesCount) {
346384
n = 0
@@ -352,7 +390,7 @@
352390
353391
setTimeout(() => {
354392
this.el.slides[e].classList.remove('agile__slide--expiring')
355-
}, this.speed_)
393+
}, this.settings.speed)
356394
357395
this.transform = 0
358396
} else {
@@ -363,7 +401,7 @@
363401
this.el.slides[i].classList.remove('agile__slide--active')
364402
}
365403
366-
if (this.infinite_ && !this.fade_) {
404+
if (this.settings.infinite && !this.settings.fade) {
367405
this.transform += this.width.slide
368406
this.addActiveClass(n + 1)
369407
} else {
@@ -376,18 +414,18 @@
376414
this.transitionDelay = this.speed
377415
}
378416
379-
if (this.infinite_ && n < 0) {
417+
if (this.settings.infinite && n < 0) {
380418
this.currentSlide = this.slidesCount - 1
381419
382420
setTimeout(() => {
383421
this.setSlide(this.slidesCount - 1, false)
384422
}, this.speed)
385-
} else if (this.infinite_ && n >= this.slidesCount) {
423+
} else if (this.settings.infinite && n >= this.slidesCount) {
386424
this.currentSlide = 0
387425
388426
setTimeout(() => {
389427
this.setSlide(0, false)
390-
}, this.speed_)
428+
}, this.settings.speed)
391429
} else {
392430
this.currentSlide = n
393431
}
@@ -404,12 +442,36 @@
404442
405443
watch: {
406444
width () {
445+
// Responsive
446+
if (this.defaultSettings.responsive) {
447+
let responsiveSettings = {}
448+
Object.assign(responsiveSettings, this.defaultSettings)
449+
450+
responsiveSettings.responsive.forEach((responsive) => {
451+
if (this.defaultSettings.mobileFirst) {
452+
if (responsive.breakpoint < this.width.document) {
453+
for (let key in responsive.settings) {
454+
responsiveSettings[key] = responsive.settings[key]
455+
}
456+
}
457+
} else {
458+
if (responsive.breakpoint > this.width.document) {
459+
for (let key in responsive.settings) {
460+
responsiveSettings[key] = responsive.settings[key]
461+
}
462+
}
463+
}
464+
})
465+
466+
Object.assign(this.settings, responsiveSettings)
467+
}
468+
407469
// Actions on document resize
408470
for (let i = 0; i < this.allSlidesCount; ++i) {
409471
this.el.slides[i].style.width = this.width.container + 'px'
410472
411473
// Prepare slides for fade mode
412-
if (this.fade_) {
474+
if (this.settings.fade) {
413475
this.el.slides[i].style.transform = 'translate(-' + i * this.width.slide + 'px)'
414476
}
415477
}
@@ -425,7 +487,7 @@
425487
}
426488
427489
if (this.dragDistance > this.swipeDistance) {
428-
if (!this.infinite_ && this.currentSlide === 0) {
490+
if (!this.settings.infinite && this.currentSlide === 0) {
429491
return
430492
}
431493
@@ -434,7 +496,7 @@
434496
}
435497
436498
if (this.dragDistance < -1 * this.swipeDistance) {
437-
if (!this.infinite_ && this.currentSlide === this.slidesCount - 1) {
499+
if (!this.settings.infinite && this.currentSlide === this.slidesCount - 1) {
438500
return
439501
}
440502

0 commit comments

Comments
 (0)