Make notes JS know which notes are new in a request

Riyad Preukschas
1 parent ae067ee3
Showing 3 changed files with 31 additions and 22 deletions Show diff stats
app/assets/javascripts/extensions/array.js
app/assets/javascripts/notes.js
app/views/notes/index.js.haml
@@ -0,0 +1,7 @@
+Array.prototype.first = function() {
+  return this[0];
+}
+
+Array.prototype.last = function() {
+  return this[this.length-1];
+}
 \ No newline at end of file
@@ -89,12 +89,12 @@ var NoteList = {
   getContent:
     function() {
       $.ajax({
-        type: "GET",
-      url: this.notes_path,
-      data: this.target_params,
-      complete: function(){ $('.notes-status').removeClass("loading")},
-      beforeSend: function() { $('.notes-status').addClass("loading") },
-      dataType: "script"});
+        url: this.notes_path,
+        data: this.target_params,
+        complete: function(){ $('.notes-status').removeClass("loading")},
+        beforeSend: function() { $('.notes-status').addClass("loading") },
+        dataType: "script"
+      });
     },
  
   /**
@@ -102,9 +102,9 @@ var NoteList = {
    * Replaces the content of #notes-list with the given html.
    */
   setContent:
-    function(first_id, last_id, html) {
-      this.top_id = first_id;
-      this.bottom_id = last_id;
+    function(newNoteIds, html) {
+      this.top_id = newNoteIds.first();
+      this.bottom_id = newNoteIds.last();
       $("#notes-list").html(html);
  
       // init infinite scrolling
@@ -151,12 +151,12 @@ var NoteList = {
       // only load more notes if there are no "new" notes
       $('.loading').show();
       $.ajax({
-        type: "GET",
         url: this.notes_path,
         data: this.target_params + "&loading_more=1&" + (this.reversed ? "before_id" : "after_id") + "=" + this.bottom_id,
         complete: function(){ $('.notes-status').removeClass("loading")},
         beforeSend: function() { $('.notes-status').addClass("loading") },
-        dataType: "script"});
+        dataType: "script"
+      });
     },
  
   /**
@@ -164,9 +164,10 @@ var NoteList = {
    * Append notes to #notes-list.
    */
   appendMoreNotes:
-    function(id, html) {
-      if(id != this.bottom_id) {
-        this.bottom_id = id;
+    function(newNoteIds, html) {
+      var lastNewNoteId = newNoteIds.last();
+      if(lastNewNoteId != this.bottom_id) {
+        this.bottom_id = lastNewNoteId;
         $("#notes-list").append(html);
       }
     },
@@ -212,10 +213,10 @@ var NoteList = {
   getNew:
     function() {
       $.ajax({
-        type: "GET",
-      url: this.notes_path,
-      data: this.target_params + "&loading_new=1&after_id=" + (this.reversed ? this.top_id : this.bottom_id),
-      dataType: "script"});
+        url: this.notes_path,
+        data: this.target_params + "&loading_new=1&after_id=" + (this.reversed ? this.top_id : this.bottom_id),
+        dataType: "script"
+      });
     },
  
   /**
@@ -223,7 +224,7 @@ var NoteList = {
    * Replaces the content of #new-notes-list with the given html.
    */
   replaceNewNotes:
-    function(html) {
+    function(newNoteIds, html) {
       $("#new-notes-list").html(html);
       this.updateVotes();
     },
 - unless @notes.blank?
+  - new_note_ids = @notes.map(&:id)
   - if loading_more_notes?
     :plain
-      NoteList.appendMoreNotes(#{@notes.last.id}, "#{escape_javascript(render 'notes/notes')}");
+      NoteList.appendMoreNotes(#{new_note_ids}, "#{escape_javascript(render 'notes/notes')}");
  
   - elsif loading_new_notes?
     :plain
-      NoteList.replaceNewNotes("#{escape_javascript(render 'notes/notes')}");
+      NoteList.replaceNewNotes(#{new_note_ids}, "#{escape_javascript(render 'notes/notes')}");
  
   - else
     :plain
-      NoteList.setContent(#{@notes.first.id}, #{@notes.last.id}, "#{escape_javascript(render 'notes/notes')}");
+      NoteList.setContent(#{new_note_ids}, "#{escape_javascript(render 'notes/notes')}");
  
 - else
   - if loading_more_notes?
...	...	@@ -0,0 +1,7 @@
	1	+Array.prototype.first = function() {
	2	+ return this[0];
	3	+}
	4	+
	5	+Array.prototype.last = function() {
	6	+ return this[this.length-1];
	7	+}
0	8	\ No newline at end of file
...	...
...	...	@@ -89,12 +89,12 @@ var NoteList = {
89	89	getContent:
90	90	function() {
91	91	$.ajax({
92		- type: "GET",
93		- url: this.notes_path,
94		- data: this.target_params,
95		- complete: function(){ $('.notes-status').removeClass("loading")},
96		- beforeSend: function() { $('.notes-status').addClass("loading") },
97		- dataType: "script"});
	92	+ url: this.notes_path,
	93	+ data: this.target_params,
	94	+ complete: function(){ $('.notes-status').removeClass("loading")},
	95	+ beforeSend: function() { $('.notes-status').addClass("loading") },
	96	+ dataType: "script"
	97	+ });
98	98	},
99	99
100	100	/**
...	...	@@ -102,9 +102,9 @@ var NoteList = {
102	102	* Replaces the content of #notes-list with the given html.
103	103	*/
104	104	setContent:
105		- function(first_id, last_id, html) {
106		- this.top_id = first_id;
107		- this.bottom_id = last_id;
	105	+ function(newNoteIds, html) {
	106	+ this.top_id = newNoteIds.first();
	107	+ this.bottom_id = newNoteIds.last();
108	108	$("#notes-list").html(html);
109	109
110	110	// init infinite scrolling
...	...	@@ -151,12 +151,12 @@ var NoteList = {
151	151	// only load more notes if there are no "new" notes
152	152	$('.loading').show();
153	153	$.ajax({
154		- type: "GET",
155	154	url: this.notes_path,
156	155	data: this.target_params + "&loading_more=1&" + (this.reversed ? "before_id" : "after_id") + "=" + this.bottom_id,
157	156	complete: function(){ $('.notes-status').removeClass("loading")},
158	157	beforeSend: function() { $('.notes-status').addClass("loading") },
159		- dataType: "script"});
	158	+ dataType: "script"
	159	+ });
160	160	},
161	161
162	162	/**
...	...	@@ -164,9 +164,10 @@ var NoteList = {
164	164	* Append notes to #notes-list.
165	165	*/
166	166	appendMoreNotes:
167		- function(id, html) {
168		- if(id != this.bottom_id) {
169		- this.bottom_id = id;
	167	+ function(newNoteIds, html) {
	168	+ var lastNewNoteId = newNoteIds.last();
	169	+ if(lastNewNoteId != this.bottom_id) {
	170	+ this.bottom_id = lastNewNoteId;
170	171	$("#notes-list").append(html);
171	172	}
172	173	},
...	...	@@ -212,10 +213,10 @@ var NoteList = {
212	213	getNew:
213	214	function() {
214	215	$.ajax({
215		- type: "GET",
216		- url: this.notes_path,
217		- data: this.target_params + "&loading_new=1&after_id=" + (this.reversed ? this.top_id : this.bottom_id),
218		- dataType: "script"});
	216	+ url: this.notes_path,
	217	+ data: this.target_params + "&loading_new=1&after_id=" + (this.reversed ? this.top_id : this.bottom_id),
	218	+ dataType: "script"
	219	+ });
219	220	},
220	221
221	222	/**
...	...	@@ -223,7 +224,7 @@ var NoteList = {
223	224	* Replaces the content of #new-notes-list with the given html.
224	225	*/
225	226	replaceNewNotes:
226		- function(html) {
	227	+ function(newNoteIds, html) {
227	228	$("#new-notes-list").html(html);
228	229	this.updateVotes();
229	230	},
...	...
1	1	- unless @notes.blank?
	2	+ - new_note_ids = @notes.map(&:id)
2	3	- if loading_more_notes?
3	4	:plain
4		- NoteList.appendMoreNotes(#{@notes.last.id}, "#{escape_javascript(render 'notes/notes')}");
	5	+ NoteList.appendMoreNotes(#{new_note_ids}, "#{escape_javascript(render 'notes/notes')}");
5	6
6	7	- elsif loading_new_notes?
7	8	:plain
8		- NoteList.replaceNewNotes("#{escape_javascript(render 'notes/notes')}");
	9	+ NoteList.replaceNewNotes(#{new_note_ids}, "#{escape_javascript(render 'notes/notes')}");
9	10
10	11	- else
11	12	:plain
12		- NoteList.setContent(#{@notes.first.id}, #{@notes.last.id}, "#{escape_javascript(render 'notes/notes')}");
	13	+ NoteList.setContent(#{new_note_ids}, "#{escape_javascript(render 'notes/notes')}");
13	14
14	15	- else
15	16	- if loading_more_notes?
...	...