Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

new handling of gui boxes (work in progress)

Browse Source
This commit is contained in:
DennisSchiefer
2012-05-08 16:58:08 +01:00
parent 39f33b670d
commit 884f79a620
8 changed files with 288 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/gui/OSRM.GUIBoxGroup.js
+44
View File
@@ -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
+127
View File
@@ -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
+18 -47
View File
@@ -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;
OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
// init main box
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 );
},
@@ -67,13 +58,13 @@ setLabels: function() {
document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE");
},
//clear output area
// clear output area
clearResults: function() {
document.getElementById('information-box').innerHTML = "";
document.getElementById('information-box-header').innerHTML = "";
},
//show/hide small options bubble
// show/hide small options bubble
toggleOptions: function() {
if(document.getElementById('options-box').style.visibility=="visible") {
document.getElementById('options-box').style.visibility="hidden";
@@ -82,40 +73,20 @@ toggleOptions: function() {
}
},
// show/hide main-gui
toggleMain: function() {
// show main-gui
if( OSRM.GUI.visible == false ) {
// 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.GUI.width+10)+"px";;
document.getElementById('blob-wrapper').style.visibility="hidden";
document.getElementById('main-wrapper').style.left="5px";
// hide main-gui
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";
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
_onMainTransitionEnd: 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;
}
// show zoom controls after main box animation
afterMainTransition: function() {
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
}
});