git.infodrom.org Git - misc/kostenrechnung/blob - 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');