From e710cdd51bab61d387547d955737b3951ce1bd98 Mon Sep 17 00:00:00 2001 From: = Date: Fri, 4 Feb 2011 20:35:20 +0100 Subject: [PATCH 1/6] added ui.layout, first commit --- demos/index.html | 2 + demos/layout/horizontal.html | 40 +++ demos/layout/index.html | 18 ++ demos/layout/nested.html | 63 +++++ demos/layout/vertical.html | 38 +++ themes/base/jquery.ui.base.css | 1 + themes/base/jquery.ui.layout.css | 106 ++++++++ ui/jquery.ui.layout.js | 408 +++++++++++++++++++++++++++++++ 8 files changed, 676 insertions(+) create mode 100755 demos/layout/horizontal.html create mode 100644 demos/layout/index.html create mode 100755 demos/layout/nested.html create mode 100755 demos/layout/vertical.html create mode 100644 themes/base/jquery.ui.layout.css create mode 100644 ui/jquery.ui.layout.js diff --git a/demos/index.html b/demos/index.html index e1f4eec9132..5755de3d8bb 100644 --- a/demos/index.html +++ b/demos/index.html @@ -29,6 +29,7 @@ + @@ -283,6 +284,7 @@
Spinner
Tabs
Tooltip
+
Layout
Effects
Color Animation
Toggle Class
diff --git a/demos/layout/horizontal.html b/demos/layout/horizontal.html new file mode 100755 index 00000000000..3add5f04d40 --- /dev/null +++ b/demos/layout/horizontal.html @@ -0,0 +1,40 @@ + + + + Horizontal layout + + + + + + + + + + + + + + +
+
West
+
Center
+
East
+
+ + + \ No newline at end of file diff --git a/demos/layout/index.html b/demos/layout/index.html new file mode 100644 index 00000000000..dab57548ac0 --- /dev/null +++ b/demos/layout/index.html @@ -0,0 +1,18 @@ + + + + + jQuery UI Accordion Demos + + + +
+

Examples

+ +
+ + diff --git a/demos/layout/nested.html b/demos/layout/nested.html new file mode 100755 index 00000000000..ccc8ae94b89 --- /dev/null +++ b/demos/layout/nested.html @@ -0,0 +1,63 @@ + + + Nested layout Example + + + + + + + + + + + + + + + +
+
+
+ Toggle slide +
Outer layout west
+
+
+
+
Inner layout North
+
Inner layout Center
+
Inner layout South
+
+
+ + \ No newline at end of file diff --git a/demos/layout/vertical.html b/demos/layout/vertical.html new file mode 100755 index 00000000000..48baa66157c --- /dev/null +++ b/demos/layout/vertical.html @@ -0,0 +1,38 @@ + + + Vertical layout Example + + + + + + + + + + + + + + +
+
North
+
Center
+
South
+
+ + \ No newline at end of file diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 9a18856c16a..643353dd2fa 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -22,3 +22,4 @@ @import url("jquery.ui.spinner.css"); @import url("jquery.ui.tabs.css"); @import url("jquery.ui.tooltip.css"); +@import url("jquery.ui.layout.css"); diff --git a/themes/base/jquery.ui.layout.css b/themes/base/jquery.ui.layout.css new file mode 100644 index 00000000000..6462d203cb6 --- /dev/null +++ b/themes/base/jquery.ui.layout.css @@ -0,0 +1,106 @@ +.ui-layout{ + position: relative; + overflow: hidden; + border: none; +} +.ui-layout.ui-layout-pane{ + border: none; +} +.ui-layout-pane{ + position: absolute; +} +.ui-layout-pane-east{ + margin-left:16px; + right: 0; + top:0; +} +.ui-layout-pane-west{ + margin-right:16px; + left: 0; + top:0; +} +.ui-layout-pane-east.ui-layout-pane-sliding.ui-layout-pane-open{ + padding-left: 16px; +} + +.ui-layout-pane-west.ui-layout-pane-sliding.ui-layout-pane-open{ + padding-right: 16px; +} + +.ui-layout-pane-north{ + margin-bottom:16px; + top: 0; + left: 0; +} +.ui-layout-pane-south{ + margin-top:16px; + bottom: 0; + left: 0; +} +.ui-layout-pane-north.ui-layout-pane-sliding.ui-layout-pane-open{ + padding-bottom: 16px; +} +.ui-layout-pane-south.ui-layout-pane-sliding.ui-layout-pane-open{ + padding-top: 16px; +} + + + +.ui-layout-pane .ui-resizable-handle{ + position: absolute; + z-index: inherit; +} +.ui-resizable-w, .ui-resizable-e { + width: 16px; + height: 100%; + top: 0; +} +.ui-resizable-e{ + right:-17px; +} + +.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-e{ + right:0; +} + +.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-w{ + left:0; +} + +.ui-resizable-w{ + left:-17px; +} + +.ui-resizable-s, .ui-resizable-n { + height: 16px; + width: 100%; + left: 0; +} +.ui-resizable-n{ + top:-17px; +} + +.ui-resizable-s{ + bottom:-17px; +} + +.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-n{ + top:0; +} +.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-s{ + bottom:0; +} + + +.ui-resizable-handle .ui-icon{ + position: absolute; +} + +.ui-resizable-w .ui-icon, .ui-resizable-e .ui-icon{ + top: 50%; + margin-top: -8px; +} +.ui-resizable-n .ui-icon, .ui-resizable-s .ui-icon{ + left: 50%; + margin-left: -8px; +} \ No newline at end of file diff --git a/ui/jquery.ui.layout.js b/ui/jquery.ui.layout.js new file mode 100644 index 00000000000..ce30926a0ed --- /dev/null +++ b/ui/jquery.ui.layout.js @@ -0,0 +1,408 @@ +;(function($){ + + var toCamelCase = function(string){ + string = $.trim(string.toLowerCase()).replace(/\s\s/,' ') + var words = string.split(" ") + for(var i=1;i') + $mask + .css({ + opacity: 0.0001, + background: 'white', + width: $pane.width(), + height: $pane.height(), + zIndex: $pane.zIndex() + 1, + position: 'absolute' + }) + .appendTo($pane) + .position({at:'left top', my: 'left top', of: $pane}) + } + }); + $pane.bind('resize', function(e){ + $('>div.iframe-mask', $pane) + .width($pane.width()) + .height($pane.height()) + .position({at:'left top', my: 'left top', of: $pane}) + }); + $pane.bind('resize resizestop', function(e){ + // resize central pane if not sliding + if (!self.options[pane].sliding) + self.resize(); + }); + + var preventToggling = false ; + $pane.bind('resizestop', function(e,ui){ + // remove conflicting attributes + self._removeInlineStyleAttr(pane); + $pane.children('div.iframe-mask').remove(); + + // close the sidePane if not visible anymore, otherwise record its dimension + if (ui.size[self._sizeProp(pane)] < self.options[pane][self._sizeProp(pane, 'closing')]){ + self.close(pane) + } + else { + self._opened(pane); + self.options[pane][self._sizeProp(pane)] = ui.size[self._sizeProp(pane)] + } + + //$pane.find('div.iframe-mask').remove(); + + // prevent the pane to toogle after a mouseup event + preventToggling = true; + setTimeout(function(){ + preventToggling = false; + },100) + }); + + // toggle the pane if clicking on the handler + $pane.data('resizable')._handles + .append('
') + .bind('click', function(e){ + if (!preventToggling) + self.toggle(pane); + }); + } + + self.panes[pane] = $pane ; + + // set pane dimension + if(self.options[pane].sliding){ + self._sliding(pane) + $pane[self._sizeProp(pane)](0); + self._closed(pane); + self._putForeground(pane); + } + else if (self.options[pane].opened){ + self._open(pane, false); + $pane[self._sizeProp(pane,'outer')](self.options[pane][self._sizeProp(pane)], true) + } + + } + }); + + this._resizeElement(); + + if (this.element.hasClass('ui-layout-pane')){ + this.element.bind('resize',function(e){ + if (e.target == self.element[0]){ + self._resizeElement(); + } + }) + } + else { + $(window).bind('resize', function(e){ + self._resizeElement(); + }) + } + }, + _resizeElement: function(){ + var self = this; + + if (this.element[0].tagName == "BODY"){ + this.element + .css({padding: '0', margin: '0'}) + .outerWidth($(window).width(), true) + .outerHeight($(window).height(), true); + } else if(!this.element.hasClass('ui-layout-pane')) { + this.element + .outerHeight(this.element.parent().innerHeight(), true) + .outerWidth(this.element.parent().innerWidth(), true); + } + + this._panes().each(function() { + if (self.options.type == 'horizontal') + $(this).outerHeight(self.element.innerHeight(), true) + else + $(this).outerWidth(self.element.innerWidth(), true) + }); + + // resize center pane + this.resize(); + + }, + resize: function(){ + var self = this, + $pane = this.panes['center'], + $prev = $pane.prev('.ui-layout-pane'); + + var prefixedProp = function(prefix){ + var prop = self.options.type == 'horizontal' ? 'width' : 'height'; + return toCamelCase('outer '+ prop) + } + + var parseValue = function(text){ + return parseInt(text.match(/-*\d+/)) + } + + var sum = 0; + this.element.children(".ui-layout-pane:visible").not('.ui-layout-pane-center').each(function(){ + sum+= $(this).hasClass('ui-layout-pane-sliding') ? $(this)[prefixedProp('outer')](true) - $(this)[prefixedProp('inner')]() : $(this)[prefixedProp('outer')](true); + }); + + $pane[prefixedProp('outer')](this.element[prefixedProp('max')]() - sum, true ); + + + var offset = function(){ + return self.options.type == 'horizontal' ? $prev.css('marginRight')+' 0' : '0 ' + $prev.css('marginBottom') + } + if ($prev.length && !$prev.hasClass('ui-layout-pane-sliding')){ + $pane.position({ + offset: offset(), + of: $prev, + my: 'left top', + at: this.options.type == 'horizontal' ? 'right top' : 'left bottom', + collision: "none" + }) + } + else{ + $pane.position({ + offset: $prev.hasClass('ui-layout-pane-sliding') ? offset() : '', + of: this.element, + my: 'left top', + at: 'left top' + }) + } + + this._trigger('resize') + // emulate a resize event from the center pane + $pane.trigger('resize'); + return this.element + }, + _putForeground:function(pane){ + var $pane = this.panes[pane], + depth = this.element.parents('.ui-layout').length + 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'); + }, + toggleSlide: function(pane){ + this.options[pane].sliding = !this.options[pane].sliding; + this._sliding(pane, this.options[pane].sliding); + this.resize(); + return this.element + }, + _pane:function(pane){ + return {pane: this.panes[pane], name: pane} + }, + _open: function(pane, trigg){ + trigg = ("undefined" == typeof trigg ) ? true : trigg; + this.panes[pane].addClass('ui-layout-pane-open') + this.options[pane].opened = true; + if (trigg) + this._trigger(pane+'open', null, this._pane(pane)); + }, + _opened: function(pane){ + this._trigger(pane+'opened', null, this._pane(pane)); + }, + _close: function(pane){ + this._trigger(pane+'close', null, this._pane(pane)); + }, + _closed: function(pane){ + this.panes[pane].removeClass('ui-layout-pane-open') + this.options[pane].opened = false; + this._trigger(pane+'closed', null, this._pane(pane)); + }, + + + _panes: function(){ + return this.element.children('.ui-layout-pane') + }, + + _maxSize:function(pane){ + var options = this.options[pane], + $pane = this.panes[pane], + property = this._sizeProp(pane) + + return Math.min(options.resizable[this._sizeProp(pane,'max')], this.element[this._sizeProp(pane,'inner')]() - ( this.options['center'].minWidth + this._panes().not($pane).not(this.panes['center'])[this._sizeProp(pane,'outer')](true) )) + }, + + _removeInlineStyleAttr: function(pane){ + var $pane = this.panes[pane], + style = this.panes[pane].attr('style'), + props ; + + switch(pane){ + case 'east': props = 'left'; break; + case 'south': props = 'top'; break; + } + if (props){ + $.each(props.split(','), function(i,r){ + style=style.replace(new RegExp(r+':\\s\\w*\;','')); + }); + $pane.attr('style', style); + } + }, + + + toggle: function(pane, callback){ + if (this.options[pane].opened) + this.close(pane, callback); + else + this.open(pane, callback) + + return this.element + }, + close: function(pane, callback){ + var self = this, + css = {}, + callback = callback || null ; + if (this.options[pane].opened){ + this._close(pane) + css[self._sizeProp(pane)] = 0; + this._animate(pane, css, function(){ + self._closed(pane); + if (callback) + callback.apply(self.panes[pane]) + }) + } + return this.element + }, + open: function(pane, callback){ + var self = this, + callback = callback || null, + css = {} ; + if (!this.options[pane].opened){ + this._open(pane) + css[self._sizeProp(pane)] = Math.min(this.options[pane][this._sizeProp(pane)], this._maxSize(pane)) ; + this._animate(pane, css, function(){ + self._opened(pane) + if (callback) + callback.apply(self.panes[pane]) + }) + } + return this.element + }, + _animate: function(pane, css, callback){ + var self = this, + callback = callback || null ; + + //self._putForeground(pane); + + this.panes[pane].animate(css, { + step: function(currentStep){ + if (!self.options[pane].sliding) + self.resize(); + }, + complete: function(){ + if (!self.options[pane].sliding){ + //self._putBackground(pane) + self.resize(); + } + if (callback){ + callback(); + } + }} + ); + } + + }); +})(jQuery) \ No newline at end of file From c72a49d6ee881f60ebac9bc960df8617fe500b4d Mon Sep 17 00:00:00 2001 From: = Date: Mon, 7 Feb 2011 16:09:48 +0100 Subject: [PATCH 2/6] gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index e39040f5b4a..0e42e62deba 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ docs *.diff *.patch .DS_Store +.idea From 353c60c3a993f9e465c120079331f7825774b24e Mon Sep 17 00:00:00 2001 From: = Date: Tue, 8 Feb 2011 14:02:41 +0100 Subject: [PATCH 3/6] hide borders for closed paned hide hanldes for hidden closed paned, toggleEvent and toggleSelector customization --- demos/layout/nested.html | 127 ++++++++++++++++--------------- themes/base/jquery.ui.layout.css | 48 ++++++++++++ ui/jquery.ui.layout.js | 77 +++++++++++++------ 3 files changed, 165 insertions(+), 87 deletions(-) diff --git a/demos/layout/nested.html b/demos/layout/nested.html index ccc8ae94b89..67107fab411 100755 --- a/demos/layout/nested.html +++ b/demos/layout/nested.html @@ -1,63 +1,66 @@ - - - Nested layout Example - - - - - - - - - - - - - - - -
-
-
- Toggle slide -
Outer layout west
-
-
-
-
Inner layout North
-
Inner layout Center
-
Inner layout South
-
-
- + + + Nested layout Example + + + + + + + + + + + + + + + +
+
+
+ Toggle slide +
Outer layout west
+
+
+
+
Inner layout North
+
Inner layout Center
+
Inner layout South
+
+
+ \ No newline at end of file diff --git a/themes/base/jquery.ui.layout.css b/themes/base/jquery.ui.layout.css index 6462d203cb6..3088194d36f 100644 --- a/themes/base/jquery.ui.layout.css +++ b/themes/base/jquery.ui.layout.css @@ -27,6 +27,54 @@ padding-right: 16px; } +.ui-layout .ui-layout-pane.ui-layout-pane-close{ + border: none; +} + + +.ui-layout-pane.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-handle .ui-icon{ + background: none; + width: 0; + height:0; + left:0; +} + +.ui-layout-pane-west.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-e { + right: -1px; + width: 1px; +} +.ui-layout-pane-east.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-w { + left: -1px; + width: 1px; +} +.ui-layout-pane-south.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-n { + top: -1px; + width: 1px; +} +.ui-layout-pane-north.ui-layout-pane-close.ui-layout-pane-hiding > .ui-resizable-s { + bottom: -1px; + width: 1px; +} + + +.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: 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: 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: 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: 0; +} + + .ui-layout-pane-north{ margin-bottom:16px; top: 0; diff --git a/ui/jquery.ui.layout.js b/ui/jquery.ui.layout.js index ce30926a0ed..6a06c412ebc 100644 --- a/ui/jquery.ui.layout.js +++ b/ui/jquery.ui.layout.js @@ -29,7 +29,9 @@ type: "horizontal", // vertical defaults: { closingWidth: 20, - closingHeight: 20 + closingHeight: 20, + toggleEvent: 'click', + toggleSelector: '.ui-resizable-handle' }, east: { selector: '.ui-layout-pane-east', @@ -62,8 +64,9 @@ resizable: { handles: 'n', maxHeight: 999999 } } }, +// todo : method to be used in order to slide a pane on opening an closing action (instead of resizing it) _positionProp: function(pane){ - var prop = '' + var prop ; switch(pane){ case 'west': prop = 'left'; break; case 'east': prop = 'right'; break; @@ -76,6 +79,7 @@ prefix = prefix || ''; return toCamelCase(prefix +" " + (this.options[pane].resizable.handles.match(/e|w/) ? 'width' : 'height') ); }, + _create: function(){ var self = this; @@ -98,12 +102,12 @@ // init side panes as resizable elements if (pane != 'center'){ + // init pane as rezisable element $pane.resizable($.extend({}, self.options[pane].resizable,{ containment: 'parent' })); - $pane.bind('resizestart', function(e,ui){ self._open(pane) @@ -136,12 +140,29 @@ self.resize(); }); - var preventToggling = false ; + var preventToggling = false; + $pane.bind('resizestop', function(e,ui){ + // remove conflicting attributes self._removeInlineStyleAttr(pane); + + // remove potential iframe mask $pane.children('div.iframe-mask').remove(); + + // prevent the pane to toggle after a mouseup event, if the orginal size has significantly been changed + if (Math.abs(ui.size[self._sizeProp(pane)] - ui.originalSize[self._sizeProp(pane)]) > 3){ + preventToggling = true; + setTimeout(function(){ + preventToggling = false; + },100); + } + else{ + return true; + } + + // close the sidePane if not visible anymore, otherwise record its dimension if (ui.size[self._sizeProp(pane)] < self.options[pane][self._sizeProp(pane, 'closing')]){ self.close(pane) @@ -151,26 +172,24 @@ self.options[pane][self._sizeProp(pane)] = ui.size[self._sizeProp(pane)] } - //$pane.find('div.iframe-mask').remove(); - - // prevent the pane to toogle after a mouseup event - preventToggling = true; - setTimeout(function(){ - preventToggling = false; - },100) }); // toggle the pane if clicking on the handler $pane.data('resizable')._handles .append('
') - .bind('click', function(e){ - if (!preventToggling) - self.toggle(pane); - }); + + $(self.options[pane].toggleSelector, $pane) + .bind(self.options[pane].toggleEvent, function(e){ + if (!preventToggling) + self.toggle(pane); + }) } self.panes[pane] = $pane ; + + self._hiding(pane, self.options[pane].hiding) ; + // set pane dimension if(self.options[pane].sliding){ self._sliding(pane) @@ -201,6 +220,7 @@ }) } }, + _resizeElement: function(){ var self = this; @@ -284,32 +304,40 @@ sliding = ("undefined" == typeof sliding) ? true : sliding; this.panes[pane][sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding'); }, + _hiding: function(pane, hiding){ + hiding = ("undefined" == typeof hiding) ? false : hiding; + this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding'); + }, toggleSlide: function(pane){ this.options[pane].sliding = !this.options[pane].sliding; this._sliding(pane, this.options[pane].sliding); this.resize(); return this.element }, - _pane:function(pane){ - return {pane: this.panes[pane], name: pane} + _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') + this.panes[pane].removeClass('ui-layout-pane-close') this.options[pane].opened = true; if (trigg) - this._trigger(pane+'open', null, this._pane(pane)); + this._trigger(pane+'open', null, this._ui(pane)); }, _opened: function(pane){ - this._trigger(pane+'opened', null, this._pane(pane)); + this._trigger(pane+'opened', null, this._ui(pane)); }, _close: function(pane){ - this._trigger(pane+'close', null, this._pane(pane)); + this._trigger(pane+'close', null, this._ui(pane)); }, _closed: function(pane){ this.panes[pane].removeClass('ui-layout-pane-open') + this.panes[pane].addClass('ui-layout-pane-close') this.options[pane].opened = false; - this._trigger(pane+'closed', null, this._pane(pane)); + this._trigger(pane+'closed', null, this._ui(pane)); }, @@ -342,7 +370,6 @@ } }, - toggle: function(pane, callback){ if (this.options[pane].opened) this.close(pane, callback); @@ -393,13 +420,13 @@ self.resize(); }, complete: function(){ + if (callback){ + callback(); + } if (!self.options[pane].sliding){ //self._putBackground(pane) self.resize(); } - if (callback){ - callback(); - } }} ); } From fccb8d0e69059cc5ff2fde7f1589b2a24379acd7 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 8 Feb 2011 16:54:37 +0100 Subject: [PATCH 4/6] bugs on toggle sliding panes --- demos/layout/horizontal.html | 78 ++++++++++++++++---------------- demos/layout/index.html | 2 +- demos/layout/nested.html | 17 ++++--- themes/base/jquery.ui.layout.css | 8 ++-- ui/jquery.ui.layout.js | 12 +++-- 5 files changed, 62 insertions(+), 55 deletions(-) diff --git a/demos/layout/horizontal.html b/demos/layout/horizontal.html index 3add5f04d40..eccf11011e8 100755 --- a/demos/layout/horizontal.html +++ b/demos/layout/horizontal.html @@ -1,40 +1,40 @@ - - - - Horizontal layout - - - - - - - - - - - - - - -
-
West
-
Center
-
East
-
- - + + + + Horizontal layout + + + + + + + + + + + + + + +
+
West
+
Center
+
East
+
+ + \ No newline at end of file diff --git a/demos/layout/index.html b/demos/layout/index.html index dab57548ac0..ffea26c5659 100644 --- a/demos/layout/index.html +++ b/demos/layout/index.html @@ -3,7 +3,7 @@ jQuery UI Accordion Demos - +
diff --git a/demos/layout/nested.html b/demos/layout/nested.html index 67107fab411..55135b168f3 100755 --- a/demos/layout/nested.html +++ b/demos/layout/nested.html @@ -14,12 +14,12 @@ diff --git a/themes/base/jquery.ui.layout.css b/themes/base/jquery.ui.layout.css index 3088194d36f..8e00e6d548e 100644 --- a/themes/base/jquery.ui.layout.css +++ b/themes/base/jquery.ui.layout.css @@ -59,19 +59,19 @@ .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: 0; + margin-right: 1px; } .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: 0; + margin-left: 1px; } .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: 0; + margin-bottom: 1px; } .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: 0; + margin-bottom: 1px; } diff --git a/ui/jquery.ui.layout.js b/ui/jquery.ui.layout.js index 6a06c412ebc..6ef607de950 100644 --- a/ui/jquery.ui.layout.js +++ b/ui/jquery.ui.layout.js @@ -195,7 +195,7 @@ self._sliding(pane) $pane[self._sizeProp(pane)](0); self._closed(pane); - self._putForeground(pane); + } else if (self.options[pane].opened){ self._open(pane, false); @@ -303,10 +303,8 @@ _sliding: function(pane, sliding){ sliding = ("undefined" == typeof sliding) ? true : sliding; this.panes[pane][sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding'); - }, - _hiding: function(pane, hiding){ - hiding = ("undefined" == typeof hiding) ? false : hiding; - this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding'); + if (sliding) + this._putForeground(pane); }, toggleSlide: function(pane){ this.options[pane].sliding = !this.options[pane].sliding; @@ -314,6 +312,10 @@ this.resize(); return this.element }, + _hiding: function(pane, hiding){ + hiding = ("undefined" == typeof hiding) ? false : hiding; + this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding'); + }, _ui:function(pane){ return {pane: this.panes[pane], paneName: pane, options: this.options} }, From f65239f2285ddbd56374299b477bf57d45c14151 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 9 Feb 2011 11:53:37 +0100 Subject: [PATCH 5/6] overrided this.option to toggle sliding and hiding, increased handlebar width for hidden closed pane --- demos/layout/nested.html | 14 +++++++--- themes/base/jquery.ui.layout.css | 24 ++++++++--------- ui/jquery.ui.layout.js | 44 ++++++++++++++++++++------------ 3 files changed, 50 insertions(+), 32 deletions(-) diff --git a/demos/layout/nested.html b/demos/layout/nested.html index 55135b168f3..1012f2b90ed 100755 --- a/demos/layout/nested.html +++ b/demos/layout/nested.html @@ -15,11 +15,13 @@ + html{ + margin:0; + padding:0; + } + body{ + height: 100%; + margin:0; + padding:0; + } #layout{ margin: 10px; } diff --git a/ui/jquery.ui.layout.js b/ui/jquery.ui.layout.js index a62a33329b2..561e8339f72 100644 --- a/ui/jquery.ui.layout.js +++ b/ui/jquery.ui.layout.js @@ -77,9 +77,9 @@ } return prop }, - _sizeProp: function(pane,prefix){ + _sizeProp: function(prefix){ prefix = prefix || ''; - return toCamelCase(prefix +" " + (this.options[pane].resizable.handles.match(/e|w/) ? 'width' : 'height') ); + return toCamelCase(prefix +" " + (this.options.type == 'horizontal' ? 'width' : 'height' )); }, _create: function(){ @@ -114,7 +114,7 @@ self._open(pane) // set max width/height dynamically - $pane.resizable('option', self._sizeProp(pane,'max'), self._maxSize(pane)); + $pane.resizable('option', self._sizeProp('max'), self._maxSize(pane)); if ($pane.find('iframe').length){ var $mask = $('
') $mask @@ -154,7 +154,7 @@ // prevent the pane to toggle after a mouseup event, if the orginal size has significantly been changed - if (Math.abs(ui.size[self._sizeProp(pane)] - ui.originalSize[self._sizeProp(pane)]) > 3){ + if (Math.abs(ui.size[self._sizeProp()] - ui.originalSize[self._sizeProp()]) > 3){ preventToggling = true; setTimeout(function(){ preventToggling = false; @@ -166,12 +166,12 @@ // close the sidePane if not visible anymore, otherwise record its dimension - if (ui.size[self._sizeProp(pane)] < self.options[pane][self._sizeProp(pane, 'closing')]){ + if (ui.size[self._sizeProp()] < self.options[pane][self._sizeProp('closing')]){ self.close(pane) } else { self._opened(pane); - self.options[pane][self._sizeProp(pane)] = ui.size[self._sizeProp(pane)] + self.options[pane][self._sizeProp()] = ui.size[self._sizeProp()] } }); @@ -195,49 +195,50 @@ // set pane dimension if(self.options[pane].sliding){ self._sliding(pane) - $pane[self._sizeProp(pane)](0); + $pane[self._sizeProp()](0); self._closed(pane); } else if (self.options[pane].opened){ self._open(pane, false); - $pane[self._sizeProp(pane,'outer')](self.options[pane][self._sizeProp(pane)], true) + $pane[self._sizeProp('outer')](self.options[pane][self._sizeProp()], true) } } }); - this._resizeElement(); - if (this.element.hasClass('ui-layout-pane')){ this.element.bind('resize',function(e){ if (e.target == self.element[0]){ - self._resizeElement(); + self.resizeElement(); } }) } else { $(window).bind('resize', function(e){ - self._resizeElement(); + self.resizeElement(); }) } + + this.resizeElement(); + }, - _resizeElement: function(){ + resizeElement: function(){ var self = this; if (this.element[0].tagName == "BODY"){ - this.element + self.element .css({padding: '0', margin: '0'}) .outerWidth($(window).width(), true) .outerHeight($(window).height(), true); - } else if(!this.element.hasClass('ui-layout-pane')) { - this.element - .outerHeight(this.element.parent().innerHeight(), true) - .outerWidth(this.element.parent().innerWidth(), true); + } else if(!self.element.hasClass('ui-layout-pane')) { + self.element + .outerHeight(self.element.parent().innerHeight(), true) + .outerWidth(self.element.parent().innerWidth(), true); } - this._panes().each(function() { + self._panes().each(function() { if (self.options.type == 'horizontal') $(this).outerHeight(self.element.innerHeight(), true) else @@ -245,34 +246,31 @@ }); // resize center pane - this.resize(); + self.resize(); + return this; }, resize: function(){ var self = this, $pane = this.panes['center'], $prev = $pane.prev('.ui-layout-pane'); - var prefixedProp = function(prefix){ - var prop = self.options.type == 'horizontal' ? 'width' : 'height'; - return toCamelCase('outer '+ prop) - } - - var parseValue = function(text){ - return parseInt(text.match(/-*\d+/)) - } - var sum = 0; - this.element.children(".ui-layout-pane:visible").not('.ui-layout-pane-center').each(function(){ - sum+= $(this).hasClass('ui-layout-pane-sliding') ? $(this)[prefixedProp('outer')](true) - $(this)[prefixedProp('inner')]() : $(this)[prefixedProp('outer')](true); + this.element.children(".ui-layout-pane").not('.ui-layout-pane-center').each(function(){ + if ($(this).hasClass('ui-layout-pane-sliding')){ + sum+= $(this)[self._sizeProp('outer')](true) - $(this)[self._sizeProp('inner')]() + } + else{ + sum+= $(this)[self._sizeProp('outer')](true); + } }); - $pane[prefixedProp('outer')](this.element[prefixedProp('max')]() - sum, true ); - + $pane[self._sizeProp('outer')](this.element[self._sizeProp('inner')]() - sum, true ); var offset = function(){ return self.options.type == 'horizontal' ? $prev.css('marginRight')+' 0' : '0 ' + $prev.css('marginBottom') } + if ($prev.length && !$prev.hasClass('ui-layout-pane-sliding')){ $pane.position({ offset: offset(), @@ -284,17 +282,19 @@ } else{ $pane.position({ - offset: $prev.hasClass('ui-layout-pane-sliding') ? offset() : '', + offset: $prev.hasClass('ui-layout-pane-sliding') ? offset() : '0 0', of: this.element, my: 'left top', - at: 'left top' + at: 'left top', + collision: "none" }) } this._trigger('resize') // emulate a resize event from the center pane $pane.trigger('resize'); - return this.element + + return this }, _putForeground:function(pane){ var $pane = this.panes[pane], @@ -362,9 +362,9 @@ _maxSize:function(pane){ var options = this.options[pane], $pane = this.panes[pane], - property = this._sizeProp(pane) + property = this._sizeProp() - return Math.min(options.resizable[this._sizeProp(pane,'max')], this.element[this._sizeProp(pane,'inner')]() - ( this.options['center'].minWidth + this._panes().not($pane).not(this.panes['center'])[this._sizeProp(pane,'outer')](true) )) + return Math.min(options.resizable[this._sizeProp('max')], this.element[this._sizeProp('inner')]() - ( this.options['center'].minWidth + this._panes().not($pane).not(this.panes['center'])[this._sizeProp('outer')](true) )) }, _removeInlineStyleAttr: function(pane){ @@ -398,7 +398,7 @@ callback = callback || null ; if (this.options[pane].opened){ this._close(pane) - css[self._sizeProp(pane)] = 0; + css[self._sizeProp()] = 0; this._animate(pane, css, function(){ self._closed(pane); if (callback) @@ -413,7 +413,7 @@ css = {} ; if (!this.options[pane].opened){ this._open(pane) - css[self._sizeProp(pane)] = Math.min(this.options[pane][this._sizeProp(pane)], this._maxSize(pane)) ; + css[self._sizeProp()] = Math.min(this.options[pane][this._sizeProp()], this._maxSize(pane)) ; this._animate(pane, css, function(){ self._opened(pane) if (callback)