elevation module replaced with HeightGraph (improved perfs)

This commit is contained in:
2020-05-03 17:17:03 +02:00
parent 204464d6fd
commit d22472722b
2 changed files with 37 additions and 36 deletions

View File

@@ -65,13 +65,16 @@ oSpot.pageInit = function(asHash) {
}; };
oSpot.onResize = function() { oSpot.onResize = function() {
self.tmp('feed_width', self.tmp('with_feed')?$('#feed').outerWidth(true):0); self.tmp('map_offset', -1 * (isFeedPanelOpen()?self.tmp('$Feed').outerWidth(true):0) / $('body').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
if(typeof self.tmp('elev') != 'undefined') { if(typeof self.tmp('elev') != 'undefined') {
var bElevOpened = self.tmp('elev')._showState;
if(bElevOpened) self.tmp('elev')._expand();
self.tmp('elev').remove(); self.tmp('elev').remove();
self.tmp('elev').options.width = getElevWidth(); self.tmp('elev').options.width = getElevWidth();
self.tmp('elev').addTo(self.tmp('map')); self.tmp('elev').addTo(self.tmp('map'));
self.tmp('elev').addData(self.tmp('elev-data'));
if(bElevOpened) self.tmp('elev')._expand();
} }
}; };
@@ -89,39 +92,33 @@ oSpot.onKeydown = function(oEvent) {
} }
function toggleFeedPanel(bShow, sMapAction) { function toggleFeedPanel(bShow, sMapAction) {
var $Container = $('#projects'); self.tmp('$Projects').toggleClass('with-feed', (typeof bShow === 'undefined')?null:bShow);
if(typeof bShow === 'undefined') $Container.toggleClass('with-feed');
else $Container.toggleClass('with-feed', bShow);
oSpot.tmp('with_feed', $Container.hasClass('with-feed'));
oSpot.onResize(); oSpot.onResize();
if(isMobile()) $('#settings-button').toggle(!isFeedPanelOpen());
if(isMobile()) $('#settings-button').toggle(!oSpot.tmp('with_feed'));
sMapAction = sMapAction || 'panTo'; sMapAction = sMapAction || 'panTo';
switch(sMapAction) { switch(sMapAction) {
case 'none': break; 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 'panTo': oSpot.tmp('map').panBy([(isFeedPanelOpen()?1:-1)*self.tmp('$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 'panToInstant': oSpot.tmp('map').panBy([(isFeedPanelOpen()?1:-1)*self.tmp('$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; 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').outerWidth(true) + 5, 5)}); break;
} }
} }
function isFeedPanelOpen() {
return self.tmp('$Projects').hasClass('with-feed');
}
function toggleSettingsPanel(bShow) { function toggleSettingsPanel(bShow) {
var $Container = $('#projects'); self.tmp('$Projects').toggleClass('with-settings', (typeof bShow === 'undefined')?null:bShow);
if(typeof bShow === 'undefined') $Container.toggleClass('with-settings');
else $Container.toggleClass('with-settings', bShow);
var bWithSettings = isSettingsPanelOpen();
oSpot.onResize(); oSpot.onResize();
if(isMobile()) $('#post-button').toggle(!isSettingsPanelOpen());
if(isMobile()) $('#post-button').toggle(!bWithSettings); oSpot.tmp('map').panBy([(isSettingsPanelOpen()?-1:1)*self.tmp('$Settings').outerWidth(true)/2, 0], {duration: 0.5});
oSpot.tmp('map').panBy([(bWithSettings?-1:1)*$('#settings').outerWidth(true)/2, 0], {duration: 0.5});
} }
function isSettingsPanelOpen() { function isSettingsPanelOpen() {
return $('#projects').hasClass('with-settings'); return self.tmp('$Projects').hasClass('with-settings');
} }
function isMobile() { function isMobile() {
@@ -131,8 +128,11 @@ function isMobile() {
function initPage(asHash) { function initPage(asHash) {
if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]); if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]);
else { else {
self.tmp('$Projects', $('#projects'));
self.tmp('$Map', $('#map')); self.tmp('$Map', $('#map'));
self.tmp('$PostList', $('#posts_list')); self.tmp('$PostList', $('#posts_list'));
self.tmp('$Feed', $('#feed'));
self.tmp('$Settings', $('#settings'));
self.tmp('updatable', true); self.tmp('updatable', true);
self.tmp('out-of-data', false); self.tmp('out-of-data', false);
self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}')); self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
@@ -140,12 +140,12 @@ function initPage(asHash) {
self.tmp('trail-markers', 'object'); self.tmp('trail-markers', 'object');
self.tmp('marker_size', {width: 32, height: 32}); self.tmp('marker_size', {width: 32, height: 32});
toggleFeedPanel(false, 'none'); if(!isMobile()) toggleFeedPanel(true, 'none');
//Lightbox options //Lightbox options
lightbox.option({ lightbox.option({
alwaysShowNavOnTouchDevices: true, alwaysShowNavOnTouchDevices: true,
albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',/*oSpot.lang('media_count', ['%1', '%2']),*/ albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',
fadeDuration: 300, fadeDuration: 300,
imageFadeDuration: 400, imageFadeDuration: 400,
positionFromTop: 0, positionFromTop: 0,
@@ -171,7 +171,7 @@ function initPage(asHash) {
//Mobile events //Mobile events
$("#feed").onSwipe(function(aiDelta){ $("#feed").onSwipe(function(aiDelta){
if(aiDelta.x > self.tmp('feed_width')/3 && aiDelta.x > Math.abs(aiDelta.y)) toggleFeedPanel(false); if(aiDelta.x > self.tmp('$Feed').outerWidth(true)/3 && aiDelta.x > Math.abs(aiDelta.y)) toggleFeedPanel(false);
}); });
//Feed Panel //Feed Panel
@@ -329,9 +329,9 @@ function onAutoUpdate(bFirstExec) {
function getElevWidth() { function getElevWidth() {
var var
iPageWidth = $('#projects').width(), iPageWidth = self.tmp('$Projects').width(),
iFeedPanelWidth = oSpot.tmp('feed_width'), iFeedPanelWidth = isFeedPanelOpen()?self.tmp('$Feed').outerWidth(true):0,
iSettingsPanelWidth = isSettingsPanelOpen()?$('#settings').outerWidth(true):0, iSettingsPanelWidth = isSettingsPanelOpen()?self.tmp('$Settings').outerWidth(true):0,
iLegendWidth = $('.leaflet-bottom.leaflet-left > .leaflet-control-layers').outerWidth(true), 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)); oElevRightMarging = parseInt($('.leaflet-bottom.leaflet-right > .leaflet-control-scale').css('margin-right').slice(0, -2));
@@ -444,7 +444,8 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
}); });
oElev.addTo(oMap); oElev.addTo(oMap);
oElev.addData([aoElevTracks]); oElev.addData([aoElevTracks]);
//self.tmp('elev', oElev); self.tmp('elev', oElev);
self.tmp('elev-data', [aoElevTracks]);
} }
//Controls: Tiles (layers): Add & Move to Settings Panel //Controls: Tiles (layers): Add & Move to Settings Panel
@@ -553,9 +554,9 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
//Zoom on last message //Zoom on last message
var oLastMsg = aoMessages[aoMessages.length-1]; var oLastMsg = aoMessages[aoMessages.length-1];
oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15); oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
oMap.panBy([(bWithFeedPanel?1:0)*$('#feed').outerWidth(true)/2, 0]); oMap.panBy([(bWithFeedPanel?1:0)*self.tmp('$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)}); else oMap.fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(5 + parseInt(bWithFeedPanel?self.tmp('$Feed').outerWidth(true):0), 5)});
//Spot Messages //Spot Messages
$.each(aoMessages, function(iKey, oMsg){ $.each(aoMessages, function(iKey, oMsg){
@@ -591,7 +592,7 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
} }
oMarker.bindPopup($Tooltip[0], { oMarker.bindPopup($Tooltip[0], {
maxWidth: $('#projects').width(), maxWidth: self.tmp('$Projects').width(),
autoPan: false, autoPan: false,
closeOnClick: true, closeOnClick: true,
offset: new L.Point(0, -30) offset: new L.Point(0, -30)
@@ -648,8 +649,6 @@ function updateFeed(bFirstChunk, bDiscrete) {
self.tmp('$PostList').append($Posts.children()); self.tmp('$PostList').append($Posts.children());
self.tmp('updatable', true); self.tmp('updatable', true);
if(bFirstChunk && !isMobile() && !$.isEmptyObject(asData) && !bDiscrete) toggleFeedPanel(true, 'none');
}, { }, {
'project_id': self.vars(['project', 'id']), 'project_id': self.vars(['project', 'id']),
'chunk': self.tmp('news_chunk') 'chunk': self.tmp('news_chunk')
@@ -692,7 +691,7 @@ function getPost(asPost) {
self.tmp('map').setView(oMarker.getLatLng(), 15); self.tmp('map').setView(oMarker.getLatLng(), 15);
} }
else { else {
var iOffset = $('#feed').outerWidth(true)/2 - ($('#projects').hasClass('with-settings')?1:-1)*$('#settings').outerWidth(true)/2; var iOffset = (isFeedPanelOpen()?1:-1)*self.tmp('$Feed').outerWidth(true)/2 - (isSettingsPanelOpen()?1:-1)*self.tmp('$Settings').outerWidth(true)/2;
var iRatio = -1 * iOffset / $('body').outerWidth(true); var iRatio = -1 * iOffset / $('body').outerWidth(true);
self.tmp('map').setOffsetView(iRatio, oMarker.getLatLng(), 15); self.tmp('map').setOffsetView(iRatio, oMarker.getLatLng(), 15);
} }

View File

@@ -4,8 +4,10 @@
* php-mbstring * php-mbstring
* php-imagick * php-imagick
* ffprobe (ffmpeg) * ffprobe (ffmpeg)
* STARTTLS Email Server (use Gmail if none available)
* Optional: Geo Caching Server (WMTS Caching Service)
## Getting started ## Getting started
1. Copy files onto web server 1. Clone Git onto web server
2. Copy settings-sample.php to settings.php and populate 2. Copy settings-sample.php to settings.php and populate
3. Go to #admin and create a new project 3. Go to #admin and create a new project
## To Do List ## To Do List
@@ -15,4 +17,4 @@
* Fix lightbox portrait mode: push text under * Fix lightbox portrait mode: push text under
* Add mail frequency slider * Add mail frequency slider
* Replace Project Time Zone with browser Time Zone when uploading media? * Replace Project Time Zone with browser Time Zone when uploading media?
* Improve elevation module perfs * Use WMTS servers directly when not using Geo Caching Server