Merge branch 'trial/notifications' into develop
Conflicts: WebContent/main.html
This commit is contained in:
DennisSchiefer
commit
517f321ccc
@ -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 );
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
162
WebContent/gui/OSRM.Notifications.js
Normal file
162
WebContent/gui/OSRM.Notifications.js
Normal file
@ -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. " +
|
||||
"<br/><br/>" +
|
||||
"Don't despair if you cannot find your language of choice. " +
|
||||
"If you want, you can help to provide additional translations! " +
|
||||
"Visit <a href='https://github.com/DennisSchiefer/Project-OSRM-Web'>here</a> 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. " +
|
||||
"<br/><br/>" +
|
||||
"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. " +
|
||||
"<br/><br/>" +
|
||||
"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";
|
||||
}
|
||||
|
||||
});
|
||||
BIN
WebContent/images/down.png
Normal file
BIN
WebContent/images/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
WebContent/images/down_active.png
Normal file
BIN
WebContent/images/down_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
WebContent/images/down_hover.png
Normal file
BIN
WebContent/images/down_hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
WebContent/images/up.png
Normal file
BIN
WebContent/images/up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
WebContent/images/up_active.png
Normal file
BIN
WebContent/images/up_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
WebContent/images/up_hover.png
Normal file
BIN
WebContent/images/up_hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -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;
|
||||
OSRM.loc = OSRM.Localization.translate;
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -64,6 +64,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
<script src="gui/OSRM.GUIBoxHandle.js" type="text/javascript"></script>
|
||||
<script src="gui/OSRM.Selector.js" type="text/javascript"></script>
|
||||
<script src="gui/OSRM.MainGUI.js" type="text/javascript"></script>
|
||||
<script src="gui/OSRM.Notifications.js" type="text/javascript"></script>
|
||||
<script src="routing/OSRM.Routing.js" type="text/javascript"></script>
|
||||
<script src="routing/OSRM.RoutingAlternatives.js" type="text/javascript"></script>
|
||||
<script src="routing/OSRM.RoutingDescription.js" type="text/javascript"></script>
|
||||
@ -87,20 +88,34 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
<!-- map -->
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- notification -->
|
||||
<div id="notification-blanket">
|
||||
<div id="notification-wrapper" class="box-wrapper">
|
||||
<div id="notification-content" class="box-content">
|
||||
<!-- exclusive notification -->
|
||||
<div id="exclusive-notification-blanket">
|
||||
<div id="exclusive-notification-wrapper" class="box-wrapper not-selectable">
|
||||
<div id="exclusive-notification-content" class="box-content">
|
||||
<!-- header -->
|
||||
<div id="notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
|
||||
<div id="notification-label" class="box-label">Notification</div>
|
||||
<div id="exclusive-notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
|
||||
<div id="exclusive-notification-label" class="box-label">Notification</div>
|
||||
|
||||
<!-- notification text -->
|
||||
<div id="notification-box"></div>
|
||||
<div id="exclusive-notification-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tooltip notification -->
|
||||
<div id="tooltip-notification-wrapper" class="box-wrapper not-selectable">
|
||||
<div id="tooltip-notification-content" class="box-content">
|
||||
<!-- header -->
|
||||
<div id="tooltip-notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
|
||||
<div class="quad top-right-button"></div>
|
||||
<div id="tooltip-notification-resize" class="iconic-button cancel-marker top-right-button"></div>
|
||||
<div id="tooltip-notification-label" class="box-label">Notification</div>
|
||||
|
||||
<!-- notification text -->
|
||||
<div id="tooltip-notification-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- config gui -->
|
||||
<div id="config-wrapper" class="box-wrapper">
|
||||
<div id="config-content" class="box-content">
|
||||
|
||||
@ -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 );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user