diff options
Diffstat (limited to 'framework/Web/Javascripts')
| -rw-r--r-- | framework/Web/Javascripts/source/packages.php | 17 | ||||
| -rw-r--r-- | framework/Web/Javascripts/source/prado/controls/accordion.js | 149 |
2 files changed, 160 insertions, 6 deletions
diff --git a/framework/Web/Javascripts/source/packages.php b/framework/Web/Javascripts/source/packages.php index cc66a700..5dfbe2c5 100644 --- a/framework/Web/Javascripts/source/packages.php +++ b/framework/Web/Javascripts/source/packages.php @@ -73,7 +73,11 @@ $packages = array( 'activefileupload' => array(
'prado/activefileupload/activefileupload.js'
),
-
+
+ 'accordion'=>array(
+ 'prado/controls/accordion.js'
+ ),
+
);
@@ -83,16 +87,17 @@ $dependencies = array( 'effects' => array('prado', 'effects'),
'validator' => array('prado', 'validator'),
'logger' => array('prado', 'logger'),
- 'datepicker' => array('prado', 'datepicker'),
- 'colorpicker' => array('prado', 'colorpicker'),
+ 'datepicker' => array('prado', 'datepicker'),
+ 'colorpicker' => array('prado', 'colorpicker'),
'ajax' => array('prado', 'effects', 'ajax'),
'dragdrop' => array('prado', 'effects', 'ajax', 'dragdrop'),
'slider' => array('prado', 'slider'),
'keyboard' => array('prado', 'keyboard'),
'tabpanel' => array('prado', 'tabpanel'),
- 'activedatepicker' => array('datepicker', 'ajax', 'activedatepicker'),
- 'activefileupload' => array('prado', 'ajax', 'activefileupload'),
- 'dragdropextra' => array('prado', 'effects', 'ajax', 'dragdrop','dragdropextra'),
+ 'activedatepicker' => array('datepicker', 'ajax', 'activedatepicker'),
+ 'activefileupload' => array('prado', 'ajax', 'activefileupload'),
+ 'dragdropextra' => array('prado', 'effects', 'ajax', 'dragdrop','dragdropextra'),
+ 'accordion' => array('prado', 'effects', 'accordion'),
);
return array($packages, $dependencies);
diff --git a/framework/Web/Javascripts/source/prado/controls/accordion.js b/framework/Web/Javascripts/source/prado/controls/accordion.js new file mode 100644 index 00000000..e7d84694 --- /dev/null +++ b/framework/Web/Javascripts/source/prado/controls/accordion.js @@ -0,0 +1,149 @@ +/* Simple Accordion Script + * Requires Prototype and Script.aculo.us Libraries + * By: Brian Crescimanno <brian.crescimanno@gmail.com> + * http://briancrescimanno.com + * Adapted to Prado & minor improvements: Gabor Berczi <gabor.berczi@devworx.hu> + * This work is licensed under the Creative Commons Attribution-Share Alike 3.0 + * 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) + }); + } + +}; + +/* +document.observe("dom:loaded", function(){ + accordion = new Accordion("test-accordion", 2); +}) +*/
\ No newline at end of file |