overrided this.option to toggle sliding and hiding, increased handlebar width for hidden closed pane

Author: =

demos/layout/nested.html

@@ -15,11 +15,13 @@
     <script type="text/javascript">
 
       $(function () {
-        var $outer_layout = $('#outer-layout').layout({west: {hiding: true}});
+        var $outer_layout = $('#outer-layout').layout();
         var $inner_layout = $('#inner-layout').layout({type:'vertical', north: {sliding: true}});
         $('.ui-layout-pane-west .toggleSlide').button().click(function(e){
+          var self = $outer_layout.data('layout')
           e.preventDefault();
-          $outer_layout.layout('toggleSlide', 'west');
+          $outer_layout.layout('option', 'west', 'sliding', !self.options['west'].sliding);
+          $outer_layout.layout('option', 'west', 'hiding', !self.options['west'].hiding);
         });
         $inner_layout.bind('layoutnorthopen', function(e,data){
           var self = $inner_layout.data('layout')
@@ -28,11 +30,15 @@
 
         //set the margin to 0 after the west pane has been closed
         $('.ui-layout-pane-west').bind('mouseenter', function(){
-          $outer_layout.layout('open','west');
+          var self = $outer_layout.data('layout');
+          if (self.options['west'].sliding){
+            $outer_layout.layout('open','west');
+          }
         });
 
         $outer_layout.bind('click',function(e){
-          if (!$(e.target).closest('.ui-layout-pane-west').length){
+          var self = $outer_layout.data('layout');
+          if (self.options['west'].sliding && !$(e.target).closest('.ui-layout-pane-west, .ui-resizable-handle').length){
             $outer_layout.layout('close','west');
           }
         });

themes/base/jquery.ui.layout.css

@@ -40,38 +40,38 @@
 }
 
 .ui-layout-pane-west.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-e {
-  right: -1px;
-  width: 1px;
+  right: -5px;
+  width: 5px;
 }
 .ui-layout-pane-east.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-w {
-  left: -1px;
-  width: 1px;
+  left: -5px;
+  width: 5px;
 }
 .ui-layout-pane-south.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-n {
-  top: -1px;
-  width: 1px;
+  top: -5px;
+  width: 5px;
 }
 .ui-layout-pane-north.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-s {
-  bottom: -1px;
-  width: 1px;
+  bottom: -5px;
+  width: 5px;
 }
 
 
 .ui-layout-pane-west.ui-layout-pane-sliding.ui-layout-pane-hiding,
 .ui-layout-pane-west.ui-layout-pane-close.ui-layout-pane-hiding{
-  margin-right: 1px;
+  margin-right: 0;
 }
 .ui-layout-pane-east.ui-layout-pane-sliding.ui-layout-pane-hiding,
 .ui-layout-pane-east.ui-layout-pane-close.ui-layout-pane-hiding{
-  margin-left: 1px;
+  margin-left: 0;
 }
 .ui-layout-pane-north.ui-layout-pane-sliding.ui-layout-pane-hiding,
 .ui-layout-pane-north.ui-layout-pane-close.ui-layout-pane-hiding{
-  margin-bottom: 1px;
+  margin-bottom: 0;
 }
 .ui-layout-pane-south.ui-layout-pane-sliding.ui-layout-pane-hiding,
 .ui-layout-pane-south.ui-layout-pane-close.ui-layout-pane-hiding{
-  margin-bottom: 1px;
+  margin-bottom: 0;
 }
 
 

ui/jquery.ui.layout.js

@@ -30,6 +30,8 @@
       defaults: {
         closingWidth: 20,
         closingHeight: 20,
+        hiding: false,
+        sliding: false,
         toggleEvent: 'click',
         toggleSelector: '.ui-resizable-handle'
       },
@@ -188,7 +190,7 @@
           self.panes[pane] = $pane ;
 
 
-          self._hiding(pane, self.options[pane].hiding) ;
+          self._hiding(pane) ;
 
           // set pane dimension
           if(self.options[pane].sliding){
@@ -300,27 +302,37 @@
       this.options[pane].zIndex = $pane.zIndex();
       $pane.zIndex(this.element.zIndex() + 10 - depth)
     },
-    _sliding: function(pane, sliding){
-      sliding = ("undefined" == typeof sliding) ? true : sliding;
-      this.panes[pane][sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding');
-      if (sliding)
+    _sliding: function(pane){
+      this.panes[pane][this.options[pane].sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding');
+      if (this.options[pane].sliding)
         this._putForeground(pane);
     },
-    toggleSlide: function(pane){
-      this.options[pane].sliding = !this.options[pane].sliding;
-      this._sliding(pane, this.options[pane].sliding);
-      this.resize();
-      return this.element
+    _hiding: function(pane){
+      this.panes[pane][this.options[pane].hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding');
     },
-    _hiding: function(pane, hiding){
-      hiding = ("undefined" == typeof hiding) ? false : hiding;
-      this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding');
-    },    
+    option: function( pane, key, value ) {
+      if ($.inArray(pane, ['center', 'north', 'south', 'east', 'west'])){
+        this.options[pane][key] = value;
+        switch(key){
+          case 'hiding':
+            this._hiding(pane);
+            this.resize();
+            break;
+          case 'sliding':
+            this._sliding(pane);
+            this.resize();
+            break;
+        }
+      }
+      else{
+        this._super('option', pane, key)
+      }
+      return this;
+	  },
+
     _ui:function(pane){
       return {pane: this.panes[pane], paneName: pane, options: this.options}
     },
-
-
     _open: function(pane, trigg){
       trigg = ("undefined" == typeof trigg ) ? true : trigg;
       this.panes[pane].addClass('ui-layout-pane-open')