128 lines
4.2 KiB
JavaScript
128 lines
4.2 KiB
JavaScript
/*
|
|
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, 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 ) {
|
|
console.log("[error] No toggle button for " + box_name);
|
|
return;
|
|
}
|
|
|
|
// 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 += css;
|
|
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._class = this._box.className;
|
|
this._width = this._box.clientWidth;
|
|
this._side = side;
|
|
this._handle = wrapper;
|
|
this._box_group = null;
|
|
this._transitionEndFct = transitionEndFct;
|
|
|
|
// 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 full_fct = transitionStartFct ? OSRM.concat(this._toggle, transitionStartFct) : this._toggle;
|
|
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._legacyTransitionEndFct = fct; // legacy browser support
|
|
}
|
|
};
|
|
|
|
OSRM.extend( OSRM.GUIBoxHandle, {
|
|
boxVisible: function() {
|
|
return this._box_visible;
|
|
},
|
|
boxWidth: function() {
|
|
return this._width;
|
|
},
|
|
|
|
$addToGroup: function(group) {
|
|
this._box_group = group;
|
|
},
|
|
$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 ) {
|
|
this._box_group.$hide();
|
|
this._box.style[this._side]="5px";
|
|
} else {
|
|
this._box.style[this._side]=-this._width+"px";
|
|
}
|
|
// legacy browser support
|
|
if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
|
|
setTimeout(this._legacyTransitionEndFct, 0);
|
|
},
|
|
_onTransitionEnd: function() {
|
|
this._box.className = this._class;
|
|
if( this._box_visible == true ) {
|
|
this._box_group.$show();
|
|
this._box_visible = false;
|
|
} else {
|
|
this._box_visible = true;
|
|
}
|
|
}
|
|
}); |