From 907d785046834eacb492a88a0eab9f349921de8d Mon Sep 17 00:00:00 2001 From: "ctrlaltca@gmail.com" <> Date: Sun, 3 Jul 2011 15:03:58 +0000 Subject: Rewoked TAccordion (fixes #340); added AnimationDuration parameter, added example in quickstart. --- .../Javascripts/source/prado/controls/accordion.js | 275 +++++++++++---------- 1 file changed, 139 insertions(+), 136 deletions(-) (limited to 'framework/Web/Javascripts/source') diff --git a/framework/Web/Javascripts/source/prado/controls/accordion.js b/framework/Web/Javascripts/source/prado/controls/accordion.js index e7d84694..f25b5e1a 100644 --- a/framework/Web/Javascripts/source/prado/controls/accordion.js +++ b/framework/Web/Javascripts/source/prado/controls/accordion.js @@ -7,143 +7,146 @@ * http://creativecommons.org/licenses/by-sa/3.0/us/ */ -if (typeof Effect == 'undefined') - throw("You must have the script.aculo.us Effect library to use this accordion"); - Prado.WebUI.TAccordion = Class.create(); Prado.WebUI.TAccordion.prototype = { - initialize : function(options) - { - this.element = $(options.ID); - this.onInit(options); - Prado.Registry.set(options.ID, this); - }, - - onInit : function(options) - { - this.accordion = $(options.ID); - this.options = options; - this.contents = this.accordion.select('div.'+this.options.contentClass); - this.isAnimating = false; - this.current = this.options.defaultExpandedCount ? this.contents[this.options.defaultExpandedCount-1] : this.contents[0]; - this.toExpand = null; - - if (options.maxHeight) - this.maxHeight = options.maxHeight; - else - { - this.maxHeight = 0; - this.checkMaxHeight(); - } - - this.initialHide(); - this.attachInitialMaxHeight(); - - var clickHandler = this.clickHandler.bindAsEventListener(this); - this.accordion.observe('click', clickHandler); - }, - - expand: function(el) { - this.toExpand = el.next('div.'+this.options.contentClass); - if(this.current != this.toExpand){ - this.toExpand.show(); - this.animate(); - } - }, - - checkMaxHeight: function() { - for(var i=0; i this.maxHeight) { - this.maxHeight = this.contents[i].getHeight(); - } - } - }, - - attachInitialMaxHeight: function() { - this.current.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive); - if(this.current.getHeight() != this.maxHeight) this.current.setStyle({height: this.maxHeight+"px"}); - }, - - clickHandler: function(e) { - var el = e.element(); - if(el.hasClassName(this.options.toggleClass) && !this.isAnimating) { - this.expand(el); - } - }, - - initialHide: function(){ - for(var i=0; i this.maxHeight) + this.maxHeight = view.getHeight(); + } + }, + + elementClicked : function(event,viewID) + { + var i = 0; + for(var index in this.options.Views) + { + if ($(index)) + { + var header = $(index+'_0'); + if(index == viewID) + { + this.oldView = this.currentView; + this.currentView = index; + + this.hiddenField.value=i; + } + } + i++; + } + if(this.oldView != this.currentView) + { + if(this.options.Duration > 0) + { + this.animate(); + } else { + $(this.currentView).setStyle({ height: this.maxHeight+"px" }); + $(this.currentView).show(); + $(this.oldView).hide(); + + var oldHeader = $(this.oldView+'_0'); + var currentHeader = $(this.currentView+'_0'); + oldHeader.className=this.options.HeaderCssClass; + currentHeader.className=this.options.ActiveHeaderCssClass; + } + } + }, + + animate: function() { + var effects = new Array(); + var options = { + sync: true, + scaleFrom: 0, + scaleContent: false, + transition: Effect.Transitions.sinoidal, + scaleMode: { + originalHeight: this.maxHeight, + originalWidth: this.accordion.getWidth() + }, + scaleX: false, + scaleY: true + }; + + effects.push(new Effect.Scale(this.currentView, 100, options)); + + options = { + sync: true, + scaleContent: false, + transition: Effect.Transitions.sinoidal, + scaleX: false, + scaleY: true + }; + + effects.push(new Effect.Scale(this.oldView, 0, options)); + + var oldHeader = $(this.oldView+'_0'); + var currentHeader = $(this.currentView+'_0'); + + new Effect.Parallel(effects, { + duration: this.options.Duration, + fps: 35, + queue: { + position: 'end', + scope: 'accordion' + }, + beforeStart: function() { + $(this.currentView).setStyle({ height: "0px" }); + $(this.currentView).show(); + + oldHeader.className=this.options.HeaderCssClass; + currentHeader.className=this.options.ActiveHeaderCssClass; + }.bind(this), + afterFinish: function() { + $(this.oldView).hide(); + $(this.currentView).setStyle({ height: this.maxHeight+"px" }); + }.bind(this) + }); + } }; - -/* -document.observe("dom:loaded", function(){ - accordion = new Accordion("test-accordion", 2); -}) -*/ \ No newline at end of file -- cgit v1.2.3