git.sur5r.net Git - bacula/bacula/blob - gui/baculum/framework/Web/Javascripts/source/prado/controls/accordion.js

   1 /* Simple Accordion Script
   2  * Requires Prototype and Script.aculo.us Libraries
   3  * By: Brian Crescimanno <brian.crescimanno@gmail.com>
   4  * http://briancrescimanno.com
   5  * Adapted to Prado & minor improvements: Gabor Berczi <gabor.berczi@devworx.hu>
   6  * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
   7  * http://creativecommons.org/licenses/by-sa/3.0/us/
   8  */
   9
  10 Prado.WebUI.TAccordion = Class.create(Prado.WebUI.Control,
  11 {
  12         onInit : function(options)
  13         {
  14                 this.accordion = $(options.ID);
  15                 this.options = options;
  16                 this.hiddenField = $(options.ID+'_1');
  17
  18                 if (this.options.maxHeight)
  19                 {
  20                         this.maxHeight = this.options.maxHeight;
  21                 } else {
  22                         this.maxHeight = 0;
  23                         this.checkMaxHeight();
  24                 }
  25
  26                 this.currentView = null;
  27                 this.oldView = null;
  28
  29                 var i = 0;
  30                 for(var view in this.options.Views)
  31                 {
  32                         var header = $(view+'_0');
  33                         if(header)
  34                         {
  35                                 this.observe(header, "click", this.elementClicked.bindEvent(this,view));
  36                                 if(this.hiddenField.value == i)
  37                                 {
  38                                         this.currentView = view;
  39                                         if($(this.currentView).getHeight() != this.maxHeight)
  40                                                 $(this.currentView).setStyle({height: this.maxHeight+"px"});
  41                                 }
  42                         }
  43                         i++;
  44                 }
  45         },
  46
  47         checkMaxHeight: function()
  48         {
  49                 for(var viewID in this.options.Views)
  50                 {
  51                         var view = $(viewID);
  52                         if(view.getHeight() > this.maxHeight)
  53                                 this.maxHeight = view.getHeight();
  54                 }
  55         },
  56
  57         elementClicked : function(event,viewID)
  58         {
  59                 // dummy effect to force processing of click into the event queue
  60                 // is not actually supposed to change the appearance of the accordion
  61                 var obj = this;
  62                 new Effect.Opacity(
  63                         this.element,
  64                         {
  65                                 from: 1.0, to: 1.0, duration: 0.0,
  66                                 queue: {
  67                                         position: 'end',
  68                                         scope: 'accordion'
  69                                 },
  70                                 afterFinish: function() { obj.processElementClick(event, viewID); }
  71                         }
  72                 );
  73         },
  74
  75         processElementClick : function(event,viewID)
  76         {
  77                 var i = 0;
  78                 for(var index in this.options.Views)
  79                 {
  80                         if ($(index))
  81                         {
  82                                 var header = $(index+'_0');
  83                                 if(index == viewID)
  84                                 {
  85                                         this.oldView = this.currentView;
  86                                         this.currentView = index;
  87
  88                                         this.hiddenField.value=i;
  89                                 }
  90                         }
  91                         i++;
  92                 }
  93                 if(this.oldView != this.currentView)
  94                 {
  95                         if(this.options.Duration > 0)
  96                         {
  97                                 this.animate();
  98                         } else {
  99                                 $(this.currentView).setStyle({ height: this.maxHeight+"px" });
 100                                 $(this.currentView).show();
 101                                 $(this.oldView).hide();
 102
 103                                 var oldHeader = $(this.oldView+'_0');
 104                                 var currentHeader = $(this.currentView+'_0');
 105                                 oldHeader.className=this.options.HeaderCssClass;
 106                                 currentHeader.className=this.options.ActiveHeaderCssClass;
 107                         }
 108                 }
 109         },
 110
 111         animate: function() {
 112                 var effects = new Array();
 113                 var options = {
 114                         sync: true,
 115                         queue: {
 116                                 position: 'end',
 117                                 scope: 'accordion'
 118                         },
 119                         scaleFrom: 0,
 120                         scaleContent: false,
 121                         transition: Effect.Transitions.sinoidal,
 122                         scaleMode: {
 123                                 originalHeight: this.maxHeight,
 124                                 originalWidth: this.accordion.getWidth()
 125                         },
 126                         scaleX: false,
 127                         scaleY: true
 128                 };
 129
 130                 effects.push(new Effect.Scale(this.currentView, 100, options));
 131
 132                 options = {
 133                         sync: true,
 134                         queue: {
 135                                 position: 'end',
 136                                 scope: 'accordion'
 137                         },
 138                         scaleContent: false,
 139                         transition: Effect.Transitions.sinoidal,
 140                         scaleX: false,
 141                         scaleY: true
 142                 };
 143
 144                 effects.push(new Effect.Scale(this.oldView, 0, options));
 145
 146                 var oldHeader = $(this.oldView+'_0');
 147                 var currentHeader = $(this.currentView+'_0');
 148
 149                 new Effect.Parallel(effects, {
 150                         duration: this.options.Duration,
 151                         fps: 35,
 152                         queue: {
 153                                 position: 'end',
 154                                 scope: 'accordion'
 155                         },
 156                         beforeStart: function() {
 157                                 $(this.currentView).setStyle({ height: "0px" });
 158                                 $(this.currentView).show();
 159
 160                                 oldHeader.className=this.options.HeaderCssClass;
 161                                 currentHeader.className=this.options.ActiveHeaderCssClass;
 162                         }.bind(this),
 163                         afterFinish: function() {
 164                                 $(this.oldView).hide();
 165                                 $(this.currentView).setStyle({ height: this.maxHeight+"px" });
 166                         }.bind(this)
 167                 });
 168         }
 169 });
 170