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

added additional notifications,

Browse Source 
better argument passing to wrapped trigger functions for notifications,
notification boxes adapt in size to contained text,
notification functions renamed,
This commit is contained in:
DennisSchiefer 2012-07-04 17:27:08 +01:00
parent 22783a53cd
commit 0c946f1476
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
WebContent/gui/OSRM.Timers.js
View File

@ -25,23 +25,30 @@ OSRM.GUI.extend( {
notifications: [ notifications: [
{ time: 4000, { time: 4000,
header: "[Tooltip] Localization", header: "[Tooltip] Localization",
body: "You can use the pulldown menu in the upper left corner to select your favorite language." + body: "You can use the pulldown menu in the upper left corner to select your favorite language. " +
"<br/><br/>" + "<br/><br/>" +
"If you cannot find your preferred language, you can help us to provide additionals translations!", "Don't despair if you cannot find your language of choice. " +
_classes: [], "If you want, you can help to provide additional translations! " +
_funcs: [] "Visit <a href='https://github.com/DennisSchiefer/Project-OSRM-Web'>here</a> for more information.",
_classes: ["Localization"],
_funcs: ["setLanguageWrapper"]
}, },
{ time: 6000, { time: 6000,
header: "[Tooltip] Clicking to set markers", header: "[Tooltip] Clicking to set markers",
body: "You can simply click on the map to set a source or target marker. " + body: "You can click on the map with the left mouse button to set a source marker (green) or a target marker (red), " +
"When you click on a marker again, it will be deleted.", "if the source marker already exists. " +
"The address of the selected location will be displayed in the boxes to the left. " +
"<br/><br/>" +
"You can delete a marker by clicking on it again with the left mouse button.",
_classes: ["Map"], _classes: ["Map"],
_funcs: ["click"] _funcs: ["click"]
}, },
{ time: 8000, { time: 8000,
header: "[Tooltip] Dragging markers", header: "[Tooltip] Dragging markers",
body: "You can drag a marker over the map and get instantanous route updates. " + body: "You can drag a marker by clicking on it with the left mouse button and holding the button pressed. " +
"You can even create additional markers by dragging them off of the main route.", "Then you can move the marker around the map and the route will be updated instantaneously. " +
"<br/><br/>" +
"You can even create additional markers by dragging them off of the main route! ",
_classes: ["Routing"], _classes: ["Routing"],
_funcs: ["getRoute_Dragging"] _funcs: ["getRoute_Dragging"]
} }
@ -66,11 +73,13 @@ init: function() {
}, },
// wrapper function to clear timeouts // wrapper function to clear timeouts
notification_wrapper: function(id, id2, params) { notification_wrapper: function(id, id2) {
var notifications = OSRM.GUI.notifications; var notifications = OSRM.GUI.notifications;
clearTimeout( notifications[id].timer ); clearTimeout( notifications[id].timer );
notifications[id].old_functions[id2](params); //notifications[id].old_functions[id2](params);
var args = Array.prototype.slice.call(arguments, 2);
notifications[id].old_functions[id2].apply(this, args);
for(var j=0, jEnd=notifications[id]._classes.length; j<jEnd;j++) { for(var j=0, jEnd=notifications[id]._classes.length; j<jEnd;j++) {
OSRM[notifications[id]._classes[j]][notifications[id]._funcs[j]] = notifications[id].old_functions[j]; OSRM[notifications[id]._classes[j]][notifications[id]._funcs[j]] = notifications[id].old_functions[j];
} }
@ -85,11 +94,9 @@ notification_timeout: function(id) {
} }
// show notification // show notification
OSRM.notify( OSRM.GUI.notifications[id].header, OSRM.GUI.notifications[id].body, true ); OSRM.notify( OSRM.GUI.notifications[id].header, OSRM.GUI.notifications[id].body, true );
}, for(var j=0, jEnd=notifications[id]._classes.length; j<jEnd;j++) {
OSRM[notifications[id]._classes[j]][notifications[id]._funcs[j]] = notifications[id].old_functions[j];
// clear notification timeout }
notification_clear: function(id) {
clearTimeout( OSRM.GUI.notifications[id].timer );
} }
}); });

13
WebContent/main.js
View File

@ -312,21 +312,22 @@ OSRM.notify = function( header, text ){
document.getElementById('notification-label').innerHTML = header; document.getElementById('notification-label').innerHTML = header;
document.getElementById('notification-box').innerHTML = text; document.getElementById('notification-box').innerHTML = text;
document.getElementById('notification-box').style.display = "block"; // trick to always obtain a closed notification box document.getElementById('notification-box').style.display = "block"; // trick to always obtain a closed notification box
OSRM.resize(); OSRM.resizeNotify();
document.getElementById('notification-toggle').onclick = OSRM.denotify; document.getElementById('notification-toggle').onclick = OSRM.denotify;
document.getElementById('notification-resize').onclick = OSRM.resize; document.getElementById('notification-resize').onclick = OSRM.resizeNotify;
}; };
OSRM.resize = function() { OSRM.resizeNotify = function() {
if( document.getElementById('notification-box').style.display == "none" ) { if( document.getElementById('notification-box').style.display == "none" ) {
document.getElementById('notification-content').style.height = "200px";
document.getElementById('notification-wrapper').style.height = "220px";
document.getElementById('notification-box').style.display = "block"; document.getElementById('notification-box').style.display = "block";
var height = document.getElementById('notification-box').clientHeight;
document.getElementById('notification-content').style.height = (height + 28) + "px";
document.getElementById('notification-wrapper').style.height = (height + 48) + "px";
document.getElementById('notification-resize').className = "iconic-button up-marker top-right-button"; document.getElementById('notification-resize').className = "iconic-button up-marker top-right-button";
} else { } else {
document.getElementById('notification-box').style.display = "none";
document.getElementById('notification-content').style.height = "18px"; document.getElementById('notification-content').style.height = "18px";
document.getElementById('notification-wrapper').style.height = "38px"; document.getElementById('notification-wrapper').style.height = "38px";
document.getElementById('notification-box').style.display = "none";
document.getElementById('notification-resize').className = "iconic-button down-marker top-right-button"; document.getElementById('notification-resize').className = "iconic-button down-marker top-right-button";
} }
}; };