changes localization to new selector elements,

completed units selector,
modified localization selector

WebContent/OSRM.config.js

@@ -42,12 +42,12 @@ OSRM.DEFAULTS = {
 	LANGUAGE: "en",
 	LANUGAGE_ONDEMAND_RELOADING: true,
 	LANGUAGE_SUPPORTED: [ 
-		{display_name:"en", encoding:"en"},
+		{encoding:"en", name:"English"},
-		{display_name:"da", encoding:"da"},
+		{encoding:"da", name:"Dansk"},
-		{display_name:"de", encoding:"de"},
+		{encoding:"de", name:"Deutsch"},
-		{display_name:"fi", encoding:"fi"},
+		{encoding:"fi", name:"Suomi"},
-		{display_name:"fr", encoding:"fr"},
+		{encoding:"fr", name:"Français"},
-		{display_name:"pl", encoding:"pl"}
+		{encoding:"pl", name:"Polski"}
 	],
 		
 	TILE_SERVERS: [

WebContent/gui/OSRM.MainGUI.js

@@ -41,8 +41,8 @@ init: function() {
 	document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
 	document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET;
 	
-	// set default language
+	// init units selector
-	OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );
+	OSRM.GUI.initSelector( "gui-units-toggle", [{display:"Kilometers",value:0},{display:"Miles",value:1}], 0, OSRM.GUI.onUnitsChanged );
 },
 
 // set language dependent labels
@@ -52,6 +52,7 @@ setLabels: function() {
 	document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
 	document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
 	document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
+	document.getElementById("gui-option-show-previous-routes-label").innerHTML = OSRM.loc("GUI_SHOW_PREVIOUS_ROUTES");
 	document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH");
 	document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH");
 	document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":";
@@ -61,8 +62,12 @@ setLabels: function() {
 	document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE");
 	document.getElementById("gui-mapping-label").innerHTML = OSRM.loc("GUI_MAPPING_TOOLS");
 	document.getElementById("gui-config-label").innerHTML = OSRM.loc("GUI_CONFIGURATION");
-	document.getElementById("gui-language-label").innerHTML = OSRM.loc("GUI_LANGUAGE");
+	document.getElementById("gui-language-label").innerHTML = OSRM.loc("GUI_LANGUAGE")+":";
-	document.getElementById("gui-units-label").innerHTML = OSRM.loc("GUI_UNITS");
+	document.getElementById("gui-units-label").innerHTML = OSRM.loc("GUI_UNITS")+":";
+	
+	document.getElementById("gui-units-toggle").getElementsByTagName("option")[0].innerHTML = OSRM.loc("GUI_KILOMETERS");
+	document.getElementById("gui-units-toggle").getElementsByTagName("option")[1].innerHTML = OSRM.loc("GUI_MILES");
+	OSRM.GUI.selectorOnChange( document.getElementById("gui-units-toggle") );
 },
 
 // clear output area
@@ -85,6 +90,12 @@ afterMainTransition: function() {
 		zoom_controls[0].style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
 		zoom_controls[0].style.visibility="visible";
 	}
+},
+
+// toggle distance units
+onUnitsChanged: function(value) {
+	OSRM.Utils.setToHumanDistanceFunction(value);
+	OSRM.Routing.getRoute();
 }
 
-});
+});

WebContent/localization/OSRM.Localization.js

@@ -27,53 +27,31 @@ DIRECTORY: "localization/",
 // holds currently active language
 current_language: OSRM.DEFAULTS.LANGUAGE,
 
-// initialize localization
+//initialize localization
 init: function() {
-	// create dropdown menu
+	// fill option list and find default entry
-	var select = document.createElement('select');
+	var options = [];
-	select.id = "gui-language-toggle";
+	var options_2 = [];
-	select.className = "top-left-button";
+	var selected = 0;	
-	select.onchange = function() { OSRM.Localization.setLanguage(this.value); };	
-		
-	// fill dropdown menu
 	var supported_languages = OSRM.DEFAULTS.LANGUAGE_SUPPORTED;
 	for(var i=0, size=supported_languages.length; i<size; i++) {
-		var option=document.createElement("option");
+		options.push( {display:supported_languages[i].encoding, value:supported_languages[i].encoding} );
-		option.innerHTML = supported_languages[i].encoding;
+		options_2.push( {display:supported_languages[i].name, value:supported_languages[i].encoding} );
-		option.value = supported_languages[i].encoding;
+		if( supported_languages[i].encoding == OSRM.DEFAULTS.LANGUAGE )
-		select.appendChild(option);
+			selected=i;
 	}
-	select.value = OSRM.DEFAULTS.LANGUAGE; 
 	
-	// add element to DOM
+	// generate selectors
-	var input_mask_header = document.getElementById('input-mask-header'); 
+	OSRM.GUI.initSelector("gui-language-toggle", options, selected, OSRM.Localization.setLanguage);
-	input_mask_header.insertBefore(select,input_mask_header.firstChild);
+	OSRM.GUI.initSelector("gui-language-toggle-2", options_2, selected, OSRM.Localization.setLanguage);
 	
-	// create visible dropdown menu
+	// set default language
-	var textnode = document.createTextNode(OSRM.DEFAULTS.LANGUAGE);
+	OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );	
-	var myspan = document.createElement("span");
-	myspan.className = "styled-select";
-	myspan.id = "styled-select-" + select.id;
-	myspan.appendChild(textnode);
-	select.parentNode.insertBefore(myspan, select);
-	myspan.style.width = (select.clientWidth-2)+"px";
-	myspan.style.height = (select.clientHeight)+"px";
 },
-
-// perform language change
 setLanguage: function(language) {
+	// TODO: also change language of other selector
 	if( OSRM.Localization[language]) {
 		OSRM.Localization.current_language = language;
-		// update selector
-		if( select = document.getElementById('gui-language-toggle') ) {		// yes, = not == !
-			var option = select.getElementsByTagName("option");
-			select.value = language;
-			for(var i = 0; i < option.length; i++)
-				if(option[i].selected == true) {
-					document.getElementById("styled-select-" + select.id).childNodes[0].nodeValue = option[i].childNodes[0].nodeValue;
-					break;
-				}
-		}		
 		// change gui language		
 		OSRM.GUI.setLabels();
 		// requery data

WebContent/main.css

@@ -190,15 +190,6 @@ div.label
 	z-index: 5;
 }
 
-.styled-select
-{
-	position:absolute;
-	background-repeat:no-repeat;	
-	background-position: top right;
-	padding: 1px 1px 1px 1px;
-	overflow: hidden;
-}
-
 .top-left-button
 {
 	float:left;
@@ -501,7 +492,6 @@ div.label
 	-ms-user-select: none;
 	user-select: none;
 }
-
 .text-selectable
 {
 	cursor:default;
@@ -516,6 +506,23 @@ div.label
 	vertical-align:2px;
 }
 
+.styled-select-helper
+{
+	border: 0px;
+	text-decoration:none;
+ 	opacity: 0;
+	filter: alpha(opacity=0);
+	z-index: 5;
+}
+.styled-select
+{
+	position:absolute;
+	background-repeat:no-repeat;	
+	background-position: top right;
+	padding: 1px 1px 1px 1px;
+	overflow: hidden;
+}
+
 input[type=checkbox],
 select
 {

WebContent/main.html

@@ -60,6 +60,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <script src="gui/OSRM.GUI.js" type="text/javascript"></script>
 <script src="gui/OSRM.GUIBoxGroup.js" type="text/javascript"></script>
 <script src="gui/OSRM.GUIBoxHandle.js" type="text/javascript"></script>
+<script src="gui/OSRM.Selector.js" type="text/javascript"></script>
 <script src="gui/OSRM.MainGUI.js" type="text/javascript"></script>
 <script src="routing/OSRM.Routing.js" type="text/javascript"></script>
 <script src="routing/OSRM.RoutingDescription.js" type="text/javascript"></script>
@@ -84,7 +85,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <div id="map"></div>
 
 <!-- config gui -->
-<div id="config-wrapper" class="box-wrapper not-sectable">
+<div id="config-wrapper" class="box-wrapper not-selectable">
 <div id="config-content" class="box-content">
 <div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div>
 
@@ -92,31 +93,42 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <div class="full">
 <div class="row">
 <div id="gui-language-label" class="left">Language:</div>
-<div id="gui-language-area" class="left">x</div></div>
+<div id="gui-language-area" class="left"><select id="gui-language-toggle-2" style="width:100px;"></select></div></div>
 <div class="row">
 <div id="gui-units-label" class="left">Units:</div>
-<div id="gui-units-area" class="left">x</div></div>
+<div id="gui-units-area" class="left"><select id="gui-units-toggle" style="width:100px;"></select></div>
+</div>
 </div>
 
 </div>
 </div>
 
 <!-- mapping gui -->
-<div id="mapping-wrapper" class="box-wrapper not-sectable">
+<div id="mapping-wrapper" class="box-wrapper not-selectable">
 <div id="mapping-content" class="box-content">
 <div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
 
 <div id="gui-mapping-label" class="label">Mapping Tools</div>
 <div class="full">
+<div class="row">
 <div class="left">
-<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" />
+<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames"/>
 <span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span>
 </div>
-<div class="right">
+</div>
+<div class="row">
+<div class="left">
+<input type="checkbox" id="option-show-previous-routes" value="show-previous-routes"/>
+<span id="gui-option-show-previous-routes-label" class="checkbox-label small-font">Show previous routes</span>
+</div>
+</div>
+<div class="row" style="max-height:14px;">
+<div class="right" style="max-height:14px;">
 <a class="button" id="open-josm">JOSM</a>
 <a class="button" id="open-osmbugs">OSM Bugs</a>
 </div>
 </div>
+</div>
 
 </div>
 </div>
@@ -128,6 +140,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <div id="main-input" class="box-content">
 	<!--  header -->
 	<div id="input-mask-header">
+	<select id="gui-language-toggle" class="top-left-button"></select>
 	<div id="main-toggle" class="iconic-button cancel-marker top-right-button"></div>
 	</div>
 	

WebContent/main.js

@@ -25,8 +25,8 @@ OSRM.init = function() {
 	OSRM.prefetchIcons();
 	OSRM.prefetchCSSIcons();
 	
-	OSRM.Localization.init();
 	OSRM.GUI.init();
+	OSRM.Localization.init();
 	OSRM.Map.init();
 	OSRM.Printing.init();
 	OSRM.Routing.init();