diff --git a/WebContent/images/selector.png b/WebContent/images/selector.png new file mode 100644 index 000000000..9082cb8de Binary files /dev/null and b/WebContent/images/selector.png differ diff --git a/WebContent/localization/OSRM.Localization.js b/WebContent/localization/OSRM.Localization.js index af6021a43..031b75a9c 100644 --- a/WebContent/localization/OSRM.Localization.js +++ b/WebContent/localization/OSRM.Localization.js @@ -30,7 +30,7 @@ init: function() { // create dropdown menu var select = document.createElement('select'); select.id = "gui-language-toggle"; - select.className = "top-left-button"; + //select.className = "top-left-button"; select.onchange = function() { OSRM.Localization.change(this.value); }; // fill dropdown menu @@ -45,6 +45,16 @@ init: function() { var input_mask_header = document.getElementById('input-mask-header'); input_mask_header.insertBefore(select,input_mask_header.firstChild); + // 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"; + // initialize default language OSRM.Localization.change( OSRM.DEFAULTS.LANGUAGE ); }, @@ -52,7 +62,16 @@ init: function() { // perform language change change: function(language) { OSRM.DEFAULTS.LANGUAGE = language; - document.getElementById('gui-language-toggle').value = language; + // update selector + var select = document.getElementById('gui-language-toggle'); + 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 if( OSRM.Localization[language]) { OSRM.GUI.setLanguage(); if( OSRM.G.markers.route.length > 1) diff --git a/WebContent/main.css b/WebContent/main.css index 02f695a1c..ffdefe771 100644 --- a/WebContent/main.css +++ b/WebContent/main.css @@ -130,7 +130,22 @@ html, body { { border: 0px; text-decoration:none; + position: relative; + opacity: 0; + filter: alpha(opacity=0); + z-index: 5; } + +.styled-select +{ + position:absolute; + background: url("images/selector.png"); + background-repeat:no-repeat; + background-position: top right; + padding: 1px 1px 1px 1px; + overflow: hidden; +} + .top-left-button { float:left; diff --git a/WebContent/routing/OSRM.RoutingDescription.js b/WebContent/routing/OSRM.RoutingDescription.js index 0ec55e785..55800566d 100644 --- a/WebContent/routing/OSRM.RoutingDescription.js +++ b/WebContent/routing/OSRM.RoutingDescription.js @@ -74,11 +74,11 @@ show: function(response) { // build route description if( i == 0 ) - route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.mapDirectionId(response.route_instructions[i][0])).replace(/%s/, OSRM.loc(response.route_instructions[i][6]) ); + route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.getDirectionId(response.route_instructions[i][0])).replace(/%s/, OSRM.loc(response.route_instructions[i][6]) ); else if( response.route_instructions[i][1] != "" ) - route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.mapDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]); + route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.getDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]); else - route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.mapDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,""); + route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.getDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,""); route_desc += ''; route_desc += ""; @@ -147,8 +147,41 @@ showNA: function( display_text ) { document.getElementById('information-box').innerHTML = "