diff --git a/WebContent/base/OSRM.Map.js b/WebContent/base/OSRM.Map.js index 0108a200e..ca2c53708 100644 --- a/WebContent/base/OSRM.Map.js +++ b/WebContent/base/OSRM.Map.js @@ -86,6 +86,7 @@ zoomed: function(e) { contextmenu: function(e) {;}, mousemove: function(e) { OSRM.Via.drawDragMarker(e); }, click: function(e) { + OSRM.GUI.deactivateTooltip( "clicking" ); if( !OSRM.G.markers.hasSource() ) { var index = OSRM.G.markers.setSource( e.latlng ); OSRM.Geocoder.updateAddress( OSRM.C.SOURCE_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); diff --git a/WebContent/base/osrm/OSRM.Marker.js b/WebContent/base/osrm/OSRM.Marker.js index 7b6d402e7..aa7560330 100644 --- a/WebContent/base/osrm/OSRM.Marker.js +++ b/WebContent/base/osrm/OSRM.Marker.js @@ -99,6 +99,7 @@ onDrag: function(e) { OSRM.Geocoder.updateLocation( this.parent.label ); }, onDragStart: function(e) { + OSRM.GUI.deactivateTooltip( "dragging" ); OSRM.G.dragging = true; this.switchIcon(this.options.dragicon); diff --git a/WebContent/gui/OSRM.Notifications.js b/WebContent/gui/OSRM.Notifications.js new file mode 100644 index 000000000..0b26d65dd --- /dev/null +++ b/WebContent/gui/OSRM.Notifications.js @@ -0,0 +1,162 @@ +/* +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 Notifications +// [handles notifications: timed tooltips and exclusive notifications] + + +OSRM.GUI.extend( { + +// tooltips +tooltips: { + // triggered in OSRM.Localization.setLanguageWrapper + localization: + { timeout: 1800000, // 30min + header: "[Tooltip] Localization", + body: "You can use the pulldown menu in the upper left corner to select your favorite language. " + + "

" + + "Don't despair if you cannot find your language of choice. " + + "If you want, you can help to provide additional translations! " + + "Visit here for more information." + }, + // triggered in OSRM.Map.click + clicking: + { timeout: 60000, // 1min + header: "[Tooltip] Clicking to set markers", + body: "You can click on the map with the left mouse button to set a source marker (green) or a target marker (red), " + + "if the source marker already exists. " + + "The address of the selected location will be displayed in the boxes to the left. " + + "

" + + "You can delete a marker by clicking on it again with the left mouse button." + }, + // triggered in OSRM.Routing.getRoute_Dragging + dragging: + { timeout: 120000, // 2min + header: "[Tooltip] Dragging markers", + body: "You can drag a marker by clicking on it with the left mouse button and holding the button pressed. " + + "Then you can move the marker around the map and the route will be updated instantaneously. " + + "

" + + "You can even create additional markers by dragging them off of the main route! " + } +}, + + +// initialize notifications and tooltip timers +init: function() { + // notifications + // [nothing to be done at the moment] + + // tooltip timers + var tooltips = OSRM.GUI.tooltips; + for( id in tooltips ) { + // start timer + tooltips[id]._timer = setTimeout( + function(_id){ return function(){OSRM.GUI._showTooltip(_id);}; }(id), + tooltips[id].timeout + ); + + // mark tooltip as pending + tooltips[id]._pending = true; + } +}, + + +// deactivate pending tooltip +deactivateTooltip: function(id) { + var tooltips = OSRM.GUI.tooltips; + if(tooltips[id] == undefined) + return; + + // mark tooltip as no longer pending + tooltips[id]._pending = false; +}, +// show tooltip after timer expired +_showTooltip: function(id) { + var tooltips = OSRM.GUI.tooltips; + if(tooltips[id] == undefined) + return; + + // only show tooltip if it is still pending + if( tooltips[id]._pending == false ) { + return; + } + + // if a notification is currently shown, restart timer + if( OSRM.GUI.isTooltipVisible() ) { + tooltips[id]._timer = setTimeout( + function(_id){ return function(){OSRM.GUI._showTooltip(_id);}; }(id), + tooltips[id].timeout + ); + return; + } + + // show notification + OSRM.GUI.tooltipNotify( tooltips[id].header, tooltips[id].body ); + + // mark tooltip as no longer pending + tooltips[id]._pending = false; +}, + + +// exclusive notification +exclusiveNotify: function( header, text, closable ){ + document.getElementById('exclusive-notification-blanket').style.display = "block"; + document.getElementById('exclusive-notification-label').innerHTML = header; + document.getElementById('exclusive-notification-box').innerHTML = text; + if( closable ) + document.getElementById('exclusive-notification-toggle').onclick = OSRM.GUI.exclusiveDenotify; + else + document.getElementById('exclusive-notification-toggle').style.display = "none"; +}, +exclusiveDenotify: function() { + document.getElementById('exclusive-notification-blanket').style.display = "none"; +}, + + +// tooltip notification +tooltipNotify: function( header, text ){ + document.getElementById('tooltip-notification-wrapper').style.display = "block"; + document.getElementById('tooltip-notification-label').innerHTML = header; + document.getElementById('tooltip-notification-box').innerHTML = text; + document.getElementById('tooltip-notification-box').style.display = "block"; // simple trick to always start with a minimized tooltip + OSRM.GUI.tooltipResize(); + + document.getElementById('tooltip-notification-toggle').onclick = OSRM.GUI.tooltipDenotify; + document.getElementById('tooltip-notification-resize').onclick = OSRM.GUI.tooltipResize; +}, +tooltipResize: function() { + if( document.getElementById('tooltip-notification-box').style.display == "none" ) { + document.getElementById('tooltip-notification-box').style.display = "block"; + var height = document.getElementById('tooltip-notification-box').clientHeight; + document.getElementById('tooltip-notification-content').style.height = (height + 28) + "px"; + document.getElementById('tooltip-notification-wrapper').style.height = (height + 48) + "px"; + document.getElementById('tooltip-notification-resize').className = "iconic-button up-marker top-right-button"; + } else { + document.getElementById('tooltip-notification-box').style.display = "none"; + document.getElementById('tooltip-notification-content').style.height = "18px"; + document.getElementById('tooltip-notification-wrapper').style.height = "38px"; + document.getElementById('tooltip-notification-resize').className = "iconic-button down-marker top-right-button"; + } +}, +tooltipDenotify: function() { + document.getElementById('tooltip-notification-wrapper').style.display = "none"; +}, +isTooltipVisible: function() { + return document.getElementById('tooltip-notification-wrapper').style.display == "block"; +} + +}); diff --git a/WebContent/images/down.png b/WebContent/images/down.png new file mode 100644 index 000000000..d87127dc8 Binary files /dev/null and b/WebContent/images/down.png differ diff --git a/WebContent/images/down_active.png b/WebContent/images/down_active.png new file mode 100644 index 000000000..546d6cfb2 Binary files /dev/null and b/WebContent/images/down_active.png differ diff --git a/WebContent/images/down_hover.png b/WebContent/images/down_hover.png new file mode 100644 index 000000000..9a860cae8 Binary files /dev/null and b/WebContent/images/down_hover.png differ diff --git a/WebContent/images/up.png b/WebContent/images/up.png new file mode 100644 index 000000000..0a2f090dc Binary files /dev/null and b/WebContent/images/up.png differ diff --git a/WebContent/images/up_active.png b/WebContent/images/up_active.png new file mode 100644 index 000000000..8d8d4d384 Binary files /dev/null and b/WebContent/images/up_active.png differ diff --git a/WebContent/images/up_hover.png b/WebContent/images/up_hover.png new file mode 100644 index 000000000..6cfd978aa Binary files /dev/null and b/WebContent/images/up_hover.png differ diff --git a/WebContent/localization/OSRM.Localization.js b/WebContent/localization/OSRM.Localization.js index 952918454..226a128b9 100644 --- a/WebContent/localization/OSRM.Localization.js +++ b/WebContent/localization/OSRM.Localization.js @@ -42,12 +42,16 @@ init: function() { } // generate selectors - OSRM.GUI.selectorInit("gui-language-toggle", options, selected, OSRM.Localization.setLanguage); - OSRM.GUI.selectorInit("gui-language-2-toggle", options_2, selected, OSRM.Localization.setLanguage); + OSRM.GUI.selectorInit("gui-language-toggle", options, selected, OSRM.Localization.setLanguageWrapper); + OSRM.GUI.selectorInit("gui-language-2-toggle", options_2, selected, OSRM.Localization.setLanguageWrapper); // set default language OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE ); }, +setLanguageWrapper: function(language) { // wrapping required to correctly prevent localization tooltip from showing + OSRM.GUI.deactivateTooltip( "localization" ); + OSRM.Localization.setLanguage(language); +}, setLanguage: function(language) { // change value of both language selectors OSRM.GUI.selectorChange( document.getElementById('gui-language-toggle'), language ); @@ -100,4 +104,4 @@ translate: function(text) { }; // shorter call to translate function -OSRM.loc = OSRM.Localization.translate; \ No newline at end of file +OSRM.loc = OSRM.Localization.translate; diff --git a/WebContent/main.css b/WebContent/main.css index 7d2f64fad..13562ca1e 100644 --- a/WebContent/main.css +++ b/WebContent/main.css @@ -429,7 +429,7 @@ html, body { width:390px; height:80px; } -#notification-wrapper +#exclusive-notification-wrapper { width:600px; height:170px; @@ -438,12 +438,12 @@ html, body { margin-top:-85px; margin-left:-300px; } -#notification-content +#exclusive-notification-content { width:580px; height:150px; } -#notification-blanket +#exclusive-notification-blanket { position:absolute; top:0px; @@ -455,6 +455,20 @@ html, body { z-index:100; display:none; } +#tooltip-notification-wrapper +{ + width:700px; + height:38px; + top: 10px; + left: 50%; + margin-left:-350px; + display: none; +} +#tooltip-notification-content +{ + width:680px; + height:18px; +} /* styles for content of other gui boxes */ diff --git a/WebContent/main.html b/WebContent/main.html index f2446407f..1e45d8b1c 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -64,6 +64,7 @@ or see http://www.gnu.org/licenses/agpl.txt. + @@ -87,20 +88,34 @@ or see http://www.gnu.org/licenses/agpl.txt.
- -
-
-
+ +
+
+
-
-
Notification
+
+
Notification
-
+
+ +
+
+ +
+
+
+
Notification
+ + +
+
+
+
diff --git a/WebContent/main.js b/WebContent/main.js index 008f73cc1..61fac3752 100644 --- a/WebContent/main.js +++ b/WebContent/main.js @@ -64,6 +64,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'}, @@ -137,6 +143,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'}, @@ -280,14 +294,12 @@ OSRM.parseParameters = function(){ // check whether to activate maintenance mode OSRM.inMaintenance = function(){ if( OSRM.DEFAULTS.MAINTENANCE == true ) { - document.getElementById('notification-blanket').style.display = "block"; - document.getElementById('notification-label').innerHTML = OSRM.DEFAULTS.MAINTENANCE_HEADER; - document.getElementById('notification-box').innerHTML = OSRM.DEFAULTS.MAINTENANCE_TEXT; - document.getElementById('notification-toggle').style.display = "none"; + OSRM.GUI.exclusiveNotify( OSRM.DEFAULTS.MAINTENANCE_HEADER, OSRM.DEFAULTS.MAINTENANCE_TEXT, false); return true; } return false; }; + // onload event OSRM.Browser.onLoadHandler( OSRM.init );