resizebars
This commit is contained in:
rolux
parent
d6cc6fbf2f
commit
cbbcc8f707
4 changed files with 187 additions and 36 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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…
Reference in a new issue