summaryrefslogtreecommitdiff
path: root/framework/Web/Javascripts/source
diff options
context:
space:
mode:
authorctrlaltca@gmail.com <>2011-06-08 16:33:16 +0000
committerctrlaltca@gmail.com <>2011-06-08 16:33:16 +0000
commit3b7fe6b02f47ab6af284b6a188632cc1622e86cc (patch)
tree1e58a7a473af0a22a5a26e83c3df240e56ad77b7 /framework/Web/Javascripts/source
parentf7ac5047d795e83d63f70bec45422073627800bd (diff)
added accordion control from #213
Diffstat (limited to 'framework/Web/Javascripts/source')
-rw-r--r--framework/Web/Javascripts/source/packages.php17
-rw-r--r--framework/Web/Javascripts/source/prado/controls/accordion.js149
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