scoochjs - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

 {
 	"name": "scoochjs",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"description": "A really lightweight, customisable vanilla Javascript carousel",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # Scooch
 
-Scooch makes slideshows easy. You bring your own content and styling. It's super lightweight, around 1kb gzipped and easy to customise.
+Scooch makes slideshows easy. You bring your own content and styling. It's super lightweight, around 1.5kb gzipped and easy to customise.
 
@@ -33,2 +33,4 @@ ## Installation
 | `enableFullscreen` | Allow the slideshow to be made fullscreen                  | `true`        |
+| `scrollToChange`   | Move to next/previous slides by scrolling                  | `true`        |
+| `swipeToChange`    | Move to next/previous slides by swiping on a touch device  | `true`        |
 
@@ -35,0 +37,0 @@ ## Methods

src/scooch.js

@@ -7,3 +7,5 @@ const Scooch = function (node, options = {}) {
         keyboardControls: true,
-        allowFullscreen: true
+        allowFullscreen: true,
+        scrollToChange: true,
+        swipeToChange: true
     };
@@ -20,2 +22,4 @@
     this.previousSlide = null;
+    this.swipeInitialX = null;
+    this.swipeInitialY = null;
 
@@ -38,2 +42,9 @@ /**
 
+        // Stop the container moving if we swipe
+        if ( this.options.swipeToChange )  {
+            console.log('Swipe enabled');
+            this.node.addEventListener('touchstart', this.handleStartSwipe.bind(this), false);
+            this.node.addEventListener('touchmove', this.handleSwipe.bind(this), false);
+        }
+
         // Setup Key Press listeners
@@ -43,2 +54,7 @@ if (this.options.keyboardControls) {
         }
+
+        // Setup Scroll Listeners
+        if (this.options.scrollToChange) {
+            window.addEventListener('wheel', this.debounce(this.handleScroll, 300).bind(this));
+        }
     };
@@ -80,3 +96,3 @@
         // Previous slide
-        if (event.keyCode === 37) {
+        if (event.keyCode === 37 || event.keyCode === 38) {
             this.previous();
@@ -86,3 +102,3 @@ }
         // Next slide
-        if (event.keyCode === 39 || event.keyCode === 32) {
+        if (event.keyCode === 39 || event.keyCode === 32 || event.keyCode === 40) {
             this.next();
@@ -97,2 +113,59 @@ }
 
+    // Handle Scroll
+    this.handleScroll = (event) => {
+        // Next
+        if ( event.deltaY !== 0 && event.deltaY < 0 ) this.next();
+        if ( event.deltaX !== 0 && event.deltaX > 0 ) this.next();
+
+        // Previous
+        if ( event.deltaY !== 0 && event.deltaY > 0 ) this.previous();
+        if ( event.deltaX !== 0 && event.deltaX < 0 ) this.previous();
+    }
+
+    // Handle Start Swipe
+    this.handleStartSwipe = (event) => {
+        this.swipeInitialX = event.touches[0].clientX;
+        this.swipeInitialY = event.touches[0].clientY;
+    }
+
+    // Handle Swipe
+    this.handleSwipe = (event) => {
+        event.preventDefault();
+
+        // Bail if no touch
+        if ( this.swipeInitialX === null || this.swipeInitialY === null ) return;
+
+        let swipeCurrentX = event.touches[0].clientX;
+        let swipeCurrentY = event.touches[0].clientY;
+        let swipeDiffX = this.swipeInitialX - swipeCurrentX;
+        let swipeDiffY = this.swipeInitialY - swipeCurrentY;
+
+        // Only detect horizontal swipes
+        if ( Math.abs(swipeDiffX) > Math.abs(swipeDiffY) ) {
+            if ( swipeDiffX > 0 ) {
+                this.next();
+            } else {
+                this.previous();
+            }
+        }
+
+        // Clean up
+        this.swipeInitialX = null;
+        this.swipeInitialY = null;
+    }
+
+    // Debounce
+    this.debounce = (fn, d) => {
+        let timer;
+        return function() {
+            let context = this;
+            let args = arguments;
+            clearTimeout(timer);
+
+            timer = setTimeout(() => {
+                fn.apply(context, args);
+            }, d);
+        }
+    }
+
     // Run Init
@@ -99,0 +172,0 @@ this.init();

No alert changes

Improved metrics

Total package byte prevSize

11650

29.26%

Lines of code

192

51.18%

Number of lines in readme file

57

3.64%

No dependency changes