Support geo located images & videos

This commit is contained in:
2023-08-12 23:35:40 +02:00
parent 199e3a1269
commit 5f597647b4
4 changed files with 140 additions and 24 deletions

View File

@@ -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);