1
0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-20 13:40:55 +01:00
egroupware_official/phpgwapi/templates/idots/js/slidereffects.js
Pim Snel 07dd063def i-dots changes:
-  lay-out fixes in header
-  background in loginscreen to make it a little less boring
-  IE fix for wrong z-index with Selectboxes: temporarely hide selectboxes when showing menulayers
-  extra option to disable IE png fix
-  extra option to choose Click or Mouse Over to show menu's
-  extra option to auto hide sideboxmenu's (a lot of people will like this)
-  extra option to use sliders for showing menu, default enabled (see testresults below):

Mozilla-firebird Windows -> OK
Mozilla-firebird Linux -> OK
Internet Explorer 6.0 Windows 2000 - OK
Konqueror 3.1 Linux -> gets very slow, lay-out bugs (don't use this option with konqueror)
Opera 6 Linux -> showing works, hiding not, lay-out bugs (test again please)
Opera 7 Linux -> very annoing bug with temporarely hiding selectboxes (must not be hard to fix, pathes are welcome)

please also test this with Safari, Mac IE 5,  Win IE 5.0 and 5.5 and report bugs at sf
2003-12-15 00:05:28 +00:00

218 lines
6.5 KiB
JavaScript

/*****************************************************
* ypSlideOutMenu
* 3/04/2001
*
* a nice little script to create exclusive, slide-out
* menus for ns4, ns6, mozilla, opera, ie4, ie5 on
* mac and win32. I've got no linux or unix to test on but
* it should(?) work...
*
* --youngpup--
*****************************************************/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 1000
ypSlideOutMenu.minCPUResolution = 10
// constructor
function ypSlideOutMenu(id, dir, left, top, width, height,pos)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
// global reference to this object
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
// add this menu object to an internal list of all menus
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = '<style type="text/css">';
strCSS += '#' + this.id + 'Container { visibility:hidden; '
if(pos)
{
strCSS += pos+':' + left + 'px; '
}
else
{
strCSS += 'left:' + left + 'px; '
}
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:visible; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
// strCSS += 'height:' + height + 'px; '
// strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
strCSS += '</style>';
d.write(strCSS)
this.load()
}
}
ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
//document.all.select.style="visibily:hidden";
//temporarly hide all selectboxes to fix IE bug with z-index
if(document.all)
{
for (var i=0; i<document.all.length; i++) {
o = document.all(i)
if (o.type == 'select-one' || o.type == 'select-multiple') {
// todo: add check for select in div?
if (o.style) o.style.display = 'none';
}
}
}
if (obj.container) {
obj.over = true
// close other menus.
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
// if this menu is scheduled to close, cancel it.
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
// if this menu is closed, open it.
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
// schedules the menu to close after <hideDelay> ms, which
// gives the user time to cancel the action if they accidentally moused out
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}
ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
// flag that this scheduled event has occured.
obj.hideTimer = 0
// if this menu is open, close it.
if (obj.open && !obj.aniTimer) obj.startSlide(false)
//show all selectboxes again to fix IE bug with z-index
if(document.all)
{
for (var i=0; i<document.all.length; i++) {
o = document.all(i)
if (o.type == 'select-one' || o.type == 'select-multiple') {
// todo: add check for select in div?
if (o.style) o.style.display = 'inline';
}
}
}
}
ypSlideOutMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}
ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
// events
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }