finished new box design
This commit is contained in:
shiin
parent
884f79a620
commit
2d956983a5
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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
|
||||
if(side=="left") {
|
||||
this._box_visible = true;
|
||||
this._handle.style.visibility="hidden";
|
||||
} else {
|
||||
// hide box and show handle by default
|
||||
this._box.style[this._side]=-this._width+"px";
|
||||
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 full_fct = transitionStartFct ? OSRM.concat(this._toggle, transitionStartFct) : this._toggle;
|
||||
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() {
|
||||
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);
|
||||
$addToGroup: function(group) {
|
||||
this._box_group = group;
|
||||
},
|
||||
_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.style.right="5px";
|
||||
this._box_group.$hide();
|
||||
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;
|
||||
|
||||
@ -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 ) {
|
||||
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
|
||||
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";
|
||||
} else {
|
||||
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
|
||||
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="30px";
|
||||
}
|
||||
var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
|
||||
if( zoom_controls.length > 0)
|
||||
zoom_controls[0].style.visibility="hidden";
|
||||
},
|
||||
|
||||
// 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";
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user