This commit is contained in:
2019-10-19 18:27:26 +02:00
parent 55f67f2a2d
commit 978313fd06
12 changed files with 198 additions and 81 deletions

View File

@@ -13,9 +13,9 @@
<div id="elems">
<div id="post-button"><i class="fa fa-fw"></i></div>
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
<div class="track"><span class="line main"></span><span class="desc">Trajet principal</span></div>
<div class="track"><span class="line off-track"></span><span class="desc">Variante</span></div>
<div class="track"><span class="line hitchhiking"></span><span class="desc">Hors rando</span></div>
<div class="track"><span class="line main"></span><span class="desc">[#]lang:track_main[#]</span></div>
<div class="track"><span class="line off-track"></span><span class="desc">[#]lang:track_offtrack[#]</span></div>
<div class="track"><span class="line hitchhiking"></span><span class="desc">[#]lang:track_hitchhiking[#]</span></div>
</div>
</div>
</div>
@@ -87,7 +87,7 @@ function initPage(asHash) {
//Lightbox options
lightbox.option({
alwaysShowNavOnTouchDevices: true,
albumLabel: "Média %1 sur %2",
albumLabel: oSpot.lang('media_count', ['%1', '%2']),
fadeDuration: 300,
imageFadeDuration: 400,
resizeDuration: 600,
@@ -128,8 +128,8 @@ function initProject(sProjectCodeName){
//Timezone difference notice
var bSameTZ = (oSpot.consts.site_timezone == oSpot.vars(['project', 'timezone']));
self.tmp('site_tz_notice', bSameTZ?'':' ('+oSpot.consts.site_timezone_desc+')');
self.tmp('proj_tz_notice', bSameTZ?'':' ('+self.vars(['project', 'timezone_desc'])+')');
self.tmp('site_tz_notice', bSameTZ?'':' ('+getTimeZoneDesc(oSpot.consts.site_timezone)+')');
self.tmp('proj_tz_notice', bSameTZ?'':' ('+getTimeZoneDesc(self.vars(['project', 'timezone']))+')');
$.when(
//Markers: Spot Messages & Medias
@@ -160,7 +160,7 @@ function initPosts() {
var asPoster = {
type: 'poster',
formatted_time: '',
relative_time: 'Nouveau message'
relative_time: oSpot.lang('post_new_message')
};
getPost(asPoster).appendTo($Poster.show());
@@ -207,15 +207,16 @@ function getElevWidth() {
function initSpotMessages(aoMessages, aoTracks) {
//Tile layers
var oMapBoxSat = L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite-streets', minZoom: 0, maxZoom: 19}),
oOpenTopoMap = L.tileLayer(self.tmp('tile_api'), {id: 'opentopomap', minZoom: 2, maxZoom: 19}),
oIgnSpain = L.tileLayer(self.tmp('tile_api'), {id: 'ign.es', minZoom: 1, maxZoom: 20}),
oIgnFrance = L.tileLayer(self.tmp('tile_api'), {id: 'ign.fr', minZoom: 0, maxZoom: 18, tileSize: 256}),
oLinz = L.tileLayer(self.tmp('tile_api'), {id: 'linz', maxZoom: 17, continuousWorld: true, attribution: 'Sourced from LINZ. CC BY 4.0'});
aoLayers = {};
aoLayers[oSpot.lang('map_satellite')] = L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite-streets', minZoom: 0, maxZoom: 19});
aoLayers[oSpot.lang('map_otm')] = L.tileLayer(self.tmp('tile_api'), {id: 'opentopomap', minZoom: 2, maxZoom: 19});
aoLayers[oSpot.lang('map_ign_france')] = L.tileLayer(self.tmp('tile_api'), {id: 'ign.fr', minZoom: 0, maxZoom: 18, tileSize: 256});
aoLayers[oSpot.lang('map_ign_spain')] = L.tileLayer(self.tmp('tile_api'), {id: 'ign.es', minZoom: 1, maxZoom: 20});
aoLayers[oSpot.lang('map_linz')] = L.tileLayer(self.tmp('tile_api'), {id: 'linz', maxZoom: 17, continuousWorld: true, attribution: 'Sourced from LINZ. CC BY 4.0'});
//Map
var oMap = L.map(self.tmp('$Map')[0], {
layers: [oMapBoxSat],
layers: [aoLayers[oSpot.lang('map_satellite')]],
attributionControl: false,
zoomControl: false
});
@@ -274,18 +275,8 @@ function initSpotMessages(aoMessages, aoTracks) {
}).addTo(oMap);
self.tmp('elev', oElev);
//Controls: Tiles
L.control.layers(
{
'Satellite': oMapBoxSat,
'Open Topo Map': oOpenTopoMap,
'IGN (France)': oIgnFrance,
'IGN (Espagne)': oIgnSpain,
'LINZ (Nouvelle-Zélande)': oLinz
},
null,
{position: 'topleft'}
).addTo(oMap);
//Controls: Tiles (layers)
L.control.layers(aoLayers, null, {position: 'topleft'}).addTo(oMap);
//Tracks, colors & popup
var oTracks = L.geoJson(aoTracks, {
@@ -404,14 +395,14 @@ function initSpotMessages(aoMessages, aoTracks) {
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-title': oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', [asMedia.formatted_time+self.tmp('site_tz_notice')]),
'data-orientation': asMedia.rotate})
.append($('<img>', {'src': asMedia.thumb_path}))
.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')))
);
});
$Tooltip
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append('Photos'))
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('pics')))
.append($Medias);
}
@@ -493,7 +484,7 @@ function getPost(asPost) {
.append($('<p>').addIcon('fa-coords', true).append(asPost.lat_dms+' '+asPost.lon_dms))
.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($('<img>', {'class':'staticmap', title: oSpot.lang('click_zoom'), 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')
@@ -518,14 +509,14 @@ function getPost(asPost) {
break;
case 'media':
var bVideo = (asPost.subtype == 'video');
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'});
var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':(' '+oSpot.lang('and')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', [asPost.taken_on_formatted+self.tmp('site_tz_notice')]));
var $Image = $('<img>', {'src': asPost.thumb_path, title: oSpot.lang(bVideo?'click_watch':'click_zoom')});
$Body = $('<a>', {
'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
'data-title': oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang('add_on', [sAbsTime+sTakenOn]), 'data-orientation': asPost.rotate
}).append($Image).append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
break;
case 'post':
@@ -535,8 +526,8 @@ function getPost(asPost) {
break;
case 'poster':
$Body = $('<p>', {'class':'message'})
.append($('<textarea>', {id:'post', name:'post', placeholder:'Message', 'class':'autoExpand', rows:'1'}))
.append($('<input>', {type:'text', id:'name', name:'name', placeholder:'Nom'}))
.append($('<textarea>', {id:'post', name:'post', placeholder:oSpot.lang('post_message'), 'class':'autoExpand', rows:'1'}))
.append($('<input>', {type:'text', id:'name', name:'name', placeholder:oSpot.lang('post_name')}))
.append($('<button>', {type:'button', id:'submit', name:'submit'}).addIcon('fa-send'));
break;
case 'loading':