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