Added event listener

README.md

@@ -31,6 +31,11 @@ Recalc height of all decks. Need to update when content added
 - `anchor` - `#id` of deck, `up` or `down`
 - `noAnimation` - prevents animation
 
+###skrollr.decks.on(event, callback)
+
+- `change(activeElement)` - calls when active deck is changed
+- `render(e)` - skrollr render event
+
 ##License
 
 [The MIT License (MIT)](LICENSE)

dist/skrollr.decks.js

@@ -1,5 +1,5 @@
 /*!
- * skrollr-decks 1.0.0
+ * skrollr-decks 1.0.1
  * Fullpage presentation decks with scrolling
  * https://github.com/TrySound/skrollr-decks
  * 
@@ -26,8 +26,10 @@
 		duration: 600,
 		easing: 'quadratic',
 		delay: 500,
-		autoscroll: true,
-		onRender: null
+		autoscroll: true
+	}, callbacks = {
+		render: null,
+		change: null
 	};
 
 
@@ -38,7 +40,8 @@
 		settings = {},
 		segments = {},
 		segmentsList = [],
-		nav = document.createElement('ul');
+		nav = document.createElement('ul'),
+		currentDeck;
 
 
 	// Stop animating on scroll keys
@@ -71,10 +74,21 @@
 	return {
 		init: init,
 		animateTo: animateTo,
-		refresh: resizeDecks
+		refresh: resizeDecks,
+		on: on
 	};
 
 
+	function on(name, cb) {
+		if(name in callbacks) {
+			callbacks[name] = cb;
+		}
+	}
+
+	function trigger(name, data) {
+		var fn = callbacks[name];
+		typeof fn === 'function' && fn.apply({}, data);
+	}
 
 
 	// Initialize
@@ -92,6 +106,9 @@
 			settings[key] = user[key] || defaults[key];
 		}
 
+		var onRender = settings.onRender,
+			onChange = settings.onChange,
+
 		inst = skrollr.init({
 			forceHeight: false
 		});
@@ -105,15 +122,17 @@
 
 		inst.refresh(nav.children);
 
-		if(settings.autoscroll) {
-			window.addEventListener('resize', update, false);
-			inst.on('render', function (e) {
-				clearTimeout(renderTimer);
-				renderTimer = setTimeout(function () {
-					update(e);
-				}, settings.delay);
-			});
-		}
+		window.addEventListener('resize', update, false);
+		inst.on('render', function (e) {
+			var el = update(e);
+
+			clearTimeout(renderTimer);
+			renderTimer = setTimeout(function () {
+				settings.autoscroll && el && inst.animateTo(inst.relativeToAbsolute(el, 'top', 'top') + 1, settings);
+			}, settings.delay);
+
+			trigger('render', [e]);
+		});
 	}
 
 
@@ -184,7 +203,11 @@
 			if( ! isVol(el)) {
 				el = segments[active[after].getAttribute('data-anchor-target')];
 			}
-			inst.animateTo(inst.relativeToAbsolute(el, 'top', 'top') + 1, settings);
+
+			currentDeck !== el && trigger('change', [el])
+			currentDeck = el;
+
+			return el;
 		}
 	}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skrollr-decks",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Fullpage presentation decks with scrolling",
   "main": "gulpfile.js",
   "scripts": {

src/skrollr.decks.js

@@ -17,8 +17,10 @@
 		duration: 600,
 		easing: 'quadratic',
 		delay: 500,
-		autoscroll: true,
-		onRender: null
+		autoscroll: true
+	}, callbacks = {
+		render: null,
+		change: null
 	};
 
 
@@ -29,7 +31,8 @@
 		settings = {},
 		segments = {},
 		segmentsList = [],
-		nav = document.createElement('ul');
+		nav = document.createElement('ul'),
+		currentDeck;
 
 
 	// Stop animating on scroll keys
@@ -62,10 +65,21 @@
 	return {
 		init: init,
 		animateTo: animateTo,
-		refresh: resizeDecks
+		refresh: resizeDecks,
+		on: on
 	};
 
 
+	function on(name, cb) {
+		if(name in callbacks) {
+			callbacks[name] = cb;
+		}
+	}
+
+	function trigger(name, data) {
+		var fn = callbacks[name];
+		typeof fn === 'function' && fn.apply({}, data);
+	}
 
 
 	// Initialize
@@ -83,6 +97,9 @@
 			settings[key] = user[key] || defaults[key];
 		}
 
+		var onRender = settings.onRender,
+			onChange = settings.onChange,
+
 		inst = skrollr.init({
 			forceHeight: false
 		});
@@ -96,15 +113,17 @@
 
 		inst.refresh(nav.children);
 
-		if(settings.autoscroll) {
-			window.addEventListener('resize', update, false);
-			inst.on('render', function (e) {
-				clearTimeout(renderTimer);
-				renderTimer = setTimeout(function () {
-					update(e);
-				}, settings.delay);
-			});
-		}
+		window.addEventListener('resize', update, false);
+		inst.on('render', function (e) {
+			var el = update(e);
+
+			clearTimeout(renderTimer);
+			renderTimer = setTimeout(function () {
+				settings.autoscroll && el && inst.animateTo(inst.relativeToAbsolute(el, 'top', 'top') + 1, settings);
+			}, settings.delay);
+
+			trigger('render', [e]);
+		});
 	}
 
 
@@ -175,7 +194,11 @@
 			if( ! isVol(el)) {
 				el = segments[active[after].getAttribute('data-anchor-target')];
 			}
-			inst.animateTo(inst.relativeToAbsolute(el, 'top', 'top') + 1, settings);
+
+			currentDeck !== el && trigger('change', [el])
+			currentDeck = el;
+
+			return el;
 		}
 	}