add feed auto update

masks/project.html

@@ -60,7 +60,7 @@ function initPage(asHash) {
 		self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
 
 		//Add "Loading" Post
-		getPost({type: 'loading', formatted_time: '', relative_time: '', displayed_id: 'Chargement...'}).appendTo($('#loading'));
+		getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading'));
 
 		//project Bootstrap
 		initProject(asHash.items[0]);
@@ -132,7 +132,14 @@ function initPosts() {
 		});
 	}
 	
-	updateFeed(true);
+	//Feed auto-update
+	if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate();
+	else updateFeed(true);
+}
+
+function onAutoUpdate() {
+	if(self.tmp('simple-bar').scrollContentEl.scrollTop == 0) updateFeed(true, true);
+	setFeedUpdateTimer(60, onAutoUpdate);
 }
 
 function initSpotMessages(aoMessages, aoTracks) {
@@ -345,31 +352,38 @@ function onFeedScroll(){
 	if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) updateFeed();
 }
 
-function updateFeed(bFirstChunk)
+function updateFeed(bFirstChunk, bDiscrete)
 {
 	bFirstChunk = bFirstChunk || false;
+	bDiscrete = bDiscrete || false;
 	
 	if(self.tmp('updatable')) {
 		if(!self.tmp('out-of-data') || bFirstChunk) {
-			var $Posts = $('#posts_list');
+			self.tmp('updatable', false);
+			if(!bDiscrete) $('#loading').show();
+			
+			var $Posts = $('<div>');
+			var $PostsList = $('#posts_list');
+			
 			if(bFirstChunk===true) {
-				$Posts.empty();
 				self.tmp('news_chunk', 0);
 				$('#submap').removeClass('with_feed');
 			}
 			
-			self.tmp('updatable', false);
-			$('#loading').fadeIn('fast');
-			
 			self.get('feed', function(asData) {
 				$('#loading').hide();
 				$('#submap').addClass('with_feed');
+				
 				$.each(asData, function(iKey, asPost){
-					getPost(asPost).appendTo($Posts);
+					$Posts.append(getPost(asPost));
 				});
 				
 				self.tmp('news_chunk', self.tmp('news_chunk') + 1);
 				self.tmp('out-of-data', Object.keys(asData).length != self.vars('chunk_size'));
+				
+				if(bFirstChunk===true) $PostsList.empty();
+				$PostsList.append($Posts.children());
+				
 				self.tmp('updatable', true);
 			}, {
 				'project_id': self.vars(['project', 'id']),
@@ -377,14 +391,19 @@ function updateFeed(bFirstChunk)
 			});
 		}
 	}
-	else if(bFirstChunk) { //Delaying important data load
-		if(typeof oUpdateTimer != 'undefined') clearTimeout(oUpdateTimer);
-		oUpdateTimer = setTimeout(function(){updateFeed(true);}, 200);
-	}
+	else if(bFirstChunk) setFeedUpdateTimer(0.2);
 }
 
+function setFeedUpdateTimer(iSeconds, fCallback) {
+	fCallback = fCallback || function(){updateFeed(true);};
+	if(typeof self.tmp('update_timer') != 'undefined') clearTimeout(self.tmp('update_timer'));
+	self.tmp('update_timer', setTimeout(fCallback, iSeconds * 1000));
+}
+
+
 function getPost(asPost) {
-	var $Post = $('<div>', {'class':'post '+asPost.type});
+	asPost.headerless = asPost.headerless || false;
+	var $Post = $('<div>', {'class':'post '+asPost.type+(asPost.headerless?' headerless':'')});
 	var sRelTime = (asPost.relative_time!='')?((self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
 	var sAbsTime = asPost.formatted_time;
 	var $Body = {};

style/_mask_project.scss

@@ -240,6 +240,14 @@ $legend-color: #222;
 					clear: both;
 					padding: 0em 1em 0.5em;
 				}
+				&.headerless {
+					.header {
+						display: none;
+					}
+					.body {
+						padding-top: 0.5em;
+					}
+				}
 				&.picture {
 					background: $picture-bg;
 					color: $picture-color;
@@ -278,12 +286,12 @@ $legend-color: #222;
 					}
 				}
 				&.loading {
-					.body p {
-						padding-top: 0.5em;
+					.body {
 						text-align: center;
 						
-						.fa {
-							font-size: 1.5em;
+						p {
+							display: inline-block;
+							font-size: 2em;
 							color: $post-color;
 						}
 					}