if (typeof Effect == 'undefined') throw("accordion.js requires including script.aculo.us' effects.js library!"); var accordion = Class.create(); accordion.prototype = { // // Setup the Variables // showAccordion : null, currentAccordion : null, duration : null, effects : [], animating : false, // // Initialize the accordions // initialize: function(container, options) { if (!$(container)) { throw(container+" doesn't exist!"); return false; } this.options = Object.extend({ resizeSpeed : 8, classNames : { toggle : 'toggler', toggleActive : 'toggler_active', content : 'togglee' }, defaultSize : { height : null, width : null }, direction : 'vertical', onEvent : 'click' }, options || {}); this.duration = ((11-this.options.resizeSpeed)*0.15); var accordions = $$('#'+container+' .'+this.options.classNames.toggle); accordions.each(function(accordion) { Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false); if (this.options.onEvent == 'click') { accordion.onclick = function() {return false;}; } if (this.options.direction == 'horizontal') { var options = $H({width: '0px'}); } else { var options = $H({height: '0px'}); } options.merge({display: 'none'}); this.currentAccordion = $(accordion.next(0)).setStyle(options); $(accordion.next(0)).removeClassName("max"); $(accordion.next(0)).addClassName("min"); }.bind(this)); }, // // Activate an accordion // activate : function(accordion) { if (this.animating) { return false; } this.effects = []; this.currentAccordion = $(accordion.next(0)); this.currentAccordion.setStyle({ display: 'block' }); this.currentAccordion.addClassName("max"); this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive); if (this.options.direction == 'horizontal') { this.scaling = $H({ scaleX: true, scaleY: false }); } else { this.scaling = $H({ scaleX: false, scaleY: true }); } if (this.currentAccordion == this.showAccordion) { //this.deactivate(); // deactivate close current accordian } else { this._handleAccordion(); } }, // // Deactivate an active accordion // deactivate : function() { var options = $H({ duration: this.duration, scaleContent: false, transition: Effect.Transitions.sinoidal, queue: { position: 'end', scope: 'accordionAnimation' }, scaleMode: { originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight, originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth }, afterFinish: function() { this.showAccordion.setStyle({ height: 'auto', display: 'none' }); //this.showAccordian.removeClassName("max"); //this.showAccordian.addClassName("min"); this.showAccordion = null; this.animating = false; }.bind(this) }); options.merge(this.scaling); this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive); new Effect.Scale(this.showAccordion, 0, options); }, // // Handle the open/close actions of the accordion // _handleAccordion : function() { var options = $H({ sync: true, scaleFrom: 0, scaleContent: false, transition: Effect.Transitions.sinoidal, scaleMode: { originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight, originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth } }); options.merge(this.scaling); this.effects.push( new Effect.Scale(this.currentAccordion, 100, options) ); if (this.showAccordion) { this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive); options = $H({ sync: true, scaleContent: false, transition: Effect.Transitions.sinoidal }); options.merge(this.scaling); this.effects.push( new Effect.Scale(this.showAccordion, 0, options) ); } new Effect.Parallel(this.effects, { duration: this.duration, queue: { position: 'end', scope: 'accordionAnimation' }, beforeStart: function() { this.animating = true; }.bind(this), afterFinish: function() { if (this.showAccordion) { this.showAccordion.setStyle({ display: 'none' }); } $(this.currentAccordion).setStyle({ height: 'auto' }); this.showAccordion = this.currentAccordion; this.animating = false; }.bind(this) }); } }