adding news feed chunks

This commit is contained in:
2016-06-13 22:17:46 +02:00
parent 68d7711186
commit 7ee14d7d1a
6 changed files with 98 additions and 32 deletions

View File

@@ -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="submit" name="submit" type="button" value="+" />
<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 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},
//zoom:12,
center:{lat:-43.5, lng:171.5},
zoom:6,
center:agCenter,
zoom:iZoom,
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>