Support geo located images & videos
This commit is contained in:
@@ -282,7 +282,7 @@ function initProject(sProjectCodeName, oFocusPost){
|
||||
).done(function(aoMessages, aoTracks) {
|
||||
var asData = aoMessages[0]['data'];
|
||||
setMapLayers(asData['maps']);
|
||||
initSpotMessages(asData['messages'], aoTracks[0]);
|
||||
initSpotMessages(asData['messages'], aoTracks[0], asData['medias']);
|
||||
updateSettingsPanel(asData['last_update']);
|
||||
});
|
||||
|
||||
@@ -420,7 +420,7 @@ function setMapLayers(asLayers) {
|
||||
});
|
||||
}
|
||||
|
||||
function initSpotMessages(aoMessages, aoTracks) {
|
||||
function initSpotMessages(aoMessages, aoTracks, aoMedias) {
|
||||
var bIsMobile = isMobile();
|
||||
|
||||
//Map
|
||||
@@ -656,7 +656,10 @@ function initSpotMessages(aoMessages, aoTracks) {
|
||||
}
|
||||
|
||||
//Add Spot messages
|
||||
addSpotMessages(aoMessages);
|
||||
addSpotMarkers(aoMessages);
|
||||
|
||||
//Add Medias
|
||||
addMediaMarkers(aoMedias)
|
||||
|
||||
//Open tooltip on latest message in mobile mode
|
||||
if(
|
||||
@@ -672,7 +675,7 @@ function initSpotMessages(aoMessages, aoTracks) {
|
||||
*/
|
||||
}
|
||||
|
||||
function addSpotMessages(aoMessages) {
|
||||
function addSpotMarkers(aoMessages) {
|
||||
|
||||
//Spot Messages
|
||||
var iWorkSpaceMinWidth = isMobile()?self.tmp('$Projects').width():(self.tmp('$Projects').width() - self.tmp('$Feed').outerWidth(true) - self.tmp('$Settings').outerWidth(true));
|
||||
@@ -689,7 +692,7 @@ function addSpotMessages(aoMessages) {
|
||||
$Tooltip = $('<div>', {'class':'info-window'})
|
||||
.append($('<h1>')
|
||||
.addIcon('fa-message fa-lg', true)
|
||||
.append($('<span>').text('Message '+oSpot.lang('counter', oMsg.displayed_id)))
|
||||
.append($('<span>').text(oSpot.lang('post_message')+' '+oSpot.lang('counter', oMsg.displayed_id)))
|
||||
.append($('<span>', {'class':'message-type'}).text('('+oMsg.type+')'))
|
||||
)
|
||||
.append($('<div>', {'class':'separator'}))
|
||||
@@ -746,6 +749,67 @@ function addSpotMessages(aoMessages) {
|
||||
});
|
||||
}
|
||||
|
||||
function addMediaMarkers(aoMedias) {
|
||||
var iWorkSpaceMinWidth = isMobile()?self.tmp('$Projects').width():(self.tmp('$Projects').width() - self.tmp('$Feed').outerWidth(true) - self.tmp('$Settings').outerWidth(true));
|
||||
|
||||
$.each(aoMedias, function(iKey, oMedia){
|
||||
var oMarker = L.marker(L.latLng(oMedia.latitude, oMedia.longitude), {
|
||||
id: oMedia.id_media,
|
||||
riseOnHover: true,
|
||||
icon: getDivIcon(oMedia.subtype+' fa-rotate-270')
|
||||
}).addTo(self.tmp('map'));
|
||||
|
||||
//Tooltip
|
||||
$Tooltip = $('<div>', {'class':'info-window'})
|
||||
.append($('<h1>')
|
||||
.addIcon('fa-'+oMedia.subtype+' fa-lg', true)
|
||||
.append($('<span>').text(oSpot.lang(oMedia.subtype)+' '+oSpot.lang('counter', oMedia.displayed_id || oMedia.id_media)))
|
||||
)
|
||||
.append($('<div>', {'class':'separator'}))
|
||||
.append($('<p>', {'class':'time'})
|
||||
.addIcon('fa-time fa-fw fa-lg', true)
|
||||
.append(oMedia.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMedia.relative_time+')':'')));
|
||||
|
||||
//Tooltip: Time Zone
|
||||
if(oMedia.formatted_time_local != oMedia.formatted_time) {
|
||||
$Tooltip.append($('<p>', {'class':'timezone'})
|
||||
.addIcon('fa-timezone fa-fw fa-lg', true)
|
||||
.append(oSpot.lang('local_time', getRelativeTime(oMedia.formatted_time_local, oMedia.day_offset))));
|
||||
}
|
||||
|
||||
$Tooltip.data('medias', [oMedia]);
|
||||
oSpot.tmp(['marker-media-tooltips', oMedia.id_media], $Tooltip);
|
||||
|
||||
oMarker.bindPopup(
|
||||
function(e) {
|
||||
let $Tooltip = oSpot.tmp(['marker-media-tooltips', e.options.id]);
|
||||
|
||||
$Tooltip.on('mouseout', function(){e.closePopup();});
|
||||
|
||||
//Tooltip: Medias: Set on the fly to avoid resource load
|
||||
let oMedias = $Tooltip.data('medias');
|
||||
let $Medias = $Tooltip.find('.medias');
|
||||
if(oMedias && $Medias.length == 0) {
|
||||
$Medias = $('<div>', {'class':'medias'});
|
||||
$.each(oMedias, function(iKey, asMedia) {
|
||||
$Medias.append(getMediaLink(asMedia, 'marker'));
|
||||
});
|
||||
$Tooltip.append($Medias);
|
||||
}
|
||||
return $Tooltip[0];
|
||||
},
|
||||
{
|
||||
maxWidth: iWorkSpaceMinWidth,
|
||||
autoPan: false,
|
||||
closeOnClick: true,
|
||||
offset: new L.Point(0, -30)
|
||||
}
|
||||
);
|
||||
|
||||
oMarker.on('mouseover', function(e) {this.openPopup();});
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSoftPopup(e, sMode) {
|
||||
switch(sMode) {
|
||||
case 'open':
|
||||
@@ -806,7 +870,7 @@ function checkNewFeed() {
|
||||
self.tmp('$PostList').prepend($Posts.children());
|
||||
|
||||
//Markers
|
||||
addSpotMessages(asData.messages);
|
||||
addSpotMarkers(asData.messages);
|
||||
|
||||
//Message Last Update
|
||||
updateSettingsPanel(asData.last_update);
|
||||
|
||||
Reference in New Issue
Block a user