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

foldable feed panel

Browse Source
This commit is contained in:
Franzz
2019-03-10 15:50:58 +01:00
parent 7abce20d9f
commit 4c9738924c
7 changed files with 138 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
masks/project.html
View File

@@ -1,4 +1,4 @@
<div id="messages">
<div id="projects">
<div id="submap">
<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
</div>
@@ -11,6 +11,7 @@
</div>
</div>
<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="line main">Trajet principal</div>
<div class="line off-track">Variante</div>
@@ -18,6 +19,7 @@
</div>
</div>
</div>
<div id="mobile" class="mobile"></div>
<script type="text/javascript" src="script/lightbox.min.js"></script>
<script type="text/javascript">
oSpot.onSamePageMove = function(asHash) {
@@ -42,6 +44,7 @@ function initPage(asHash) {
self.tmp('$Map', $('#map'));
self.tmp('updatable', true);
self.tmp('out-of-data', false);
self.tmp('mobile', $('#mobile').is(':visible'));
self.tmp('feed_width', $('#feed').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
@@ -133,15 +136,23 @@ function initPosts() {
}
//Feed auto-update
if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate();
self.tmp('simple-bar').getScrollElement().scrollTop = 0;
if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate(true);
else updateFeed(true);
}
function onAutoUpdate() {
if(self.tmp('simple-bar').scrollContentEl.scrollTop == 0) updateFeed(true, true);
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 toggleFeedPanel(bShow) {
if(typeof bShow === 'undefined') $('#projects').toggleClass('with-feed');
else $('#projects').toggleClass('with-feed', bShow);
}
function initSpotMessages(aoMessages, aoTracks) {
//Tile layers
@@ -159,6 +170,14 @@ function initSpotMessages(aoMessages, aoTracks) {
});
self.tmp('map', oMap);
//Controls: Feed Panel
var oFeedPanel = L.control({position: 'topright'});
var $PostButton = $('#post-button').clone();
$PostButton.click(toggleFeedPanel);
toggleFeedPanel(!self.tmp('mobile'));
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];};
@@ -255,7 +274,7 @@ function initSpotMessages(aoMessages, aoTracks) {
}
else oMap.fitBounds(oTracks.getBounds(), {paddingTopLeft: L.point(5, 42), paddingBottomRight: L.point(self.tmp('feed_width')+5, 5)});
//Building messages
//Spot Messages
$.each(aoMessages, function(iKey, oMsg){
//Marker
@@ -277,7 +296,7 @@ function initSpotMessages(aoMessages, aoTracks) {
.append('Message '+oMsg.type+' '+oMsg.displayed_id))
.append($('<p>', {'class':'time'})
.addIcon('fa-time')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')))
.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)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
@@ -296,7 +315,7 @@ function initSpotMessages(aoMessages, aoTracks) {
oMarker.bindPopup($Tooltip[0], {
maxWidth: 1000,
keepInView: true,
autoPan: false,
closeOnClick: true,
offset: new L.Point(0, -30)
});
@@ -367,12 +386,12 @@ function updateFeed(bFirstChunk, bDiscrete)
if(bFirstChunk===true) {
self.tmp('news_chunk', 0);
$('#submap').removeClass('with_feed');
$('#projects').removeClass('with-feed');
}
self.get('feed', function(asData) {
$('#loading').hide();
$('#submap').addClass('with_feed');
$('#projects').addClass('with-feed');
$.each(asData, function(iKey, asPost){
$Posts.append(getPost(asPost));
@@ -411,24 +430,27 @@ function getPost(asPost) {
{
case 'message':
$Body = $('<div>')
.data('id', asPost.id_message)
.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(
$('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getStaticMapUrl(asPost.latitude, asPost.longitude)})
.data('lat', asPost.latitude)
.data('lng', asPost.longitude)
.click(function(){
var $This = $(this);
var oCenter = L.latLng(parseFloat($This.data('lat')), parseFloat($This.data('lng')));
self.tmp('map').setOffsetView(self.tmp('map_offset'), oCenter, 13);
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
if(!oMarker.isPopupOpen()) oMarker.openPopup();
})
)
.data('id', asPost.id_message)
.hover(function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng())) oMarker.togglePopup();
else if(oMarker.isPopupOpen()) oMarker.closePopup();
});
.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 'picture':
var $Image = $('<img>', {'src': asPost.thumb_path, title: 'Click pour zoomer'/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});