Add project radio buttons

inc/project.php

@@ -85,13 +85,14 @@ class Project extends PhpObject {
 		if($iProjectId > 0) $asInfo['constraint'] = array(Db::getId(self::PROJ_TABLE)=>$iProjectId);
 		
 		$asProjects = $this->oDb->selectRows($asInfo, 'codename');
-		foreach($asProjects as &$asProject) {
+		foreach($asProjects as $sCodeName=>&$asProject) {
 			switch($asProject['mode']) {
 				case 0: $asProject['mode'] = self::MODE_PREVIZ; break;
 				case 1: $asProject['mode'] = self::MODE_BLOG; break;
 				case 2: $asProject['mode'] = self::MODE_HISTO; break;
 			}
 			$asProject['geofile'] = Spot::addTimestampToFilePath(self::GEO_FOLDER.$asProject['geofile']);
+			$asProject['codename'] = $sCodeName;
 		}
 		return $asProjects;
 	}

masks/project.html

@@ -1,15 +1,6 @@
 <div id="messages">
-	<div id="map">
+	<div class="loader fa fa-fw fa-map"></div>
-		<div class="loader fa fa-map"></div>
+	<div id="map"></div>
-	</div>
-	<div id="projects">
-		
-	</div>
-	<div id="legend">
-		<div class="line main">Trajet principal</div>
-		<div class="line off-track">Variante</div>
-		<div class="line hitchhiking">Hors rando</div>
-	</div>
 	<div id="feed">
 		<div id="posts">
 			<div id="poster"></div>
@@ -17,6 +8,13 @@
 			<div id="loading"></div>
 		</div>
 	</div>
+	<div id="elems">
+		<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>
+			<div class="line hitchhiking">Hors rando</div>
+		</div>
+	</div>
 </div>
 <script type="text/javascript" src="script/lightbox.min.js"></script>
 <script type="text/javascript">
@@ -24,37 +22,47 @@ self.onSamePageMove = function(asHash){
 	if(typeof self.tmp('map') != 'undefined') {
 		self.tmp('map').remove();
 		self.tmp('$Map').empty();
+		self.tmp('map', null);
 	}
-	self.pageInit(asHash);
+	initProject(asHash.items[0]);
 	return false;
 };
 
 oSpot.pageInit = function(asHash)
 {
 	//Set active project
-	if(asHash.items.length==0) {
+	if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]);
-		self.setHash(asHash.page, [self.vars('default_project_codename')]);
+	else {
-		return;
+		self.tmp('$Map', $('#map'));
+		self.tmp('updatable', true);
+		self.tmp('out-of-data', false);
+		self.tmp('feed_width', $('#feed').outerWidth(true));
+		self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
+		self.tmp('map_padding', 0.05);
+		self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
+		
+		//Assign Track Type Colors
+		self.tmp('track-type-styles', 'object');
+		$('#legend').find('.line').each(function(iKey, oLegend){
+			var $Legend = $(oLegend);
+			var sTrackType = $Legend.attr('class').replace('line', '').trim();
+			self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1});
+		});
+		
+		//Scrollbar
+		self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
+		self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
+
+		//Add "Loading" Post
+		getPost({type: 'loading', formatted_time: '', relative_time: '', displayed_id: 'Chargement...'}).appendTo($('#loading'));
+
+		//project Bootstrap
+		initProject(asHash.items[0]);
 	}
-	self.vars('project', self.vars(['projects', asHash.items[0]]));
+};
-	self.tmp('$Map', $('#map'));
+
-	self.tmp('track-type-styles', 'object');
+function initProject(sProjectCodeName){
-	
+	self.vars('project', self.vars(['projects', sProjectCodeName]));
-	//Assign Track Type Colors
-	$('#legend').find('.line').each(function(iKey, oLegend){
-		var $Legend = $(oLegend);
-		var sTrackType = $Legend.attr('class').replace('line', '').trim();
-		self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1});
-	});
-	
-	//Add "Loading" Post
-	var asLoading = {
-		type: 'loading',
-		formatted_time: '',
-		relative_time: '',
-		displayed_id: 'Chargement...'
-	};
-	getPost(asLoading).appendTo($('#loading'));
 	
 	//Spot Messages
 	$.when(
@@ -76,20 +84,9 @@ oSpot.pageInit = function(asHash)
 	//Posts
 	updateFeed(true);
 	initPosts();
-};
+}
 
-function buildSpotMessages(aoMessages, aoTracks){
+function buildSpotMessages(aoMessages, aoTracks) {
-	
-	//Build Feed
-	self.tmp('updatable', true);
-	self.tmp('out-of-data', 'boolean');
-	self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
-	self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
-	self.tmp('infowindow', 'boolean');
-	self.tmp('feed_width', $('#feed').outerWidth(true));
-	self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
-	self.tmp('map_padding', 0.05);
-	self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
 	
 	//Tile layers
 	var oMapBoxSat		= L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite', minZoom: 0, maxZoom: 19}),
@@ -215,29 +212,46 @@ function buildSpotMessages(aoMessages, aoTracks){
 	
 	//Legend
 	var oLegend = L.control({position: 'bottomleft'});
-	oLegend.onAdd = function(oMap) {return L.DomUtil.get('legend');};
+	oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
 	oLegend.addTo(oMap);
 	
 	//Projects
 	var oProjects = L.control({position: 'bottomleft'});
-	oProjects.onAdd = function(oMap) {return L.DomUtil.get('projects');};
+	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};
+			if(asProject.id == self.vars(['project', 'id'])) asRadioAttrs.checked = 'checked';
+			var $Radio =$('<input>', asRadioAttrs).change(function(){
+				self.setHash(self.vars('page'), [$(this).val()]);
+			});
+			
+			var $Label = $('<label>').append($('<div>')
+				.append($Radio)
+				.append($('<span>').text(' '+asProject.name))
+			);
+			$Labels.append($Label);
+		});
+		
+		return $('<div>', {'class':'leaflet-control-layers leaflet-control leaflet-control-layers-expanded'}).append($('<section>').append($Labels))[0];
+	};
 	oProjects.addTo(oMap);
 }
 
 function initPosts() {
-	if(self.vars(['project', 'mode'])==self.consts.modes.histo) $('#poster').hide();
+	var $Poster = $('#poster').empty();
+	if(self.vars(['project', 'mode'])==self.consts.modes.histo) $Poster.hide();
 	else {
 		var asPoster = {
 			type: 'poster',
 			formatted_time: '',
 			relative_time: 'Nouveau message'
 		};
-		getPost(asPoster).appendTo($('#poster'));
+		getPost(asPoster).appendTo($Poster);
 		
-		//$('#name').defaultVal('Nom...');
-		//$('#post').defaultVal('Ton message...');
 		$('#submit').click(function(){
-			if($('#poster').checkForm())
+			if($Poster.checkForm())
 			{
 				self.get(
 					'add_post',
@@ -343,7 +357,7 @@ function updateFeed(bFirstChunk)
 
 function getPost(asPost) {
 	var $Post = $('<div>', {'class':'post '+asPost.type});
-	var sRelTime = (self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time;
+	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)

style/_fa.scss

@@ -1,7 +1,7 @@
 $fa-font-path: "fa/fonts";
 $fa-css-prefix: fa;
 
-@import 'fa/light';
+@import 'fa/solid';
 @import 'fa/mixins';
 @import 'fa/core';
 @import 'fa/larger';
@@ -13,7 +13,7 @@ $fa-css-prefix: fa;
 @import 'fa/stacked';
 
 .fa {
-	@extend .fal;
+	@extend .fas;
 	
 	&.push {
 		margin-right: 0.5em;

style/spot.scss

@@ -7,6 +7,15 @@
 @import 'common';
 
 #messages {
+
+	.loader {
+		position: absolute;
+		font-size: 3em;
+		top: calc(50% - 0.5em);
+		left: calc(35% - 0.66666em);
+		color: #666;
+		@extend .flicker;
+	}
 	
 	#map {
 		position: absolute;
@@ -16,17 +25,6 @@
 		width: 100%;
 		background: #EEE;
 		
-		.loader {
-			position: absolute;
-			font-size: 3em;
-			width: 1em;
-			height: 1em;
-			top: calc(50% - 0.5em);
-			left: calc(50% - 0.5em);
-			color: #666;
-			@extend .flicker;
-		}
-	
 		.track_tooltip {
 			p {
 				margin: 0;
@@ -42,13 +40,23 @@
 		}
 	}
 
-	#legend, #projects, .leaflet-control-layers.leaflet-control {
+	.leaflet-control-layers.leaflet-control {
-		background-color: rgba(255, 255, 255, 0.5);
+		background-color: rgba(255, 255, 255, 0.6);
 		font-family: Roboto, Arial, sans-serif;
 		border-radius: 3px;
 		border: none;
 		margin: 1em;
+		
+		&.leaflet-control-layers-expanded {
+			color: #000000;
+			width: calc(100% - 2em - 16px);
+		}
+		
+		&+.leaflet-control-layers.leaflet-control {
+			margin-top: 0;
+		}
 	}
+
 	#legend {
 		//right: 30vw;
 					
@@ -74,6 +82,10 @@
 	}
 }
 
+#elems {
+	display: none;
+}
+
 #feed {
 	position: absolute;
 	right: 0;