resizebars

This commit is contained in:
rolux 2010-07-06 20:28:58 +02:00
parent 7000763be4
commit b58cb9118b
4 changed files with 187 additions and 36 deletions

View File

@ -55,6 +55,38 @@ Bars
white-space: nowrap;
}
.OxResizebar.OxHorizontal {
width: 100%;
height: 5px;
margin: -2px 0 -2px 0;
cursor: ns-resize;
}
.OxResizebar.OxHorizontal > .OxLine {
width: 100%;
height: 1px;
}
.OxResizebar.OxHorizontal > .OxSpace {
width: 100%;
height: 2px;
}
.OxResizebar.OxVertical {
width: 5px;
height: 100%;
margin: 0 -2px 0 -2px;
cursor: ew-resize;
}
.OxResizebar.OxVertical > .OxLine {
float: left;
width: 1px;
height: 100%;
}
.OxResizebar.OxVertical > .OxSpace {
float: left;
width: 2px;
height: 100%;
}
.OxTabbar > .OxButtonGroup {
margin: 4px 0 0 4px;
}
@ -594,6 +626,7 @@ Lists
.OxTextList .OxPage {
position: absolute;
}
/*
================================================================================
Menus
@ -661,7 +694,6 @@ Menus
padding: 2px 8px 0 0;
}
.OxMenu {
position: absolute;
display: none;
@ -847,7 +879,6 @@ Panels
right: 0;
}
.OxPanel {
overflow: auto;
}
@ -860,6 +891,9 @@ Panels
bottom: 0;
overflow: hidden;
}
.OxSplitPanel > div {
position: absolute;
}
/*
================================================================================

View File

@ -24,6 +24,10 @@ Bars
background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
}
.OxThemeModern .OxResizebar > .OxLine {
background: rgb(48, 48, 48);
}
/*
================================================================================
Dialog

View File

@ -1307,6 +1307,7 @@ Ox.limit = function(num, min, max) {
>>> Ox.limit(2, 1)
1
*/
Ox.print(num, min, max)
var len = arguments.length;
max = arguments[len - 1];
min = len == 3 ? min : 0;

View File

@ -920,10 +920,10 @@ requires
args, ret;
if (length == 0) {
// options()
ret = self.options;
ret = self.options || options; // this is silly. make sure self.options get populated with options
} else if (length == 1 && typeof arguments[0] == "string") {
// options(str)
ret = self.options[arguments[0]]
ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
} else {
// options (str, val) or options({str: val, ...})
// translate (str, val) to ({str: val})
@ -1209,6 +1209,93 @@ requires
return that;
};
/*
----------------------------------------------------------------------------
Ox.Resizebar
----------------------------------------------------------------------------
*/
Ox.Resizebar = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
collapsible: true,
edge: "left",
elements: [],
orientation: "horizontal",
parent: null,
resizable: true,
resize: [],
size: 0
})
.options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
.addClass("OxResizebar Ox" + Ox.toTitleCase(self.options.orientation))
/*
.attr({
draggable: "true"
})
.bind("dragstart", function(e) {
// e.originalEvent.dataTransfer.setDragImage($("<div>")[0], 0, 0);
})
.bind("drag", function(e) {
Ox.print("dragging", e)
})
*/
.mousedown(dragStart)
.dblclick(toggle)
.append($("<div>").addClass("OxSpace"))
.append($("<div>").addClass("OxLine"))
.append($("<div>").addClass("OxSpace"));
$.extend(self, {
clientXY: self.options.orientation == "horizontal" ? "clientY" : "clientX",
ids: $.map(self.options.elements, function(v, i) {
return v.options("id");
}),
length: self.options.resize.length,
startPos: 0,
startSize: 0
});
function drag(e) {
var d = e[self.clientXY] - self.startPos, i;
self.options.size = Ox.limit(self.startSize + d, self.options.resize[0], self.options.resize[self.length - 1]);
Ox.print("sS", self.startSize, "d", d, "s.o.s", self.options.size)
$.each(self.options.resize, function(i, v) {
if (self.options.size > v - 8 && self.options.size < v + 8) {
self.options.size = v;
return false;
}
});
that.css("left", self.options.size + "px");
self.options.elements[0].css("width", self.options.size + "px");
self.options.elements[1].css("left", (self.options.size + 1) + "px");
Ox.Event.trigger("resize_" + self.ids[0], self.options.size);
Ox.Event.trigger("resize_" + self.ids[1], self.options.elements[1].width());
}
function dragStart(e) {
self.startPos = e[self.clientXY];
self.startSize = self.options.size;
Ox.print("startSize", self.startSize)
$window.mousemove(drag);
$window.mouseup(dragStop);
}
function dragStop() {
$window.unbind("mousemove");
$window.unbind("mouseup");
}
function toggle() {
Ox.print("toggle");
}
return that;
};
/*
----------------------------------------------------------------------------
Ox.Tabbar
@ -4447,6 +4534,7 @@ requires
*/
Ox.SplitPanel = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
@ -4458,48 +4546,72 @@ requires
length = self.options.elements.length,
dimensions = oxui.getDimensions(self.options.orientation),
edges = oxui.getEdges(self.options.orientation);
Ox.print(self.options);
that.$elements = [];
$.each(self.options.elements, function(i, v) {
var element = v.element
.css({
position: "absolute" // fixme: this can go into a class
})
if (Ox.isUndefined(v.collapsible)) {
v.collapsible = false;
}
if (Ox.isUndefined(v.resizable)) {
v.resizable = false;
}
that.$elements[i] = v.element
.css(edges[2], 0)
.css(edges[3], 0);
if (v.size != undefined) {
element.css(dimensions[0], v.size + "px");
}
!Ox.isUndefined(v.size) && that.$elements[i].css(dimensions[0], v.size + "px");
if (i == 0) {
element.css(edges[0], 0);
if (v.size == undefined) {
element.css(
edges[1],
(self.options.elements[1].size + (length == 3 ? self.options.elements[2].size : 0)) + "px"
that.$elements[i].css(edges[0], 0);
!Ox.isUndefined(v.size) && that.$elements[i].css(
edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + "px"
);
}
} else if (i == 1) {
if (self.options.elements[0].size != undefined) {
element.css(edges[0], self.options.elements[0].size + "px");
}
if (self.options.elements[0].size == undefined || v.size == undefined) {
element.css(
edges[1],
(length == 3 ? self.options.elements[2].size : 0) + "px"
!Ox.isUndefined(self.options.elements[0].size) && that.$elements[i].css(
edges[0], getSize(self.options.elements[0]) + "px"
);
(!Ox.isUndefined(self.options.elements[0].size) || !Ox.isUndefined(v.size)) && that.$elements[i].css(
edges[1], (length == 3 ? getSize(self.options.elements[2]) : 0) + "px"
);
}
} else {
element.css(edges[1], 0);
if (v.size == undefined) {
element.css(
edges[0],
(self.options.elements[0].size + self.options.elements[1].size) + "px"
that.$elements[i].css(edges[1], 0);
!Ox.isUndefined(v.size) && that.$elements[i].css(
edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + "px"
);
}
}
element.appendTo(that);
//that.append(element)
});
$.each(self.options.elements, function(i, v) {
//that.append(element)
that.$elements[i].appendTo(that);
if (v.collapsible || v.resizable) {
Ox.print("v.size", v.size)
$resizebar = new Ox.Resizebar({
collapsible: v.collapsible,
edge: i == 0 ? "left" : "right",
elements: i < 2 ?
[that.$elements[0], that.$elements[1]] :
[that.$elements[1], that.$elements[2]],
orientation: self.options.orientation == "horizontal" ? "vertical" : "horizontal",
parent: that,
resizable: v.resizable,
resize: v.resize,
size: v.size
})
.css(edges[i == 0 ? 0 : 1], v.size);
if (i == 0) {
$resizebar.appendTo(that);
} else {
$resizebar.prependTo(that);
}
}
});
function getSize(element) {
return element.size + !Ox.isUndefined(element.resizable);
}
return that;
};
Ox.TabPanel = function(options, self) {