separated normal notifications from important notifications (that lock

the screen)

WebContent/gui/OSRM.Timers.js

@@ -23,44 +23,65 @@ OSRM.GUI.extend( {
 	
 // notifications
 notifications: [
-	{	time:	30000,
+	{	time:		7000,
-		header: "[Tooltip] Clicking and Dragging",
+		header: 	"[Tooltip] Clicking and Dragging",
-		body: 	"You can simply click on the map to set source and target markers. " +
+		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. " +
+					"Then you can continue and drag the markers over the map or create. " +
-				"<br/><br/>" +
+					"<br/><br/>" +
-				"You can even create additional markers by dragging them off of the main route." + 
+					"You can even create additional markers by dragging them off of the main route." + 
-				"Markers can be simply deleted by clicking on them.",
+					"Markers can be simply deleted by clicking on them.",
-		_class:	"Routing",
+		_classes:	["Routing"],
-		_func:	"getRoute_Dragging"
+		_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];
+		// create wrapper functions for function calls that will stop the timer
-		OSRM[notifications[i]._class][notifications[i]._func] = function(id){ return function(){ OSRM.GUI.notification_wrapper(id);}; }(i);
+		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();
+	notifications[id].old_functions[id2]();
-	OSRM[notifications[id]._class][notifications[id]._func] = notifications[id].old_function;	
+	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 );
 },
 

WebContent/main.css

@@ -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 */

WebContent/main.html

@@ -87,19 +87,33 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <!-- map -->
 <div id="map"></div>
 
-<!-- notification -->
+<!-- important notification -->
-<div id="notification-blanket">
+<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">

WebContent/main.js

@@ -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
+// important notifications
-OSRM.notify = function( header, text, closable ){
+OSRM.xnotify = function( header, text, closable ){
-	document.getElementById('notification-blanket').style.display = "block";
+	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-box').style.display = "block";		// trick to always obtain a closed notification box
-		document.getElementById('notification-toggle').onclick = OSRM.denotify;
+	OSRM.resize();
-	else
+	
-		document.getElementById('notification-toggle').style.display = "none";
+	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"; 
 };