mark items as read when the title is being hidden under the top edge or when you hit the bottom. also mark items as read when you click on them

3 files changed, 50 insertions, 6 deletions

diff --git a/css/news.css b/css/news.css
index a2359a71d..eeff10e49 100644
--- a/css/news.css
+++ b/css/news.css
@@ -51,7 +51,15 @@ ul.controls li { float: left; }
 #rightcontent div.feed_controls div.feed_title { float: left; padding-left: 10px; }
 #rightcontent div.feed_controls div.feed_title h1 { font-size: 1.7em; color: #444; padding-top: .5em; }
 
-#rightcontent ul { box-sizing: border-box; -moz-box-sizing: border-box; overflow: auto; height: 100%; }
+#rightcontent #feed_items {
+    box-sizing: border-box; 
+    -moz-box-sizing: border-box; 
+    overflow: auto;
+    height: 100%;
+}
+
+
+#rightcontent ul {  }
 
 #rightcontent div.body { padding: 15px 25px 10px 25px; }
 #rightcontent div.body p { line-height: 1.5; margin: 10px 0; }
diff --git a/js/news.js b/js/news.js
index 94503ed58..7af0f6384 100644
--- a/js/news.js
+++ b/js/news.js
@@ -203,6 +203,9 @@ News={
 				})
 			};
 		},
+		markAllItems:function(feedid) {
+
+		},
 		load:function(feedid) {
 			$.post(OC.filePath('news', 'ajax', 'loadfeed.php'),{'feedid':feedid},function(jsondata) {
 				if(jsondata.status == 'success'){
@@ -215,6 +218,7 @@ News={
 					$('li.feed[data-id="' + feedid + '"]').attr('id', 'selected_feed');
 
 					transformCollapsableTrigger();
+					bindItemEventListeners();
 				}
 				else {
 					OC.dialogs.alert(t('news', 'Error while loading the feed'), t('news', 'Error'));
@@ -322,6 +326,40 @@ function setupFeedList() {
 	transformCollapsableTrigger();
 }
 
+
+/**
+ * Binds a listener on the feed item list to detect scrolling and mark previous
+ * items as read
+ */
+function bindItemEventListeners(){
+
+	// mark items whose title was hid under the top edge as read
+	// when the bottom is reached, mark all items as read
+	$('#feed_items').scroll(function(){
+		var boxHeight = $(this).height();
+		var scrollHeight = $(this).prop('scrollHeight');
+		var scrolled = $(this).scrollTop() + boxHeight;
+
+		$(this).children('ul').children('li.title_unread').each(function(){
+			var itemOffset = $(this).position().top;
+			if(itemOffset <= 0 || scrolled >= scrollHeight){
+				var itemId = $(this).data('id');
+        		var feedId = $(this).data('feedid');
+				News.Feed.markItem(itemId, feedId);
+			}
+		})
+	});
+
+	// single click on item should mark it as read too
+	$('#feed_items ul li').click(function(){
+		var itemId = $(this).data('id');
+        var feedId = $(this).data('feedid');
+		News.Feed.markItem(itemId, feedId);
+	})
+
+}
+
+
 $(document).ready(function(){
 
 	$('#addfeed').click(function() {
@@ -350,11 +388,7 @@ $(document).ready(function(){
 	var updateInterval = 200000; //how often the feeds should update (in msec)
 	setInterval('News.Feed.updateAll()', updateInterval);
 
-	$('.title_unread').live('mouseenter', function(){
-		var itemId = $(this).data('id');
-        var feedId = $(this).data('feedid');
-		News.Feed.markItem(itemId, feedId);
-	});
+	bindItemEventListeners();
 
 });
 
diff --git a/templates/part.items.php b/templates/part.items.php
index 8c2ef15d2..62d6d0ddc 100644
--- a/templates/part.items.php
+++ b/templates/part.items.php
@@ -5,6 +5,7 @@ $feedid = isset($_['feedid']) ? $_['feedid'] : '';
 $itemmapper = new OC_News_ItemMapper();
 $items = $itemmapper->findAll($feedid);
 
+echo '<div id="feed_items">';
 echo '<ul>';
 foreach($items as $item) {
 	if($item->isRead()){
@@ -20,3 +21,4 @@ foreach($items as $item) {
 
 	}
 echo '</ul>';
+echo '</div>';
\ No newline at end of file