adding customer sidebar + posts over map + add validity interval (histo)

.gitignore

@@ -6,3 +6,9 @@
 /.project
 /style/.sass-cache/
 /.settings/
+/files/*.jpg
+/files/*.JPG
+/files/*.jpeg
+/files/*.JPEG
+/files/*.png
+/files/*.PNG

inc/spot.php

@@ -174,10 +174,18 @@ class Spot extends Main
 	
 	private function getSpotMessages()
 	{
-		$asMessages = $this->oDb->selectRows(array('from'=>self::MSG_TABLE, 'orderBy'=>array('timestamp'=>'ASC')));
+		$asInfo = array('from'=>self::MSG_TABLE, 'orderBy'=>array('timestamp'=>'ASC'));
+		if(Settings::MODE==self::MODE_HISTO) {
+			$asInfo['constraint'] = array('timestamp'=>Settings::HISTO_SPAN);
+			$asInfo['constOpe'] = array('timestamp'=>"BETWEEN");
+		}
+		
+		$asMessages = $this->oDb->selectRows($asInfo);
 		foreach($asMessages as $iKey=>$asMessage)
 		{
 			$iUnixTimeStamp = strtotime($asMessage['timestamp']);
+			$asMessages[$iKey]['latitude'] = floatval($asMessages[$iKey]['latitude']);
+			$asMessages[$iKey]['longitude'] = floatval($asMessages[$iKey]['longitude']);
 			$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
 			$asMessages[$iKey]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
 		}
@@ -199,7 +207,7 @@ class Spot extends Main
 		}
 		
 		//Pictures
-		$asPicPaths = glob('files/*.*');
+		$asPicPaths = glob('files/*.{jpg,JPG,jpeg,JPEG,png,PNG}', GLOB_BRACE);
 		foreach($asPicPaths as $iKey=>$sPicPath)
 		{
 			//Finding picture timestamp
@@ -207,11 +215,17 @@ class Spot extends Main
 			$iPicTimeStamp = $asPicInfo['timestamp'];
 			
 			//Preparing pictures sorting key and related info
-			$asPics[($iPicTimeStamp*-1).'.1'.$iKey] = array(	'type'			=> 'picture',
+			if(	Settings::MODE!=self::MODE_HISTO || 
+				($iPicTimeStamp>=strtotime(Settings::HISTO_SPAN['from']) && $iPicTimeStamp<=strtotime(Settings::HISTO_SPAN['to']))) {
+					
+				$asPics[($iPicTimeStamp*-1).'.1'.$iKey] = array(
+					'type'			=> 'picture',
 					'path'			=> $sPicPath,
 					'rotate'		=> $asPicInfo['rotate'],
 					'formatted_time'=> date(self::FORMAT_TIME, $iPicTimeStamp),
-															'relative_time'	=> Toolbox::getDateTimeDesc($iPicTimeStamp));
+					'relative_time'	=> Toolbox::getDateTimeDesc($iPicTimeStamp)
+				);
+			}
 		}
 		ksort($asPics);
 		$iCount = count($asPics);
@@ -222,7 +236,12 @@ class Spot extends Main
 		}
 		
 		//Post
-		$asPosts = $this->oDb->selectRows(array('from'=>self::POST_TABLE));
+		$asInfo = array('from'=>self::POST_TABLE);
+		if(Settings::MODE==self::MODE_HISTO) {
+			$asInfo['constraint'] = array('led'=>Settings::HISTO_SPAN);
+			$asInfo['constOpe'] = array('led'=>"BETWEEN");
+		}
+		$asPosts = $this->oDb->selectRows($asInfo);
 		foreach($asPosts as $asPost)
 		{
 			$iUnixTimeStamp = strtotime($asPost['led']);
@@ -269,6 +288,7 @@ class Spot extends Main
 		//if($iPicTimeStamp >= self::HONEYMOON_DATE_BEG && $iPicTimeStamp <= self::HONEYMOON_DATE_END) $iPicTimeStamp -= 60*60*(12+1); //timezone + daylight saving
 	
 		//Orientation
+		if(array_key_exists('Orientation', $asExif['IFD0'])) {
 			switch($asExif['IFD0']['Orientation'])
 			{
 				case 1: $sRotate = '0';		break; //None
@@ -277,6 +297,8 @@ class Spot extends Main
 				case 8: $sRotate = '-90';	break; //Trigo
 				default: $sRotate = $asExif['IFD0']['Orientation'];
 			}
+		}
+		else $sRotate = '0';
 		
 		return array('timestamp'=>$iPicTimeStamp, 'rotate'=>$sRotate);
 	}

masks/messages.html

@@ -2,15 +2,16 @@
 	<div id="map">
 		<div class="loader fa fa-map"></div>
 	</div>
-	<div id="legend"></div>
+	<div id="legend">
-	<div id="feed">
+		<div class="line green">Te Araroa</div>
-		<div id="poster">
+		<div class="line blue">Routeburn Track</div>
-			<input id="post" name="post" type="text" />
+		<div class="line red">Hors rando</div>
-			<input id="name" name="name" type="text" /><button id="submit" name="submit" type="button" class="">+</button>
 	</div>
+	<div id="feed">
 		<div id="posts">
+			<div id="poster"></div>
 			<div id="posts_list"></div>
-			<div id="next_posts"><button id="add_posts" name="add_posts" type="button">Messages plus anciens</button>
+			<div id="next_posts"><button id="add_posts" name="add_posts" type="button" class="post">Messages plus anciens</button></div>
 		</div>
 	</div>
 </div>
@@ -18,6 +19,7 @@
 <script type="text/javascript">
 oSpot.pageInit = function(asHash)
 {
+	self.tmp('$Map', $('#map'));
 	$('#add_posts').click(updateFeed);
 	self.get('messages', function(oMessages){
 		
@@ -25,11 +27,12 @@ oSpot.pageInit = function(asHash)
 		updateFeed(true);
 		//setInterval(updateFeed, 60 * 1000); //refresh every minute
 		
-		//Centering map on last message
+		//Centering map
 		var agCenter = {lat:0, lng:0};
 		var iZoom = 0;
 		if(self.vars('mode')=='blog')
 		{
+			//on last message
 			var oLastMsg = oMessages[oMessages.length-1];
 			agCenter.lat = oLastMsg.latitude;
 			agCenter.lng = oLastMsg.longitude;
@@ -37,16 +40,50 @@ oSpot.pageInit = function(asHash)
 		}
 		else
 		{
-			agCenter.lat = -43.75;
+			var iMapRatio = 0.7;
-			agCenter.lng = 171;
+			var iMinLat, iMaxLat, iMinLng, iMaxLng;
-			iZoom = 7;
+			iMinLat = iMinLng = 180;
+			iMaxLat = iMaxLng = -180;
+			$.each(oMessages, function(iKey, oMsg){
+				iMinLat = Math.min(iMinLat, oMsg.latitude);
+				iMaxLat = Math.max(iMaxLat, oMsg.latitude);
+				iMinLng = Math.min(iMinLng, oMsg.longitude);
+				iMaxLng = Math.max(iMaxLng, oMsg.longitude);
+			});
+			
+			//Get Marker bounds
+			var oSouthWest = {lat:iMinLat, lng:iMinLng};
+			var oNorthEast = {lat:iMaxLat, lng:iMaxLng};
+			oMarkerBounds = new google.maps.LatLngBounds(oSouthWest, oNorthEast);
+			agCenter = oMarkerBounds.getCenter();
+			
+			//Calculate adequate zoom (map.fitBounds is dezooming too much)
+			var oMapDim = {height: self.tmp('$Map').height()*0.95, width: self.tmp('$Map').width()*(iMapRatio - 0.05)};
+			iZoom = getBoundsZoomLevel(oMarkerBounds, oMapDim);
 		}
 		
-		var oMap = new google.maps.Map(document.getElementById('map'), {
+		var oMap = new google.maps.Map(self.tmp('$Map')[0], {
 			center: agCenter,
 			zoom: iZoom,
 			mapTypeId: google.maps.MapTypeId.SATELLITE,
-			scaleControl: true
+			scaleControl: true,
+			scaleControlOptions: {
+				position: google.maps.ControlPosition.TOP_LEFT
+			},
+			mapTypeControl: true,
+			mapTypeControlOptions: {
+				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
+				position: google.maps.ControlPosition.TOP_LEFT
+			},
+			zoomControl: true,
+			zoomControlOptions: {
+				position: google.maps.ControlPosition.LEFT_TOP
+			},
+			fullscreenControl: true,
+			fullscreenControlOptions: {
+				position: google.maps.ControlPosition.LEFT_BOTTOM
+			},
+			streetViewControl: false
 		});
 
 		var oKmlLayer = new google.maps.KmlLayer({
@@ -59,7 +96,7 @@ oSpot.pageInit = function(asHash)
 		$.each(oMessages, function(iKey, oMsg){
 			var oMarker = new google.maps.Marker({
 				id: oMsg.id_message,
-				position: {lat:Number(oMsg.latitude), lng:Number(oMsg.longitude)},
+				position: {lat:oMsg.latitude, lng:oMsg.longitude},
 				//animation: google.maps.Animation.DROP,
 				icon: (iKey%2==0)?'images/footprint_alt.png':'images/footprint.png',
 				map: oMap,
@@ -83,27 +120,43 @@ oSpot.pageInit = function(asHash)
 			});
 		});
 		
-		//Legend
+		//Recenter map once loaded to be at the center of 70% (iMapRatio) of the page
-		var oLegend = document.getElementById('legend');
+		if(self.vars('mode')!='blog')
-		var asRoutes = {
+		{
-			teararoa: {'class': 'green', title: 'Te Araroa'},
+			oProjListener = oMap.addListener('projection_changed', function() {
-			routeburn: {'class': 'blue', title: 'Routeburn Track'},
+				
-			offtrack: {'class': 'red', title: 'Hors rando'}
+				var iZoom = self.tmp('map').getZoom();
-		};
+				
-		for(var sKey in asRoutes) {
+				var oCenterLatLng = self.tmp('map').getCenter();
-			var oDiv = document.createElement('div');
+				var oCenterPoint = self.tmp('map').getProjection().fromLatLngToPoint(oCenterLatLng);
-			oDiv.className = 'line '+asRoutes[sKey]['class'];
+				
-			oDiv.innerHTML = asRoutes[sKey].title;
+				var iOffsetX = self.tmp('$Map').width()*(iMapRatio - 1)/2;
-			oLegend.appendChild(oDiv);
+			    var iOffsetPointX = new google.maps.Point(iOffsetX / Math.pow(2, iZoom), 0).x;
+
+			    var oNewCenterPoint = new google.maps.Point(oCenterPoint.x - iOffsetPointX, oCenterPoint.y);
+			    var oNewCenterLatLng = self.tmp('map').getProjection().fromPointToLatLng(oNewCenterPoint);
+			    self.tmp('map').setCenter(oNewCenterLatLng);
+				
+				oProjListener.remove();
+			});
 		}
-		oMap.controls[google.maps.ControlPosition.TOP_CENTER].push(oLegend);
+		
+		//Legend
+		oMap.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push($('#legend')[0]);
 		
 		self.tmp('map', oMap);
 	});
 	
 	//Post
 	if(self.vars('mode')=='histo') $('#poster').hide();
-	else $('#posts').css('top', $('#poster').outerHeight());
+	else {
+		var asPoster = {
+			type: 'poster',
+			formatted_time: '',
+			relative_time: 'Nouveau message'
+		};
+		getPost(asPoster).appendTo($('#poster'));
+		
 		$('#name').defaultVal('Nom...');
 		$('#post').defaultVal('Ton message...');
 		$('#submit').click(function(){
@@ -121,8 +174,37 @@ oSpot.pageInit = function(asHash)
 				);
 			}
 		});
+	}
 };
 
+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);
+}
+
 function updateFeed(bFirstChunk)
 {
 	bFirstChunk = bFirstChunk || false;
@@ -137,6 +219,18 @@ function updateFeed(bFirstChunk)
 	self.get('feed', function(asData){
 		
 		$.each(asData, function(iKey, asPost){
+			getPost(asPost).appendTo($Posts);
+		});
+		
+		if(bFirstChunk===true) oSimpleBar = new SimpleBar($('#posts')[0]);
+		//else oSimpleBar.recalculate();
+		
+		self.tmp('news_chunk', self.tmp('news_chunk') + 1);
+		$('#next_posts').toggle(Object.keys(asData).length == self.vars('chunk_size'));
+	}, {'chunk':self.tmp('news_chunk')});
+}
+
+function getPost(asPost) {
 	var $Post = $('<div>', {'class':'post '+asPost.type});
 	var sRelTime = (self.vars('mode')=='histo')?asPost.formatted_time.substr(0, 10):asPost.relative_time;
 	var sAbsTime = asPost.formatted_time;
@@ -170,20 +264,24 @@ function updateFeed(bFirstChunk)
 						.append($('<p>', {'class':'signature'}).text('-- '+asPost.name));
 			sClass = 'comment';
 			break;
+		case 'poster':
+			$Body = $('<p>', {'class':'message'})
+						.append($('<input>', {type:'text', id:'post', name:'post'}))
+						.append($('<input>', {type:'text', id:'name', name:'name'}))
+						.append($('<button>', {type:'button', id:'submit', name:'submit'}).addIcon('fa-send'));
+			sClass = 'comment';
+			break;
 	}
 	$Post
 		.append($('<div>', {'class':'header'})
 			.append($('<span>', {'class':'index'}).addIcon('fa-'+sClass))
 			.append($('<span>', {'class':'time', 'title':sAbsTime}).text(sRelTime)))
-				.append($('<div>', {'class':'body'}).append($Body))
+		.append($('<div>', {'class':'body'}).append($Body));
-				.appendTo($Posts);
 	
 	if(asPost.id) $Post.find('.index').append(' '+asPost.id);
 	
 	//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
-		});
+	
-		self.tmp('news_chunk', self.tmp('news_chunk') + 1);
+	return $Post;
-		$('#next_posts').toggle(Object.keys(asData).length == self.vars('chunk_size'));
-	}, {'chunk':self.tmp('news_chunk')});
 }
 </script>

settings-sample.php

@@ -11,6 +11,7 @@ class Settings
 	const TIMEZONE = 'Europe/Paris';
 	const API_KEY = '';
 	const MODE = Spot::MODE_BLOG; //Spot::MODE_HISTO/MODE_BLOG
+	const HISTO_SPAN = array('from'=>'2015-12-29 00:00:00', 'to'=>'2016-02-23 23:59:59');
 	const GOOGLE_MAPS_API_KEY = '';
 	const DEBUG = true;
 }

style/_simplebar.scss

@@ -0,0 +1,105 @@
+/*!
+ * 
+ *         SimpleBar.js - v2.6.1
+ *         Scrollbars, simpler.
+ *         https://grsmto.github.io/simplebar/
+ *         
+ *         Made by Adrien Grsmto from a fork by Jonathan Nicol
+ *         Under MIT License
+ *       
+ */
+[data-simplebar] {
+    position: relative;
+    z-index: 0;
+    overflow: hidden!important;
+    max-height: inherit;
+    -webkit-overflow-scrolling: touch; /* Trigger native scrolling for mobile, if not supported, plugin is used. */
+}
+
+[data-simplebar="init"] {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.simplebar-scroll-content {
+    overflow-x: hidden!important;
+    overflow-y: scroll;
+    min-width: 100%!important;
+    max-height: inherit!important;
+    -webkit-box-sizing: content-box!important;
+            box-sizing: content-box!important;
+}
+
+.simplebar-content {
+    overflow-y: hidden!important;
+    overflow-x: scroll;
+    -webkit-box-sizing: border-box!important;
+            box-sizing: border-box!important;
+    min-height: 100%!important;
+}
+
+.simplebar-track {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 11px;
+}
+
+.simplebar-scrollbar {
+    position: absolute;
+    right: 2px;
+    width: 7px;
+    min-height: 10px;
+}
+
+.simplebar-scrollbar:before {
+    position: absolute;
+    content: "";
+    background: black;
+    border-radius: 7px;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear;
+}
+
+.simplebar-track:hover .simplebar-scrollbar:before,
+.simplebar-track .simplebar-scrollbar.visible:before {
+    /* When hovered, remove all transitions from drag handle */
+    opacity: 0.5;
+    -webkit-transition: opacity 0 linear;
+    transition: opacity 0 linear;
+}
+
+.simplebar-track.vertical {
+    top: 0;
+}
+
+.simplebar-track.vertical .simplebar-scrollbar:before {
+    top: 2px;
+    bottom: 2px;
+}
+
+.simplebar-track.horizontal {
+    left: 0;
+    width: auto;
+    height: 11px;
+}
+
+.simplebar-track.horizontal .simplebar-scrollbar:before {
+    height: 100%;
+    left: 2px;
+    right: 2px;
+}
+
+.horizontal.simplebar-track .simplebar-scrollbar {
+    right: auto;
+    top: 2px;
+    height: 7px;
+    min-height: 0;
+    min-width: 10px;
+    width: auto;
+}

style/spot.scss

@@ -2,6 +2,7 @@
 
 @import 'fa';
 @import 'lightbox';
+@import 'simplebar';
 @import 'common';
 
 #map {
@@ -9,7 +10,7 @@
 	left: 0;
 	top: 0;
 	bottom: 0;
-	width:70%;
+	width: 100%;
 	background: #EEE;
 	
 	.loader {
@@ -29,7 +30,9 @@
 		background: rgba(255, 255, 255, 0.5);
 		border-radius: 3px;
 		padding: 1px 0 0 0;
-		margin-top: 10px;
+		margin-bottom: 1em;
+		right: calc(30% + 3em) !important;
+		bottom: calc(1em - 10px) !important;
 		
 		.line {
 			display: inline-block;
@@ -56,11 +59,10 @@
 
 #feed {
 	position: absolute;
-	right:0;
+	right: 1em;
-	top:0;
+	top: 0em;
-	bottom:0;
+	bottom: 0em;
-	width:30%;
+	width: calc(30% - 1em);
-	overflow:auto;
 	
 	input, button {
 		border: none;
@@ -78,12 +80,20 @@
 		background: #F7F7F7;
 	}
 	
+	#posts {
+		font-family: Arial;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 100%;
+		
 		#poster {
-		padding:1em;
+			
-		background:#EEE;
+			input, button {
-		border-bottom:1px solid #DDD;
+				border-radius: 3px;
-		position:fixed;
+				background-color: #d9deff;
-		width: calc(30% - 2em);
+				color: #323268;
+			}
 			
 			#post {
 				margin-bottom: 1em;
@@ -96,23 +106,28 @@
 			
 			#submit {
 				margin-left: 1em;
-			width: 3em;
+				background-color: #323268;
-		}
+				color: #B4BDFF;
-	}
+				margin-bottom: 0.5em;
 				
-	#posts {
+				&:hover {
-		font-family: Arial;
+					background-color: #d9deff;
-		overflow:auto;
+					color: #323268;			
-		position:absolute;
+				}	
-		top:0;
+			}
-		bottom:0;
+		}
-		width:100%;
 	
 		.post {
-			margin:1em;
+			margin-bottom: 1em;
 			background: #B4BDFF;
 			color: #323268;
 			border-radius: 0.5em;
+			width: calc(100% - 1em);
+			box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5);
+			
+			&:first-child {
+				margin-top: 2em;
+			}
 			
 			.message {
 				margin: 0.3em 0 0 0;
@@ -178,18 +193,21 @@
 			}
 		}
 		
-		.fa.push {
-			margin-right:0.5em;
-		}
-		
 		#next_posts {
-			margin: 1em;
 			display: none;
 			
 			button {
-				border-radius: 0.5em;
+				margin-top: 0;
-				width:100%;
+				background-color: #CCC;
+				color: #666;
 			}
+			button:hover {
+				color: #333;
+			}
+		}
+	
+		.fa.push {
+			margin-right: 0.5em;
 		}
 	}
 }
@@ -221,6 +239,3 @@
 	height: 18px;
 	background: green;
 }
-
-/* Other */
-