new handling of gui boxes (work in progress)

WebContent/base/OSRM.Map.js

@@ -29,7 +29,7 @@ OSRM.Map = {
 // map initialization
 init: function() {
 	// check if GUI is initialized!
-	if(OSRM.GUI.visible == null)
+	if(OSRM.G.main_handle == null)
 		OSRM.GUI.init();
 	
 	// setup tile servers
@@ -54,7 +54,7 @@ init: function() {
 	OSRM.G.map.addLayerControl(layerControl);
 
     // move zoom markers
-	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px";
+	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";
 	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
 
 	// map events

WebContent/base/osrm/OSRM.MapView.js

@@ -19,9 +19,9 @@ or see http://www.gnu.org/licenses/agpl.txt.
 // [extending Leaflet L.Map with setView/fitBounds methods that respect UI visibility, better layerControl] 
 OSRM.MapView = L.Map.extend({
 	setViewUI: function(position, zoom, no_animation) {
-		if( OSRM.GUI.visible == true ) {
+		if( OSRM.G.main_handle.boxVisible() ) {
 			var point = this.project( position, zoom);
-			point.x-=OSRM.GUI.width/2;
+			point.x-=OSRM.G.main_handle.boxWidth()/2;
 			position = this.unproject(point,zoom);		
 		}
 		this.setView( position, zoom, no_animation);	
@@ -31,8 +31,8 @@ OSRM.MapView = L.Map.extend({
 		var northeast = bounds.getNorthEast();
 		var zoom = this.getBoundsZoom(bounds);
 		var sw_point = this.project( southwest, zoom);
-		if( OSRM.GUI.visible == true )
+		if( OSRM.G.main_handle.boxVisible() )
-			sw_point.x-=OSRM.GUI.width+20;
+			sw_point.x-=OSRM.G.main_handle.boxWidth()+20;
 		else
 			sw_point.x-=20;
 		sw_point.y+=20;
@@ -45,16 +45,16 @@ OSRM.MapView = L.Map.extend({
 	},
 	getBoundsUI: function(unbounded) {
 		var bounds = this.getPixelBounds();
-		if( OSRM.GUI.visible == true )
+		if( OSRM.G.main_handle.boxVisible() )
-			bounds.min.x+=OSRM.GUI.width;
+			bounds.min.x+=OSRM.G.main_handle.boxWidth();
 		var sw = this.unproject(new L.Point(bounds.min.x, bounds.max.y), this._zoom, true),
 			ne = this.unproject(new L.Point(bounds.max.x, bounds.min.y), this._zoom, true);
 		return new L.LatLngBounds(sw, ne);		
 	},	
 	getCenterUI: function(unbounded) {
 		var viewHalf = this.getSize();
-		if( OSRM.GUI.visible == true )
+		if( OSRM.G.main_handle.boxVisible() )
-			viewHalf.x += OSRM.GUI.width;
+			viewHalf.x += OSRM.G.main_handle.boxWidth();
 		var centerPoint = this._getTopLeftPoint().add(viewHalf.divideBy(2));
 		
 		return this.unproject(centerPoint, this._zoom, unbounded);

WebContent/gui/OSRM.GUIBoxGroup.js

@@ -0,0 +1,44 @@
+/*
+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 MainGUI
+// [handles all GUI events that interact with appearance of main window]
+
+
+// OSRM GUIBoxGroup
+// [group UI boxes so that handles can be shown/hidden together]
+
+OSRM.GUIBoxGroup = function() {
+	this._handles = [];
+};
+
+OSRM.extend( OSRM.GUIBoxGroup, {
+add: function( handle ) {
+	this._handles.push( handle );
+	handle.addToGroup(this);
+},
+hide: function() {
+	for(var i=0; i< this._handles.length; i++) {
+		this._handles[i].hide();
+	}
+},
+show: function() {
+	for(var i=0; i< this._handles.length; i++) {
+		this._handles[i].show();
+	}
+}
+});

WebContent/gui/OSRM.GUIBoxHandle.js

@@ -0,0 +1,127 @@
+/*
+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 GUIBoxHandle
+// [performs showing and hiding of UI boxes]
+
+OSRM.GUIBoxHandle = function( box_name, side, cssText, transitionStartFct, transitionEndFct  ) {
+	// do not create handle if box does not contain a toggle button
+	var toggle = document.getElementById( box_name + '-toggle');
+	if( toggle == null ) {
+		console.log("[error] No toggle button for " + box_name);
+		return;
+	}
+	
+	// create DOM elements
+	var wrapper = document.createElement('div');
+	wrapper.id = box_name + '-handle-wrapper';
+	wrapper.className = 'not-selectable box-wrapper box-handle-wrapper-'+side;
+	wrapper.style.cssText += cssText;
+	var content = document.createElement('div');
+	content.id = box_name + '-handle-content';
+	content.className = 'box-content box-handle-content-'+side;
+	var icon = document.createElement('div');
+	icon.id = box_name + '-handle-icon';
+	icon.className = 'iconic-button';
+	
+	content.appendChild(icon);
+	wrapper.appendChild(content);
+	document.body.appendChild(wrapper);
+	
+	// create attributes
+	this._box = document.getElementById( box_name + '-wrapper' );
+	this._width = this._box.clientWidth;
+	this._handle = wrapper;
+	this._box_group = null;
+
+	// show or hide
+	if(side=="left") {
+		this._box_visible = true;
+		this._handle.style.visibility="hidden";
+	} else {
+		this._box_visible = false;
+		this._handle.style.visibility="visible";		
+	}	
+	
+	// add functionality
+	var toggle_fct = side == "left" ? this._toggleLeft : this._toggleRight;
+	var full_fct = transitionStartFct ? OSRM.concat(toggle_fct, transitionStartFct) : toggle_fct;
+	var fct = OSRM.bind( this, full_fct );
+	toggle.onclick = fct;
+	icon.onclick = fct;
+	
+	var full_fct = transitionEndFct ? OSRM.concat(this._onTransitionEnd, transitionEndFct) : this._onTransitionEnd;
+	var fct = OSRM.bind( this, full_fct );	
+	if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) {
+		var box_wrapper = document.getElementById(box_name + '-wrapper');
+		box_wrapper.addEventListener("transitionend", fct, false);
+		box_wrapper.addEventListener("webkitTransitionEnd", fct, false);
+		box_wrapper.addEventListener("oTransitionEnd", fct, false);
+		box_wrapper.addEventListener("MSTransitionEnd", fct, false);
+	} else {
+		this._transitionEndFct = fct;
+	}
+};
+
+OSRM.extend( OSRM.GUIBoxHandle, {
+addToGroup: function(group) {
+	this._box_group = group;
+},
+show: function() {
+	this._handle.style.visibility="visible";
+},
+hide: function() {
+	this._handle.style.visibility="hidden";
+},
+boxVisible: function() {
+	return this._box_visible;
+},
+boxWidth: function() {
+	return this._width;
+},
+
+_toggleLeft: function() {
+	if( this._box_visible == false ) {
+		if(this._box_group) this._box_group.hide(); else this.hide();
+		this._box.style.left="5px";
+	} else {
+		this._box.style.left=-this._width+"px";
+	}
+	// old browser support
+	if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
+		setTimeout(this._transitionEndFct, 0);
+},
+_toggleRight: function() {
+	if( this._box_visible == false ) {
+		if(this._box_group) this._box_group.hide(); else this.hide();
+		this._box.style.right="5px";
+	} else {
+		this._box.style.right=-this._width+"px";
+	}
+	// old browser support
+	if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
+		setTimeout(this._transitionEndFct, 0);
+},
+_onTransitionEnd: function() {
+	if( this._box_visible == true ) {
+		if(this._box_group) this._box_group.show(); else this.show();
+		this._box_visible = false;
+	} else {
+		this._box_visible = true;		
+	}	
+}
+});

WebContent/gui/OSRM.MainGUI.js

@@ -21,31 +21,22 @@ or see http://www.gnu.org/licenses/agpl.txt.
 
 OSRM.GUI.extend( {
 		
-// defaults
-visible: null,
-width: null,
-
 // init GUI
 init: function() {
-	OSRM.GUI.visible = true;
+	// init main box
-	OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
+	OSRM.G.main_handle = new OSRM.GUIBoxHandle("main", "left", "left:-5px;top:5px;", OSRM.GUI.beforeMainTransition, OSRM.GUI.afterMainTransition);
+	
+	// init additional boxes
+	var option_group = new OSRM.GUIBoxGroup();
+	var config_handle = new OSRM.GUIBoxHandle("config", "right", "right:-5px;bottom:70px;");
+	var mapping_handle = new OSRM.GUIBoxHandle("mapping", "right", "right:-5px;bottom:25px;");
+	option_group.add( config_handle );
+	option_group.add( mapping_handle );	
 	
 	// init starting source/target
 	document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
 	document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET;
 	
-	// init events
-	document.getElementById("gui-toggle-in").onclick = OSRM.GUI.toggleMain;
-	document.getElementById("gui-toggle-out").onclick = OSRM.GUI.toggleMain;
-
-	// gui after transition events
-	if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) {
-		document.getElementById('main-wrapper').addEventListener("transitionend", OSRM.GUI._onMainTransitionEnd, false);
-		document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI._onMainTransitionEnd, false);
-		document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI._onMainTransitionEnd, false);
-		document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI._onMainTransitionEnd, false);
-	}
-	
 	// set default language
 	OSRM.Localization.setLanguage( OSRM.DEFAULTS.LANGUAGE );
 },
@@ -82,40 +73,20 @@ toggleOptions: function() {
 	}
 },
 	
-// show/hide main-gui
+// reposition and hide zoom controls before main box animation
-toggleMain: function() {
+beforeMainTransition: function() {
-	// show main-gui
+	if( OSRM.G.main_handle.boxVisible() == false ) {
-	if( OSRM.GUI.visible == false ) {
 		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
-		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px";;
+		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";
-		
-		document.getElementById('blob-wrapper').style.visibility="hidden";
-		document.getElementById('main-wrapper').style.left="5px";
-	// hide main-gui
 	} else {
 		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
 		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="30px";
-			
-		document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px";
 	}
-
-	// execute after animation (old browser support)
-	if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
-		OSRM.GUI._onMainTransitionEnd();		
 },
 
-// do stuff after main-gui animation finished
+// show zoom controls after main box animation
-_onMainTransitionEnd: function() {
+afterMainTransition: function() {
-	// after hiding main-gui
-	if( OSRM.GUI.visible == true ) {
-		document.getElementById('blob-wrapper').style.visibility="visible";
 	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
-		OSRM.GUI.visible = false;		
-	// after showing main-gui
-	} else {
-		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
- 		OSRM.GUI.visible = true;		
-	}
 }
 
 });

WebContent/main.css

@@ -23,6 +23,7 @@ html, body {
     padding: 0;
     margin: 0;
     height: 100%;
+    overflow:hidden;
 }
 #map {
 	height: 100%;
@@ -31,7 +32,7 @@ html, body {
 
 
 /* general styles for gui boxes */
-.gui-wrapper
+.box-wrapper
 {
 	position:absolute;
 	border-radius:10px;
@@ -39,13 +40,13 @@ html, body {
 	-webkit-border-radius:10px;
 	background-color:#666666;
 	background-color:rgba(0, 0, 0, 0.25);
-	transition:left 1s;
+	transition:left 1s, right 1s;
-	-moz-transition:left 1s;
+	-moz-transition:left 1s,right 1s;
-	-webkit-transition:left 1s;
+	-webkit-transition:left 1s,right 1s;
-	-o-transition:left 1s;
+	-o-transition:left 1s,right 1s;
-	-ms-transition:left 1s;
+	-ms-transition:left 1s,right 1s;	
 }
-.gui-box
+.box-content
 {
 	position:absolute;
 	background-color:#ffffff;	
@@ -56,6 +57,50 @@ html, body {
 	margin:5px;
 	padding:5px;	
 }
+.box-handle-wrapper-right
+{
+	width:36px;
+	height:36px;
+	border-top-right-radius:0px;
+	border-bottom-right-radius:0px;
+	-moz-border-radius-topright:0px;
+	-moz-border-radius-bottomright:0px;
+	-webkit-border-top-right-radius:0px;
+	-webkit-border-bottom-right-radius:0px;
+}
+.box-handle-content-right
+{
+	width:16px;
+	height:16px;
+	border-top-right-radius:0px;
+	border-bottom-right-radius:0px;
+	-moz-border-radius-topright:0px;
+	-moz-border-radius-bottomright:0px;
+	-webkit-border-top-right-radius:0px;
+	-webkit-border-bottom-right-radius:0px;	
+}
+.box-handle-wrapper-left
+{
+	width:36px;
+	height:36px;
+	border-top-left-radius:0px;
+	border-bottom-left-radius:0px;
+	-moz-border-radius-topleft:0px;
+	-moz-border-radius-bottomleft:0px;
+	-webkit-border-top-left-radius:0px;
+	-webkit-border-bottom-left-radius:0px;
+}
+.box-handle-content-left
+{
+	width:16px;
+	height:16px;
+	border-top-left-radius:0px;
+	border-bottom-left-radius:0px;
+	-moz-border-radius-topleft:0px;
+	-moz-border-radius-bottomleft:0px;
+	-webkit-border-top-left-radius:0px;
+	-webkit-border-bottom-left-radius:0px;	
+}
 
 
 /* styles for specific gui boxes */
@@ -77,31 +122,6 @@ html, body {
 	top:220px;			/* main-input.height+2*gui-box.margin+2*gui-box.padding */
 	bottom:0px;
 }
-#blob-wrapper
-{
-	left:-5px;
-	top:5px;
-	width:36px;
-	height:36px;
-	border-top-left-radius:0px;
-	border-bottom-left-radius:0px;
-	-moz-border-radius-topleft:0px;
-	-moz-border-radius-bottomleft:0px;
-	-webkit-border-top-left-radius:0px;
-	-webkit-border-bottom-left-radius:0px;
-	visibility:hidden;
-}
-#blob-content
-{
-	width:16px;
-	height:16px;
-	border-top-left-radius:0px;
-	border-bottom-left-radius:0px;
-	-moz-border-radius-topleft:0px;
-	-moz-border-radius-bottomleft:0px;
-	-webkit-border-top-left-radius:0px;
-	-webkit-border-bottom-left-radius:0px;	
-}
 
 
 /* styles for main-input areas */

WebContent/main.html

@@ -58,6 +58,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <script src="base/OSRM.Markers.js" type="text/javascript"></script>
 <script src="base/OSRM.Routes.js" type="text/javascript"></script>
 <script src="gui/OSRM.GUI.js" type="text/javascript"></script>
+<script src="gui/OSRM.GUIBoxGroup.js" type="text/javascript"></script>
+<script src="gui/OSRM.GUIBoxHandle.js" type="text/javascript"></script>
 <script src="gui/OSRM.MainGUI.js" type="text/javascript"></script>
 <script src="routing/OSRM.Routing.js" type="text/javascript"></script>
 <script src="routing/OSRM.RoutingDescription.js" type="text/javascript"></script>
@@ -81,21 +83,28 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <!--map-->
 <div id="map"></div>
 
-<!-- show ui blob -->
+<div id="config-wrapper" class="box-wrapper not-sectable" style="width:410px;height:100px;bottom:25px;right:-410px;">
-<div id="blob-wrapper" class="gui-wrapper">
+<div id="config-content" class="box-content" style="width:390px;height:80px;">
-<div id="blob-content" class="gui-box">
+<div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div>
-   	<div id="gui-toggle-in" class="iconic-button"></div>
+Config block
+</div>
+</div>
+
+<div id="mapping-wrapper" class="box-wrapper not-sectable" style="width:410px;height:100px;bottom:25px;right:-410px;">
+<div id="mapping-content" class="box-content" style="width:390px;height:80px;">
+<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
+Mapping block
 </div>
 </div>
 
 <!-- show main gui -->
-<div id="main-wrapper" class="gui-wrapper not-selectable">
+<div id="main-wrapper" class="box-wrapper not-selectable">
 
 <!-- input box -->
-<div id="main-input" class="gui-box">
+<div id="main-input" class="box-content">
 	<!--  header -->
 	<div id="input-mask-header">
-	<div id="gui-toggle-out" class="iconic-button top-right-button"></div>
+	<div id="main-toggle" class="iconic-button cancel-marker top-right-button"></div>
 	</div>
 	
 	<!--  input mask -->
@@ -106,13 +115,13 @@ or see http://www.gnu.org/licenses/agpl.txt.
 	<div id="input-source" class="input-marker">
 	<div class="left"><span  id="gui-search-source-label" class="input-label">Start:</span></div>
 	<div class="center input-box"><input id="gui-input-source" class="input-box" type="text" maxlength="200" value="" title="Enter start" /></div>
-	<div class="left"><div id="gui-delete-source" class="iconic-button delete-marker input-delete"></div></div>
+	<div class="left"><div id="gui-delete-source" class="iconic-button cancel-marker input-delete"></div></div>
 	<div class="right"><a class="button" id="gui-search-source">Show</a></div>
 	</div>
 	<div id="input-target" class="input-marker">
 	<div class="left"><span id="gui-search-target-label" class="input-label">End:</span></div>
 	<div class="center input-box"><input id="gui-input-target" class="input-box" type="text" maxlength="200" value="" title="Enter destination" /></div>	
-	<div class="left"><div id="gui-delete-target" class="iconic-button delete-marker input-delete"></div></div>
+	<div class="left"><div id="gui-delete-target" class="iconic-button cancel-marker input-delete"></div></div>
 	<div class="right"><a class="button" id="gui-search-target">Show</a></div>	
 	</div>
 	</div>
@@ -149,13 +158,12 @@ or see http://www.gnu.org/licenses/agpl.txt.
 </div>
 
 <!-- output box -->
-<div id="main-output" class="gui-box">
+<div id="main-output" class="box-content">
 	<div id="information-box-header"></div>
 	<div id="information-box"></div>
 	<div id="legal-notice" class="small-font">GUI2 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a></div>
 </div>
 
 </div>
-
 </body>
 </html>

WebContent/main.js

@@ -121,17 +121,25 @@ OSRM.prefetchCSSIcons = function() {
 	                	{ id:'#gui-printer',				image_id:'printer'},
 	                	{ id:'#gui-printer:hover',			image_id:'printer_hover'},
 	                	{ id:'#gui-printer:active',			image_id:'printer_active'},
-	                	{ id:'#gui-toggle-in',				image_id:'restore'},
+	                	
-	                	{ id:'#gui-toggle-in:hover',		image_id:'restore_hover'},
+	                	{ id:'.cancel-marker',				image_id:'cancel'},
-	                	{ id:'#gui-toggle-in:active',		image_id:'restore_active'},
+	                	{ id:'.cancel-marker:hover',		image_id:'cancel_hover'},
-	                	{ id:'#gui-toggle-out',				image_id:'cancel'},
+	                	{ id:'.cancel-marker:active',		image_id:'cancel_active'},
-	                	{ id:'#gui-toggle-out:hover',		image_id:'cancel_hover'},
+	                	
-	                	{ id:'#gui-toggle-out:active',		image_id:'cancel_active'},
-	                	{ id:'.delete-marker',				image_id:'cancel'},
-	                	{ id:'.delete-marker:hover',		image_id:'cancel_hover'},
-	                	{ id:'.delete-marker:active',		image_id:'cancel_active'},
 	                	{ id:'#input-mask-header',			image_id:'osrm-logo'},
-	                	{ id:'.styled-select',				image_id:'selector'}
+	                	{ id:'.styled-select',				image_id:'selector'},
+	                	
+	                	{ id:'#config-handle-icon',			image_id:'cancel'},
+	                	{ id:'#config-handle-icon:hover',	image_id:'cancel_hover'},
+	                	{ id:'#config-handle-icon:active',	image_id:'cancel_active'},
+	                	           	
+	                	{ id:'#mapping-handle-icon',		image_id:'cancel'},
+	                	{ id:'#mapping-handle-icon:hover',	image_id:'cancel_hover'},
+	                	{ id:'#mapping-handle-icon:active',	image_id:'cancel_active'},
+	                	          	
+	                	{ id:'#main-handle-icon',			image_id:'restore'},
+	                	{ id:'#main-handle-icon:hover',		image_id:'restore_hover'},
+	                	{ id:'#main-handle-icon:active',	image_id:'restore_active'}	                	
 	                ];
 	
 	var stylesheet = OSRM.CSS.getStylesheet("main.css");