highlight the first of the newly loaded topics when scrolling

kevinansfield · Mar 7, 2013 · 0027768 · 0027768
1 parent a0949ca
commit 0027768
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/app/assets/javascripts/discourse/models/topic_list.js b/app/assets/javascripts/discourse/models/topic_list.js
@@ -17,16 +17,22 @@ Discourse.TopicList = Discourse.Model.extend({
       Discourse.URL.replaceState("/" + (this.get('filter')) + "/more");
       $.ajax(moreUrl, {
         success: function(result) {
-          var newTopics, topicIds, topics;
+          var newTopics, topicIds, topics, topicsAdded = 0;
           if (result) {
+            // the new topics loaded from the server
             newTopics = Discourse.TopicList.topicsFrom(result);
+            // the current topics
             topics = _this.get('topics');
+            // keeps track of the ids of the current topics
             topicIds = [];
             topics.each(function(t) {
               topicIds[t.get('id')] = true;
             });
+            // add new topics to the list of current topics if not already present
             newTopics.each(function(t) {
               if (!topicIds[t.get('id')]) {
+                // highlight the first of the new topics so we can get a visual feedback
+                t.set('highlight', topicsAdded++ === 0);
                 return topics.pushObject(t);
               }
             });
@@ -43,13 +49,11 @@ Discourse.TopicList = Discourse.Model.extend({
   },
 
   insert: function(json) {
-    var newTopic;
-    newTopic = Discourse.TopicList.decodeTopic(json);
-    /* New Topics are always unseen
-    */
-
+    var newTopic  = Discourse.TopicList.decodeTopic(json);
+    // new Topics are always unseen
     newTopic.set('unseen', true);
-    newTopic.set('highlightAfterInsert', true);
+    // and highlighted on the topics list view
+    newTopic.set('highlight', true);
     return this.get('inserted').unshiftObject(newTopic);
   }
 

diff --git a/app/assets/javascripts/discourse/views/list/topic_list_item_view.js b/app/assets/javascripts/discourse/views/list/topic_list_item_view.js
@@ -33,16 +33,15 @@ Discourse.TopicListItemView = Discourse.View.extend({
   },
 
   didInsertElement: function() {
+    // highligth the last topic viewed
     if (Discourse.get('transient.lastTopicIdViewed') === this.get('content.id')) {
       Discourse.set('transient.lastTopicIdViewed', null);
       this.highlight();
-      return;
     }
-    if (this.get('content.highlightAfterInsert')) {
-      return this.highlight();
+    // highlight new topics that have been loaded from the server or the one we just created
+    else if (this.get('content.highlight')) {
+      this.highlight();
     }
   }
 
 });
-
-