prevent scrolling propagation to parent when scrollbar reaches top or bottom (fix #68)

src/main/webapp/WEB-INF/wro.xml

@@ -3,6 +3,7 @@
 
 	<group name="lib">
 		<js minimize="false">/vendor/jquery/*.js</js>
+		<js minimize="false">/vendor/jquery-mousewheel/*.js</js>
 		<js minimize="false">/vendor/bootstrap/*.js</js>
 		<js minimize="false">/vendor/angularjs/*.js</js>
 		<js minimize="false">/vendor/angularui/*.js</js>

src/main/webapp/js/directives.js

@@ -1,5 +1,8 @@
 var module = angular.module('commafeed.directives', []);
 
+/**
+ * Open a popup window pointing to the url in the href attribute
+ */
 module.directive('popup', function() {
 	return {
 		link : function(scope, elm, attrs) {
@@ -11,6 +14,9 @@ module.directive('popup', function() {
 	};
 });
 
+/**
+ * Reusable favicon component
+ */
 module.directive('favicon', function() {
 	return {
 		restrict : 'E',
@@ -40,6 +46,9 @@ module.directive('favicon', function() {
 	};
 });
 
+/**
+ * Support for the blur event
+ */
 module.directive('ngBlur', function() {
 	return {
 		restrict : 'A',
@@ -51,6 +60,9 @@ module.directive('ngBlur', function() {
 	};
 });
 
+/**
+ * Scrolls to the element if the value is true
+ */
 module.directive('scrollTo', [ '$timeout', function($timeout) {
 	return {
 		restrict : 'A',
@@ -81,6 +93,32 @@ module.directive('scrollTo', [ '$timeout', function($timeout) {
 	};
 } ]);
 
+/**
+ * Prevent mousewheel scrolling from propagating to the parent when scrollbar reaches top or bottom
+ */
+module.directive('mousewheelScrolling', function() {
+	return {
+		restrict : 'A',
+		link : function(scope, elem, attr) {
+			elem.bind('mousewheel', function(e, d) {
+				var t = $(this);
+				if (d > 0 && t.scrollTop() === 0) {
+					e.preventDefault();
+				} else {
+					if (d < 0
+							&& (t.scrollTop() == t.get(0).scrollHeight
+									- t.innerHeight())) {
+						e.preventDefault();
+					}
+				}
+			});
+		}
+	};
+});
+
+/**
+ * Needed to use recursive directives. Wrap a recursive element with a <recursive> tag
+ */
 module.directive('recursive', [ '$compile', function($compile) {
 	return {
 		restrict : 'E',
@@ -100,6 +138,9 @@ module.directive('recursive', [ '$compile', function($compile) {
 	};
 } ]);
 
+/**
+ * Reusable category component
+ */
 module.directive('category', [ function() {
 	return {
 		scope : {
@@ -202,6 +243,9 @@ module.directive('category', [ function() {
 	};
 } ]);
 
+/**
+ * Reusable spinner component
+ */
 module.directive('spinner', function() {
 	return {
 		scope : {

src/main/webapp/templates/feeds.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
 	<div class="row-fluid">
 		<div class="span2">
-			<div class="sidebar-nav-fixed">
+			<div class="sidebar-nav-fixed" mousewheel-scrolling>
 				<div ng-include="'templates/_subscribe.html'"></div>
 				<div ng-include="'templates/_tree.html'"></div>
 			</div>

src/main/webapp/vendor/jquery-mousewheel/jquery.mousewheel-3.0.6.min.js

@@ -0,0 +1,12 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)