Fix some splitter issues:

- Loaded at wrong size
- Docking lost previous pane size
- Docking overwrote bar location preference
- Allowed etemplate to think load was done too early
This commit is contained in:
Nathan Gray 2013-11-20 23:27:10 +00:00
parent 379cc5042d
commit e231ca5212
3 changed files with 62 additions and 15 deletions

View File

@ -67,7 +67,8 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
init: function() { init: function() {
this._super.apply(this, arguments); this._super.apply(this, arguments);
this.div = $j(document.createElement("div")); this.div = $j(document.createElement("div"))
.addClass('et2_split');
// Create the dynheight component which dynamically scales the inner // Create the dynheight component which dynamically scales the inner
// container. // container.
@ -79,6 +80,9 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
// Add something so we can see it - will be replaced if there's children // Add something so we can see it - will be replaced if there's children
this.left = $j("<div>Top / Left</div>").appendTo(this.div); this.left = $j("<div>Top / Left</div>").appendTo(this.div);
this.right = $j("<div>Bottom / Right</div>").appendTo(this.div); this.right = $j("<div>Bottom / Right</div>").appendTo(this.div);
// Deferred object so we can wait for children
this.loading = jQuery.Deferred();
}, },
destroy: function() { destroy: function() {
@ -141,7 +145,10 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
window.setTimeout(function() { window.setTimeout(function() {
self._init_splitter(); self._init_splitter();
},1); },1);
return true;
// Not done yet, but widget will let you know
return this.loading.promise();
}, },
/** /**
@ -153,7 +160,9 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
var options = { var options = {
type: this.orientation, type: this.orientation,
dock: this.dock_side, dock: this.dock_side,
splitterClass: "et2_split" splitterClass: "et2_split",
outline: true,
eventNamespace: '.et2_split.'+this.id
}; };
// Check for position preference, load it in // Check for position preference, load it in
@ -175,6 +184,16 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
// Initialize splitter // Initialize splitter
this.div.splitter(options); this.div.splitter(options);
// Start docked?
if(options.dock)
{
if(options.dock == "bottomDock" && options.sizeTop >= this.div.height() ||
options.dock == "topDock" && options.sizeTop == 0)
{
this.dock();
}
}
// Add icon to splitter bar // Add icon to splitter bar
var icon = "ui-icon-grip-" var icon = "ui-icon-grip-"
+ (this.dock_side ? "solid" : "dotted") + "-" + (this.dock_side ? "solid" : "dotted") + "-"
@ -189,12 +208,20 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
if(this.id && this.egw().getAppName()) if(this.id && this.egw().getAppName())
{ {
self = this; self = this;
this.left.next().on("mouseup", function() { this.left.on("resize"+options.eventNamespace, function(e) {
if(e.namespace == options.eventNamespace.substr(1) && !self.isDocked())
{
// Store current position in preferences // Store current position in preferences
var size = self.orientation == "v" ? {sizeLeft: self.left.width()} : {sizeTop: self.left.height()}; var size = self.orientation == "v" ? {sizeLeft: self.left.width()} : {sizeTop: self.left.height()};
self.egw().set_preference(self.egw().getAppName(), 'splitter-size-' + self.id, size); self.egw().set_preference(self.egw().getAppName(), 'splitter-size-' + self.id, size);
}
self.iterateOver(function(widget) {
if(widget != self) widget.resize();
},self,et2_IResizeable);
}); });
} }
this.loading.resolve();
}, },
/** /**
@ -203,6 +230,7 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
resize: function() { resize: function() {
if(this.dynheight) if(this.dynheight)
{ {
var old = {w: this.div.width(), h: this.div.height()};
this.dynheight.update(function(w,h) { this.dynheight.update(function(w,h) {
if(this.orientation == "v") if(this.orientation == "v")
{ {
@ -213,15 +241,23 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
{ {
this.left.width(w); this.left.width(w);
this.right.width(w); this.right.width(w);
if(this.isDocked()) {
if(this.dock_side == "topDock") if(this.dock_side == "topDock")
{ {
this.right.height(h); this.right.height(h);
this.left.height(0);
} }
else else
{ {
this.left.height(h); this.left.height(h);
this.right.height(0);
} }
} }
}
if(w != old.w || h != old.h)
{
this.div.trigger('resize.et2_split.'+this.id);
}
}, this); }, this);
} }
}, },
@ -267,6 +303,7 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
* Docking requires the dock attribute to be set. * Docking requires the dock attribute to be set.
*/ */
dock: function() { dock: function() {
if(this.isDocked()) return;
this.div.trigger("dock"); this.div.trigger("dock");
}, },
@ -278,6 +315,15 @@ var et2_split = et2_DOMWidget.extend([et2_IResizeable],
this.div.trigger("undock"); this.div.trigger("undock");
}, },
/**
* Determine if the splitter is docked
* @return boolean
*/
isDocked: function() {
var bar = $j('.splitter-bar',this.div);
return bar.hasClass('splitter-bar-horizontal-docked') || bar.hasClass('splitter-bar-vertical-docked');
},
/** /**
* Toggle the splitter's docked state. * Toggle the splitter's docked state.
* Docking requires the dock attribute to be set. * Docking requires the dock attribute to be set.

View File

@ -104,6 +104,7 @@ div.et2_hbox>div {
width: 100%; width: 100%;
min-width: 100px; min-width: 100px;
min-height: 100px; min-height: 100px;
height: 100%;
} }
.splitter-bar-vertical { cursor: ew-resize; width: 5px;} .splitter-bar-vertical { cursor: ew-resize; width: 5px;}
.splitter-bar-horizontal { cursor: ns-resize; height: 5px;} .splitter-bar-horizontal { cursor: ns-resize; height: 5px;}

View File

@ -113,7 +113,7 @@ var splitterCounter = 0;
A.css(opts.origin, 0).css(opts.split, pos).css(opts.fixed, splitter._DF); A.css(opts.origin, 0).css(opts.split, pos).css(opts.fixed, splitter._DF);
B.css(opts.origin, pos+bar._DA) B.css(opts.origin, pos+bar._DA)
.css(opts.split, splitter._DA-bar._DA-pos).css(opts.fixed, splitter._DF); .css(opts.split, splitter._DA-bar._DA-pos).css(opts.fixed, splitter._DF);
panes.trigger("resize"); panes.trigger("resize"+opts.eventNamespace);
} }
function dimSum(jq, dims) { function dimSum(jq, dims) {
// Opera returns -1 for missing min/max width, turn into 0 // Opera returns -1 for missing min/max width, turn into 0