Merge commit 'c5d3e604028e4661fa3adf7042895e90d8dc96b8' into develop

* commit 'c5d3e604028e4661fa3adf7042895e90d8dc96b8':
  Update README.md
  Update README.md
  0.2.4
  Small change in listeners
  SSR example (#19)
  Added missing argument for removeEventListener (fixed #20)

Author: Łukasz Florczak

README.md

@@ -1,7 +1,7 @@
 # vue-agile
 
 > Carousel component for Vue.js inspired by [Slick](https://github.com/kenwheeler/slick/).<br>
-> ~~Simple~~ More powerfull with each version, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).
+> More powerfull with each version, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).
 
 **[Demo & examples](https://lukaszflorczak.github.io/vue-agile/)**
 
@@ -68,6 +68,40 @@ Every first-level child of `<agile>` is a new slide.
 </agile>
 ```
 
+## SSR Support
+
+The component uses browser specific attributes (like `window` and `document`). It is necessary, so probably the only option is to run vue-agile only on the client-side. It was tested on [nuxt v1.0.0-rc7](https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc7) and works fine.
+ 
+### Example
+```js
+// plugins/vue-agile.js
+
+import Vue from 'vue'
+import VueAgile from 'vue-agile'
+
+Vue.component('agile', VueAgile)
+```
+
+```js
+// nuxt.config.js
+
+module.exports = {
+    plugins: [
+        { src: '~/plugins/vue-agile', ssr: false }
+    ]
+}
+```
+
+```vue
+<no-ssr placeholder="Loading...">
+    <agile>
+        ... 
+    </agile>
+</no-ssr>
+```
+
+PS. If you know a better way to work the component with SSR please, [let me know about it](https://github.com/lukaszflorczak/vue-agile/issues).
+
 ## Contributing
 ```
 # install dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-agile",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Carousel component for Vue.js",
   "author": "Łukasz Florczak <[email protected]>",
   "license": "MIT",

src/Agile.vue

@@ -195,65 +195,62 @@
                 this.startAutoplay()
             }
 
-            // Listeners
-            this.$nextTick(function () {
-                // Windows resize listener
-                window.addEventListener('resize', this.getWidth)
-
-                // Get width on start
-                this.getWidth()
-
-                // Mouse and touch events
-                if ('ontouchstart' in window) {
-                    this.el.track.addEventListener('touchstart', this.handleMouseDown)
-                    this.el.track.addEventListener('touchend', this.handleMouseUp)
-                    this.el.track.addEventListener('touchmove', this.handleMouseMove)
-                } else {
-                    this.el.track.addEventListener('mousedown', this.handleMouseDown)
-                    this.el.track.addEventListener('mouseup', this.handleMouseUp)
-                    this.el.track.addEventListener('mousemove', this.handleMouseMove)
-                }
+            // Windows resize listener
+            window.addEventListener('resize', this.getWidth)
 
-                // Autoplay
-                if (this.autoplay_) {
-                    if (this.pauseOnHover_) {
-                        this.el.track.addEventListener('mouseover', this.stopAutoplay)
-                        this.el.track.addEventListener('mouseout', this.startAutoplay)
-                    }
+            // Get width on start
+            this.getWidth()
+
+            // Mouse and touch events
+            if ('ontouchstart' in window) {
+                this.el.track.addEventListener('touchstart', this.handleMouseDown)
+                this.el.track.addEventListener('touchend', this.handleMouseUp)
+                this.el.track.addEventListener('touchmove', this.handleMouseMove)
+            } else {
+                this.el.track.addEventListener('mousedown', this.handleMouseDown)
+                this.el.track.addEventListener('mouseup', this.handleMouseUp)
+                this.el.track.addEventListener('mousemove', this.handleMouseMove)
+            }
 
-                    if (this.pauseOnDotsHover_) {
-                        for (let i = 0; i < this.slidesCount; ++i) {
-                            this.el.dots[i].addEventListener('mouseover', this.stopAutoplay)
-                            this.el.dots[i].addEventListener('mouseout', this.startAutoplay)
-                        }
+            // Autoplay
+            if (this.autoplay_) {
+                if (this.pauseOnHover_) {
+                    this.el.track.addEventListener('mouseover', this.stopAutoplay)
+                    this.el.track.addEventListener('mouseout', this.startAutoplay)
+                }
+
+                if (this.pauseOnDotsHover_) {
+                    for (let i = 0; i < this.slidesCount; ++i) {
+                        this.el.dots[i].addEventListener('mouseover', this.stopAutoplay)
+                        this.el.dots[i].addEventListener('mouseout', this.startAutoplay)
                     }
                 }
-            })
+            }
         },
 
         beforeDestroy () {
             window.removeEventListener('resize', this.getWidth)
 
             if ('ontouchstart' in window) {
-                this.el.track.removeEventListener('touchstart')
-                this.el.track.removeEventListener('touchend')
-                this.el.track.removeEventListener('touchmove')
+                this.el.track.removeEventListener('touchstart', this.handleMouseDown)
+                this.el.track.removeEventListener('touchend', this.handleMouseUp)
+                this.el.track.removeEventListener('touchmove', this.handleMouseMove)
             } else {
-                this.el.track.removeEventListener('mousedown')
-                this.el.track.removeEventListener('mouseup')
-                this.el.track.removeEventListener('mousemove')
+                this.el.track.removeEventListener('mousedown', this.handleMouseDown)
+                this.el.track.removeEventListener('mouseup', this.handleMouseUp)
+                this.el.track.removeEventListener('mousemove', this.handleMouseMove)
             }
 
             if (this.autoplay_) {
                 if (this.pauseOnHover_) {
-                    this.el.track.removeEventListener('mouseover')
-                    this.el.track.removeEventListener('mouseout')
+                    this.el.track.removeEventListener('mouseover', this.stopAutoplay)
+                    this.el.track.removeEventListener('mouseout', this.startAutoplay)
                 }
 
                 if (this.pauseOnDotsHover_) {
                     for (let i = 0; i < this.slidesCount; ++i) {
-                        this.el.dots[i].removeEventListener('mouseover')
-                        this.el.dots[i].removeEventListener('mouseout')
+                        this.el.dots[i].removeEventListener('mouseover', this.stopAutoplay)
+                        this.el.dots[i].removeEventListener('mouseout', this.startAutoplay)
                     }
                 }
             }