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

separated normal notifications from important notifications (that lock

Browse Source 
the screen)
This commit is contained in:
DennisSchiefer 2012-07-04 15:35:06 +01:00
parent f385ea4e97
commit 35bb9efa51
10 changed files with 128 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,44 +23,65 @@ OSRM.GUI.extend( {
// notifications
notifications: [
{ time: 30000,
header: "[Tooltip] Clicking and Dragging",
body: "You can simply click on the map to set source and target markers. " +
"Then you can continue and drag the markers over the map or create. " +
"<br/><br/>" +
"You can even create additional markers by dragging them off of the main route." +
"Markers can be simply deleted by clicking on them.",
_class: "Routing",
_func: "getRoute_Dragging"
}
{ time: 7000,
header: "[Tooltip] Clicking and Dragging",
body: "You can simply click on the map to set source and target markers. " +
"Then you can continue and drag the markers over the map or create. " +
"<br/><br/>" +
"You can even create additional markers by dragging them off of the main route." +
"Markers can be simply deleted by clicking on them.",
_classes: ["Routing"],
_funcs: ["getRoute_Dragging"]
},
{ time: 4000,
header: "[Tooltip] Clicking and Dragging 2",
body: "You can simply click on the map to set source and target markers. " +
"Then you can continue and drag the markers over the map or create. " +
"<br/><br/>" +
"You can even create additional markers by dragging them off of the main route." +
"Markers can be simply deleted by clicking on them.",
_classes: ["Routing"],
_funcs: ["getRoute_Dragging"]
}
],
// initialize notification timers
init: function() {
// init variables
// init timers
var notifications = OSRM.GUI.notifications;
OSRM.G.notification_timers = new Array( notifications.length );
// init timers
for( var i=0, iEnd=notifications.length; i<iEnd; ++i) {
// start timer
notifications[i].timer = setTimeout( function(id){ return function(){ OSRM.GUI.notification_timeout(id);}; }(i), notifications[i].time);
notifications[i].old_function = OSRM[notifications[i]._class][notifications[i]._func];
OSRM[notifications[i]._class][notifications[i]._func] = function(id){ return function(){ OSRM.GUI.notification_wrapper(id);}; }(i);
// create wrapper functions for function calls that will stop the timer
notifications[i].old_functions = [];
for(var j=0, jEnd=notifications[i]._classes.length; j<jEnd;j++) {
notifications[i].old_functions[j] = OSRM[notifications[i]._classes[j]][notifications[i]._funcs[j]];
OSRM[notifications[i]._classes[j]][notifications[i]._funcs[j]] = function(id,id2){ return function(){ OSRM.GUI.notification_wrapper(id,id2);}; }(i,j);
}
}
},
// wrapper function to clear timeouts
notification_wrapper: function(id) {
notification_wrapper: function(id, id2) {
var notifications = OSRM.GUI.notifications;
clearTimeout( notifications[id].timer );
notifications[id].old_function();
OSRM[notifications[id]._class][notifications[id]._func] = notifications[id].old_function;
notifications[id].old_functions[id2]();
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];
}
},
// show notification message after timeout expired
notification_timeout: function(id) {
// if a notification is already shown, restart timer
if( OSRM.isNotifyVisible() ) {
OSRM.GUI.notifications[id].timer = setTimeout( function(id){ return function(){ OSRM.GUI.notification_timeout(id);}; }(id), OSRM.GUI.notifications[id].time);
return;
}
// show notification
OSRM.notify( OSRM.GUI.notifications[id].header, OSRM.GUI.notifications[id].body, true );
},

BIN
WebContent/images/down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
WebContent/images/down_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
WebContent/images/down_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
WebContent/images/up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
WebContent/images/up_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
WebContent/images/up_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

20
WebContent/main.css
View File

@ -425,7 +425,7 @@ html, body {
width:390px;
height:80px;
}
#notification-wrapper
#important-notification-wrapper
{
width:600px;
height:170px;
@ -434,12 +434,12 @@ html, body {
margin-top:-85px;
margin-left:-300px;
}
#notification-content
#important-notification-content
{
width:580px;
height:150px;
}
#notification-blanket
#important-notification-blanket
{
position:absolute;
top:0px;
@ -451,6 +451,20 @@ html, body {
z-index:100;
display:none;
}
#notification-wrapper
{
width:700px;
height:38px;
top: 10px;
left: 50%;
margin-left:-350px;
display: none;
}
#notification-content
{
width:680px;
height:18px;
}
/* styles for content of other gui boxes */

20
WebContent/main.html
View File

@ -87,19 +87,33 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- map -->
<div id="map"></div>
<!-- notification -->
<div id="notification-blanket">
<!-- important notification -->
<div id="important-notification-blanket">
<div id="important-notification-wrapper" class="box-wrapper not-selectable">
<div id="important-notification-content" class="box-content">
<!-- header -->
<div id="important-notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
<div id="important-notification-label" class="box-label">Notification</div>
<!-- notification text -->
<div id="important-notification-box"></div>
</div>
</div>
</div>
<!-- normal notification -->
<div id="notification-wrapper" class="box-wrapper not-selectable">
<div id="notification-content" class="box-content">
<!-- header -->
<div id="notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
<div class="quad top-right-button"></div>
<div id="notification-resize" class="iconic-button cancel-marker top-right-button"></div>
<div id="notification-label" class="box-label">Notification</div>
<!-- notification text -->
<div id="notification-box"></div>
</div>
</div>
</div>
<!-- config gui -->
<div id="config-wrapper" class="box-wrapper not-selectable">

65
WebContent/main.js
View File

@ -63,6 +63,12 @@ OSRM.prefetchImages = function() {
{id:'restore', url:'images/restore.png'},
{id:'restore_active', url:'images/restore_active.png'},
{id:'restore_hover', url:'images/restore_hover.png'},
{id:'up', url:'images/up.png'},
{id:'up_active', url:'images/up_active.png'},
{id:'up_hover', url:'images/up_hover.png'},
{id:'down', url:'images/down.png'},
{id:'down_active', url:'images/down_active.png'},
{id:'down_hover', url:'images/down_hover.png'},
{id:'config', url:'images/config.png'},
{id:'config_active', url:'images/config_active.png'},
{id:'config_hover', url:'images/config_hover.png'},
@ -136,6 +142,14 @@ OSRM.prefetchCSSIcons = function() {
{ id:'.cancel-marker:hover', image_id:'cancel_hover'},
{ id:'.cancel-marker:active', image_id:'cancel_active'},
{ id:'.up-marker', image_id:'up'},
{ id:'.up-marker:hover', image_id:'up_hover'},
{ id:'.up-marker:active', image_id:'up_active'},
{ id:'.down-marker', image_id:'down'},
{ id:'.down-marker:hover', image_id:'down_hover'},
{ id:'.down-marker:active', image_id:'down_active'},
{ id:'#input-mask-header', image_id:'osrm-logo'},
{ id:'.styled-select', image_id:'selector'},
@ -270,25 +284,56 @@ OSRM.parseParameters = function(){
// check whether to activate maintenance mode
OSRM.inMaintenance = function(){
if( OSRM.DEFAULTS.MAINTENANCE == true ) {
OSRM.notify( OSRM.DEFAULTS.MAINTENANCE_HEADER, OSRM.DEFAULTS.MAINTENANCE_TEXT, false);
OSRM.xnotify( OSRM.DEFAULTS.MAINTENANCE_HEADER, OSRM.DEFAULTS.MAINTENANCE_TEXT, false);
return true;
}
return false;
};
//general notification box
OSRM.notify = function( header, text, closable ){
document.getElementById('notification-blanket').style.display = "block";
// important notifications
OSRM.xnotify = function( header, text, closable ){
document.getElementById('important-notification-blanket').style.display = "block";
document.getElementById('important-notification-label').innerHTML = header;
document.getElementById('important-notification-box').innerHTML = text;
if( closable )
document.getElementById('important-notification-toggle').onclick = OSRM.xdenotify;
else
document.getElementById('important-notification-toggle').style.display = "none";
};
OSRM.xdenotify = function() {
document.getElementById('important-notification-blanket').style.display = "none";
};
// normal notification box
OSRM.notify = function( header, text ){
document.getElementById('notification-wrapper').style.display = "block";
document.getElementById('notification-label').innerHTML = header;
document.getElementById('notification-box').innerHTML = text;
if( closable )
document.getElementById('notification-toggle').onclick = OSRM.denotify;
else
document.getElementById('notification-toggle').style.display = "none";
},
document.getElementById('notification-box').style.display = "block"; // trick to always obtain a closed notification box
OSRM.resize();
document.getElementById('notification-toggle').onclick = OSRM.denotify;
document.getElementById('notification-resize').onclick = OSRM.resize;
};
OSRM.resize = function() {
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-resize').className = "iconic-button up-marker top-right-button";
} else {
document.getElementById('notification-content').style.height = "18px";
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";
}
};
OSRM.denotify = function() {
document.getElementById('notification-blanket').style.display = "none";
document.getElementById('notification-wrapper').style.display = "none";
};
OSRM.isNotifyVisible = function() {
return document.getElementById('notification-wrapper').style.display == "block";
};