-/*\r
-Script: Accordion.js\r
- Contains <Accordion>\r
-\r
-License:\r
- MIT-style license.\r
-*/\r
-\r
-/*\r
-Class: Accordion\r
- The Accordion class creates a group of elements that are toggled when their handles are clicked. When one elements toggles in, the others toggles back.\r
- Inherits methods, properties, options and events from <Fx.Elements>.\r
- \r
-Note:\r
- The Accordion requires an XHTML doctype.\r
-\r
-Arguments:\r
- togglers - required, a collection of elements, the elements handlers that will be clickable.\r
- elements - required, a collection of elements the transitions will be applied to.\r
- options - optional, see options below, and <Fx.Base> options and events.\r
-\r
-Options:\r
- show - integer, the Index of the element to show at start.\r
- display - integer, the Index of the element to show at start (with a transition). defaults to 0.\r
- fixedHeight - integer, if you want the elements to have a fixed height. defaults to false.\r
- fixedWidth - integer, if you want the elements to have a fixed width. defaults to false.\r
- height - boolean, will add a height transition to the accordion if true. defaults to true.\r
- opacity - boolean, will add an opacity transition to the accordion if true. defaults to true.\r
- width - boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!\r
- alwaysHide - boolean, will allow to hide all elements if true, instead of always keeping one element shown. defaults to false.\r
- \r
-Events:\r
- onActive - function to execute when an element starts to show\r
- onBackground - function to execute when an element starts to hide\r
-*/\r
-\r
-var Accordion = Fx.Elements.extend({\r
-\r
- options: {\r
- onActive: Class.empty,\r
- onBackground: Class.empty,\r
- display: 0,\r
- show: false,\r
- height: true,\r
- width: false,\r
- opacity: true,\r
- fixedHeight: false,\r
- fixedWidth: false,\r
- wait: false,\r
- alwaysHide: false\r
- },\r
-\r
- initialize: function(){\r
- var options, togglers, elements, container;\r
- $each(arguments, function(argument, i){\r
- switch($type(argument)){\r
- case 'object': options = argument; break;\r
- case 'element': container = $(argument); break;\r
- default:\r
- var temp = $$(argument);\r
- if (!togglers) togglers = temp;\r
- else elements = temp;\r
- }\r
- });\r
- this.togglers = togglers || [];\r
- this.elements = elements || [];\r
- this.container = $(container);\r
- this.setOptions(options);\r
- this.previous = -1;\r
- if (this.options.alwaysHide) this.options.wait = true;\r
- if ($chk(this.options.show)){\r
- this.options.display = false;\r
- this.previous = this.options.show;\r
- }\r
- if (this.options.start){\r
- this.options.display = false;\r
- this.options.show = false;\r
- }\r
- this.effects = {};\r
- if (this.options.opacity) this.effects.opacity = 'fullOpacity';\r
- if (this.options.width) this.effects.width = this.options.fixedWidth ? 'fullWidth' : 'offsetWidth';\r
- if (this.options.height) this.effects.height = this.options.fixedHeight ? 'fullHeight' : 'scrollHeight';\r
- for (var i = 0, l = this.togglers.length; i < l; i++) this.addSection(this.togglers[i], this.elements[i]);\r
- this.elements.each(function(el, i){\r
- if (this.options.show === i){\r
- this.fireEvent('onActive', [this.togglers[i], el]);\r
- } else {\r
- for (var fx in this.effects) el.setStyle(fx, 0);\r
- }\r
- }, this);\r
- this.parent(this.elements);\r
- if ($chk(this.options.display)) this.display(this.options.display);\r
- },\r
-\r
- /*\r
- Property: addSection\r
- Dynamically adds a new section into the accordion at the specified position.\r
-\r
- Arguments:\r
- toggler - (dom element) the element that toggles the accordion section open.\r
- element - (dom element) the element that stretches open when the toggler is clicked.\r
- pos - (integer) the index where these objects are to be inserted within the accordion.\r
- */\r
-\r
- addSection: function(toggler, element, pos){\r
- toggler = $(toggler);\r
- element = $(element);\r
- var test = this.togglers.contains(toggler);\r
- var len = this.togglers.length;\r
- this.togglers.include(toggler);\r
- this.elements.include(element);\r
- if (len && (!test || pos)){\r
- pos = $pick(pos, len - 1);\r
- toggler.injectBefore(this.togglers[pos]);\r
- element.injectAfter(toggler);\r
- } else if (this.container && !test){\r
- toggler.inject(this.container);\r
- element.inject(this.container);\r
- }\r
- var idx = this.togglers.indexOf(toggler);\r
- toggler.addEvent('click', this.display.bind(this, idx));\r
- if (this.options.height) element.setStyles({'padding-top': 0, 'border-top': 'none', 'padding-bottom': 0, 'border-bottom': 'none'});\r
- if (this.options.width) element.setStyles({'padding-left': 0, 'border-left': 'none', 'padding-right': 0, 'border-right': 'none'});\r
- element.fullOpacity = 1;\r
- if (this.options.fixedWidth) element.fullWidth = this.options.fixedWidth;\r
- if (this.options.fixedHeight) element.fullHeight = this.options.fixedHeight;\r
- element.setStyle('overflow', 'hidden');\r
- if (!test){\r
- for (var fx in this.effects) element.setStyle(fx, 0);\r
- }\r
- return this;\r
- },\r
-\r
- /*\r
- Property: display\r
- Shows a specific section and hides all others. Useful when triggering an accordion from outside.\r
-\r
- Arguments:\r
- index - integer, the index of the item to show, or the actual element to show.\r
- */\r
-\r
- display: function(index){\r
- index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;\r
- if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;\r
- this.previous = index;\r
- var obj = {};\r
- this.elements.each(function(el, i){\r
- obj[i] = {};\r
- var hide = (i != index) || (this.options.alwaysHide && (el.offsetHeight > 0));\r
- this.fireEvent(hide ? 'onBackground' : 'onActive', [this.togglers[i], el]);\r
- for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];\r
- }, this);\r
- return this.start(obj);\r
- },\r
-\r
- showThisHideOpen: function(index){return this.display(index);}\r
-\r
-});\r
-\r
-Fx.Accordion = Accordion;
\ No newline at end of file