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

Commit 8dd18dc

Browse files
author
Łukasz Florczak
committed
Merge branch 'develop'
* develop: Fix for :dots="false" and slides transition v0.2.2-beta.1 Demo fixes Scrolling and swiping improvements (fixed #16) Autoplay optimization Autoplay & fade improvements .badge shape fix
2 parents 8695ee4 + c7ebfcc commit 8dd18dc

10 files changed

+72
-22
lines changed

‎demo/App.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@
248248

249249
<div class="row">
250250
<div class="col-xs-12">
251-
<agile :arrows="false" :speed="750" :timing="'linear'" :infinite="true" :fade="true" :autoplay="true" :autoplaySpeed="5000" :pauseOnHover="false">
251+
<agile :arrows="false" :speed="750" :timing="'linear'" :infinite="true" :fade="true" :autoplay="true" :pauseOnHover="false">
252252
<div class="slide slide--1"></div>
253253
<div class="slide slide--2"></div>
254254
<div class="slide slide--3"></div>
@@ -264,7 +264,9 @@
264264

265265
<pre class="code__content">
266266
<code class="language-html">
267-
&lt;agile :arrows="false" :speed="750" :timing="'linear'" :fade="true" :autoplay="true" :pauseOnHover="false"&gt;
267+
&lt;agile :arrows="false" :speed="750"
268+
:timing="'linear'" :fade="true"
269+
:autoplay="true" :pauseOnHover="false"&gt;
268270
&lt;div class="slide slide--1"&gt;&lt;/div&gt;
269271
&lt;div class="slide slide--2"&gt;&lt;/div&gt;
270272
&lt;div class="slide slide--3"&gt;&lt;/div&gt;

‎demo/scss/main.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ h1, h2, h3 {
9292
margin-left: 5px;
9393
padding: 1px 7px 2px;
9494
vertical-align: super;
95+
96+
@include sm {
97+
border-radius: 12px;
98+
}
9599
}
96100

97101
.section {
@@ -164,8 +168,12 @@ h1, h2, h3 {
164168

165169
pre[class*=language-] {
166170
border-radius: 0;
167-
height: 200px;
171+
max-height: 200px;
168172
overflow-y: auto;
173+
174+
@include lg {
175+
height: 200px;
176+
}
169177
}
170178

171179
.code {

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0"><meta http-equiv=cache-control content=no-cache><meta http-equiv=expires content=7><meta http-equiv=pragma content=no-cache><link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel=stylesheet><link href=//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css rel=stylesheet><title>vue-agile | demo</title><meta name=description content="vue-agile is a touch-friendly, responsive, easy to use carousel component for Vue.js inspired by Slick."><link href=/vue-agile/static/css/app.1369162485027a2e0119ff1b3fe3e2ce.css rel=stylesheet></head><body><div id=app></div><script async defer=defer src=https://buttons.github.io/buttons.js></script><script async src=//platform.twitter.com/widgets.js charset=utf-8></script><script src=//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js></script><script src=//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js></script><script>Prism.plugins.NormalizeWhitespace.setDefaults({
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0"><meta http-equiv=cache-control content=no-cache><meta http-equiv=expires content=7><meta http-equiv=pragma content=no-cache><link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel=stylesheet><link href=//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css rel=stylesheet><title>vue-agile | demo</title><meta name=description content="vue-agile is a touch-friendly, responsive, easy to use carousel component for Vue.js inspired by Slick."><link href=/vue-agile/static/css/app.385edb13689484d90640e60b6cb12153.css rel=stylesheet></head><body><div id=app></div><script async defer=defer src=https://buttons.github.io/buttons.js></script><script async src=//platform.twitter.com/widgets.js charset=utf-8></script><script src=//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js></script><script src=//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js></script><script>Prism.plugins.NormalizeWhitespace.setDefaults({
22
'remove-trailing': true,
33
'remove-indent': true,
44
'left-trim': true,
@@ -9,4 +9,4 @@
99
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
1010

1111
ga('create', 'UA-104121614-1', 'auto');
12-
ga('send', 'pageview');</script><script type=text/javascript src=/vue-agile/static/js/manifest.593e472c3eea54d8cfd4.js></script><script type=text/javascript src=/vue-agile/static/js/vendor.dbde534f08039ecea3fe.js></script><script type=text/javascript src=/vue-agile/static/js/app.0566f383a83f56f61419.js></script></body></html>
12+
ga('send', 'pageview');</script><script type=text/javascript src=/vue-agile/static/js/manifest.60773d5fe6c767b84bce.js></script><script type=text/javascript src=/vue-agile/static/js/vendor.dbde534f08039ecea3fe.js></script><script type=text/javascript src=/vue-agile/static/js/app.019fad0908404376a9df.js></script></body></html>

‎docs/static/css/app.1369162485027a2e0119ff1b3fe3e2ce.css‎ renamed to ‎docs/static/css/app.385edb13689484d90640e60b6cb12153.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/app.019fad0908404376a9df.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/app.0566f383a83f56f61419.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/static/js/manifest.593e472c3eea54d8cfd4.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/static/js/manifest.60773d5fe6c767b84bce.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-agile",
3-
"version": "0.2.1",
3+
"version": "0.2.2-beta.3",
44
"description": "Carousel component for Vue.js",
55
"author": "Łukasz Florczak <[email protected]>",
66
"license": "MIT",

‎src/Agile.vue‎

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<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: 'translate ' + timing + ' ' + transitionDelay + 'ms'}">
5+
:style="{width: width.track + 'px', transform: 'translate(-' + transform + 'px)', transition: 'transform ' + timing + ' ' + transitionDelay + 'ms'}">
66
<slot></slot>
77
</div>
88

@@ -68,14 +68,14 @@
6868
default: true
6969
},
7070
71-
timing: {
72-
type: String,
73-
default: 'ease' // linear, ease-in, ease-out, ease-in-out
74-
},
75-
7671
speed: {
7772
type: Number,
7873
default: 300
74+
},
75+
76+
timing: {
77+
type: String,
78+
default: 'ease' // linear, ease-in, ease-out, ease-in-out
7979
}
8080
},
8181
@@ -89,11 +89,12 @@
8989
},
9090
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>',
9191
slidesCount: 0,
92-
interval: null,
92+
autoplayTimeout: null,
9393
allSlidesCount: 0,
9494
currentSlide: 0,
9595
mouseDown: false,
9696
dragStartX: 0,
97+
dragStaryY: 0,
9798
dragDistance: 0,
9899
swipeDistance: 50,
99100
transform: 0,
@@ -109,11 +110,22 @@
109110
},
110111
111112
mounted () {
113+
// Protection against contradictory settings
114+
if (this.autoplay) {
115+
this.infinite = true
116+
}
117+
118+
if (this.pauseOnDotsHover) {
119+
this.dots = true
120+
}
121+
112122
// Prepare list
113123
this.el.list = this.$el.getElementsByClassName('agile__list')[0]
114124
115125
// Prepare dots
116-
this.el.dots = this.$el.getElementsByClassName('agile__dots')[0].children
126+
if (this.dots) {
127+
this.el.dots = this.$el.getElementsByClassName('agile__dots')[0].children
128+
}
117129
118130
// Prepare slides
119131
this.el.slides = this.$el.getElementsByClassName('agile__track')[0].children
@@ -234,32 +246,60 @@
234246
235247
this.mouseDown = true
236248
this.dragStartX = ('ontouchstart' in window) ? e.touches[0].clientX : e.clientX
249+
this.dragStartY = ('ontouchstart' in window) ? e.touches[0].clientY : e.clientY
237250
},
238251
239252
handleMouseMove (e) {
240253
let positionX = ('ontouchstart' in window) ? e.touches[0].clientX : e.clientX
241-
this.dragDistance = (positionX - this.dragStartX)
254+
let positionY = ('ontouchstart' in window) ? e.touches[0].clientY : e.clientY
255+
256+
let dragDistanceX = Math.abs(positionX - this.dragStartX)
257+
let dragDistanceY = Math.abs(positionY - this.dragStartY)
258+
259+
if (dragDistanceX > 3 * dragDistanceY) {
260+
this.dragDistance = positionX - this.dragStartX
261+
this.disableScroll()
262+
}
242263
},
243264
244265
handleMouseUp () {
245266
this.mouseDown = false
267+
this.enableScroll()
268+
},
269+
270+
disableScroll () {
271+
document.ontouchmove = function (e) {
272+
e.preventDefault()
273+
}
274+
},
275+
276+
enableScroll () {
277+
document.ontouchmove = function (e) {
278+
return true
279+
}
246280
},
247281
248282
addActiveClass (i) {
249283
this.el.slides[i].classList.add('agile__slide--active')
250284
},
251285
252286
startAutoplay () {
253-
this.interval = setInterval(() => {
287+
this.autoplayTimeout = setTimeout(() => {
254288
this.nextSlide()
255289
}, this.autoplaySpeed)
256290
},
257291
258292
stopAutoplay () {
259-
clearInterval(this.interval)
293+
clearTimeout(this.autoplayTimeout)
260294
},
261295
262-
setSlide (n, transition = true) {
296+
setSlide (n, transition = true, autoplayTimeout = true) {
297+
// Reset autoplay timeout and set new
298+
if (this.autoplay && autoplayTimeout) {
299+
this.stopAutoplay()
300+
this.startAutoplay()
301+
}
302+
263303
if (this.fade) {
264304
// Disable transition for initial slide
265305
if (transition === false) {
@@ -350,7 +390,7 @@
350390
351391
// Prepare track
352392
this.width.track = this.width.container * this.allSlidesCount
353-
this.setSlide(this.currentSlide, false)
393+
this.setSlide(this.currentSlide, false, false)
354394
},
355395
356396
dragDistance () {

0 commit comments

Comments
 (0)