Adjust order of error output
[misc/kostenrechnung] / lib / rico / ricoComponents.js
1 /**
2   *  (c) 2005-2007 Richard Cowin (http://openrico.org)
3   *  (c) 2005-2007 Matt Brown (http://dowdybrown.com)
4   *
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
8   **/
9
10
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')
16       titles = $$(titles);
17     if (typeof contents == 'string')
18       contents = $$(contents);
19
20           this.titles = titles;
21           this.contents = contents;
22                 this.options = Object.extend({
23                         duration:200,
24                         steps:8,
25                         rate:Rico.Effect.easeIn
26           }, options || {});
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();
31         },
32         reset: function(){
33           this.selectionSet.reset();
34         },
35         select: function(title) {
36                 var panel = this.contentOf(title);
37           if ( this.selected == panel) return;
38                 if (this.transition){
39                         if (this.selected){
40                           var effect = this.transition(panel);
41                           if (effect) Rico.animate(effect, this.options);
42       } else {
43                                 Element.show(panel);
44       }
45                 } else {
46                         if (this.selected) Element.hide(this.selected);
47                         Element.show(panel);
48                 }
49                 this.selected = panel;
50         },
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);
57         },
58         remove: function(title){},
59         removeAll: function(){
60                 this.hoverSet.removeAll();
61                 this.selectionSet.removeAll();
62         },
63         openByIndex: function(index){this.selectionSet.selectIndex(index);},
64         contentOf: function(title){ return this.contents[this.titles.indexOf(title)]; }
65 };
66
67 Rico.ContentTransition = Class.create();
68 Rico.ContentTransition.prototype = Object.extend(new Rico.ContentTransitionBase(),{});
69
70 Rico.SlidingPanel = Class.create(
71 /** @lends Rico.SlidingPanel# */
72 {
73 /**
74  * @class Implements sliding panel effect
75  * @constructs
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>
81  *</dl>
82  */
83         initialize: function(panel) {
84                 this.panel = panel;
85                 this.options = arguments[1] || {};
86                 this.closed = true;
87                 this.showing = false;
88                 this.openEffect = this.options.openEffect;
89                 this.closeEffect = this.options.closeEffect;
90                 this.animator = new Rico.Effect.Animator();
91                 Element.makeClipping(this.panel);
92         },
93         toggle: function () {
94                 if(!this.showing){
95                         this.open();
96                 } else {
97                         this.close();
98     }
99         },
100         open: function () {
101           if (this.closed){
102             this.showing = true;
103                   Element.show(this.panel);
104                 this.options.disabler.disableNative();
105     }
106                 /*this.animator.stop();*/
107                 this.animator.play(this.openEffect,
108                                                                                         { onFinish: function(){ Element.undoClipping($(this.panel));}.bind(this),
109                                                                                                 rate: Rico.Effect.easeIn });
110         },
111         close: function () {
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 });
118         }
119 });
120
121
122 //-------------------------------------------
123 // Example components
124 //-------------------------------------------
125
126 /**
127  * @class Implements accordion effect
128  * @see Rico.ContentTransitionBase#initialize for construction parameters
129  * @extends Rico.ContentTransitionBase
130  */
131 Rico.Accordion = Class.create();
132 Rico.Accordion.prototype = Object.extend(new Rico.ContentTransitionBase(), 
133 /** @lends Rico.Accordion# */
134 {
135   /** called by Rico.ContentTransitionBase#initialize */
136   initContent: function() {
137                 this.selected.style.height = this.options.panelHeight + "px";
138         },
139   transition: function(p){
140     if (!this.options.noAnimate)
141                   return new Rico.AccordionEffect(this.selected, p, this.options.panelHeight);
142     else{
143       p.style.height = this.options.panelHeight + "px";
144       if (this.selected) Element.hide(this.selected);
145                 Element.show(p);
146     }
147         }
148 });
149
150
151 /**
152  * @class Implements tabbed panel effect
153  * @see Rico.ContentTransitionBase#initialize for construction parameters
154  * @extends Rico.ContentTransitionBase
155  */
156 Rico.TabbedPanel = Class.create();
157 Rico.TabbedPanel.prototype = Object.extend(new Rico.ContentTransitionBase(),
158 /** @lends Rico.TabbedPanel# */
159 {
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);
171         }
172       }
173     }
174                 this.transition(this.selected);
175         },
176   transition: function(p){
177     if (this.selected) Element.hide(this.selected);
178                 Element.show(p);
179     if (this.options.panelHeight) p.style.height = this.options.panelHeight;
180     if (this.options.panelWidth) p.style.width = this.options.panelWidth;
181         }
182 });
183
184
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);
196 };
197
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);
207 };
208
209 Rico.includeLoaded('ricoComponents.js');