add pictures to messages

This commit is contained in:
2018-04-22 16:21:31 +02:00
parent dda622e870
commit d6af05c8c0
5 changed files with 100 additions and 33 deletions

View File

@@ -39,6 +39,7 @@ oSpot.pageInit = function(asHash)
updateFeed(true);
self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
self.tmp('infowindow', 'boolean');
//Centering map
var agCenter = {lat:0, lng:0};
@@ -116,20 +117,42 @@ oSpot.pageInit = function(asHash)
draggable: false
});
var $InfoWindow = $('<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('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude))
.hover(
function(){
self.tmp('infowindow', true);
},
function(){
self.tmp('infowindow', false);
oInfoWindow.close(oMap, oMarker);
}
);
//.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
if(oMsg.pics) {
var $Pics = $('<div>', {'class':'pics'});
$.each(oMsg.pics, function(iKey, asPic){
$Pics.append($('<a>', {href: asPic.path, 'data-lightbox': self.consts.title, 'data-title': asPic.formatted_time})
.append($('<img>', {'src': asPic.thumb_path})));
});
$InfoWindow
.append($('<p>').addIcon('fa-image').append('Photos'))
.append($Pics);
}
var oInfoWindow = new google.maps.InfoWindow({
content: $('<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')
content: $InfoWindow[0]
});
oMarker.addListener('mouseover', function(){
oInfoWindow.open(oMap, oMarker);
});
oMarker.addListener('mouseout', function(){
oInfoWindow.close(oMap, oMarker);
setTimeout(function(){
if(!self.tmp('infowindow')) oInfoWindow.close(oMap, oMarker);
}, 400);
});
oMarker.addListener('click', function(){
self.tmp('map').panTo(oMarker.getPosition());