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

Commit 1fa570f

Browse files
author
Łukasz Florczak
committed
Props fix
1 parent 9403dfa commit 1fa570f

File tree

1 file changed

+50
-35
lines changed

1 file changed

+50
-35
lines changed

‎src/Agile.vue‎

Lines changed: 50 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
2-
<div class="agile" :class="{'agile--fade': fade}">
2+
<div class="agile" :class="{'agile--fade': 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 ' + timing_ + ' ' + transitionDelay + 'ms'}">
66
<slot></slot>
77
</div>
88

9-
<ul v-if="dots" class="agile__dots">
9+
<ul v-if="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="arrows_" class="agile__arrow agile__arrow--prev"
17+
:disabled="currentSlide === 0 && !infinite_" @click="prevSlide" v-html="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="arrows_" class="agile__arrow agile__arrow--next"
20+
:disabled="currentSlide === slidesCount - 1 && !infinite_" @click="nextSlide" v-html="arrow_">
2121
</button>
2222
</div>
2323
</div>
@@ -28,6 +28,11 @@
2828
name: 'agile',
2929
3030
props: {
31+
arrow: {
32+
type: String,
33+
default: '<svg version="1.1" id="arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve"><g><path id="arrow" d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179 l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261 C187.881,124.315,187.881,116.495,183.189,111.816z"/></g></svg>'
34+
},
35+
3136
arrows: {
3237
type: Boolean,
3338
default: true
@@ -87,7 +92,6 @@
8792
track: null,
8893
slides: null
8994
},
90-
arrow: '<svg version="1.1" id="arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve"><g><path id="arrow" d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179 l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261 C187.881,124.315,187.881,116.495,183.189,111.816z"/></g></svg>',
9195
slidesCount: 0,
9296
autoplayTimeout: null,
9397
allSlidesCount: 0,
@@ -105,33 +109,44 @@
105109
slide: 0,
106110
track: 0
107111
},
108-
slidesToShow: 1
112+
slidesToShow: 1,
113+
arrow_: this.arrow,
114+
arrows_: this.arrows,
115+
autoplay_: this.autoplay,
116+
autoplaySpeed_: this.autoplaySpeed,
117+
dots_: this.dots,
118+
fade_: this.fade,
119+
infinite_: this.infinite,
120+
pauseOnDotsHover_: this.pauseOnDotsHover,
121+
pauseOnHover_: this.pauseOnHover,
122+
speed_: this.speed,
123+
timing_: this.timing
109124
}
110125
},
111126
112127
mounted () {
113128
// Protection against contradictory settings
114-
if (this.autoplay) {
115-
this.infinite = true
129+
if (this.autoplay_) {
130+
this.infinite_ = true
116131
}
117132
118-
if (this.pauseOnDotsHover) {
119-
this.dots = true
133+
if (this.pauseOnDotsHover_) {
134+
this.dots_ = true
120135
}
121136
122137
// Prepare list
123138
this.el.list = this.$el.getElementsByClassName('agile__list')[0]
124139
125140
// Prepare dots
126-
if (this.dots) {
141+
if (this.dots_) {
127142
this.el.dots = this.$el.getElementsByClassName('agile__dots')[0].children
128143
}
129144
130145
// Prepare slides
131146
this.el.slides = this.$el.getElementsByClassName('agile__track')[0].children
132147
this.slidesCount = this.el.slides.length
133148
134-
if (this.infinite && !this.fade) {
149+
if (this.infinite_ && !this.fade_) {
135150
this.allSlidesCount = this.slidesCount + 2
136151
} else {
137152
this.allSlidesCount = this.slidesCount
@@ -141,7 +156,7 @@
141156
this.el.slides[i].classList.add('agile__slide')
142157
143158
// Prepare slides for fade mode
144-
if (this.fade) {
159+
if (this.fade_) {
145160
this.el.slides[i].style.transition = 'opacity ' + this.timing + ' ' + this.speed + 'ms'
146161
}
147162
}
@@ -150,7 +165,7 @@
150165
this.el.track = this.$el.getElementsByClassName('agile__track')[0]
151166
152167
// Prepare infinity mode
153-
if (this.infinite && !this.fade) {
168+
if (this.infinite_ && !this.fade_) {
154169
let firstSlide = this.el.track.firstChild.cloneNode(true)
155170
let lastSlide = this.el.track.lastChild.cloneNode(true)
156171
@@ -162,7 +177,7 @@
162177
}
163178
164179
// Prepare autoplay
165-
if (this.autoplay) {
180+
if (this.autoplay_) {
166181
this.startAutoplay()
167182
}
168183
@@ -186,13 +201,13 @@
186201
}
187202
188203
// Autoplay
189-
if (this.autoplay) {
190-
if (this.pauseOnHover) {
204+
if (this.autoplay_) {
205+
if (this.pauseOnHover_) {
191206
this.el.track.addEventListener('mouseover', this.stopAutoplay)
192207
this.el.track.addEventListener('mouseout', this.startAutoplay)
193208
}
194209
195-
if (this.pauseOnDotsHover) {
210+
if (this.pauseOnDotsHover_) {
196211
for (let i = 0; i < this.slidesCount; ++i) {
197212
this.el.dots[i].addEventListener('mouseover', this.stopAutoplay)
198213
this.el.dots[i].addEventListener('mouseout', this.startAutoplay)
@@ -215,13 +230,13 @@
215230
this.el.track.removeEventListener('mousemove')
216231
}
217232
218-
if (this.autoplay) {
219-
if (this.pauseOnHover) {
233+
if (this.autoplay_) {
234+
if (this.pauseOnHover_) {
220235
this.el.track.removeEventListener('mouseover')
221236
this.el.track.removeEventListener('mouseout')
222237
}
223238
224-
if (this.pauseOnDotsHover) {
239+
if (this.pauseOnDotsHover_) {
225240
for (let i = 0; i < this.slidesCount; ++i) {
226241
this.el.dots[i].removeEventListener('mouseover')
227242
this.el.dots[i].removeEventListener('mouseout')
@@ -295,12 +310,12 @@
295310
296311
setSlide (n, transition = true, autoplayTimeout = true) {
297312
// Reset autoplay timeout and set new
298-
if (this.autoplay && autoplayTimeout) {
313+
if (this.autoplay_ && autoplayTimeout) {
299314
this.stopAutoplay()
300315
this.startAutoplay()
301316
}
302317
303-
if (this.fade) {
318+
if (this.fade_) {
304319
// Disable transition for initial slide
305320
if (transition === false) {
306321
this.el.slides[n].style.transition = '0ms'
@@ -314,7 +329,7 @@
314329
this.el.slides[i].classList.remove('agile__slide--expiring')
315330
}
316331
317-
if (this.infinite && n < 0) {
332+
if (this.infinite_ && n < 0) {
318333
n = this.slidesCount - 1
319334
} else if (n >= this.slidesCount) {
320335
n = 0
@@ -326,7 +341,7 @@
326341
327342
setTimeout(() => {
328343
this.el.slides[e].classList.remove('agile__slide--expiring')
329-
}, this.speed)
344+
}, this.speed_)
330345
331346
this.transform = 0
332347
} else {
@@ -337,7 +352,7 @@
337352
this.el.slides[i].classList.remove('agile__slide--active')
338353
}
339354
340-
if (this.infinite && !this.fade) {
355+
if (this.infinite_ && !this.fade_) {
341356
this.transform += this.width.slide
342357
this.addActiveClass(n + 1)
343358
} else {
@@ -350,18 +365,18 @@
350365
this.transitionDelay = this.speed
351366
}
352367
353-
if (this.infinite && n < 0) {
368+
if (this.infinite_ && n < 0) {
354369
this.currentSlide = this.slidesCount - 1
355370
356371
setTimeout(() => {
357372
this.setSlide(this.slidesCount - 1, false)
358373
}, this.speed)
359-
} else if (this.infinite && n >= this.slidesCount) {
374+
} else if (this.infinite_ && n >= this.slidesCount) {
360375
this.currentSlide = 0
361376
362377
setTimeout(() => {
363378
this.setSlide(0, false)
364-
}, this.speed)
379+
}, this.speed_)
365380
} else {
366381
this.currentSlide = n
367382
}
@@ -383,7 +398,7 @@
383398
this.el.slides[i].style.width = this.width.container + 'px'
384399
385400
// Prepare slides for fade mode
386-
if (this.fade) {
401+
if (this.fade_) {
387402
this.el.slides[i].style.transform = 'translate(-' + i * this.width.slide + 'px)'
388403
}
389404
}
@@ -399,7 +414,7 @@
399414
}
400415
401416
if (this.dragDistance > this.swipeDistance) {
402-
if (!this.infinite && this.currentSlide === 0) {
417+
if (!this.infinite_ && this.currentSlide === 0) {
403418
return
404419
}
405420
@@ -408,7 +423,7 @@
408423
}
409424
410425
if (this.dragDistance < -1 * this.swipeDistance) {
411-
if (!this.infinite && this.currentSlide === this.slidesCount - 1) {
426+
if (!this.infinite_ && this.currentSlide === this.slidesCount - 1) {
412427
return
413428
}
414429

0 commit comments

Comments
 (0)