franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add drill down icon on message

Browse Source
This commit is contained in:
Franzz
2019-07-06 22:58:52 +02:00
parent c9d0462b56
commit 7462b1573b
6 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
masks/project.html
View File

@@ -28,6 +28,7 @@ oSpot.onSamePageMove = function(asHash) {
self.tmp('map').remove();
self.tmp('$Map').empty();
self.tmp('map', null);
self.tmp('$PostList').empty();
setFeedUpdateTimer(false);
initProject(asHash.items[0]);
}
@@ -73,6 +74,7 @@ function initPage(asHash) {
if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]);
else {
self.tmp('$Map', $('#map'));
self.tmp('$PostList', $('#posts_list'));
self.tmp('updatable', true);
self.tmp('out-of-data', false);
self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
@@ -373,7 +375,7 @@ function initSpotMessages(aoMessages, aoTracks) {
riseOnHover: true,
icon: L.divIcon({
className: '',
html: '<i class="fa fa-message fa-stack-2x"></i><i class="fa fa-message-in fa-stack-1x fa-rotate-270"></i>',
html: '<span class="fa-stack"><i class="fa fa-message fa-stack-2x"></i><i class="fa fa-message-in fa-stack-1x fa-rotate-270"></i></span>',
iconSize: [self.tmp('marker_size').width, self.tmp('marker_size').height],
iconAnchor: [self.tmp('marker_size').width / 2, self.tmp('marker_size').height] //position from icon's top left corner (iconAnchor = marker's position)
})
@@ -382,13 +384,13 @@ function initSpotMessages(aoMessages, aoTracks) {
//Tooltip
$Tooltip = $('<div>', {'class':'info-window'})
.append($('<h1>')
.addIcon('fa-message')
.addIcon('fa-message fa-fw fa-lg')
.append('Message '+oMsg.type+' '+oMsg.displayed_id))
.append($('<p>', {'class':'time'})
.addIcon('fa-time')
.addIcon('fa-time fa-fw fa-lg')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')+self.tmp('site_tz_notice')))
.append($('<p>', {'class':'coordinates'})
.addIcon('fa-coords', false)
.addIcon('fa-coords fa-fw fa-lg', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
//Tooltip medias
@@ -398,16 +400,18 @@ function initSpotMessages(aoMessages, aoTracks) {
var bVideo = (asMedia.subtype == 'video');
$Medias
.append($('<a>', {
'class': 'drill '+(bVideo?'video':'picture'),
'class': 'drill',
href: asMedia.media_path,
'data-lightbox': 'marker-medias',
'data-video': (bVideo?'true':'false'),
'data-title': (bVideo?'Vidéo':'Photo')+' prise le '+asMedia.formatted_time+self.tmp('site_tz_notice'),
'data-orientation': asMedia.rotate})
.append($('<img>', {'src': asMedia.thumb_path})));
.append($('<img>', {'src': asMedia.thumb_path}))
.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')))
);
});
$Tooltip
.append($('<p>').addIcon('fa-picture').append('Photos'))
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append('Photos'))
.append($Medias);
}
@@ -441,7 +445,6 @@ function updateFeed(bFirstChunk, bDiscrete) {
if(!bDiscrete) $('#loading').show();
var $Posts = $('<div>');
var $PostsList = $('#posts_list');
if(bFirstChunk===true) {
self.tmp('news_chunk', 0);
@@ -457,8 +460,8 @@ function updateFeed(bFirstChunk, bDiscrete) {
self.tmp('news_chunk', self.tmp('news_chunk') + 1);
self.tmp('out-of-data', Object.keys(asData).length != self.vars('chunk_size'));
if(bFirstChunk===true) $PostsList.empty();
$PostsList.append($Posts.children());
if(bFirstChunk===true) self.tmp('$PostList').empty();
self.tmp('$PostList').append($Posts.children());
self.tmp('updatable', true);
}, {
@@ -491,6 +494,10 @@ function getPost(asPost) {
.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
.append($('<a>', {'class':'drill'})
.append($('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)}))
.append($('<span>', {'class': 'drill-icon fa-stack'})
.addIcon('fa-message-in fa-stack-1x fa-rotate-270')
.addIcon('fa-message fa-stack-2x')
)
.click(function(){
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
@@ -514,12 +521,12 @@ function getPost(asPost) {
var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':' et prise le '+asPost.taken_on_formatted+self.tmp('site_tz_notice');
var $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
$Body = $('<a>', {
'class': 'drill '+(bVideo?'video':'picture'),
'class': 'drill',
href: asPost.media_path,
'data-video': (bVideo?'true':'false'),
'data-lightbox': 'post-medias',
'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
}).append($Image);
}).append($Image).append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
break;
case 'post':
$Body = $('<div>')
@@ -549,7 +556,6 @@ function getPost(asPost) {
}
function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
var sMarker = (sMapId=='static')?('&marker='+encodeURI('https://spot.lutran.fr/images/footprint_mapbox.png')):'';
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat+sMarker;
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
}
</script>