wip: mark items as the user scrolls past them (#62)

src/main/java/com/commafeed/backend/model/UserSettings.java

@@ -43,8 +43,9 @@ public class UserSettings extends AbstractModel {
 	private ViewMode viewMode;
 
 	private boolean showRead;
-
+	private boolean scrollMarks;
 	private boolean socialButtons;
+	private boolean test;
 
 	@Lob
 	@Column(length = Integer.MAX_VALUE)
@@ -106,4 +107,20 @@ public class UserSettings extends AbstractModel {
 		this.viewMode = viewMode;
 	}
 
+	public boolean isScrollMarks() {
+		return scrollMarks;
+	}
+
+	public void setScrollMarks(boolean scrollMarks) {
+		this.scrollMarks = scrollMarks;
+	}
+
+	public boolean isTest() {
+		return test;
+	}
+
+	public void setTest(boolean test) {
+		this.test = test;
+	}
+
 }

src/main/java/com/commafeed/frontend/model/Settings.java

@@ -30,6 +30,9 @@ public class Settings implements Serializable {
 	@ApiProperty(value = "user wants social buttons (facebook, twitter, ...) shown", required = true)
 	private boolean socialButtons;
 
+	@ApiProperty(value = "In expanded view, scroll through entries mark them as read", required = true)
+	private boolean scrollMarks;
+
 	@ApiProperty(value = "user's custom css for the website")
 	private String customCss;
 
@@ -81,4 +84,12 @@ public class Settings implements Serializable {
 		this.viewMode = viewMode;
 	}
 
+	public boolean isScrollMarks() {
+		return scrollMarks;
+	}
+
+	public void setScrollMarks(boolean scrollMarks) {
+		this.scrollMarks = scrollMarks;
+	}
+
 }

src/main/java/com/commafeed/frontend/rest/resources/UserREST.java

@@ -43,6 +43,7 @@ public class UserREST extends AbstractResourceREST {
 			s.setViewMode(settings.getViewMode().name());
 			s.setShowRead(settings.isShowRead());
 			s.setSocialButtons(settings.isSocialButtons());
+			s.setScrollMarks(settings.isScrollMarks());
 			s.setCustomCss(settings.getCustomCss());
 		} else {
 			s.setReadingMode(ReadingMode.unread.name());
@@ -50,6 +51,7 @@ public class UserREST extends AbstractResourceREST {
 			s.setViewMode(ViewMode.title.name());
 			s.setShowRead(true);
 			s.setSocialButtons(true);
+			s.setScrollMarks(true);
 		}
 		return s;
 	}
@@ -69,7 +71,9 @@ public class UserREST extends AbstractResourceREST {
 		s.setReadingOrder(ReadingOrder.valueOf(settings.getReadingOrder()));
 		s.setShowRead(settings.isShowRead());
 		s.setViewMode(ViewMode.valueOf(settings.getViewMode()));
+		s.setScrollMarks(settings.isScrollMarks());
 		s.setCustomCss(settings.getCustomCss());
+		s.setSocialButtons(settings.isSocialButtons());
 		userSettingsDAO.saveOrUpdate(s);
 		return Response.ok(Status.OK).build();
 

src/main/webapp/css/app.css

@@ -270,7 +270,12 @@
 }
 
 #feed-accordion.expanded .entry {
-	margin-bottom: 20px;
+	margin-bottom: 50px;
+	border-top: 1px solid #ebebeb;
+}
+
+#feed-accordion.expanded .current {
+	border-left: 1px solid blue;
 }
 
 /* admin */

src/main/webapp/js/controllers.js

@@ -127,6 +127,8 @@ function($scope, $timeout, $stateParams, $window, $location, $state, $route, Cat
 	$timeout(function refreshTree() {
 		CategoryService.init(function() {
 			$timeout(refreshTree, 15000);
+		}, function() {
+			$timeout(refreshTree, 15000);
 		});
 	}, 15000);
 
@@ -536,10 +538,10 @@ function($scope, $stateParams, $http, $route, $window, EntryService, SettingsSer
 		}
 	};
 
-	$scope.isOpen = false;
+	$scope.isOpen = SettingsService.settings.viewMode == 'expanded';
 	$scope.entryClicked = function(entry, event) {
 		if (!event.ctrlKey && event.which != 2) {
-			if ($scope.current != entry) {
+			if ($scope.current != entry || SettingsService.settings.viewMode == 'expanded') {
 				$scope.isOpen = true;
 			} else {
 				$scope.isOpen = !$scope.isOpen;
@@ -604,6 +606,14 @@ function($scope, $stateParams, $http, $route, $window, EntryService, SettingsSer
 		}
 	};
 
+	$scope.onScroll = function(entry) {
+		if (SettingsService.settings.viewMode == 'expanded'){
+			$scope.current = entry;
+			if(SettingsService.settings.scrollMarks) {
+				$scope.mark(entry, true);
+			}
+		}
+	};
 
 	Mousetrap.bind('j', function(e) {
 		$scope.$apply(function() {

src/main/webapp/js/directives.js

@@ -60,6 +60,53 @@ module.directive('ngBlur', function() {
 	};
 });
 
+/**
+ * Fired when the top of the element is not visible anymore
+ */
+module.directive('onScrollMiddle', function () {
+	return {
+		restrict : 'A',
+		link : function(scope, element, attrs) {
+			
+			var w = $(window);
+			var e = $(element);
+			
+			var direction = 'down';
+			
+			var down = function() {
+				var docTop = w.scrollTop();
+				var docMiddle = docTop + w.height() / 2; 
+				var elemTop = e.offset().top;
+				return (elemTop > docMiddle) ? 'below' : 'above';
+			};
+			var up = function() {
+				var docTop = w.scrollTop();
+				var docMiddle = docTop + w.height() / 2; 
+				var elemTop = e.offset().top;
+				var elemBottom = elemTop + e.height();
+				
+				return (elemBottom > docMiddle) ? 'below' : 'above';
+			};
+			
+			if(!w.data.scrollInit){
+				$(window).bind('scroll', function(e) {
+					var direction = e.detail > 0 ? 'down' : 'up';
+					scope.$apply();
+				});
+				w.data.scrollInit = true;
+			}
+			scope.$watch(down, function(value, oldValue) {
+				if(direction == 'down' && value && oldValue && value != oldValue)
+					scope.$eval(attrs.onScrollMiddle);
+			});
+			scope.$watch(up, function(value, oldValue) {
+				if(direction == 'up' && value && oldValue && value != oldValue)
+					scope.$eval(attrs.onScrollMiddle);
+			});
+		}
+	};
+});
+
 /**
  * Scrolls to the element if the value is true
  */

src/main/webapp/templates/feeds.view.html

@@ -6,7 +6,7 @@
 	<div infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy || !settingsService.settings.readingMode" infinite-scroll-distance="1" id="feed-accordion"
 		ng-class="{'expanded' : settingsService.settings.viewMode == 'expanded' }">
 		<div ng-show="message && errorCount > 10">Error while loading this feed : {{message}}</div>
-		<div ng-repeat="entry in entries" class="entry" scroll-to="isOpen && current == entry" scroll-to-offset="-58">
+		<div ng-repeat="entry in entries" class="entry" scroll-to="isOpen && current == entry" scroll-to-offset="-58" on-scroll-middle="onScroll(entry)" ng-class="{current: current==entry}">
 			<a href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="noop($event)" ng-mouseup="entryClicked(entry, $event)"
 				ng-class="{open: current == entry, closed: current != entry}">
 				<span class="feed-name">

src/main/webapp/templates/settings.html

@@ -33,6 +33,13 @@
 									Show social sharing buttons
 								</label>
 							</div>
+							<div class="control-group">
+								<label class="checkbox">
+									<input type="checkbox" name="scrollMarks"
+										ng-model="settings.scrollMarks" />
+									In expanded view, scrolling through entries mark them as read
+								</label>
+							</div>
 						</div>
 					</div>
 					<div class="tab-pane" id="custom-css">