changes localization to new selector elements,

completed units selector,
modified localization selector
This commit is contained in:
DennisSchiefer 2012-05-09 17:27:11 +01:00
parent 2b4935c29c
commit e39479b908
6 changed files with 74 additions and 65 deletions

View File

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

View File

@ -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
OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );
// init units selector
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-units-label").innerHTML = OSRM.loc("GUI_UNITS");
document.getElementById("gui-language-label").innerHTML = OSRM.loc("GUI_LANGUAGE")+":";
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();
}
});
});

View File

@ -27,53 +27,31 @@ DIRECTORY: "localization/",
// holds currently active language
current_language: OSRM.DEFAULTS.LANGUAGE,
// initialize localization
//initialize localization
init: function() {
// create dropdown menu
var select = document.createElement('select');
select.id = "gui-language-toggle";
select.className = "top-left-button";
select.onchange = function() { OSRM.Localization.setLanguage(this.value); };
// fill dropdown menu
// fill option list and find default entry
var options = [];
var options_2 = [];
var selected = 0;
var supported_languages = OSRM.DEFAULTS.LANGUAGE_SUPPORTED;
for(var i=0, size=supported_languages.length; i<size; i++) {
var option=document.createElement("option");
option.innerHTML = supported_languages[i].encoding;
option.value = supported_languages[i].encoding;
select.appendChild(option);
options.push( {display:supported_languages[i].encoding, value:supported_languages[i].encoding} );
options_2.push( {display:supported_languages[i].name, value:supported_languages[i].encoding} );
if( supported_languages[i].encoding == OSRM.DEFAULTS.LANGUAGE )
selected=i;
}
select.value = OSRM.DEFAULTS.LANGUAGE;
// add element to DOM
var input_mask_header = document.getElementById('input-mask-header');
input_mask_header.insertBefore(select,input_mask_header.firstChild);
// generate selectors
OSRM.GUI.initSelector("gui-language-toggle", options, selected, OSRM.Localization.setLanguage);
OSRM.GUI.initSelector("gui-language-toggle-2", options_2, selected, OSRM.Localization.setLanguage);
// create visible dropdown menu
var textnode = document.createTextNode(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";
// set default language
OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );
},
// 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

View File

@ -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
{

View File

@ -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>

View File

@ -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();