Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

first steps to make printing work with IE8

Browse Source
This commit is contained in:
DennisSchiefer 2012-05-08 15:57:25 +01:00
parent 50aea3310a
commit a975dba975
4 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
WebContent/printing/OSRM.Printing.js
View File

@ -61,44 +61,81 @@ deactivate: function() { // use hide route as trigger
// create UI in printwindow // create UI in printwindow
show: function(response) { show: function(response) {
// create header // create header (using tables for compatibility with IE quirks mode)
var header = var header =
'<thead class="description-header"><tr><td colspan="3">' + '<thead class="description-header"><tr><td colspan="3">' +
'<div class="full">' + '<table class="full">' +
'<div class="row">' + '<tr class="row">' +
'<div class="left stretch">' + '<td class="left stretch">' +
'<div class="full">' + '<table class="full">' +
'<div class="row">' + '<tr class="row">' +
'<div class="left description-header-label">' + OSRM.loc("GUI_START")+ ': </div>' + '<td class="left description-header-label">' + OSRM.loc("GUI_START")+ ': </td>' +
'<div class="left description-header-content stretch">' + document.getElementById("gui-input-source").value + '</div>' + '<td class="left description-header-content stretch">' + document.getElementById("gui-input-source").value + '</td>' +
'</div>' + '</tr>' +
'<div class="row">' + '<tr class="row">' +
'<div class="left description-header-label">' + OSRM.loc("GUI_END")+ ': </div>' + '<td class="left description-header-label">' + OSRM.loc("GUI_END")+ ': </td>' +
'<div class="left description-header-content stretch">' + document.getElementById("gui-input-target").value + '</div>' + '<td class="left description-header-content stretch">' + document.getElementById("gui-input-target").value + '</td>' +
'</div>' + '</tr>' +
'</div>' + '</table>' +
'</div>' + '</td>' +
'<div class="left">' + '<td class="left">' +
'<div class="full">' + '<table class="full">' +
'<div class="row">' + '<tr class="row">' +
'<div class="left description-header-label">' + OSRM.loc("DISTANCE")+': </div>' + '<td class="left description-header-label">' + OSRM.loc("DISTANCE")+': </td>' +
'<div class="left description-header-content">' + OSRM.Utils.toHumanDistance(response.route_summary.total_distance) + '</div>' + '<td class="left description-header-content">' + OSRM.Utils.toHumanDistance(response.route_summary.total_distance) + '</td>' +
'</div>' + '</tr>' +
'<div class="row">' + '<tr class="row">' +
'<div class="left description-header-label">' + OSRM.loc("DURATION")+': </div>' + '<td class="left description-header-label">' + OSRM.loc("DURATION")+': </td>' +
'<div class="left description-header-content">' + OSRM.Utils.toHumanTime(response.route_summary.total_time) + '</div>' + '<td class="left description-header-content">' + OSRM.Utils.toHumanTime(response.route_summary.total_time) + '</td>' +
'</div>' + '</tr>' +
'</div>' + '</table>' +
'</div>' + '</td>' +
'</div>' + '</tr>' +
'</div>' + '</table>' +
'<div class="quad"></div>' + '<div class="quad"></div>' +
'</td></tr></thead>'; '</td></tr></thead>';
// var header =
// '<thead class="description-header"><tr><td colspan="3">' +
//
// '<div class="full">' +
// '<div class="row">' +
//
// '<div class="left stretch">' +
// '<div class="full">' +
// '<div class="row">' +
// '<div class="left description-header-label">' + OSRM.loc("GUI_START")+ ': </div>' +
// '<div class="left description-header-content stretch">' + document.getElementById("gui-input-source").value + '</div>' +
// '</div>' +
// '<div class="row">' +
// '<div class="left description-header-label">' + OSRM.loc("GUI_END")+ ': </div>' +
// '<div class="left description-header-content stretch">' + document.getElementById("gui-input-target").value + '</div>' +
// '</div>' +
// '</div>' +
// '</div>' +
//
// '<div class="left">' +
// '<div class="full">' +
// '<div class="row">' +
// '<div class="left description-header-label">' + OSRM.loc("DISTANCE")+': </div>' +
// '<div class="left description-header-content">' + OSRM.Utils.toHumanDistance(response.route_summary.total_distance) + '</div>' +
// '</div>' +
// '<div class="row">' +
// '<div class="left description-header-label">' + OSRM.loc("DURATION")+': </div>' +
// '<div class="left description-header-content">' + OSRM.Utils.toHumanTime(response.route_summary.total_time) + '</div>' +
// '</div>' +
// '</div>' +
// '</div>' +
//
// '</div>' +
// '</div>' +
//
// '<div class="quad"></div>' +
// '</td></tr></thead>';
// create route description // create route description
var body = '<tbody class="description-body">'; var body = '<tbody class="description-body">';
@ -122,8 +159,7 @@ show: function(response) {
body += "</td>"; body += "</td>";
body += '<td class="description-body-distance">'; body += '<td class="description-body-distance">';
if( i != response.route_instructions.length-1 ) body += (i == response.route_instructions.length-1) ? '&nbsp;' : '<b>'+OSRM.Utils.toHumanDistance(response.route_instructions[i][2])+'</b>'; // fill last entry with a space
body += '<b>'+OSRM.Utils.toHumanDistance(response.route_instructions[i][2])+'</b>';
body += "</td>"; body += "</td>";
body += "</tr>"; body += "</tr>";
@ -141,7 +177,7 @@ show: function(response) {
var zoom = print_window.OSRM.drawMap( OSRM.DEFAULTS.TILE_SERVERS[tile_server_id], new L.LatLngBounds( positions ) ); var zoom = print_window.OSRM.drawMap( OSRM.DEFAULTS.TILE_SERVERS[tile_server_id], new L.LatLngBounds( positions ) );
// draw markers // draw markers
print_window.OSRM.prefetchIcons( OSRM.G.images, OSRM.Printing.BASE_DIRECTORY ); print_window.OSRM.prefetchIcons( OSRM.G.images );
print_window.OSRM.drawMarkers( OSRM.G.markers.route ); print_window.OSRM.drawMarkers( OSRM.G.markers.route );
// draw route & query for better geometry // draw route & query for better geometry

2
WebContent/printing/printing.css
View File

@ -192,7 +192,7 @@ div.label
} }
.medium-font { .medium-font {
font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px; font-size: 10.5px; /* will be 10px in IE quirks mode */
font-weight: normal; font-weight: normal;
} }
.small-font { .small-font {

1
WebContent/printing/printing.html
View File

@ -28,6 +28,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<title>OSRM Website</title> <title>OSRM Website</title>
<meta name="description" content="OSRM Website"/> <meta name="description" content="OSRM Website"/>
<meta name="author" content="Dennis Schieferdecker" /> <meta name="author" content="Dennis Schieferdecker" />
<meta http-equiv="X-UA-Compatible" content="IE=7,9" />
<!-- stylesheets --> <!-- stylesheets -->
<link rel="stylesheet" href="../leaflet/leaflet.css" type="text/css"/> <link rel="stylesheet" href="../leaflet/leaflet.css" type="text/css"/>

7
WebContent/printing/printing.js
View File

@ -32,7 +32,7 @@ function printWindow() {
//prefetch icons //prefetch icons
OSRM.GLOBALS.icons = {}; OSRM.GLOBALS.icons = {};
OSRM.prefetchIcons = function(images_list, BASE_DIRECTORY) { OSRM.prefetchIcons = function(images_list) {
var icon_list = [ {id:'marker-source', image_id:'marker-source'}, var icon_list = [ {id:'marker-source', image_id:'marker-source'},
{id:'marker-target', image_id:'marker-target'}, {id:'marker-target', image_id:'marker-target'},
{id:'marker-via', image_id:'marker-via'}, {id:'marker-via', image_id:'marker-via'},
@ -41,8 +41,9 @@ OSRM.prefetchIcons = function(images_list, BASE_DIRECTORY) {
for(var i=0; i<icon_list.length; i++) { for(var i=0; i<icon_list.length; i++) {
var icon = { var icon = {
iconUrl: BASE_DIRECTORY+images_list[icon_list[i].image_id].getAttribute("src"), iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41), // using absolute src directory for compatibility reasons with IE quirks mode
shadowUrl: BASE_DIRECTORY+images_list["marker-shadow"].getAttribute("src"), shadowSize: new L.Point(41, 41), iconUrl: images_list[icon_list[i].image_id].src, iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
shadowUrl: images_list["marker-shadow"].src, shadowSize: new L.Point(41, 41),
popupAnchor: new L.Point(0, -33) popupAnchor: new L.Point(0, -33)
}; };
OSRM.G.icons[icon_list[i].id] = new L.SwitchableIcon(icon); OSRM.G.icons[icon_list[i].id] = new L.SwitchableIcon(icon);