750 lines
27 KiB
HTML
750 lines
27 KiB
HTML
<div id="projects">
|
|
<div id="submap">
|
|
<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
|
|
</div>
|
|
<div id="map"></div>
|
|
<div id="settings">
|
|
<div id="settings-sections">
|
|
<div class="settings-section">
|
|
<h1><i class="fa fa-fw push fa-map"></i>[#]lang:maps[#]</h1>
|
|
<div id="layers"></div>
|
|
</div>
|
|
<div class="settings-section newsletter">
|
|
<h1><i class="fa fa-fw push fa-newsletter"></i>[#]lang:newsletter[#]</h1>
|
|
<input type="email" name="email" id="email" placeholder="[#]lang:nl_email_placeholder[#]" /><button id="nl_btn"><span><i class="fa"></i></span></button>
|
|
<div id="settings-feedback" class="feedback"></div>
|
|
<div id="nl_desc"></div>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h1><i class="fa fa-fw push fa-project"></i>[#]lang:projects[#]</h1>
|
|
<div id="settings-projects"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="feed">
|
|
<div id="posts">
|
|
<div id="poster"></div>
|
|
<div id="posts_list"></div>
|
|
<div id="loading"></div>
|
|
</div>
|
|
</div>
|
|
<div id="elems">
|
|
<div id="settings-button"><i class="fa fa-menu fa-fw"></i></div>
|
|
<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">[#]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>
|
|
<div id="mobile" class="mobile"></div>
|
|
<script type="text/javascript">
|
|
oSpot.onSamePageMove = function(asHash) {
|
|
if(self.tmp('first_exec')) initPage(asHash);
|
|
else {
|
|
self.tmp('map').remove();
|
|
self.tmp('$Map').empty();
|
|
self.tmp('map', null);
|
|
self.tmp('$PostList').empty();
|
|
setFeedUpdateTimer(false);
|
|
initProject(asHash.items[0]);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
oSpot.pageInit = function(asHash) {
|
|
self.tmp('first_exec', true);
|
|
initPage(asHash);
|
|
};
|
|
|
|
oSpot.onResize = function() {
|
|
self.tmp('feed_width', self.tmp('with_feed')?$('#feed').outerWidth(true):0);
|
|
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
|
|
|
|
if(typeof self.tmp('elev') != 'undefined') {
|
|
self.tmp('elev').remove();
|
|
self.tmp('elev').options.width = getElevWidth();
|
|
self.tmp('elev').addTo(self.tmp('map'));
|
|
}
|
|
};
|
|
|
|
oSpot.onQuitPage = function() {
|
|
setFeedUpdateTimer(false);
|
|
return true;
|
|
}
|
|
|
|
oSpot.onKeydown = function(oEvent) {
|
|
switch(oEvent.which) {
|
|
case 27:
|
|
toggleFeedPanel(false);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function toggleFeedPanel(bShow, sMapAction) {
|
|
var $Container = $('#projects');
|
|
if(typeof bShow === 'undefined') $Container.toggleClass('with-feed');
|
|
else $Container.toggleClass('with-feed', bShow);
|
|
|
|
oSpot.tmp('with_feed', $Container.hasClass('with-feed'));
|
|
oSpot.onResize();
|
|
|
|
if(isMobile()) $('#settings-button').toggle(!oSpot.tmp('with_feed'));
|
|
|
|
sMapAction = sMapAction || 'panTo';
|
|
switch(sMapAction) {
|
|
case 'none': break;
|
|
case 'panTo': oSpot.tmp('map').panBy([(oSpot.tmp('with_feed')?1:-1)*$('#feed').outerWidth(true)/2, 0], {duration: 0.5}); break;
|
|
case 'panToInstant': oSpot.tmp('map').panBy([(oSpot.tmp('with_feed')?1:-1)*$('#feed').outerWidth(true)/2, 0]); break;
|
|
case 'fitBounds': oSpot.tmp('map').fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(self.tmp('feed_width') + 5, 5)}); break;
|
|
}
|
|
}
|
|
|
|
function toggleSettingsPanel(bShow) {
|
|
var $Container = $('#projects');
|
|
if(typeof bShow === 'undefined') $Container.toggleClass('with-settings');
|
|
else $Container.toggleClass('with-settings', bShow);
|
|
|
|
var bWithSettings = isSettingsPanelOpen();
|
|
oSpot.onResize();
|
|
|
|
if(isMobile()) $('#post-button').toggle(!bWithSettings);
|
|
|
|
oSpot.tmp('map').panBy([(bWithSettings?-1:1)*$('#settings').outerWidth(true)/2, 0], {duration: 0.5});
|
|
}
|
|
|
|
function isSettingsPanelOpen() {
|
|
return $('#projects').hasClass('with-settings');
|
|
}
|
|
|
|
function isMobile() {
|
|
return $('#mobile').is(':visible');
|
|
}
|
|
|
|
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}'));
|
|
self.tmp('markers', 'object');
|
|
self.tmp('trail-markers', 'object');
|
|
self.tmp('marker_size', {width: 32, height: 32});
|
|
|
|
toggleFeedPanel(false, 'none');
|
|
|
|
//Lightbox options
|
|
lightbox.option({
|
|
alwaysShowNavOnTouchDevices: true,
|
|
albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',/*oSpot.lang('media_count', ['%1', '%2']),*/
|
|
fadeDuration: 300,
|
|
imageFadeDuration: 400,
|
|
positionFromTop: 0,
|
|
resizeDuration: 600,
|
|
hasVideo: true
|
|
});
|
|
|
|
//Assign Track Type Colors
|
|
self.tmp('track-type-styles', 'object');
|
|
$('#legend').find('.line').each(function(iKey, oLegend){
|
|
var $Legend = $(oLegend);
|
|
var sTrackType = $Legend.attr('class').replace('line', '').trim();
|
|
self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('height')), color: $Legend.css('background-color'), opacity: 1});
|
|
});
|
|
|
|
//Post Panel one-off init (see initPosts for project related init)
|
|
//Scrollbar
|
|
self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
|
|
self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
|
|
|
|
//Add "Loading" Post
|
|
getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading'));
|
|
|
|
//Mobile events
|
|
$("#feed").onSwipe(function(aiDelta){
|
|
if(aiDelta.x > self.tmp('feed_width')/3 && aiDelta.x > Math.abs(aiDelta.y)) toggleFeedPanel(false);
|
|
});
|
|
|
|
//Feed Panel
|
|
initPosts();
|
|
|
|
//Settings Panel
|
|
initSettings();
|
|
|
|
//project Bootstrap
|
|
initProject(asHash.items[0]);
|
|
}
|
|
}
|
|
|
|
function initProject(sProjectCodeName){
|
|
self.tmp('first_exec', false);
|
|
self.vars('project', self.vars(['projects', sProjectCodeName]));
|
|
|
|
//Page Title
|
|
self.setPageTitle(oSpot.vars(['project', 'name']));
|
|
|
|
//Timezone difference notice
|
|
var bSameTime = ((new Date()).toLocaleString([], {timeZone: oSpot.consts.timezone}) == (new Date()).toLocaleString([], {timeZone: oSpot.vars(['project', 'timezone'])}));
|
|
self.tmp('site_tz_notice', bSameTime?'':' ('+getTimeZoneDesc(oSpot.consts.timezone)+')');
|
|
self.tmp('proj_tz_notice', bSameTime?'':' ('+getTimeZoneDesc(self.vars(['project', 'timezone']))+')');
|
|
|
|
$.when(
|
|
//Markers: Spot Messages & Medias
|
|
self.get(
|
|
'markers',
|
|
function(){},
|
|
{project_id: self.vars(['project', 'id'])},
|
|
function(e){console.log(e);}
|
|
),
|
|
//Project Geojson: Hike track
|
|
$.ajax({
|
|
dataType: 'json',
|
|
url: self.vars(['project', 'geofilepath']),
|
|
mimeType: 'application/json'
|
|
})
|
|
).done(function(aoMessages, aoTracks) {
|
|
initSpotMessages(aoMessages[0]['data'] || [], aoTracks[0], aoMessages[0]['desc']=='No Data');
|
|
});
|
|
|
|
//Show/Hide Poster Panel
|
|
var bHistoMode = (self.vars(['project', 'mode']) == self.consts.modes.histo);
|
|
$('#poster').toggle(!bHistoMode);
|
|
|
|
//Feed auto-update
|
|
self.tmp('simple-bar').getScrollElement().scrollTop = 0;
|
|
if(!bHistoMode) onAutoUpdate(true);
|
|
else updateFeed(true);
|
|
}
|
|
|
|
function initPosts() {
|
|
var asPoster = {
|
|
type: 'poster',
|
|
formatted_time: '',
|
|
relative_time: oSpot.lang('post_new_message')
|
|
};
|
|
getPost(asPoster).appendTo($('#poster'));
|
|
|
|
autosize($('#post'));
|
|
|
|
$('#submit').click(function(){
|
|
if($('#poster').checkForm())
|
|
{
|
|
self.get(
|
|
'add_post',
|
|
function()
|
|
{
|
|
$('#post').val('');
|
|
updateFeed(true);
|
|
},
|
|
{
|
|
project_id: self.vars(['project', 'id']),
|
|
name: $('#name').val(),
|
|
content: $('#post').val()
|
|
}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
function initSettings(){
|
|
//Scrollbar
|
|
new SimpleBar($('#settings-sections')[0]);
|
|
|
|
//Feedback display function
|
|
var settingsFeedback = function(sType, sMsg){
|
|
$('<p>', {'class': sType})
|
|
.append($('<i>', {'class':'fa push fa-'+sType}))
|
|
.append(sMsg)
|
|
.appendTo($('#settings-feedback'))
|
|
.slideDown('fast')
|
|
.delay(5000)
|
|
.slideUp('fast', function(){$(this).remove();});
|
|
};
|
|
|
|
//Newsletter Subscription
|
|
$('#nl_btn').click(function(){
|
|
var sAction = $(this).prop('name');
|
|
var sEmail = $('#email').val();
|
|
var regexEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
if(!regexEmail.test(sEmail)) settingsFeedback('error', 'this is not an email');
|
|
else {
|
|
oSpot.get(
|
|
sAction,
|
|
function(asData) {
|
|
settingsFeedback('success', oSpot.lang('nl_'+sAction+'d'));
|
|
oSpot.vars('user', asData);
|
|
setUserInterface();
|
|
},
|
|
{'email': sEmail},
|
|
function(sDesc) {settingsFeedback('error', sDesc);},
|
|
function(sState) {
|
|
var bLoading = (sState=='start');
|
|
$('#nl_btn')
|
|
.prop('disabled', bLoading)
|
|
.toggleClass('loading', bLoading);
|
|
}
|
|
);
|
|
}
|
|
});
|
|
|
|
//Twink interface with user data
|
|
setUserInterface();
|
|
}
|
|
|
|
function setUserInterface() {
|
|
var asUserInfo = oSpot.vars('user');
|
|
if(asUserInfo.id_user) { //Subscribed User
|
|
$('#email').val(asUserInfo.email).prop('disabled', true);
|
|
$('#nl_btn').attr({name: 'unsubscribe', title: oSpot.lang('nl_unsubscribe'), 'class':'unsubscribe'});
|
|
$('#nl_desc').text(oSpot.lang('nl_subscribed_desc'));
|
|
|
|
//Populate nickname
|
|
if(asUserInfo.name) $('#name').val(asUserInfo.name);
|
|
}
|
|
else { //Unsubscribed User
|
|
//Switch to subcribe mode
|
|
$('#email').val('').prop('disabled', false);
|
|
$('#nl_btn').attr({name: 'subscribe', title: oSpot.lang('nl_subscribe'), 'class':'subscribe'});
|
|
$('#nl_desc').text(oSpot.lang('nl_unsubscribed_desc'));
|
|
|
|
//Reset nickname
|
|
$('#name').val('');
|
|
}
|
|
|
|
}
|
|
|
|
function onAutoUpdate(bFirstExec) {
|
|
bFirstExec = bFirstExec || false;
|
|
if(bFirstExec) updateFeed(true);
|
|
else if(self.tmp('simple-bar').getScrollElement().scrollTop == 0) updateFeed(true, true);
|
|
setFeedUpdateTimer(60, onAutoUpdate);
|
|
}
|
|
|
|
function getElevWidth() {
|
|
var
|
|
iPageWidth = $('#projects').width(),
|
|
iFeedPanelWidth = oSpot.tmp('feed_width'),
|
|
iSettingsPanelWidth = isSettingsPanelOpen()?$('#settings').outerWidth(true):0,
|
|
iLegendWidth = $('.leaflet-bottom.leaflet-left > .leaflet-control-layers').outerWidth(true),
|
|
oElevRightMarging = parseInt($('.leaflet-bottom.leaflet-right > .leaflet-control-scale').css('margin-right').slice(0, -2));
|
|
|
|
return iPageWidth - iFeedPanelWidth - iSettingsPanelWidth - iLegendWidth - oElevRightMarging;
|
|
}
|
|
|
|
function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
|
|
|
|
//Tile layers
|
|
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'});
|
|
aoLayers[oSpot.lang('map_usgs')] = L.tileLayer(self.tmp('tile_api'), {id: 'usgs', minZoom: 1, maxZoom: 16});
|
|
|
|
//Map
|
|
var oMap = L.map(self.tmp('$Map')[0], {
|
|
layers: [aoLayers[oSpot.lang('map_satellite')]],
|
|
attributionControl: false,
|
|
zoomControl: false
|
|
});
|
|
self.tmp('map', oMap);
|
|
|
|
//Controls: Settings Panel
|
|
var oSettingsPanel = L.control({position: 'topleft'});
|
|
var $SettingsButton = $('#settings-button').clone();
|
|
$SettingsButton.click(toggleSettingsPanel);
|
|
oSettingsPanel.onAdd = function(oMap) {return $SettingsButton[0];};
|
|
oSettingsPanel.addTo(oMap);
|
|
|
|
//Controls: Feed Panel
|
|
var oFeedPanel = L.control({position: 'topright'});
|
|
var $PostButton = $('#post-button').clone();
|
|
$PostButton.click(toggleFeedPanel);
|
|
oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
|
|
oFeedPanel.addTo(oMap);
|
|
|
|
//Controls: Legend
|
|
var oLegend = L.control({position: 'bottomleft'});
|
|
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
|
|
oLegend.addTo(oMap);
|
|
|
|
//Controls: Projects
|
|
var $Labels = $('<div>', {'class': 'leaflet-control-layers-base'});
|
|
$.each(self.vars('projects'), function(sCodeName, asProject){
|
|
var asRadioAttrs = {'type': 'radio', 'class': 'leaflet-control-layers-selector', 'name':'project', 'value': sCodeName};
|
|
if(asProject.id == self.vars(['project', 'id'])) asRadioAttrs.checked = 'checked';
|
|
var $Radio =$('<input>', asRadioAttrs).change(function(){
|
|
toggleSettingsPanel(false);
|
|
self.setHash(self.vars('page'), [$(this).val()]);
|
|
});
|
|
|
|
var $Label = $('<label>').append($('<div>')
|
|
.append($Radio)
|
|
.append($('<span>').text(' '+asProject.name))
|
|
.append($('<a>', {'class':'fa fa-download push-left', href:asProject.gpxfilepath, title:oSpot.lang('track_download')}).click(function(e){e.stopPropagation();}))
|
|
);
|
|
$Labels.append($Label);
|
|
});
|
|
$('#settings-projects').empty().append($Labels);
|
|
|
|
//Controls: Scale
|
|
oScale = L.control.scale({imperial: false, 'position':'bottomright'}).addTo(oMap);
|
|
|
|
//Controls: Elevation
|
|
var oElev = L.control.elevation({
|
|
collapsed: true,
|
|
position: "bottomright",
|
|
width: getElevWidth(),
|
|
height: 129,
|
|
hoverNumber: {
|
|
decimalsX: 0, //distance (km)
|
|
decimalsY: 0 //elevation (m)
|
|
},
|
|
theme: 'spot-theme',
|
|
onExpand: function(){$('.leaflet-control-scale').hide();},
|
|
onCollapse: function(){$('.leaflet-control-scale').show();}
|
|
}).addTo(oMap);
|
|
self.tmp('elev', oElev);
|
|
|
|
//Controls: Tiles (layers): Add & Move to Settings Panel
|
|
L.control.layers(aoLayers, null, {position: 'topleft'}).addTo(oMap);
|
|
$('#layers').empty().append($('.leaflet-control-layers-list .leaflet-control-layers-base'));
|
|
|
|
//Tracks, colors & popup
|
|
var oActualTracks = L.geoJson(aoTracks, {
|
|
style: function(oTrack) {
|
|
return self.tmp(['track-type-styles', oTrack.properties.type]);
|
|
}
|
|
}).addTo(oMap);
|
|
|
|
self.tmp('track', L.geoJson(aoTracks, {
|
|
style: {weight: 20, opacity: 0},
|
|
onEachFeature: function(feature, oLayer) {
|
|
var asProperties = feature.properties;
|
|
var $Tooltip = $('<div>', {'class':'track_tooltip'});
|
|
$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip);
|
|
if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
|
|
|
|
var aiCoords = feature.geometry.coordinates;
|
|
if(aiCoords && asProperties.type != 'hitchhiking') {
|
|
var iDistance = 0, iElevDrop = 0, iElevGain = 0, iTime = 0;
|
|
|
|
//Track duration (in hours)
|
|
for (var i = 1; i < aiCoords.length; i++) {
|
|
var oCurrPoint = new L.LatLng(aiCoords[i][1], aiCoords[i][0]);
|
|
var oPrevPoint = new L.LatLng(aiCoords[i - 1][1], aiCoords[i - 1][0]);
|
|
var iElevDelta = aiCoords[i][2] - aiCoords[i - 1][2];
|
|
var iSegDistance = oCurrPoint.distanceTo(oPrevPoint);
|
|
|
|
iDistance += iSegDistance;
|
|
iElevDrop += Math.min(iElevDelta, 0);
|
|
iElevGain += Math.max(iElevDelta, 0);
|
|
|
|
var iSpeedCorrecRatio = 0;
|
|
var iAngle = iElevDelta / iSegDistance;
|
|
if(iAngle < -1) iSpeedCorrecRatio = 0.5;
|
|
else if(iAngle < -0.2) iSpeedCorrecRatio = 1.25;
|
|
else if(iAngle < 0.1) iSpeedCorrecRatio = 1;
|
|
else if(iAngle < 0.25) iSpeedCorrecRatio = 0.85;
|
|
else if(iAngle < 0.5) iSpeedCorrecRatio = 0.6;
|
|
else if(iAngle < 1) iSpeedCorrecRatio = 0.5;
|
|
else iSpeedCorrecRatio = 0.25;
|
|
iTime += iSegDistance / 1000 * iSpeedCorrecRatio / 3.5 ; //default speed: 3.5km/h
|
|
}
|
|
|
|
//Conversion of hours into natural language
|
|
var iTimeMinutes = 0, iTimeHours = 0, iTimeDays = Math.floor(iTime/8); //8 hours a day
|
|
if(iTimeDays > 1) iTimeDays = Math.round(iTimeDays * 2) / 2; //Round down to the closest half day
|
|
else {
|
|
iTimeDays = 0;
|
|
iTimeHours = Math.floor(iTime);
|
|
iTime -= iTimeHours;
|
|
|
|
iTimeMinutes = Math.floor(iTime * 4) * 15; //Round down to the closest 15 minutes
|
|
}
|
|
var sDuration = '~ '
|
|
+(iTimeDays>0?(iTimeDays+(iTimeDays%2==0?'':'½')+' '+oSpot.lang(iTimeDays>1?'unit_days':'unit_day')):'')//Days
|
|
+((iTimeHours>0 || iTimeDays==0)?iTimeHours+oSpot.lang('unit_hour'):'') //Hours
|
|
+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes) //Minutes
|
|
|
|
//Tooltip info
|
|
$('<p>', {'class':'detail'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($Tooltip);
|
|
$('<p>', {'class':'detail'}).addIcon('fa-time fa-fw', true).append(sDuration).appendTo($Tooltip);
|
|
$('<p>', {'class':'detail'}).addIcon('fa-elev-gain fa-fw', true).append(iElevGain+'m').appendTo($Tooltip);
|
|
$('<p>', {'class':'detail'}).addIcon('fa-elev-drop fa-fw', true).append(iElevDrop+'m').appendTo($Tooltip);
|
|
|
|
//Trail Start/End
|
|
self.tmp(['trail-markers', asProperties.name], {
|
|
'start' : L.marker(new L.latLng(aiCoords[0][1], aiCoords[0][0]), {icon: getDivIcon('track-start')}),
|
|
'end' : L.marker(new L.latLng(aiCoords[aiCoords.length - 1][1], aiCoords[aiCoords.length - 1][0]), {icon: getDivIcon('track-end')})
|
|
});
|
|
|
|
oLayer
|
|
.bindPopup($Tooltip[0])
|
|
.on('mouseover click', function(e) {
|
|
var oLatLng = L.GeometryUtil.closest(self.tmp('map'), e.sourceTarget, e.latlng);
|
|
e.target.getPopup().setLatLng(oLatLng).openOn(self.tmp('map'));
|
|
|
|
var asTrailMarkers = self.tmp(['trail-markers', e.target.feature.properties.name]);
|
|
var oPointStart = self.tmp('map').latLngToLayerPoint(asTrailMarkers.start.getLatLng());
|
|
var oPointEnd = self.tmp('map').latLngToLayerPoint(asTrailMarkers.end.getLatLng());
|
|
if(oPointStart.distanceTo(oPointEnd) > 200) {
|
|
asTrailMarkers.start.addTo(self.tmp('map'));
|
|
asTrailMarkers.end.addTo(self.tmp('map'));
|
|
}
|
|
})
|
|
.on('mouseout', function(e) {
|
|
e.target.closePopup();
|
|
|
|
var asTrailMarkers = self.tmp(['trail-markers', e.target.feature.properties.name]);
|
|
asTrailMarkers.start.remove();
|
|
asTrailMarkers.end.remove();
|
|
});
|
|
|
|
(oElev.addData.bind(oElev))(feature, oLayer);
|
|
}
|
|
}
|
|
}).addTo(oMap));
|
|
|
|
//Centering map
|
|
var bWithFeedPanel = (!bNoFeed && !isMobile());
|
|
if(self.vars(['project', 'mode'])==self.consts.modes.blog && aoMessages.length > 0)
|
|
{
|
|
//Zoom on last message
|
|
var oLastMsg = aoMessages[aoMessages.length-1];
|
|
oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
|
|
oMap.panBy([(bWithFeedPanel?1:0)*$('#feed').outerWidth(true)/2, 0]);
|
|
}
|
|
else oMap.fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(5 + parseInt(bWithFeedPanel?$('#feed').outerWidth(true):0), 5)});
|
|
|
|
//Spot Messages
|
|
$.each(aoMessages, function(iKey, oMsg){
|
|
|
|
//Marker
|
|
var oMarker = L.marker(L.latLng(oMsg.latitude, oMsg.longitude), {
|
|
id: oMsg.id_message,
|
|
riseOnHover: true,
|
|
icon: getDivIcon('message-in fa-rotate-270')
|
|
}).addTo(oMap);
|
|
|
|
//Tooltip
|
|
$Tooltip = $('<div>', {'class':'info-window'})
|
|
.append($('<h1>')
|
|
.addIcon('fa-message fa-fw fa-lg')
|
|
.append('Message '+oMsg.type+' '+oSpot.lang('counter', oMsg.displayed_id)))
|
|
.append($('<p>', {'class':'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 fa-fw fa-lg', false)
|
|
.append(getGoogleMapsLink(oMsg)));
|
|
|
|
//Tooltip medias
|
|
if(oMsg.medias) {
|
|
var $Medias = $('<div>', {'class':'medias'});
|
|
$.each(oMsg.medias, function(iKey, asMedia) {
|
|
$Medias.append(getMediaLink(asMedia, 'marker'));
|
|
});
|
|
$Tooltip
|
|
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('pics')))
|
|
.append($Medias);
|
|
}
|
|
|
|
oMarker.bindPopup($Tooltip[0], {
|
|
maxWidth: $('#projects').width(),
|
|
autoPan: false,
|
|
closeOnClick: true,
|
|
offset: new L.Point(0, -30)
|
|
});
|
|
|
|
//Open tooltip on latest message in mobile mode
|
|
if(iKey === (aoMessages.length - 1) && self.vars(['project', 'mode']) == self.consts.modes.blog && (!oMsg.medias || oMsg.medias.length < 3) && isMobile()) oMarker.openPopup();
|
|
|
|
oSpot.tmp(['markers', oMsg.id_message], oMarker);
|
|
});
|
|
}
|
|
|
|
function getDivIcon(sIcon) {
|
|
return L.divIcon({
|
|
className: '',
|
|
html: '<span class="fa-stack"><i class="fa fa-message fa-stack-2x"></i><i class="fa fa-'+sIcon+' fa-stack-1x"></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)
|
|
});
|
|
}
|
|
|
|
function onFeedScroll() {
|
|
var $Box = $(this);
|
|
var $BoxContent = $Box.find('.simplebar-content');
|
|
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) updateFeed();
|
|
}
|
|
|
|
function updateFeed(bFirstChunk, bDiscrete) {
|
|
bFirstChunk = bFirstChunk || false;
|
|
bDiscrete = bDiscrete || false;
|
|
|
|
if(self.tmp('updatable')) {
|
|
if(!self.tmp('out-of-data') || bFirstChunk) {
|
|
self.tmp('updatable', false);
|
|
if(!bDiscrete) $('#loading').show();
|
|
|
|
var $Posts = $('<div>');
|
|
|
|
if(bFirstChunk===true) {
|
|
self.tmp('news_chunk', 0);
|
|
}
|
|
|
|
self.get('feed', function(asData) {
|
|
$('#loading').hide();
|
|
|
|
$.each(asData, function(iKey, asPost){
|
|
$Posts.append(getPost(asPost));
|
|
});
|
|
|
|
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) self.tmp('$PostList').empty();
|
|
self.tmp('$PostList').append($Posts.children());
|
|
|
|
self.tmp('updatable', true);
|
|
|
|
if(bFirstChunk && !isMobile() && !$.isEmptyObject(asData)) toggleFeedPanel(true, 'none');
|
|
}, {
|
|
'project_id': self.vars(['project', 'id']),
|
|
'chunk': self.tmp('news_chunk')
|
|
});
|
|
}
|
|
}
|
|
else if(bFirstChunk) setFeedUpdateTimer(0.2);
|
|
}
|
|
|
|
function setFeedUpdateTimer(iSeconds, fCallback) {
|
|
fCallback = fCallback || function(){updateFeed(true);};
|
|
if(typeof self.tmp('update_timer') != 'undefined') clearTimeout(self.tmp('update_timer'));
|
|
if(iSeconds > 0) self.tmp('update_timer', setTimeout(fCallback, iSeconds * 1000));
|
|
}
|
|
|
|
function getPost(asPost) {
|
|
asPost.headerless = asPost.headerless || false;
|
|
var $Post = $('<div>', {'class':'post '+asPost.type+(asPost.headerless?' headerless':'')});
|
|
var sRelTime = (asPost.relative_time!='')?((self.vars('project') && self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
|
|
var sAbsTime = asPost.formatted_time;
|
|
var sType = asPost.subtype || asPost.type;
|
|
var $Body = {};
|
|
|
|
switch(asPost.type) {
|
|
case 'message':
|
|
$Body = $('<div>')
|
|
.data('id', asPost.id_message)
|
|
.append($('<p>').addIcon('fa-coords', true).append(getGoogleMapsLink(asPost)))
|
|
.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
|
|
.append($('<a>', {'class':'drill'})
|
|
.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')
|
|
)
|
|
.click(function(){
|
|
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
|
|
if(isMobile()) {
|
|
toggleFeedPanel(false, 'panToInstant');
|
|
self.tmp('map').setView(oMarker.getLatLng(), 15);
|
|
}
|
|
else {
|
|
var iOffset = $('#feed').outerWidth(true)/2 - ($('#projects').hasClass('with-settings')?1:-1)*$('#settings').outerWidth(true)/2;
|
|
var iRatio = -1 * iOffset / $('body').outerWidth(true);
|
|
self.tmp('map').setOffsetView(iRatio, oMarker.getLatLng(), 15);
|
|
}
|
|
|
|
if(!oMarker.isPopupOpen()) oMarker.openPopup();
|
|
})
|
|
)
|
|
.hover(
|
|
function(){
|
|
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
|
|
if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng()) && !oMarker.isPopupOpen()) oMarker.openPopup();
|
|
},
|
|
function(){
|
|
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
|
|
if(oMarker.isPopupOpen()) oMarker.closePopup();
|
|
}
|
|
);
|
|
break;
|
|
case 'media':
|
|
$Body = $('<div>').append(getMediaLink(asPost, 'post'));
|
|
if(asPost.comment) $Body.append($('<p>').text(asPost.comment));
|
|
break;
|
|
case 'post':
|
|
$Body = $('<div>')
|
|
.append($('<p>', {'class':'message'}).text(asPost.content))
|
|
.append($('<p>', {'class':'signature'}).text('-- '+asPost.formatted_name));
|
|
break;
|
|
case 'poster':
|
|
$Body = $('<p>', {'class':'message'})
|
|
.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':
|
|
$Body = $('<p>', {'class':'flicker'}).addIcon('fa-post');
|
|
break;
|
|
}
|
|
|
|
$Post
|
|
.append($('<div>', {'class':'header'})
|
|
.append($('<span>', {'class':'index'}).addIcon('fa-'+sType))
|
|
.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+self.tmp('site_tz_notice'))))
|
|
.append($('<div>', {'class':'body'}).append($Body));
|
|
|
|
if(asPost.displayed_id) $Post.find('.index').append(' '+oSpot.lang('counter', asPost.displayed_id));
|
|
|
|
return $Post;
|
|
}
|
|
|
|
function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
|
|
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
|
|
}
|
|
|
|
function getMediaLink(asData, sType) {
|
|
var bVideo = (asData.subtype == 'video');
|
|
|
|
var $PostedOn =
|
|
$('<span>', {'class': 'lb-caption-line', title: oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang('add_on', asData.posted_on_formatted)})
|
|
.addIcon('fa-upload fa-lg fa-fw', true)
|
|
.append(asData.posted_on_formatted);
|
|
|
|
var $TakenOn = (asData.taken_on == '0000-00-00 00:00:00')?'':
|
|
$('<span>', {'class': 'lb-caption-line', title: oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', asData.taken_on_formatted)})
|
|
.addIcon('fa-'+asData.subtype+'-shot fa-lg fa-fw', true)
|
|
.append(asData.taken_on_formatted+self.tmp('site_tz_notice'));
|
|
|
|
var $Title = $('<div>').append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn);
|
|
var $Link =
|
|
$('<a>', {
|
|
'class': 'drill',
|
|
'href': asData.media_path,
|
|
'data-lightbox': sType+'-medias',
|
|
'data-video': (bVideo?'true':'false'),
|
|
'data-title': $Title.html(),
|
|
'data-orientation': asData.rotate
|
|
})
|
|
.append($('<img>', {'src': asData.thumb_path, title: oSpot.lang(bVideo?'click_watch':'click_zoom')}))
|
|
.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
|
|
|
|
return $Link;
|
|
}
|
|
|
|
function getGoogleMapsLink(asInfo) {
|
|
return $('<a>', {
|
|
href:'https://www.google.com/maps/place/'+asInfo.lat_dms+'+'+asInfo.lon_dms+'/@'+asInfo.latitude+','+asInfo.longitude+',10z',
|
|
title: oSpot.lang('see_on_google'),
|
|
target: '_blank',
|
|
rel: 'noreferrer'
|
|
}).text(asInfo.lat_dms+' '+asInfo.lon_dms);
|
|
}
|
|
</script> |