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

Simplify title & panels mecanism

Browse Source
This commit is contained in:
Franzz
2021-10-18 20:54:58 +02:00
parent 85386933ef
commit 7cd9c17c8c
6 changed files with 96 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
masks/project.html
View File

@@ -38,15 +38,15 @@
<div id="loading"></div>
</div>
</div>
<div id="title" class="leaflet-control spot-control"><span id="project_name" class="leaflet-control-attribution"></span></div>
<div id="elems">
<div id="settings-button" class="spot-control"><i class="fa fa-menu"></i></div>
<div id="post-button" class="spot-control"><i class="fa"></i></div>
<div id="feed-button" class="spot-control"><i class="fa"></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_off-track[#]</span></div>
<div class="track"><span class="line hitchhiking"></span><span class="desc">[#]lang:track_hitchhiking[#]</span></div>
</div>
<div id="title" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded leaflet-control-inline"><span id="project_name" class=""></span></div>
</div>
</div>
<div id="mobile" class="mobile"></div>
@@ -104,10 +104,6 @@ function toggleFeedPanel(bShow, sMapAction) {
self.tmp('$Projects').toggleClass('with-feed', (typeof bShow === 'undefined')?null:bShow);
bShow = isFeedPanelOpen();
oSpot.onResize();
if(isMobile()) {
$('#settings-button').toggle(!bShow);
toggleTitle(!bShow);
}
sMapAction = sMapAction || 'panTo';
switch(sMapAction) {
@@ -126,8 +122,6 @@ function toggleSettingsPanel(bShow, sMapAction) {
self.tmp('$Projects').toggleClass('with-settings', (typeof bShow === 'undefined')?null:bShow);
oSpot.onResize();
bShow = isSettingsPanelOpen();
if(isMobile()) $('#post-button').toggle(!bShow);
toggleTitle(!bShow);
sMapAction = sMapAction || 'panTo';
switch(sMapAction) {
@@ -141,11 +135,6 @@ function isSettingsPanelOpen() {
return self.tmp('$Projects').hasClass('with-settings');
}
function toggleTitle(bShow) {
if(bShow) self.tmp('$Title').delay(300).fadeTo(500, 1);
else self.tmp('$Title').css('opacity', '0');
}
function updateSettingsPanel(asLastUpdate) {
var $LastUpdate = self.tmp('$Settings').find('#last_update').toggle(self.vars(['project', 'mode']) == self.consts.modes.blog && asLastUpdate.unix_time > 0);
$LastUpdate.find('abbr')
@@ -394,9 +383,15 @@ function initSpotMessages(aoMessages, aoTracks) {
oSettingsPanel.onAdd = function(oMap) {return $SettingsButton[0];};
oSettingsPanel.addTo(oMap);
//Project Title
var oTitle = L.control({position: 'topleft'});
var $Title = $('#title').clone();
oTitle.onAdd = function(oMap) {return $Title[0];};
oTitle.addTo(oMap);
//Controls: Feed Panel
var oFeedPanel = L.control({position: 'topright'});
var $PostButton = $('#post-button').clone();
var $PostButton = $('#feed-button').clone();
$PostButton.click(toggleFeedPanel);
oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
oFeedPanel.addTo(oMap);
@@ -571,7 +566,8 @@ function initSpotMessages(aoMessages, aoTracks) {
var oLastMsg = (aoMessages.length > 0)?aoMessages[aoMessages.length-1]:{};
//Centering map
var iPanelWidth = isMobile()?0:parseInt(self.tmp('$Feed').outerWidth(true));
var bIsMobile = isMobile();
var iPanelWidth = bIsMobile?0:parseInt(self.tmp('$Feed').outerWidth(true));
if(
self.vars(['project', 'mode']) == self.consts.modes.blog &&
!$.isEmptyObject(oLastMsg) &&
@@ -579,9 +575,17 @@ function initSpotMessages(aoMessages, aoTracks) {
) {
//Zoom on last message
oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
oMap.panBy([iPanelWidth/2, 0]);
oMap.panBy([iPanelWidth/2, bIsMobile?(self.tmp('$Title').outerHeight(true) * -1/2):0]);
}
else {
oMap.fitBounds(
self.tmp('track').getBounds(),
{
paddingTopLeft: L.point(5, 5 + self.tmp('marker_size').height + (bIsMobile?self.tmp('$Title').outerHeight(true):0)),
paddingBottomRight: L.point(5 + iPanelWidth, 5)
}
);
}
else oMap.fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(5 + iPanelWidth, 5)});
//Add Spot messages
addSpotMessages(aoMessages);
@@ -637,7 +641,7 @@ function addSpotMessages(aoMessages) {
//Weather
if(oMsg.weather_icon && oMsg.weather_icon!='unknown') {
$Tooltip.append($('<p>', {'class':'weather', 'title':oSpot.lang(oMsg.weather_cond)})
$Tooltip.append($('<p>', {'class':'weather', 'title':(oMsg.weather_cond==''?'':oSpot.lang(oMsg.weather_cond))})
.addIcon('fa-'+oMsg.weather_icon+' fa-fw fa-lg', true)
.append(oMsg.weather_temp+'°C')
);