On resize management

inc/spot.php

@@ -193,8 +193,8 @@ class Spot extends Main
 			{
 				$asMessage['latitude'] = floatval($asMessage['latitude']);
 				$asMessage['longitude'] = floatval($asMessage['longitude']);
-				$asMessage['lat_dms'] = self::DecToDMS($asMessage['latitude'], 'lat');
+				$asMessage['lat_dms'] = self::decToDms($asMessage['latitude'], 'lat');
-				$asMessage['lon_dms'] = self::DecToDMS($asMessage['longitude'], 'lon');
+				$asMessage['lon_dms'] = self::decToDms($asMessage['longitude'], 'lon');
 				$asMessage['displayed_id'] = 'N°'.($iIndex + 1);
 				
 				$this->addTimeStamp($asMessage, $asMessage['unix_time']);
@@ -354,15 +354,15 @@ class Spot extends Main
 		return self::getJsonResult($bSuccess, $sDesc, array('values'=>$this->oProject->getProject()));
 	}
 	
-	public static function DecToDMS($dValue, $sType='lat') {
+	public static function decToDms($dValue, $sType) {
-		if($sType=='lat')	$sDirection = ($dValue >= 0)?'N':'S';
+		if($sType=='lat')	$sDirection = ($dValue >= 0)?'N':'S'; //Latitude
-		else				$sDirection = ($dValue >= 0)?'E':'W';
+		else				$sDirection = ($dValue >= 0)?'E':'W'; //Longitude
 		
-		$dAbsValue = abs($dValue);
+		$dLeft = abs($dValue);
 		
 		//Degrees
-		$iDegree = floor($dAbsValue);
+		$iDegree = floor($dLeft);
-		$dLeft = $dAbsValue - $iDegree;
+		$dLeft -= $iDegree;
 		
 		//Minutes
 		$iMinute = floor($dLeft * 60);

masks/admin.html

@@ -14,15 +14,12 @@
 	<div id="feedback"></div>
 </div>
 <script type="text/javascript">
-
 oSpot.pageInit = function(asHash) {
 	self.get(
 		'get_admin', 
 		function(asData){
 			setProjects(asData.projects);
-		},
+		}
-		{},
-		function(e){console.log(e);}
 	);
 };
 
@@ -59,8 +56,9 @@ function setProjects(asProjects) {
 
 function commit(event, $This) {
 	$This = $This || $(this);
+	var sOldVal = $This.data('old_value');
 	var sNewVal = $This.val();
-	if($This.data('old_value')!=sNewVal) {
+	if(sOldVal!=sNewVal) {
 		$This.data('old_value', sNewVal);
 		
 		var asInputs = {project_id: $This.closest('tr').data('project_id'), field: $This.attr('name'), value: sNewVal}; 
@@ -72,6 +70,7 @@ function commit(event, $This) {
 			},
 			asInputs,
 			function(sError){
+				$This.data('old_value', sOldVal);
 				oSpot.onFeedback('error', sError, asInputs);
 			}
 		);
@@ -80,6 +79,6 @@ function commit(event, $This) {
 
 function waitAndCommit(event) {
 	if(typeof self.tmp('wait') != 'undefined') clearTimeout(self.tmp('wait'));
-	self.tmp('wait', setTimeout(()=>{commit(event,$(this));}, 1000));
+	self.tmp('wait', setTimeout(()=>{commit(event,$(this));}, 2000));
 }
 </script>

masks/project.html

@@ -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'));
+		toggleFeedPanel(!isMobile(), false);
-		self.tmp('feed_width', self.tmp('mobile')?0:$('#feed').outerWidth(true));
+		oSpot.onResize();
-		self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
 		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) {
+function getElevWidth() {
-	if(typeof bShow === 'undefined') $('#projects').toggleClass('with-feed');
+	return $('#projects').width() - oSpot.tmp('feed_width') - $('.leaflet-bottom.leaflet-left').outerWidth(true) - 6;
-	else $('#projects').toggleClass('with-feed', bShow);
 }
 
 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) {
+function onFeedScroll() {
-	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(){
 	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>

script/spot.js

@@ -3,7 +3,7 @@ function Spot(asGlobals)
 	self = this;
 	this.consts = asGlobals.consts;
 	this.consts.hash_sep = '-';
-	this.consts.title = 'Te Araroa';
+	this.consts.title = 'Spotty';
 	this.consts.default_page = 'project';
 	
 	/* Initialization */
@@ -20,14 +20,15 @@ function Spot(asGlobals)
 		self.elem.container = $('#container');
 		self.elem.main = $('#main');
 		
+		self.resetTmpFunctions();
+		
 		//on window resize
-		//$(window).resize(self.onResize).resize();
+		$(window).on('resize', function(){self.onResize();});
 		
 		//Setup menu
 		//self.initMenu();
 		
 		//Hash management
-		self.resetTmpFunctions();
 		$(window)
 			.bind('hashchange', self.onHashChange)
 			.trigger('hashchange');
@@ -63,7 +64,7 @@ function Spot(asGlobals)
 	this.get = function(sAction, fOnSuccess, oVars, fOnError, bProcessIcon)
 	{
 		if(!oVars) oVars = {};
-		fOnError = fOnError || function(textStatus, errorThrown) {console.log(textStatus+' '+errorThrown);};
+		fOnError = fOnError || function(sError) {console.log(sError);};
 		bProcessIcon = bProcessIcon || false;
 		//if(bProcessIcon) self.addBufferIcon();
 		
@@ -86,7 +87,7 @@ function Spot(asGlobals)
 			.fail(function(jqXHR, textStatus, errorThrown)
 			{
 				//if(bProcessIcon) self.resetIcon();
-				fOnError(textStatus, errorThrown);
+				fOnError(textStatus+' '+errorThrown);
 			});
 	};
 	
@@ -147,6 +148,7 @@ function Spot(asGlobals)
 		self.pageInit = function(asHash){console.log('no init for the page: '+asHash.page)};
 		self.onSamePageMove = function(asHash){return false};
 		self.onQuitPage = function(){return true};
+		self.onResize = function(){};
 		self.onFeedback = function(sType, sMsg){feedback(sType, sMsg);};
 	};