git.roojs.org Git - roojs1/blob - Roo/SplitLayoutRegion.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12
  13
  14 /**
  15  * @class Roo.SplitLayoutRegion
  16  * @extends Roo.LayoutRegion
  17  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
  18  */
  19 Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
  20     this.cursor = cursor;
  21     Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
  22 };
  23
  24 Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
  25     splitTip : "Drag to resize.",
  26     collapsibleSplitTip : "Drag to resize. Double click to hide.",
  27     useSplitTips : false,
  28
  29     applyConfig : function(config){
  30         Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
  31         if(config.split){
  32             if(!this.split){
  33                 var splitEl = Roo.DomHelper.append(this.mgr.el.dom,
  34                         {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
  35                 /** The SplitBar for this region
  36                 * @type Roo.SplitBar */
  37                 this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
  38                 this.split.on("moved", this.onSplitMove, this);
  39                 this.split.useShim = config.useShim === true;
  40                 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
  41                 if(this.useSplitTips){
  42                     this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
  43                 }
  44                 if(config.collapsible){
  45                     this.split.el.on("dblclick", this.collapse,  this);
  46                 }
  47             }
  48             if(typeof config.minSize != "undefined"){
  49                 this.split.minSize = config.minSize;
  50             }
  51             if(typeof config.maxSize != "undefined"){
  52                 this.split.maxSize = config.maxSize;
  53             }
  54             if(config.hideWhenEmpty || config.hidden || config.collapsed){
  55                 this.hideSplitter();
  56             }
  57         }
  58     },
  59
  60     getHMaxSize : function(){
  61          var cmax = this.config.maxSize || 10000;
  62          var center = this.mgr.getRegion("center");
  63          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
  64     },
  65
  66     getVMaxSize : function(){
  67          var cmax = this.config.maxSize || 10000;
  68          var center = this.mgr.getRegion("center");
  69          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
  70     },
  71
  72     onSplitMove : function(split, newSize){
  73         this.fireEvent("resized", this, newSize);
  74     },
  75
  76     /**
  77      * Returns the {@link Roo.SplitBar} for this region.
  78      * @return {Roo.SplitBar}
  79      */
  80     getSplitBar : function(){
  81         return this.split;
  82     },
  83
  84     hide : function(){
  85         this.hideSplitter();
  86         Roo.SplitLayoutRegion.superclass.hide.call(this);
  87     },
  88
  89     hideSplitter : function(){
  90         if(this.split){
  91             this.split.el.setLocation(-2000,-2000);
  92             this.split.el.hide();
  93         }
  94     },
  95
  96     show : function(){
  97         if(this.split){
  98             this.split.el.show();
  99         }
 100         Roo.SplitLayoutRegion.superclass.show.call(this);
 101     },
 102
 103     beforeSlide: function(){
 104         if(Roo.isGecko){// firefox overflow auto bug workaround
 105             this.bodyEl.clip();
 106             if(this.tabs) {
 107                 this.tabs.bodyEl.clip();
 108             }
 109             if(this.activePanel){
 110                 this.activePanel.getEl().clip();
 111
 112                 if(this.activePanel.beforeSlide){
 113                     this.activePanel.beforeSlide();
 114                 }
 115             }
 116         }
 117     },
 118
 119     afterSlide : function(){
 120         if(Roo.isGecko){// firefox overflow auto bug workaround
 121             this.bodyEl.unclip();
 122             if(this.tabs) {
 123                 this.tabs.bodyEl.unclip();
 124             }
 125             if(this.activePanel){
 126                 this.activePanel.getEl().unclip();
 127                 if(this.activePanel.afterSlide){
 128                     this.activePanel.afterSlide();
 129                 }
 130             }
 131         }
 132     },
 133
 134     initAutoHide : function(){
 135         if(this.autoHide !== false){
 136             if(!this.autoHideHd){
 137                 var st = new Roo.util.DelayedTask(this.slideIn, this);
 138                 this.autoHideHd = {
 139                     "mouseout": function(e){
 140                         if(!e.within(this.el, true)){
 141                             st.delay(500);
 142                         }
 143                     },
 144                     "mouseover" : function(e){
 145                         st.cancel();
 146                     },
 147                     scope : this
 148                 };
 149             }
 150             this.el.on(this.autoHideHd);
 151         }
 152     },
 153
 154     clearAutoHide : function(){
 155         if(this.autoHide !== false){
 156             this.el.un("mouseout", this.autoHideHd.mouseout);
 157             this.el.un("mouseover", this.autoHideHd.mouseover);
 158         }
 159     },
 160
 161     clearMonitor : function(){
 162         Roo.get(document).un("click", this.slideInIf, this);
 163     },
 164
 165     // these names are backwards but not changed for compat
 166     slideOut : function(){
 167         if(this.isSlid || this.el.hasActiveFx()){
 168             return;
 169         }
 170         this.isSlid = true;
 171         if(this.collapseBtn){
 172             this.collapseBtn.hide();
 173         }
 174         this.closeBtnState = this.closeBtn.getStyle('display');
 175         this.closeBtn.hide();
 176         if(this.stickBtn){
 177             this.stickBtn.show();
 178         }
 179         this.el.show();
 180         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
 181         this.beforeSlide();
 182         this.el.setStyle("z-index", 10001);
 183         this.el.slideIn(this.getSlideAnchor(), {
 184             callback: function(){
 185                 this.afterSlide();
 186                 this.initAutoHide();
 187                 Roo.get(document).on("click", this.slideInIf, this);
 188                 this.fireEvent("slideshow", this);
 189             },
 190             scope: this,
 191             block: true
 192         });
 193     },
 194
 195     afterSlideIn : function(){
 196         this.clearAutoHide();
 197         this.isSlid = false;
 198         this.clearMonitor();
 199         this.el.setStyle("z-index", "");
 200         if(this.collapseBtn){
 201             this.collapseBtn.show();
 202         }
 203         this.closeBtn.setStyle('display', this.closeBtnState);
 204         if(this.stickBtn){
 205             this.stickBtn.hide();
 206         }
 207         this.fireEvent("slidehide", this);
 208     },
 209
 210     slideIn : function(cb){
 211         if(!this.isSlid || this.el.hasActiveFx()){
 212             Roo.callback(cb);
 213             return;
 214         }
 215         this.isSlid = false;
 216         this.beforeSlide();
 217         this.el.slideOut(this.getSlideAnchor(), {
 218             callback: function(){
 219                 this.el.setLeftTop(-10000, -10000);
 220                 this.afterSlide();
 221                 this.afterSlideIn();
 222                 Roo.callback(cb);
 223             },
 224             scope: this,
 225             block: true
 226         });
 227     },
 228
 229     slideInIf : function(e){
 230         if(!e.within(this.el)){
 231             this.slideIn();
 232         }
 233     },
 234
 235     animateCollapse : function(){
 236         this.beforeSlide();
 237         this.el.setStyle("z-index", 20000);
 238         var anchor = this.getSlideAnchor();
 239         this.el.slideOut(anchor, {
 240             callback : function(){
 241                 this.el.setStyle("z-index", "");
 242                 this.collapsedEl.slideIn(anchor, {duration:.3});
 243                 this.afterSlide();
 244                 this.el.setLocation(-10000,-10000);
 245                 this.el.hide();
 246                 this.fireEvent("collapsed", this);
 247             },
 248             scope: this,
 249             block: true
 250         });
 251     },
 252
 253     animateExpand : function(){
 254         this.beforeSlide();
 255         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
 256         this.el.setStyle("z-index", 20000);
 257         this.collapsedEl.hide({
 258             duration:.1
 259         });
 260         this.el.slideIn(this.getSlideAnchor(), {
 261             callback : function(){
 262                 this.el.setStyle("z-index", "");
 263                 this.afterSlide();
 264                 if(this.split){
 265                     this.split.el.show();
 266                 }
 267                 this.fireEvent("invalidated", this);
 268                 this.fireEvent("expanded", this);
 269             },
 270             scope: this,
 271             block: true
 272         });
 273     },
 274
 275     anchors : {
 276         "west" : "left",
 277         "east" : "right",
 278         "north" : "top",
 279         "south" : "bottom"
 280     },
 281
 282     sanchors : {
 283         "west" : "l",
 284         "east" : "r",
 285         "north" : "t",
 286         "south" : "b"
 287     },
 288
 289     canchors : {
 290         "west" : "tl-tr",
 291         "east" : "tr-tl",
 292         "north" : "tl-bl",
 293         "south" : "bl-tl"
 294     },
 295
 296     getAnchor : function(){
 297         return this.anchors[this.position];
 298     },
 299
 300     getCollapseAnchor : function(){
 301         return this.canchors[this.position];
 302     },
 303
 304     getSlideAnchor : function(){
 305         return this.sanchors[this.position];
 306     },
 307
 308     getAlignAdj : function(){
 309         var cm = this.cmargins;
 310         switch(this.position){
 311             case "west":
 312                 return [0, 0];
 313             break;
 314             case "east":
 315                 return [0, 0];
 316             break;
 317             case "north":
 318                 return [0, 0];
 319             break;
 320             case "south":
 321                 return [0, 0];
 322             break;
 323         }
 324     },
 325
 326     getExpandAdj : function(){
 327         var c = this.collapsedEl, cm = this.cmargins;
 328         switch(this.position){
 329             case "west":
 330                 return [-(cm.right+c.getWidth()+cm.left), 0];
 331             break;
 332             case "east":
 333                 return [cm.right+c.getWidth()+cm.left, 0];
 334             break;
 335             case "north":
 336                 return [0, -(cm.top+cm.bottom+c.getHeight())];
 337             break;
 338             case "south":
 339                 return [0, cm.top+cm.bottom+c.getHeight()];
 340             break;
 341         }
 342     }
 343 });