Added "Show less" on activity stream comments.

git-svn-id: http://code.elgg.org/elgg/trunk@6459 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 45 insertions, 15 deletions

diff --git a/mod/riverdashboard/views/default/river/item/wrapper.php b/mod/riverdashboard/views/default/river/item/wrapper.php
index 57b241114..3583a7f5b 100644
--- a/mod/riverdashboard/views/default/river/item/wrapper.php
+++ b/mod/riverdashboard/views/default/river/item/wrapper.php
@@ -25,7 +25,7 @@ if (get_context() == 'profile' && $object->getSubtype() ==  'thewire') {
 }
 
 // get last three comments display
-// want the 3 most recent comments (order by time_created desc = 3 2 1)
+// want the 3 most recent comments (order by time_created desc = 3 2 1 limit 3)
 // but will display them with the newest at the bottom (1 2 3)
 if ($comments = get_annotations($vars['item']->object_guid, "", "", 'generic_comment', "", "", 3, 0, "desc")) {
 	$comments = array_reverse($comments);
@@ -76,8 +76,10 @@ if ($comments){
 	echo "<div class=\"comments_container\">";
 	// display appropriate comment link
 	if ($more_comments_count > 0) {
-		echo "<a class=\"river_show_more_comments link\">" .
+		echo "<a class=\"river_more_comments show_more_button link\">" .
 		sprintf(elgg_echo('riverdashboard:n_more_comments'), $more_comments_count) . '</a>';
+
+		echo "<a style=\"display: none\" class=\"river_more_comments show_less_button link\">" . elgg_echo('riverdashboard:show_less') . '</a>';
 	}
 	echo "<div class=\"comments_list\">";
 	foreach ($comments as $comment) {
diff --git a/mod/riverdashboard/views/default/riverdashboard/css.php b/mod/riverdashboard/views/default/riverdashboard/css.php
index 90bed39c7..24c960fbc 100644
--- a/mod/riverdashboard/views/default/riverdashboard/css.php
+++ b/mod/riverdashboard/views/default/riverdashboard/css.php
@@ -1,7 +1,7 @@
 <?php
 /**
  * Elgg riverdashboard CSS
- * 
+ *
  */
 ?>
 #riverdashboard_updates {
@@ -13,10 +13,10 @@
 	font-weight: bold;
 	padding:1px 8px 2px 24px;
 	margin-top:9px;
-    cursor: pointer;
+	cursor: pointer;
 	background: red url("<?php echo $vars['url']; ?>mod/riverdashboard/graphics/refresh.png") no-repeat 5px 3px;
-    -webkit-border-radius: 10px; 
-    -moz-border-radius: 10px;    
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
 }
 #riverdashboard_updates a.update_link:hover {
 	background: #4690D6 url("<?php echo $vars['url']; ?>mod/riverdashboard/graphics/refresh.png") no-repeat 5px -22px;
@@ -79,12 +79,12 @@
 	-webkit-border-top-left-radius:5px;
 	-webkit-border-top-right-radius:0;
 	-webkit-border-bottom-right-radius:5px;
-	-webkit-border-bottom-left-radius:5px; 
-    background-color: #eeeeee;
+	-webkit-border-bottom-left-radius:5px;
+	background-color: #eeeeee;
 }
 .river_comment {
 	padding:3px;
-	border-bottom:1px solid white;	
+	border-bottom:1px solid white;
 }
 .river_comment.penultimate {
 
@@ -95,7 +95,7 @@
 /* hidden inline comment form */
 .river_comment_form.hidden {
 	padding:5px;
-	height:26px;	
+	height:26px;
 }
 .river_comment_form.hidden .input_text {
 	width:560px;
@@ -161,7 +161,7 @@
 .river_item .river_comment_contents {
 	margin-left:34px;
 }
-a.river_show_more_comments {
+a.river_more_comments {
 	float:right;
 	font-size:85%;
 	padding-right:7px;
diff --git a/mod/riverdashboard/views/default/riverdashboard/js.php b/mod/riverdashboard/views/default/riverdashboard/js.php
index 1c5f4ee76..dc26a7e5d 100644
--- a/mod/riverdashboard/views/default/riverdashboard/js.php
+++ b/mod/riverdashboard/views/default/riverdashboard/js.php
@@ -43,8 +43,11 @@
 		});
 
 		// grab more comments
-		$('.river_show_more_comments').click(function() {
+		$('.river_more_comments.show_more_button').click(function() {
+			var showLess = $(this).next('.show_less_button');
+			var showMore = $(this);
 			var riverItem = $(this).closest('.river_item');
+
 			var guid = riverItem.attr('id').replace('river_entity_', '');
 			var commentsList = riverItem.find('.comments_list');
 			var numComments = riverItem.find('.river_comment').length;
@@ -56,10 +59,35 @@
 
 			$.post('<?php echo $vars['url'];?>mod/riverdashboard/endpoint/get_comments.php', params, function(data) {
 				commentsList.prepend(data);
-				commentsList.prev('.river_show_more_comments').html('Show less');
-				// @todo need a new function to collapse list back down to only show 3 comments
-				
+
+				showLess.toggle();
+				showMore.toggle();
+
 			});
 		});
+
+		// hide more comments
+		$('.river_more_comments.show_less_button').click(function() {
+			var showLess = $(this);
+			var showMore = $(this).prev('.show_more_button');
+			var riverItem = $(this).closest('.river_item');
+			// want to keep the latest 3 comments
+			var comments = riverItem.find('.river_comment')
+			comments = $.makeArray(comments).reverse();
+			//reverse().splice(0, 3);
+
+			len = comments.length;
+
+			for (i=3; i<len; i++) {
+				$(comments[i]).empty().remove();
+			}
+
+
+			// remove them so we can force an ajax update when clicked again.
+
+			showLess.toggle();
+			showMore.toggle();
+
+		});
 	});
 </script>