From 884f79a620c03ab9644ffd0bcfede7ad9b8a0725 Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Tue, 8 May 2012 16:58:08 +0100 Subject: [PATCH] new handling of gui boxes (work in progress) --- WebContent/base/OSRM.Map.js | 4 +- WebContent/base/osrm/OSRM.MapView.js | 16 ++-- WebContent/gui/OSRM.GUIBoxGroup.js | 44 ++++++++++ WebContent/gui/OSRM.GUIBoxHandle.js | 127 +++++++++++++++++++++++++++ WebContent/gui/OSRM.MainGUI.js | 65 ++++---------- WebContent/main.css | 84 +++++++++++------- WebContent/main.html | 30 ++++--- WebContent/main.js | 28 +++--- 8 files changed, 288 insertions(+), 110 deletions(-) create mode 100644 WebContent/gui/OSRM.GUIBoxGroup.js create mode 100644 WebContent/gui/OSRM.GUIBoxHandle.js diff --git a/WebContent/base/OSRM.Map.js b/WebContent/base/OSRM.Map.js index e26edb31c..78c77ac28 100644 --- a/WebContent/base/OSRM.Map.js +++ b/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 diff --git a/WebContent/base/osrm/OSRM.MapView.js b/WebContent/base/osrm/OSRM.MapView.js index 110eb249f..bceea9f1c 100644 --- a/WebContent/base/osrm/OSRM.MapView.js +++ b/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 ) - sw_point.x-=OSRM.GUI.width+20; + if( OSRM.G.main_handle.boxVisible() ) + 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 ) - bounds.min.x+=OSRM.GUI.width; + if( OSRM.G.main_handle.boxVisible() ) + 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 ) - viewHalf.x += OSRM.GUI.width; + if( OSRM.G.main_handle.boxVisible() ) + viewHalf.x += OSRM.G.main_handle.boxWidth(); var centerPoint = this._getTopLeftPoint().add(viewHalf.divideBy(2)); return this.unproject(centerPoint, this._zoom, unbounded); diff --git a/WebContent/gui/OSRM.GUIBoxGroup.js b/WebContent/gui/OSRM.GUIBoxGroup.js new file mode 100644 index 000000000..972c6e907 --- /dev/null +++ b/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(); + } +} +}); \ No newline at end of file diff --git a/WebContent/gui/OSRM.GUIBoxHandle.js b/WebContent/gui/OSRM.GUIBoxHandle.js new file mode 100644 index 000000000..23a647406 --- /dev/null +++ b/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; + } +} +}); \ No newline at end of file diff --git a/WebContent/gui/OSRM.MainGUI.js b/WebContent/gui/OSRM.MainGUI.js index bd3875c54..6fa7af179 100644 --- a/WebContent/gui/OSRM.MainGUI.js +++ b/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; - 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"; } }); diff --git a/WebContent/main.css b/WebContent/main.css index 62905c5a5..bfffe0a0e 100644 --- a/WebContent/main.css +++ b/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; - -moz-transition:left 1s; - -webkit-transition:left 1s; - -o-transition:left 1s; - -ms-transition:left 1s; + transition:left 1s, right 1s; + -moz-transition:left 1s,right 1s; + -webkit-transition:left 1s,right 1s; + -o-transition:left 1s,right 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 */ diff --git a/WebContent/main.html b/WebContent/main.html index 5be9ea0fc..3cb0096a0 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -58,6 +58,8 @@ or see http://www.gnu.org/licenses/agpl.txt. + + @@ -81,21 +83,28 @@ or see http://www.gnu.org/licenses/agpl.txt.
- -
-
-
+
+
+
+Config block +
+
+ +
+
+
+Mapping block
-
+
-
+
-
+
@@ -106,13 +115,13 @@ or see http://www.gnu.org/licenses/agpl.txt.
Start:
-
+
Show
End:
-
+
Show
@@ -149,13 +158,12 @@ or see http://www.gnu.org/licenses/agpl.txt.
-
+
- diff --git a/WebContent/main.js b/WebContent/main.js index cd14bc3b4..fb633c62a 100644 --- a/WebContent/main.js +++ b/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:'#gui-toggle-in:active', image_id:'restore_active'}, - { id:'#gui-toggle-out', image_id:'cancel'}, - { 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:'.cancel-marker', image_id:'cancel'}, + { id:'.cancel-marker:hover', image_id:'cancel_hover'}, + { id:'.cancel-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");