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

On resize management

Browse Source
This commit is contained in:
Franzz
2019-04-09 22:34:56 +02:00
parent d8a938af31
commit 5983cab494
8 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
masks/project.html
View File

@@ -39,15 +39,42 @@ oSpot.pageInit = function(asHash) {
initPage(asHash);
};
self.onResize = function() {
self.tmp('mobile', $('#mobile').is(':visible'));
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'));
}
};
function toggleFeedPanel(bShow, bTriggerResize) {
bTriggerResize = bTriggerResize || true;
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'));
if(bTriggerResize) setTimeout(function() {oSpot.onResize();}, 500);
}
function isMobile() {
self.tmp('mobile', $('#mobile').is(':visible'));
return self.tmp('mobile');
}
function initPage(asHash) {
if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]);
else {
self.tmp('$Map', $('#map'));
self.tmp('updatable', true);
self.tmp('out-of-data', false);
self.tmp('mobile', $('#mobile').is(':visible'));
self.tmp('feed_width', self.tmp('mobile')?0:$('#feed').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
toggleFeedPanel(!isMobile(), false);
oSpot.onResize();
self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
self.tmp('markers', 'object');
self.tmp('marker_size', {width: 32, height: 32});
@@ -150,9 +177,8 @@ function onAutoUpdate(bFirstExec) {
setFeedUpdateTimer(60, onAutoUpdate);
}
function toggleFeedPanel(bShow) {
if(typeof bShow === 'undefined') $('#projects').toggleClass('with-feed');
else $('#projects').toggleClass('with-feed', bShow);
function getElevWidth() {
return $('#projects').width() - oSpot.tmp('feed_width') - $('.leaflet-bottom.leaflet-left').outerWidth(true) - 6;
}
function initSpotMessages(aoMessages, aoTracks) {
@@ -176,7 +202,6 @@ function initSpotMessages(aoMessages, aoTracks) {
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);
@@ -188,7 +213,6 @@ function initSpotMessages(aoMessages, aoTracks) {
//Controls: Projects
var oProjects = L.control({position: 'bottomleft'});
oProjects.onAdd = function(oMap) {
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};
@@ -215,7 +239,7 @@ function initSpotMessages(aoMessages, aoTracks) {
var oElev = L.control.elevation({
collapsed: true,
position: "bottomright",
width: $('#projects').width() - $('#feed').outerWidth(true) - $('.leaflet-bottom.leaflet-left').outerWidth(true) - 6,
width: getElevWidth(),
height: 129,
hoverNumber: {
decimalsX: 0, //distance (km)
@@ -225,6 +249,7 @@ function initSpotMessages(aoMessages, aoTracks) {
onExpand: function(){$('.leaflet-control-scale').hide();},
onCollapse: function(){$('.leaflet-control-scale').show();}
}).addTo(oMap);
self.tmp('elev', oElev);
//Controls: Tiles
L.control.layers(
@@ -263,7 +288,7 @@ function initSpotMessages(aoMessages, aoTracks) {
if(asProperties.type != 'hitchhiking') (oElev.addData.bind(oElev))(feature, oLayer);
}
}).addTo(oMap);
//Centering map
if(self.vars(['project', 'mode'])==self.consts.modes.blog && aoMessages.length > 0)
{
@@ -326,55 +351,13 @@ function initSpotMessages(aoMessages, aoTracks) {
});
}
function getBoundsZoomLevel(bounds, mapDim) {
var WORLD_DIM = { height: 256, width: 256 };
var ZOOM_MAX = 21;
function latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}
function zoom(mapPx, worldPx, fraction) {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var latFraction = (latRad(ne.lat) - latRad(sw.lat)) / Math.PI;
var lngDiff = ne.lng - sw.lng;
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
return Math.min(latZoom, lngZoom, ZOOM_MAX);
}
L.Map.include({
setOffsetView: function (iOffsetRatioX, oCenter, iZoomLevel) {
var oCenter = (typeof oCenter == 'object')?$.extend({}, oCenter):this.getCenter();
iZoomLevel = iZoomLevel || this.getZoom();
var oBounds = this.getBounds();
var iOffsetX = (oBounds.getEast() - oBounds.getWest()) * iOffsetRatioX / ( 2 * Math.pow(2, iZoomLevel - this.getZoom()));
oCenter.lng = oCenter.lng - iOffsetX;
this.setView(oCenter, iZoomLevel);
}
});
function onFeedScroll(){
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)
{
function updateFeed(bFirstChunk, bDiscrete) {
bFirstChunk = bFirstChunk || false;
bDiscrete = bDiscrete || false;
@@ -419,15 +402,14 @@ function setFeedUpdateTimer(iSeconds, fCallback) {
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', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
var sAbsTime = asPost.formatted_time;
var $Body = {};
switch(asPost.type)
{
switch(asPost.type) {
case 'message':
$Body = $('<div>')
.data('id', asPost.id_message)
@@ -472,6 +454,7 @@ function getPost(asPost) {
$Body = $('<p>', {'class':'flicker'}).addIcon('fa-post');
break;
}
$Post
.append($('<div>', {'class':'header'})
.append($('<span>', {'class':'index'}).addIcon('fa-'+asPost.type))
@@ -484,6 +467,7 @@ function getPost(asPost) {
}
function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
var sMarker = (sMapId=='static')?('&marker='+encodeURI('https://spot.lutran.fr/images/footprint_mapbox.png')):'';
return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat+sMarker;
}
</script>