Added option to allow for keyboard events to change slides.

d4nyll · d4nyll · commit 2f309ee207d3 · 2015-12-25T01:12:52.000+08:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # smartscroll
 
-smartscroll is a tiny (1665b minfied + gzipped) jQuery plugin that has these *independent* features:
+smartscroll is a tiny (1834b minfied + gzipped) jQuery plugin that has these *independent* features:
 
 1. Section scrolling - Scrolljacking
 2. Auto-hash - Updates the URL hash based on current position on page
@@ -77,6 +77,7 @@ Structure your HTML like so (default options included)
 * `eventEmitter` - (Object) If you pass in an [EventEmitter](https://github.com/Olical/EventEmitter) object, autoHashing will be much more efficient. You can also listen to the scroll events this way. Defaults to `null`.
 * `ie8` - If you need to support Internet Explorer 8, change this to `true`. Defaults to `false`.
 * `bindSwipe` - (Boolean) Allow for listening of swipe events. Requires EventEmitter. Defaults to `true`
+* `bindKeyboard` - (Boolean) Allow for keyboard events (up and down arrows) to control slides. Defaults to `true`
 
 ### Events
 
diff --git a/bower.json b/bower.json
@@ -4,7 +4,7 @@
     "smartscroll.js",
     "sass/smartscroll.scss"
   ],
-  "version": "2.3.1",
+  "version": "2.4.0",
   "homepage": "https://github.com/d4nyll/smartscroll",
   "repository": {
     "type": "git",
diff --git a/examples/auto-hash/index.html b/examples/auto-hash/index.html
@@ -12,7 +12,7 @@
 		<div class="section" data-hash="a">
 			<div>
 				<h1>smartscroll - Auto-Hash</h1>
-				<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+				<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 				<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 				<p>Try out other examples!</p>
 				<ul>
diff --git a/examples/different-heights-hybrid-scroll/index.html b/examples/different-heights-hybrid-scroll/index.html
@@ -11,7 +11,7 @@
 	<div class="header">
 		<div>
 			<h1>smartscroll - Different Heights &amp; Hybrid Scroll</h1>
-			<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+			<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 			<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 			<p>Try out other examples!</p>
 			<ul>
diff --git a/examples/different-heights-inner-section-scroll/index.html b/examples/different-heights-inner-section-scroll/index.html
@@ -12,7 +12,7 @@
 		<div class="section" data-hash="a">
 			<div>
 				<h1>smartscroll - Different Heights</h1>
-				<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+				<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 				<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 				<p>Try out other examples!</p>
 				<ul>
diff --git a/examples/different-heights/index.html b/examples/different-heights/index.html
@@ -12,7 +12,7 @@
 		<div class="section" data-hash="a">
 			<div>
 				<h1>smartscroll - Different Heights</h1>
-				<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+				<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 				<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 				<p>Try out other examples!</p>
 				<ul>
diff --git a/examples/hybrid-scroll/index.html b/examples/hybrid-scroll/index.html
@@ -11,7 +11,7 @@
 	<div class="header">
 		<div>
 			<h1>smartscroll - Hybrid Scroll</h1>
-			<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+			<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 			<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 			<p>Try out other examples!</p>
 			<ul>
diff --git a/examples/index.html b/examples/index.html
@@ -11,7 +11,7 @@
 	<div class="header">
 		<div>
 			<h1>smartscroll</h1>
-			<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+			<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 			<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 			<p>Try out other examples!</p>
 			<ul>
diff --git a/examples/keep-history/index.html b/examples/keep-history/index.html
@@ -12,7 +12,7 @@
 		<div class="section" data-hash="a">
 			<div>
 				<h1>smartscroll - Keep History</h1>
-				<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+				<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 				<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 				<p>Try out other examples!</p>
 				<ul>
diff --git a/examples/permalink/index.html b/examples/permalink/index.html
@@ -12,7 +12,7 @@
 		<div class="section" data-hash="a">
 			<div>
 				<h1>smartscroll - Permalink</h1>
-				<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+				<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 				<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 				<p>Try out other examples!</p>
 				<ul>
diff --git a/examples/responsive/index.html b/examples/responsive/index.html
@@ -11,7 +11,7 @@
 	<div class="header">
 		<div>
 			<h1>smartscroll - Responsive</h1>
-			<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+			<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 			<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 			<p>Try out other examples!</p>
 			<ul>
diff --git a/examples/touch-events/index.html b/examples/touch-events/index.html
@@ -11,7 +11,7 @@
 	<div class="header">
 		<div>
 			<h1>smartscroll</h1>
-			<p>A tiny (1665b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
+			<p>A tiny (1834b minfied + gzipped) jQuery plugin for scrolljacking and auto-hashing</p>
 			<p>See it on <a href="https://github.com/d4nyll/smartscroll" target="_blank">GitHub</a>, or see some <a href="http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/" target="_blank">comparisons</a></p>
 			<p>Try out other examples!</p>
 			<ul>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smartscroll",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Scrolljacking jQuery plugin",
   "main": "smartscroll.js",
   "directories": {
diff --git a/smartscroll.js b/smartscroll.js
@@ -146,9 +146,26 @@
 		///FUNCTIONS///
 		///////////////
 		
+		// Check if the view is currently within the section wrapper
+		var sectionWrapperIsVisible = function () {
+			var windowTop = getWindowTop();
+			var windowBottom = windowTop + $(window).height();
+			// Only affect scrolling if within the sectionWrapper area
+			if (
+				windowBottom > sectionWrapperTop
+				&& windowTop <= sectionWrapperBottom
+			) {
+				return true;
+			}
+			return false;
+		}
+
 		// Animates the scroll to the pixel specified
 		// at the speed (milisseconds) specified
 		var scrollToPixel = function (pixel, speed) {
+			if(isScrolling) {
+				return;
+			}
 			isScrolling = true;
 			$('body,html').stop(true,true).animate({
 				scrollTop: pixel
@@ -254,6 +271,9 @@
 				var scrollAction = getScrollAction(e);
 				if(options.dynamicHeight) {
 					calculateSectionBottoms();
+				}
+				if(sectionWrapperIsVisible()) {
+
 				}
 				var windowTop = getWindowTop();
 				var windowBottom = windowTop + $(window).height();
@@ -437,6 +457,53 @@
 			$(window).on('touchstart', handleTouchStart);
 			$(window).on('touchmove', handleTouchMove);
 		}
+		if(options.bindKeyboard) {
+			var handleKeydown = function (e) {
+				e = e.originalEvent || e;
+				if(options.dynamicHeight) {
+					calculateSectionBottoms();
+				}
+				var windowTop = getWindowTop();
+				var windowBottom = windowTop + $(window).height();
+				// Only affect scrolling if within the sectionWrapper area
+				if (sectionWrapperIsVisible()) {
+					// Only hijack the scroll when windowTop and windowBottom are touching different slides
+					// `!==` instead of `<` caters for when `getSectionIndexAtWindowBottom` is `undefined`
+					// (at the end of the area)
+					var sectionIndexAtWindowTop = getSectionIndexAt(windowTop);
+					var sectionIndexAtWindowMiddle = getSectionIndexAt(windowTop + ($(window).height() / 2));
+					var sectionIndexAtWindowBottom = getSectionIndexAt(windowBottom);
+					if (sectionIndexAtWindowTop !== sectionIndexAtWindowBottom
+						|| !options.innerSectionScroll) {
+						e.preventDefault();
+						e.stopPropagation();
+						switch(e.which) {
+							// up arrow
+							case 38:
+								if(options.toptotop) {
+									scrollToPixel(sections[sectionIndexAtWindowMiddle - 2] + 1, options.animationSpeed);
+								} else {
+									scrollToPixel(sections[sectionIndexAtWindowMiddle - 1] - $(window).height(), options.animationSpeed);
+								}
+								if(options.eventEmitter) {
+									options.eventEmitter.emitEvent("scrollStart", [sectionIndexAtWindowMiddle - 1]);	
+								}
+							break;
+							// down arrow
+							case 40:
+								scrollToPixel(sections[sectionIndexAtWindowMiddle] + 1, options.animationSpeed);
+								if(options.eventEmitter) {
+									options.eventEmitter.emitEvent("scrollStart", [sectionIndexAtWindowMiddle + 1]);	
+								}
+							break;
+
+							default: return;
+						}
+					}
+				}
+			}
+			$(window).on('keydown', handleKeydown);
+		}
 		return this;
 	}
 
@@ -459,7 +526,7 @@
 		hashContinuousUpdate: true,
 		innerSectionScroll: true,
 		toptotop: false,
-		bindSwipe: true
+		bindSwipe: true,
+		bindKeyboard: true
 	}
-}(jQuery));
-
+}(jQuery));
diff --git a/smartscroll.min.js b/smartscroll.min.js
