119 lines
4.3 KiB
JavaScript
119 lines
4.3 KiB
JavaScript
/*
|
|
This program is free software; you can redistribute it and/or modify
|
|
it under the terms of the GNU AFFERO General Public License as published by
|
|
the Free Software Foundation; either version 3 of the License, or
|
|
any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program; if not, write to the Free Software
|
|
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
|
or see http://www.gnu.org/licenses/agpl.txt.
|
|
*/
|
|
|
|
// OSRM selector
|
|
// [create special selector elements]
|
|
|
|
|
|
OSRM.GUI.extend( {
|
|
|
|
// initialize selector with all options and our look&feel
|
|
selectorInit: function(id, options, selected, onchange_fct) {
|
|
// create dropdown menu
|
|
var select = document.getElementById(id);
|
|
select.className += " styled-select-helper base-font";
|
|
select.onchange = function() { OSRM.GUI._selectorOnChange(this); onchange_fct(this.value); };
|
|
|
|
// fill dropdown menu
|
|
for(var i=0, size=options.length; i<size; i++) {
|
|
var option=document.createElement("option");
|
|
option.innerHTML = options[i].display;
|
|
option.value = options[i].value;
|
|
select.appendChild(option);
|
|
}
|
|
select.value = options[selected].value;
|
|
|
|
// create visible dropdown menu
|
|
var textnode = document.createTextNode( options[selected].display );
|
|
var myspan = document.createElement("span");
|
|
myspan.className = "styled-select base-font";
|
|
myspan.id = "styled-select-" + select.id;
|
|
myspan.appendChild(textnode);
|
|
select.parentNode.insertBefore(myspan, select);
|
|
myspan.style.width = (select.offsetWidth-2)+"px";
|
|
myspan.style.height = (select.offsetHeight)+"px"; // clientHeight gives the height of the opened dropbox!
|
|
},
|
|
|
|
// required behaviour of selector on change to switch shown name
|
|
_selectorOnChange: function(select) {
|
|
var option = select.getElementsByTagName("option");
|
|
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 selector value
|
|
selectorChange: function(id, value) {
|
|
var select = document.getElementById(id);
|
|
select.value = value;
|
|
OSRM.GUI._selectorOnChange(select);
|
|
},
|
|
|
|
// replace selector options with new names
|
|
selectorRenameOptions: function(id, options) {
|
|
var select = document.getElementById(id);
|
|
var styledSelect = document.getElementById("styled-select-"+id);
|
|
|
|
// create new dropdown menu
|
|
var new_select = document.createElement("select");
|
|
new_select.id = id;
|
|
new_select.className = select.className;
|
|
new_select.onchange = select.onchange;
|
|
|
|
// fill new dropdown menu
|
|
var selected_display = "";
|
|
for(var i=0, size=options.length; i<size; i++) {
|
|
var option=document.createElement("option");
|
|
option.innerHTML = options[i].display;
|
|
option.value = options[i].value;
|
|
new_select.appendChild(option);
|
|
|
|
if( options[i].value == select.value )
|
|
selected_display = options[i].display;
|
|
}
|
|
new_select.value = select.value;
|
|
|
|
// switch old with new dropdown menu
|
|
select.parentNode.insertBefore(new_select, select);
|
|
select.parentNode.removeChild(select);
|
|
|
|
// change styled dropdown menu size & language
|
|
styledSelect.childNodes[0].nodeValue = selected_display;
|
|
styledSelect.style.width = (new_select.offsetWidth-2)+"px";
|
|
styledSelect.style.height = (new_select.offsetHeight)+"px";
|
|
|
|
// // old variant without creating a new dropdown menu (works in current browsers, but not in older FF or IE)
|
|
// var select = document.getElementById(id);
|
|
// var select_options = select.getElementsByTagName("option");
|
|
// var styledSelect = document.getElementById("styled-select-"+id);
|
|
//
|
|
// // fill dropdown menu with new option names
|
|
// for(var i = 0; i < select_options.length; i++) {
|
|
// select_options[i].childNodes[0].nodeValue = options[i].display;
|
|
//
|
|
// if(select_options[i].selected == true)
|
|
// styledSelect.childNodes[0].nodeValue = options[i].display;
|
|
// }
|
|
//
|
|
// // resize visible dropdown menu as needed
|
|
// styledSelect.style.width = (select.offsetWidth-2)+"px";
|
|
// styledSelect.style.height = (select.offsetHeight)+"px"; // clientHeight gives the height of the opened dropbox!
|
|
}
|
|
|
|
}); |