finished new box design

WebContent/gui/OSRM.GUIBoxGroup.js

@@ -29,16 +29,25 @@ OSRM.GUIBoxGroup = function() {
 OSRM.extend( OSRM.GUIBoxGroup, {
 add: function( handle ) {
 	this._handles.push( handle );
-	handle.addToGroup(this);
+	handle.$addToGroup(this);
 },
-hide: function() {
+select: function( handle ) {
 	for(var i=0; i< this._handles.length; i++) {
-		this._handles[i].hide();
+		if( this._handles[i] != handle )
+			this._handles[i].$hideBox();
+		else
+			this._handles[i].$showBox();
 	}
 },
-show: function() {
+
+$hide: function() {
 	for(var i=0; i< this._handles.length; i++) {
-		this._handles[i].show();
+		this._handles[i].$hide();
+	}
+},
+$show: function() {
+	for(var i=0; i< this._handles.length; i++) {
+		this._handles[i].$show();
 	}
 }
 });

WebContent/gui/OSRM.GUIBoxHandle.js

@@ -18,7 +18,7 @@ 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  ) {
+OSRM.GUIBoxHandle = function( box_name, side, css, transitionStartFct, transitionEndFct  ) {
 	// do not create handle if box does not contain a toggle button
 	var toggle = document.getElementById( box_name + '-toggle');
 	if( toggle == null ) {
@@ -26,11 +26,11 @@ OSRM.GUIBoxHandle = function( box_name, side, cssText, transitionStartFct, trans
 		return;
 	}
 	
-	// create DOM elements
+	// create handle 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;
+	wrapper.style.cssText += css;
 	var content = document.createElement('div');
 	content.id = box_name + '-handle-content';
 	content.className = 'box-content box-handle-content-'+side;
@@ -44,22 +44,20 @@ OSRM.GUIBoxHandle = function( box_name, side, cssText, transitionStartFct, trans
 	
 	// create attributes
 	this._box = document.getElementById( box_name + '-wrapper' );
+	this._class = this._box.className;
 	this._width = this._box.clientWidth;
+	this._side = side;
 	this._handle = wrapper;
 	this._box_group = null;
+	this._transitionEndFct = transitionEndFct;
 
-	// show or hide
+	// hide box and show handle by default
-	if(side=="left") {
+	this._box.style[this._side]=-this._width+"px";
-		this._box_visible = true;
+	this._box_visible = false;
-		this._handle.style.visibility="hidden";
+	this._handle.style.visibility="visible";
-	} 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(this._toggle, transitionStartFct) : this._toggle;
-	var full_fct = transitionStartFct ? OSRM.concat(toggle_fct, transitionStartFct) : toggle_fct;
 	var fct = OSRM.bind( this, full_fct );
 	toggle.onclick = fct;
 	icon.onclick = fct;
@@ -73,20 +71,11 @@ OSRM.GUIBoxHandle = function( box_name, side, cssText, transitionStartFct, trans
 		box_wrapper.addEventListener("oTransitionEnd", fct, false);
 		box_wrapper.addEventListener("MSTransitionEnd", fct, false);
 	} else {
-		this._transitionEndFct = fct;
+		this._legacyTransitionEndFct = fct;			// legacy browser support
 	}
 };
 
 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;
 },
@@ -94,31 +83,43 @@ boxWidth: function() {
 	return this._width;
 },
 
-_toggleLeft: function() {
+$addToGroup: function(group) {
-	if( this._box_visible == false ) {
+	this._box_group = group;
-		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() {
+$show: function() {
+	this._handle.style.visibility="visible";
+},
+$hide: function() {
+	this._handle.style.visibility="hidden";
+},
+$showBox: function() {
+	this._box_visible = true;
+	this._handle.style.visibility="hidden";
+	this._box.style[this._side]="5px";
+	this._transitionEndFct();
+},
+$hideBox: function() {
+	this._box_visible = false;
+	this._handle.style.visibility="visible";
+	this._box.style[this._side]=-this._width+"px";
+},
+
+_toggle: function() {
+	this._box.className += " box-animated";
 	if( this._box_visible == false ) {
-		if(this._box_group) this._box_group.hide(); else this.hide();
+		this._box_group.$hide();
-		this._box.style.right="5px";
+		this._box.style[this._side]="5px";
 	} else {
-		this._box.style.right=-this._width+"px";
+		this._box.style[this._side]=-this._width+"px";
 	}
-	// old browser support
+	// legacy browser support
 	if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
-		setTimeout(this._transitionEndFct, 0);
+		setTimeout(this._legacyTransitionEndFct, 0);
 },
 _onTransitionEnd: function() {
+	this._box.className = this._class;
 	if( this._box_visible == true ) {
-		if(this._box_group) this._box_group.show(); else this.show();
+		this._box_group.$show();
 		this._box_visible = false;
 	} else {
 		this._box_visible = true;		

WebContent/gui/OSRM.MainGUI.js

@@ -24,7 +24,10 @@ OSRM.GUI.extend( {
 // init GUI
 init: function() {
 	// init main box
+	var main_group = new OSRM.GUIBoxGroup();
 	OSRM.G.main_handle = new OSRM.GUIBoxHandle("main", "left", "left:-5px;top:5px;", OSRM.GUI.beforeMainTransition, OSRM.GUI.afterMainTransition);
+	main_group.add( OSRM.G.main_handle );
+	main_group.select( OSRM.G.main_handle );
 	
 	// init additional boxes
 	var option_group = new OSRM.GUIBoxGroup();
@@ -32,6 +35,7 @@ init: function() {
 	var mapping_handle = new OSRM.GUIBoxHandle("mapping", "right", "right:-5px;bottom:25px;");
 	option_group.add( config_handle );
 	option_group.add( mapping_handle );
+	option_group.select( null );
 	
 	// init starting source/target
 	document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
@@ -75,18 +79,18 @@ toggleOptions: function() {
 	
 // reposition and hide zoom controls before main box animation
 beforeMainTransition: function() {
-	if( OSRM.G.main_handle.boxVisible() == false ) {
+	var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
-		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
+	if( zoom_controls.length > 0)
-		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";
+		zoom_controls[0].style.visibility="hidden";
-	} else {
-		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
-		OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="30px";
-	}
 },
 
 // show zoom controls after main box animation
 afterMainTransition: function() {
-	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+	var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
+	if( zoom_controls.length > 0) {
+		zoom_controls[0].style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
+		zoom_controls[0].style.visibility="visible";
+	}
 }
 
 });

WebContent/main.css

@@ -40,6 +40,9 @@ html, body {
 	-webkit-border-radius:10px;
 	background-color:#666666;
 	background-color:rgba(0, 0, 0, 0.25);
+}
+.box-animated
+{	
 	transition:left 1s, right 1s;
 	-moz-transition:left 1s,right 1s;
 	-webkit-transition:left 1s,right 1s;