forked from 0x2620/oxjs
resizebars
This commit is contained in:
rolux
parent
d6cc6fbf2f
commit
cbbcc8f707
4 changed files with 187 additions and 36 deletions
|
|
@ -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"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$.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);
|
||||
}
|
||||
}
|
||||
element.appendTo(that);
|
||||
//that.append(element)
|
||||
});
|
||||
|
||||
function getSize(element) {
|
||||
return element.size + !Ox.isUndefined(element.resizable);
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
Ox.TabPanel = function(options, self) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue