[Sommaire] [Imprimer]

   1  /*****************************************************
   2   * ypSlideOutMenu
   3   * 3/04/2001
   4   * 
   5   * a nice little script to create exclusive, slide-out
   6   * menus for ns4, ns6, mozilla, opera, ie4, ie5 on 
   7   * mac and win32. I've got no linux or unix to test on but 
   8   * it should(?) work... 
   9   *
  10   * --youngpup--
  11   *****************************************************/
  12  
  13  ypSlideOutMenu.Registry = []
  14  ypSlideOutMenu.aniLen = 250
  15  ypSlideOutMenu.hideDelay = 1000
  16  ypSlideOutMenu.minCPUResolution = 10
  17  
  18  // constructor
  19  function ypSlideOutMenu(id, dir, left, top, width, height,pos)
  20  {
  21      this.ie  = document.all ? 1 : 0
  22          this.ns4 = document.layers ? 1 : 0
  23          this.dom = document.getElementById ? 1 : 0
  24  
  25          if (this.ie || this.ns4 || this.dom) {
  26              this.id             = id
  27                  this.dir         = dir
  28                  this.orientation = dir == "left" || dir == "right" ? "h" : "v"
  29                  this.dirType     = dir == "right" || dir == "down" ? "-" : "+"
  30                  this.dim         = this.orientation == "h" ? width : height
  31                  this.hideTimer     = false
  32                  this.aniTimer     = false
  33                  this.open         = false
  34                  this.over         = false
  35                  this.startTime     = 0
  36  
  37                  // global reference to this object
  38                  this.gRef = "ypSlideOutMenu_"+id
  39                  eval(this.gRef+"=this")
  40  
  41                  // add this menu object to an internal list of all menus
  42                  ypSlideOutMenu.Registry[id] = this
  43  
  44                  var d = document
  45  
  46                  var strCSS = '<style type="text/css">';
  47              strCSS += '#' + this.id + 'Container { visibility:hidden; '
  48                  if(pos)
  49                  {
  50                      strCSS += pos+':' + left + 'px; '
  51                  }
  52                  else
  53                  {
  54                      strCSS += 'left:' + left + 'px; '
  55                  }
  56                  strCSS += 'top:' + top + 'px; '
  57                      strCSS += 'overflow:visible; z-index:10000; }'
  58                      strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
  59                          strCSS += 'width:' + width + 'px; '
  60                              //        strCSS += 'height:' + height + 'px; '
  61                              //        strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
  62                              strCSS += '}'
  63                              strCSS += '</style>';
  64  
  65                          d.write(strCSS)
  66  
  67                              this.load()
  68                      }
  69          }
  70  
  71      ypSlideOutMenu.prototype.load = function() {
  72          var d = document
  73              var lyrId1 = this.id + "Container"
  74              var lyrId2 = this.id + "Content"
  75              var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
  76              if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
  77                  var temp
  78  
  79                      if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
  80                      else {
  81                          this.container    = obj1
  82                              this.menu        = obj2
  83                              this.style        = this.ns4 ? this.menu : this.menu.style
  84                              this.homePos    = eval("0" + this.dirType + this.dim)
  85                              this.outPos        = 0
  86                              this.accelConst    = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen 
  87  
  88                              // set event handlers.
  89                              if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  90                          this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
  91                              this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
  92  
  93                              //set initial state
  94                              this.endSlide()
  95                      }
  96      }
  97  
  98      ypSlideOutMenu.showMenu = function(id)
  99      {
 100          var reg = ypSlideOutMenu.Registry
 101              var obj = ypSlideOutMenu.Registry[id]
 102  
 103              //document.all.select.style="visibily:hidden";
 104  
 105  
 106              //temporarly hide all selectboxes to fix IE bug with z-index  
 107              if(document.all)
 108              {
 109                  for (var i=0; i<document.all.length; i++) {
 110                      o = document.all(i)
 111                          if (o.type == 'select-one' || o.type == 'select-multiple') {
 112                              // todo: add check for select in div?
 113                              if (o.style) o.style.display = 'none';
 114                          }
 115                  }
 116              }
 117  
 118  
 119          if (obj.container) {
 120              obj.over = true
 121  
 122                  // close other menus.
 123                  for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
 124  
 125                      // if this menu is scheduled to close, cancel it.
 126                      if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
 127  
 128              // if this menu is closed, open it.
 129              if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
 130          }
 131      }
 132  
 133      ypSlideOutMenu.hideMenu = function(id)
 134      {
 135          // schedules the menu to close after <hideDelay> ms, which
 136          // gives the user time to cancel the action if they accidentally moused out
 137          var obj = ypSlideOutMenu.Registry[id]
 138              if (obj.container) {
 139                  if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
 140                      obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
 141              }
 142      }
 143  
 144      ypSlideOutMenu.hide = function(id)
 145      {
 146          var obj = ypSlideOutMenu.Registry[id]
 147              obj.over = false
 148  
 149              if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
 150  
 151                  // flag that this scheduled event has occured.
 152                  obj.hideTimer = 0
 153  
 154                      // if this menu is open, close it.
 155                      if (obj.open && !obj.aniTimer) obj.startSlide(false)
 156  
 157                          //show all selectboxes again to fix IE bug with z-index  
 158                          if(document.all)
 159                          {
 160                              for (var i=0; i<document.all.length; i++) {
 161                                  o = document.all(i)
 162                                      if (o.type == 'select-one' || o.type == 'select-multiple') {
 163                                          // todo: add check for select in div?
 164                                          if (o.style) o.style.display = 'inline';
 165                                      }
 166                              }
 167                          }
 168  
 169  
 170  
 171      }
 172  
 173  ypSlideOutMenu.prototype.startSlide = function(open) {
 174      this[open ? "onactivate" : "ondeactivate"]()
 175      this.open = open
 176      if (open) this.setVisibility(true)
 177      this.startTime = (new Date()).getTime()    
 178      this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
 179  }
 180  
 181  ypSlideOutMenu.prototype.slide = function() {
 182      var elapsed = (new Date()).getTime() - this.startTime
 183      if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
 184      else {
 185          var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
 186          if (this.open && this.dirType == "-")        d = -d
 187          else if (this.open && this.dirType == "+")    d = -d
 188          else if (!this.open && this.dirType == "-")    d = -this.dim + d
 189          else                                        d = this.dim + d
 190  
 191          this.moveTo(d)
 192      }
 193  }
 194  
 195  ypSlideOutMenu.prototype.endSlide = function() {
 196      this.aniTimer = window.clearTimeout(this.aniTimer)
 197      this.moveTo(this.open ? this.outPos : this.homePos)
 198      if (!this.open) this.setVisibility(false)
 199      if ((this.open && !this.over) || (!this.open && this.over)) {
 200          this.startSlide(this.over)
 201      }
 202  }
 203  
 204  ypSlideOutMenu.prototype.setVisibility = function(bShow) { 
 205      var s = this.ns4 ? this.container : this.container.style
 206      s.visibility = bShow ? "visible" : "hidden"
 207  }
 208  ypSlideOutMenu.prototype.moveTo = function(p) { 
 209      this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
 210  }
 211  ypSlideOutMenu.prototype.getPos = function(c) {
 212      return parseInt(this.style[c])
 213  }
 214  
 215  // events
 216  ypSlideOutMenu.prototype.onactivate        = function() { }
 217  ypSlideOutMenu.prototype.ondeactivate    = function() { }