NP_TrackBack/branches/DOM-branch/trackback/js/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 Rico.ContentTransitionBase = function() {}
  12 Rico.ContentTransitionBase.prototype = {
  13         initialize: function(titles, contents, options) {
  14     if (typeof titles == 'string')
  15       titles = $$(titles)
  16     if (typeof contents == 'string')
  17       contents = $$(contents)
  18
  19           this.titles = titles;
  20           this.contents = contents;
  21                 this.options = Object.extend({
  22                         duration:200,
  23                         steps:8,
  24                         rate:Rico.Effect.easeIn
  25           }, options || {});
  26           this.hoverSet = new Rico.HoverSet(titles, options);
  27                 contents.each(function(p){ if (p) Element.hide(p)})
  28           this.selectionSet = new Rico.SelectionSet(titles, Object.extend(this.options, {onSelect: this.select.bind(this)}));
  29                 if (this.initContent) this.initContent();
  30         },
  31         reset: function(){
  32           this.selectionSet.reset();
  33         },
  34         select: function(title) {
  35           if ( this.selected == this.contentOf(title)) return
  36                 var panel = this.contentOf(title);
  37                 if (this.transition){
  38                         if (this.selected){
  39                           var effect = this.transition(panel)
  40                           if (effect) Rico.animate(effect, this.options)
  41       }
  42                         else
  43                                 Element.show(panel);
  44                 }else{
  45                         if (this.selected)
  46                                 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 Rico.SlidingPanel.prototype = {
  72         initialize: function(panel) {
  73                 this.panel = panel;
  74                 this.options = arguments[1] || {};
  75                 this.closed = true;
  76                 this.showing = false
  77                 this.openEffect = this.options.openEffect;
  78                 this.closeEffect = this.options.closeEffect;
  79                 this.animator = new Rico.Effect.Animator();
  80                 Element.makeClipping(this.panel)
  81         },
  82         toggle: function () {
  83                 if(!this.showing){
  84                         this.open();
  85                 } else {
  86                         this.close();
  87     }
  88         },
  89         open: function () {
  90           if (this.closed){
  91             this.showing = true;
  92                   Element.show(this.panel);
  93                 this.options.disabler.disableNative();
  94     }
  95                 /*this.animator.stop();*/
  96                 this.animator.play(this.openEffect,
  97                                                                                         { onFinish:function(){ Element.undoClipping($(this.panel))}.bind(this),
  98                                                                                                 rate:Rico.Effect.easeIn});
  99         },
 100         close: function () {
 101                 Element.makeClipping(this.panel)
 102                 this.animator.stop();
 103                 this.showing = false;
 104                 this.animator.play(this.closeEffect,
 105                              { onFinish:function(){  Element.hide(this.panel);
 106                                                                                                                                                                                         this.options.disabler.enableNative()}.bind(this),
 107                                                                                                 rate:Rico.Effect.easeOut});
 108         }
 109 }
 110
 111
 112 //-------------------------------------------
 113 // Example components
 114 //-------------------------------------------
 115
 116 Rico.Accordion = Class.create();
 117 Rico.Accordion.prototype = Object.extend(new Rico.ContentTransitionBase(), {
 118   initContent: function() {
 119                 this.selected.style.height = this.options.panelHeight + "px";
 120         },
 121   transition: function(p){
 122     if (!this.options.noAnimate)
 123                   return new Rico.AccordionEffect(this.selected, p, this.options.panelHeight);
 124     else{
 125       p.style.height = this.options.panelHeight + "px";
 126       if (this.selected) Element.hide(this.selected);
 127                 Element.show(p);
 128     }
 129         }
 130 })
 131
 132
 133 Rico.TabbedPanel = Class.create();
 134 Rico.TabbedPanel.prototype = Object.extend(new Rico.ContentTransitionBase(), {
 135   initContent: function() {
 136                 if (false && (this.options.panelHeight=='auto' || this.options.panelWidth=='auto')) {
 137                   // 'auto' is not working yet
 138                   var maxwi=0, maxht=0;
 139                   for (var i=0; i<this.contents.length; i++) {
 140                     var d=Element.getDimensions(this.contents[i]);
 141                     maxwi=Math.max(maxwi,d.width);
 142                     maxht=Math.max(maxht,d.height);
 143                   }
 144                   //alert('maxwi='+maxwi+' maxht='+maxht);
 145                   if (this.options.panelWidth=='auto') this.options.panelWidth=maxwi;
 146                   if (this.options.panelHeight=='auto') this.options.panelHeight=maxht;
 147                 }
 148           if (typeof this.options.panelWidth=='number') this.options.panelWidth+="px";
 149           if (typeof this.options.panelHeight=='number') this.options.panelHeight+="px";
 150     if (Rico.Corner) {
 151       this.options.color='transparent';
 152       this.options.corners='top';
 153       for (var i=0; i<this.titles.length; i++)
 154         if (this.titles[i]) {
 155           if (this.options.panelHdrWidth) this.titles[i].style.width=this.options.panelHdrWidth;
 156           Rico.Corner.round(this.titles[i], this.options);
 157         }
 158     }
 159                 this.transition(this.selected);
 160         },
 161   transition: function(p){
 162     if (this.selected) Element.hide(this.selected);
 163                 Element.show(p);
 164     if (this.options.panelHeight) p.style.height = this.options.panelHeight;
 165     if (this.options.panelWidth) p.style.width = this.options.panelWidth;
 166         }
 167 })
 168
 169
 170 Rico.SlidingPanel.top = function(panel, innerPanel){
 171         var options = Object.extend({
 172                 disabler: Rico.Controls.defaultDisabler
 173   }, arguments[2] || {});
 174         var height = options.height || Element.getDimensions(innerPanel)[1] || innerPanel.offsetHeight;
 175         var top = options.top || Position.positionedOffset(panel)[1];
 176         options.openEffect = new Rico.Effect.SizeFromTop(panel, innerPanel, top, height, {baseHeight:height});
 177         options.closeEffect = new Rico.Effect.SizeFromTop(panel, innerPanel, top, 1, {baseHeight:height});
 178   panel.style.height = "0px";
 179         innerPanel.style.top = -height + "px";
 180         return new Rico.SlidingPanel(panel, options);
 181 }
 182
 183 Rico.SlidingPanel.bottom = function(panel){
 184         var options = Object.extend({
 185                 disabler: Rico.Controls.blankDisabler
 186   }, arguments[1] || {});
 187         var height = options.height || Element.getDimensions(panel).height;
 188         var top = Position.positionedOffset(panel)[1];
 189         options.openEffect = new Rico.Effect.SizeFromBottom(panel, top - height, height);
 190         options.closeEffect = new Rico.Effect.SizeFromBottom(panel, top, 1);
 191         return new Rico.SlidingPanel(panel, options);
 192 }
 193
 194 Rico.includeLoaded('ricoComponents.js');