diff options
author | ctrlaltca@gmail.com <> | 2011-07-03 15:03:58 +0000 |
---|---|---|
committer | ctrlaltca@gmail.com <> | 2011-07-03 15:03:58 +0000 |
commit | 907d785046834eacb492a88a0eab9f349921de8d (patch) | |
tree | 6dc290e97ba7a5239262c887cc6acc5ce09103a8 /framework/Web/Javascripts/source/prado | |
parent | 6e2d354c5a1d49fd65dc050b7d2c3d9b204112eb (diff) |
Rewoked TAccordion (fixes #340); added AnimationDuration parameter, added example in quickstart.
Diffstat (limited to 'framework/Web/Javascripts/source/prado')
-rw-r--r-- | framework/Web/Javascripts/source/prado/controls/accordion.js | 275 |
1 files changed, 139 insertions, 136 deletions
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.contents.length; i++) { - if(this.contents[i].getHeight() > 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.contents.length; i++){ - if(this.contents[i] != this.current) { - this.contents[i].hide(); - this.contents[i].setStyle({height: 0}); - } - } - }, - - - enableOverflows: function(enable) { - if (enable) val = ''; else val = 'hidden'; - this.current.style.overflow = val; - this.toExpand.style.overflow = val; - }, - - 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.toExpand, 100, options)); - - options = { - sync: true, - scaleContent: false, - transition: Effect.Transitions.sinoidal, - scaleX: false, - scaleY: true - }; - - effects.push(new Effect.Scale(this.current, 0, options)); - - var myDuration = 0.75; - - new Effect.Parallel(effects, { - duration: myDuration, - fps: 35, - queue: { - position: 'end', - scope: 'accordion' - }, - beforeStart: function() { - this.isAnimating = true; - this.enableOverflows(false); - this.current.previous('div.'+this.options.toggleClass).removeClassName(this.options.toggleActive); - this.toExpand.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive); - }.bind(this), - afterFinish: function() { - this.current.hide(); - this.toExpand.setStyle({ height: this.maxHeight+"px" }); - this.current = this.toExpand; - this.isAnimating = false; - this.enableOverflows(true); - }.bind(this) - }); - } - + 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.hiddenField = $(options.ID+'_1'); + + if (this.options.maxHeight) + { + this.maxHeight = this.options.maxHeight; + } else { + this.maxHeight = 0; + this.checkMaxHeight(); + } + + this.currentView = null; + this.oldView = null; + + var i = 0; + for(var view in this.options.Views) + { + var header = $(view+'_0'); + if(header) + { + Event.stopObserving(header, "click"); + Event.observe(header, "click", this.elementClicked.bindEvent(this,view)); + if(this.hiddenField.value == i) + { + this.currentView = view; + if($(this.currentView).getHeight() != this.maxHeight) + $(this.currentView).setStyle({height: this.maxHeight+"px"}); + } + } + i++; + } + }, + + checkMaxHeight: function() + { + for(var viewID in this.options.Views) + { + var view = $(viewID); + if(view.getHeight() > 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 |