adding news feed chunks

inc/spot.php

@@ -2,6 +2,10 @@
 
 class Spot extends Main
 {
+	//Spot Mode
+	const MODE_HISTO = 'histo';
+	const MODE_BLOG = 'blog';
+	
 	//Spot feed
 	const FEED_ID = '0Y5LrvigElWeAieBGnFol0KBEuOTkFJmm';
 	const FEED_HOOK = 'https://api.findmespot.com/spot-main-web/consumer/rest-api/2.0/public/feed/';
@@ -16,6 +20,8 @@ class Spot extends Main
 	
 	const FORMAT_TIME = 'd/m/Y à H:i';
 	
+	const FEED_CHUNK_SIZE = 15; 
+	
 	public function __construct($oClassManagement, $sProcessPage)
 	{
 		parent::__construct($oClassManagement, $sProcessPage);
@@ -74,9 +80,11 @@ class Spot extends Main
 		);
 	}
 	
-	public function getMainPage($asGlobalVars=array(), $sMainPage='index')
+	public function getMainPage()
 	{
-		return parent::getMainPage(array('vars'=>array('feed_id'=>self::FEED_ID)));
+		return parent::getMainPage(array('vars'=>array(	'feed_id'	=> self::FEED_ID, 
+														'chunk_size'=> self::FEED_CHUNK_SIZE,
+														'mode'		=> Settings::MODE)));
 	}
 	
 	/* Getting & Storing messages */
@@ -163,7 +171,7 @@ class Spot extends Main
 		return $asMessages;
 	}
 	
-	public function getNewsFeed()
+	public function getNewsFeed($iChunk=0)
 	{
 		$asFeed = array();
 		
@@ -213,6 +221,10 @@ class Spot extends Main
 		}
 		
 		ksort($asFeed);
+		
+		//split chunks
+		$asFeed = array_slice($asFeed, $iChunk*self::FEED_CHUNK_SIZE, self::FEED_CHUNK_SIZE); 
+		
 		return self::getJsonResult(true, '', $asFeed);
 	}
 	

index.php

@@ -20,6 +20,7 @@ $sAction = isset($_REQUEST['a'])?$_REQUEST['a']:'';
 $sPage = isset($_GET['p'])?$_GET['p']:'index';
 $sName = isset($_GET['name'])?$_GET['name']:'';
 $sContent = isset($_GET['content'])?$_GET['content']:'';
+$iChunk =  isset($_GET['chunk'])?$_GET['chunk']:0;
 
 //Initiate class
 $oSpot = new Spot($oClassManagement, __FILE__);
@@ -33,7 +34,7 @@ if($sAction!='')
 			$sResult = $oSpot->getMessages();
 			break;
 		case 'feed':
-			$sResult = $oSpot->getNewsFeed();
+			$sResult = $oSpot->getNewsFeed($iChunk);
 			break;
 		case 'upload':
 			$sResult = $oSpot->upload();

masks/messages.html

@@ -5,20 +5,24 @@
 	<div id="feed">
 		<div id="poster">
 			<input id="post" name="post" type="text" />
-			<input id="name" name="name" type="text" />
+			<input id="name" name="name" type="text" /><button id="submit" name="submit" type="button" class="">+</button>
-			<input id="submit" name="submit" type="button" value="+" />
+		</div>
+		<div id="posts">
+			<div id="posts_list"></div>
+			<div id="next_posts"><button id="add_posts" name="add_posts" type="button">Messages plus anciens</button>
 		</div>
-		<div id="posts"></div>
 	</div>
 </div>
 <script type="text/javascript" src="script/lightbox.js"></script>
 <script type="text/javascript">
 oSpot.pageInit = function(asHash)
 {
+	$('#posts').css('top', $('#poster').outerHeight());
+	$('#add_posts').click(updateFeed);
 	self.get('messages', function(oMessages){
 		
 		//Build Feed
-		updateFeed();
+		updateFeed(true);
 		//setInterval(updateFeed, 60 * 1000); //refresh every minute
 		
 		//Building messages
@@ -38,17 +42,29 @@ oSpot.pageInit = function(asHash)
 		});
 		
 		//Centering map on last message
-		//var oLastMsg = oMessages[oMessages.length-1];
+		var agCenter = {lat:0, lng:0};
+		var iZoom = 0;
+		if(self.vars('mode')=='blog')
+		{
+			var oLastMsg = oMessages[oMessages.length-1];
+			agCenter.lat = oLastMsg.latitude;
+			agCenter.lng = oLastMsg.longitude;
+			iZoom = 12;
+		}
+		else
+		{
+			agCenter.lat = -43.5;
+			agCenter.lng = 171.5;
+			iZoom = 6;
+		}
 		var $Map = $("#map").gmap3(
 		{
 			map:
 			{
 				options:
 				{
-					//center:{lat:oLastMsg.latitude, lng:oLastMsg.longitude},
+					center:agCenter,
-					//zoom:12,
+					zoom:iZoom,
-					center:{lat:-43.5, lng:171.5},
-					zoom:6,
 					mapTypeId:google.maps.MapTypeId.HYBRID,
 					scaleControl:true
 				}
@@ -100,7 +116,7 @@ oSpot.pageInit = function(asHash)
 				{
 					$('#name').val('');
 					$('#post').val('');
-					updateFeed();
+					updateFeed(true);
 				},
 				{name:$('#name').val(), content:$('#post').val()}
 			);
@@ -108,13 +124,23 @@ oSpot.pageInit = function(asHash)
 	});
 };
 
-function updateFeed()
+function updateFeed(bFirstChunk)
 {
+	bFirstChunk = bFirstChunk || false;
+	
+	var $Posts = $('#posts_list');
+	if(bFirstChunk===true)
+	{
+		console.log('first');
+		$Posts.empty();
+		self.tmp('news_chunk', 0);
+	}
+	
 	self.get('feed', function(asData){
-		var $Posts = $('#posts').empty();
+		
 		$.each(asData, function(iKey, asPost){
 			var $Post = $('<div>', {'class':'post '+asPost.type});
-			var sRelTime = asPost.relative_time;
+			var sRelTime = (self.vars('mode')=='histo')?asPost.formatted_time.substr(0, 10):asPost.relative_time;
 			var sAbsTime = asPost.formatted_time;
 			var $Body = {};
 			switch(asPost.type)
@@ -122,12 +148,12 @@ function updateFeed()
 				case 'message':
 					$Body = $('<div>')
 								.append($('<p>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude))
-								.append($('<p>').addIcon('fa-clock-o', true).append(asPost.formatted_time));
+								.append($('<p>').addIcon('fa-clock-o', true).append(sAbsTime));
 					sClass = 'compass';
 					break;
 				case 'picture':
 					var $Image = $('<img>', {'src':asPost.path/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});
-					$Body = $('<a>', {href:asPost.path, 'data-lightbox':'Te Araroa', 'data-title':asPost.formatted_time}).append($Image);
+					$Body = $('<a>', {href:asPost.path, 'data-lightbox':self.consts.title, 'data-title':sAbsTime}).append($Image);
 					sClass = 'image';
 					break;
 				case 'post':
@@ -148,6 +174,8 @@ function updateFeed()
 			
 			//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
 		});
-	});
+		self.tmp('news_chunk', self.tmp('news_chunk') + 1);
+		$('#next_posts').toggle(Object.keys(asData).length == self.vars('chunk_size'));
+	}, {'chunk':self.tmp('news_chunk')});
 }
 </script>

style/spot.scss

@@ -32,35 +32,50 @@
 	width:30%;
 	overflow:auto;
 	
+	input, button {
+		border:none;
+		padding:0.5em 1em;
+		background:#F7F7F7;
+	}
+	
+	button {
+		background:#CCC;
+		cursor:pointer;
+		font-weight:bold;
+	}
+	
+	button:hover {
+		background:#F7F7F7;
+	}
+	
 	#poster {
 		padding:1em;
 		background:#EEE;
 		border-bottom:1px solid #DDD;
-		
+		position:fixed;
-		#post, #name, #submit {
-			width:calc(100% - 2em);
-			border:none;
-			padding:0.5em 1em;
-		}
 		
 		#post {
 			margin-bottom:1em;
+			width:calc(100% - 2em);
 		}
 		
 		#name {
-			width: calc(100% - 5.5em);
+			width: calc(100% - 6em);
 		}
 		
 		#submit {
+			margin-left:1em;
 			width: 3em;
-			background:#CCC;
-			cursor:pointer;
-			font-weight:bold;
 		}
 	}
 	
 	#posts {
 		font-family: Arial;
+		overflow:auto;
+		position:absolute;
+		top:0;
+		bottom:0;
+		width:100%;
 		
 		.post {
 			margin:1em;
@@ -129,6 +144,16 @@
 		.fa.push {
 			margin-right:0.5em;
 		}
+		
+		#next_posts {
+			margin: 1em;
+			display:none;
+			
+			button {
+				border-radius: 0.5em;
+				width:100%;
+			}
+		}
 	}
 }