2 * (c) 2005-2007 Richard Cowin (http://openrico.org)
3 * (c) 2005-2007 Matt Brown (http://dowdybrown.com)
5 * Rico is licensed under the Apache License, Version 2.0 (the "License"); you may not use this
6 * file except in compliance with the License. You may obtain a copy of the License at
7 * http://www.apache.org/licenses/LICENSE-2.0
11 /** @class core methods for transition effects */
12 Rico.ContentTransitionBase = function() {};
13 Rico.ContentTransitionBase.prototype = {
14 initialize: function(titles, contents, options) {
15 if (typeof titles == 'string')
17 if (typeof contents == 'string')
18 contents = $$(contents);
21 this.contents = contents;
22 this.options = Object.extend({
25 rate:Rico.Effect.easeIn
27 this.hoverSet = new Rico.HoverSet(titles, options);
28 contents.each(function(p){ if (p) Element.hide(p); });
29 this.selectionSet = new Rico.SelectionSet(titles, Object.extend(this.options, {onSelect: this.select.bind(this)}));
30 if (this.initContent) this.initContent();
33 this.selectionSet.reset();
35 select: function(title) {
36 var panel = this.contentOf(title);
37 if ( this.selected == panel) return;
40 var effect = this.transition(panel);
41 if (effect) Rico.animate(effect, this.options);
46 if (this.selected) Element.hide(this.selected);
49 this.selected = panel;
51 add: function(title, content){
52 this.titles.push(title);
53 this.contents.push(content);
54 this.hoverSet.add(title);
55 this.selectionSet.add(title);
56 this.selectionSet.select(title);
58 remove: function(title){},
59 removeAll: function(){
60 this.hoverSet.removeAll();
61 this.selectionSet.removeAll();
63 openByIndex: function(index){this.selectionSet.selectIndex(index);},
64 contentOf: function(title){ return this.contents[this.titles.indexOf(title)]; }
67 Rico.ContentTransition = Class.create();
68 Rico.ContentTransition.prototype = Object.extend(new Rico.ContentTransitionBase(),{});
70 Rico.SlidingPanel = Class.create(
71 /** @lends Rico.SlidingPanel# */
74 * @class Implements sliding panel effect
76 * @param panel element that will be opened/closed
77 * @param options object may contain any of the following:<dl>
78 * <dt>openEffect </dt><dd> </dd>
79 * <dt>closeEffect</dt><dd> </dd>
80 * <dt>disabler </dt><dd> </dd>
83 initialize: function(panel) {
85 this.options = arguments[1] || {};
88 this.openEffect = this.options.openEffect;
89 this.closeEffect = this.options.closeEffect;
90 this.animator = new Rico.Effect.Animator();
91 Element.makeClipping(this.panel);
103 Element.show(this.panel);
104 this.options.disabler.disableNative();
106 /*this.animator.stop();*/
107 this.animator.play(this.openEffect,
108 { onFinish: function(){ Element.undoClipping($(this.panel));}.bind(this),
109 rate: Rico.Effect.easeIn });
112 Element.makeClipping(this.panel);
113 this.animator.stop();
114 this.showing = false;
115 this.animator.play(this.closeEffect,
116 { onFinish: function(){ Element.hide(this.panel); this.options.disabler.enableNative();}.bind(this),
117 rate: Rico.Effect.easeOut });
122 //-------------------------------------------
123 // Example components
124 //-------------------------------------------
127 * @class Implements accordion effect
128 * @see Rico.ContentTransitionBase#initialize for construction parameters
129 * @extends Rico.ContentTransitionBase
131 Rico.Accordion = Class.create();
132 Rico.Accordion.prototype = Object.extend(new Rico.ContentTransitionBase(),
133 /** @lends Rico.Accordion# */
135 /** called by Rico.ContentTransitionBase#initialize */
136 initContent: function() {
137 this.selected.style.height = this.options.panelHeight + "px";
139 transition: function(p){
140 if (!this.options.noAnimate)
141 return new Rico.AccordionEffect(this.selected, p, this.options.panelHeight);
143 p.style.height = this.options.panelHeight + "px";
144 if (this.selected) Element.hide(this.selected);
152 * @class Implements tabbed panel effect
153 * @see Rico.ContentTransitionBase#initialize for construction parameters
154 * @extends Rico.ContentTransitionBase
156 Rico.TabbedPanel = Class.create();
157 Rico.TabbedPanel.prototype = Object.extend(new Rico.ContentTransitionBase(),
158 /** @lends Rico.TabbedPanel# */
160 /** called by Rico.ContentTransitionBase#initialize */
161 initContent: function() {
162 if (typeof this.options.panelWidth=='number') this.options.panelWidth+="px";
163 if (typeof this.options.panelHeight=='number') this.options.panelHeight+="px";
164 if (!this.options.corners) this.options.corners='top';
165 if (Rico.Corner && this.options.corners!='none') {
166 if (!this.options.border) this.options.color='transparent';
167 for (var i=0; i<this.titles.length; i++) {
168 if (this.titles[i]) {
169 if (this.options.panelHdrWidth) this.titles[i].style.width=this.options.panelHdrWidth;
170 Rico.Corner.round(this.titles[i], this.options);
174 this.transition(this.selected);
176 transition: function(p){
177 if (this.selected) Element.hide(this.selected);
179 if (this.options.panelHeight) p.style.height = this.options.panelHeight;
180 if (this.options.panelWidth) p.style.width = this.options.panelWidth;
185 Rico.SlidingPanel.top = function(panel, innerPanel){
186 var options = Object.extend({
187 disabler: Rico.Controls.defaultDisabler
188 }, arguments[2] || {});
189 var height = options.height || Element.getDimensions(innerPanel)[1] || innerPanel.offsetHeight;
190 var top = options.top || Position.positionedOffset(panel)[1];
191 options.openEffect = new Rico.Effect.SizeFromTop(panel, innerPanel, top, height, {baseHeight:height});
192 options.closeEffect = new Rico.Effect.SizeFromTop(panel, innerPanel, top, 1, {baseHeight:height});
193 panel.style.height = "0px";
194 innerPanel.style.top = -height + "px";
195 return new Rico.SlidingPanel(panel, options);
198 Rico.SlidingPanel.bottom = function(panel){
199 var options = Object.extend({
200 disabler: Rico.Controls.blankDisabler
201 }, arguments[1] || {});
202 var height = options.height || Element.getDimensions(panel).height;
203 var top = Position.positionedOffset(panel)[1];
204 options.openEffect = new Rico.Effect.SizeFromBottom(panel, top - height, height);
205 options.closeEffect = new Rico.Effect.SizeFromBottom(panel, top, 1);
206 return new Rico.SlidingPanel(panel, options);
209 Rico.includeLoaded('ricoComponents.js');