home *** CD-ROM | disk | FTP | other *** search
/ Chip 2003 January (DVD) / Chip_2003-01_DVD.iso / ChipCD / tema / accomw / js / collapsemenu.js next >
Encoding:
JavaScript  |  2002-11-29  |  4.4 KB  |  111 lines
  1. // CollapseMenu Object
  2. // a slick collapsable navigation menu object
  3. // 19990606
  4.  
  5. // Copyright (C) 1999 Dan Steinman
  6. // Distributed under the terms of the GNU Library General Public License
  7. // Available at http://www.dansteinman.com/dynapi/
  8.  
  9. function CollapseMenu(x,y,width,numBlocks,name) {
  10.     this.name = (name!=null)? name : "CollapseMenu"+(CollapseMenu.count++)
  11.     this.x = x
  12.     this.y = y
  13.     this.w = width
  14.     this.numBlocks = numBlocks
  15.     this.bgColor = '#ffffff'
  16.     this.openStyle = "slide"  // or 'glide' or 'move'
  17.     this.contentIndent = 0
  18.     this.inc = 5
  19.     this.speed = 20
  20.     this.active = false
  21.     this.obj = this.name + "Object"
  22.     eval(this.obj + "=this")
  23.     this.build = CollapseMenuBuild
  24.     this.activate = CollapseMenuActivate
  25.     this.toggle = CollapseMenuToggle
  26.     this.open = CollapseMenuOpen
  27.     this.close = CollapseMenuClose
  28.     this.finish = CollapseMenuFinish
  29.     this.onToggle = new Function()
  30. }
  31. function CollapseMenuBuild() {
  32.     this.css = css(this.name,this.x,this.y,this.w,0)
  33.     for (var i=0;i<this.numBlocks;i++) {
  34.         this.css += css(this.name+'Block'+i,0,0,this.w)
  35.         this.css += css(this.name+'Block'+i+'Item',0,0,this.w,null,this.bgColor)
  36.         this.css += css(this.name+'Block'+i+'Content',0,0,this.w,null,this.bgColor,null,null,'margin-left:'+this.contentIndent)
  37.     }
  38.     this.css += css(this.name+'Block'+this.numBlocks,0,0,this.w,0,this.bgColor)
  39.     this.divStart = '<div id="'+this.name+'">'
  40.     this.divEnd = ''
  41.     this.divEnd += '<div id="'+this.name+'Block'+this.numBlocks+'"></div>'
  42.     for (var i=0;i<this.numBlocks;i++) {
  43.         this.divEnd += '</div>'
  44.     }
  45.     this.divEnd += '</div>'
  46. }
  47. function CollapseMenuActivate() {
  48.     this.lyr = new DynLayer(this.name)
  49.     this.blocks = new Array()
  50.     this.itemTotal = 0
  51.     this.contentTotal = 0
  52.     for (var i=0;i<this.numBlocks;i++) {
  53.         this.blocks[i] = new Object()
  54.         this.blocks[i].open = false
  55.         this.blocks[i].lyr = new DynLayer(this.name+'Block'+i)
  56.         this.blocks[i].itemlyr = new DynLayer(this.name+'Block'+i+'Item')
  57.         this.blocks[i].itemHeight = this.blocks[i].itemlyr.getContentHeight()
  58.         this.itemTotal += this.blocks[i].itemHeight
  59.         this.blocks[i].itemlyr.clipTo(0,this.w,this.blocks[i].itemHeight,0)
  60.         
  61.         this.blocks[i].contentlyr = new DynLayer(this.name+'Block'+i+'Content')
  62.         this.blocks[i].contentHeight = this.blocks[i].contentlyr.getContentHeight()
  63.         this.contentTotal += this.blocks[i].contentHeight
  64.         
  65.         this.blocks[i].contentlyr.clipTo(0,this.w,this.blocks[i].contentHeight,0)
  66.         this.blocks[i].contentlyr.moveTo(null,this.blocks[i].itemHeight)
  67.         if (i!=0) this.blocks[i].lyr.moveTo(null,this.blocks[i-1].itemHeight)
  68.         this.blocks[i].h = this.blocks[i].itemHeight + this.blocks[i].contentHeight
  69.     }
  70.     this.h = this.contentTotal + this.itemTotal
  71.     for (var i=this.numBlocks-1;i>=0;i--) {
  72.         this.blocks[i].lyr.clipInit()
  73.         this.blocks[i].lyr.clipTo(0,this.w,this.h-this.blocks[i].lyr.y,0)
  74.     }
  75.     this.blocks[this.numBlocks] = new Object()
  76.     this.blocks[this.numBlocks].lyr = new DynLayer(this.name+'Block'+this.numBlocks)
  77.     this.blocks[this.numBlocks].lyr.clipTo(0,this.w,this.h-this.itemTotal,0)
  78.     this.blocks[this.numBlocks].lyr.css.height = this.h-this.itemTotal
  79.     this.blocks[this.numBlocks].lyr.moveTo(null,this.blocks[this.numBlocks-1].itemHeight)
  80.     this.lyr.clipTo(0,this.w,this.h,0)
  81. }
  82. function CollapseMenuToggle(i) {
  83.     if (this.active) return
  84.     this.active = true
  85.     if (!this.blocks[i].open) this.open(i)
  86.     else this.close(i)
  87. }
  88. function CollapseMenuOpen(i) {
  89.     if (!this.blocks[i].open) {
  90.         var h = this.blocks[i].contentHeight + this.blocks[i].itemHeight
  91.         this.blocks[i].open = true
  92.         if (this.openStyle == 'slide') this.blocks[i+1].lyr.slideTo(null,h,this.inc,this.speed,this.obj+'.finish()')
  93.         else if (this.openStyle == 'glide') this.blocks[i+1].lyr.glideTo('slow','slow',null,h,this.inc,this.speed,this.obj+'.finish()')
  94.         else if (this.openStyle == 'move') {this.blocks[i+1].lyr.moveTo(null,h); this.finish();}
  95.     }
  96. }
  97. function CollapseMenuClose(i) {
  98.     if (this.blocks[i].open) {
  99.         var h = this.blocks[i].itemHeight
  100.         this.blocks[i].open = false
  101.         if (this.openStyle == 'slide') this.blocks[i+1].lyr.slideTo(null,h,this.inc,this.speed,this.obj+'.finish()')
  102.         else if (this.openStyle == 'glide') this.blocks[i+1].lyr.glideTo('slow','slow',null,h,this.inc,this.speed,this.obj+'.finish()')
  103.         else if (this.openStyle == 'move') {this.blocks[i+1].lyr.moveTo(null,h); this.finish();}
  104.     }
  105. }
  106. function CollapseMenuFinish() {
  107.     this.active = false
  108.     this.onToggle()
  109. }
  110. CollapseMenu.count = 0
  111.