spot/masks/messages.html

<div id="messages">
	<div id="map">
		<div class="loader fa fa-map"></div>
	</div>
	<div id="feed">
		<div id="poster">
			<input id="post" name="post" type="text" />
			<input id="name" name="name" type="text" /><button id="submit" name="submit" type="button" class="">+</button>
		</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>
</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(true);
		//setInterval(updateFeed, 60 * 1000); //refresh every minute
		
		//Building messages
		aoMessages = [];
		$.each(oMessages, function(iKey, oMsg)
		{
			var sInfoWindow = $('<div>', {'class':'info-window'})
								.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
								.append($('<p>', {'class':'time'}).addIcon('fa-clock-o').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
								.append($('<p>', {'class':'coordinates'}).addIcon('fa-compass').append(oMsg.latitude+' | '+oMsg.longitude))
								.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
								.prop('outerHTML');
			var sLatLng = [oMsg.latitude, oMsg.longitude];
			var asData = {title:oMsg.timestamp, details:sInfoWindow};
			var asOptions = {icon:(iKey%2==0)?'images/footprint_alt.png':'images/footprint.png'};
			aoMessages.push({id:oMsg.id_message, latLng:sLatLng, data:asData, options:asOptions});
		});
		
		//Centering map on last message
		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:agCenter,
					zoom:iZoom,
					mapTypeId:google.maps.MapTypeId.HYBRID,
					scaleControl:true
				}
			},
			kmllayer:
			{
				options:
				{
					url:'http://spot.lutran.fr/kml/TeAraroaTrail_simplified.kml?v5',
					opts:{preserveViewport: true}
				}
			},
			marker:
			{
				values:aoMessages,
				options:{draggable:false},
				events:
				{
					mouseover: function(marker, event, context)
					{
						var map = $(this).gmap3("get"), infowindow = $(this).gmap3({get:{name:"infowindow"}});
						if(infowindow)
						{
							infowindow.open(map, marker);
							infowindow.setContent(context.data.details);
						}
						else $(this).gmap3({infowindow:{anchor:marker, options:{content: context.data.details}}});
					},
					mouseout: function()
					{
						var infowindow = $(this).gmap3({get:{name:"infowindow"}});
						if(infowindow) infowindow.close();
					}
				}
			},
			panel:
			{
				options:
				{
					content:'<div id="legend">'+
								'<div class="line green">Te Araroa</div>'+
								'<div class="line blue">Routeburn Track</div>'+
								'<div class="line red">Hors rando</div>'+
							'</div>',
					bottom: true,
					left: true
				}
			}
		});
		self.tmp('map', $Map.gmap3("get"));
	});
	
	//Post
	$('#name').defaultVal('Nom...');
	$('#post').defaultVal('Ton message...');
	$('#submit').click(function(){
		if($('#poster').checkForm())
		{
			self.get(
				'add_post',
				function()
				{
					$('#name').val('');
					$('#post').val('');
					updateFeed(true);
				},
				{name:$('#name').val(), content:$('#post').val()}
			);
		}
	});
};

function updateFeed(bFirstChunk)
{
	bFirstChunk = bFirstChunk || false;
	
	var $Posts = $('#posts_list');
	if(bFirstChunk===true)
	{
		$Posts.empty();
		self.tmp('news_chunk', 0);
	}
	
	self.get('feed', function(asData){
		
		$.each(asData, function(iKey, asPost){
			var $Post = $('<div>', {'class':'post '+asPost.type});
			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)
			{
				case 'message':
					$Body = $('<div>')
								.append($('<p>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude))
								.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':self.consts.title, 'data-title':sAbsTime}).append($Image);
					sClass = 'image';
					break;
				case 'post':
					$Body = $('<div>')
								.append($('<p>', {'class':'message'}).text(asPost.post))
								.append($('<p>', {'class':'signature'}).text('-- '+asPost.name));
					sClass = 'comment';
					break;
			}
			$Post
				.append($('<div>', {'class':'header'})
					.append($('<span>', {'class':'index'}).addIcon('fa-'+sClass))
					.append($('<span>', {'class':'time', 'title':sAbsTime}).text(sRelTime)))
				.append($('<div>', {'class':'body'}).append($Body))
				.appendTo($Posts);
			
			if(asPost.id) $Post.find('.index').append(' '+asPost.id);
			
			//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>