resizebars
This commit is contained in:
parent
d6cc6fbf2f
commit
cbbcc8f707
4 changed files with 187 additions and 36 deletions
|
@ -55,6 +55,38 @@ Bars
|
||||||
white-space: nowrap;
|
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 {
|
.OxTabbar > .OxButtonGroup {
|
||||||
margin: 4px 0 0 4px;
|
margin: 4px 0 0 4px;
|
||||||
}
|
}
|
||||||
|
@ -594,6 +626,7 @@ Lists
|
||||||
.OxTextList .OxPage {
|
.OxTextList .OxPage {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Menus
|
Menus
|
||||||
|
@ -661,7 +694,6 @@ Menus
|
||||||
padding: 2px 8px 0 0;
|
padding: 2px 8px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.OxMenu {
|
.OxMenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -847,7 +879,6 @@ Panels
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.OxPanel {
|
.OxPanel {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
@ -860,6 +891,9 @@ Panels
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
overflow: hidden;
|
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)));
|
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
|
Dialog
|
||||||
|
|
|
@ -1307,6 +1307,7 @@ Ox.limit = function(num, min, max) {
|
||||||
>>> Ox.limit(2, 1)
|
>>> Ox.limit(2, 1)
|
||||||
1
|
1
|
||||||
*/
|
*/
|
||||||
|
Ox.print(num, min, max)
|
||||||
var len = arguments.length;
|
var len = arguments.length;
|
||||||
max = arguments[len - 1];
|
max = arguments[len - 1];
|
||||||
min = len == 3 ? min : 0;
|
min = len == 3 ? min : 0;
|
||||||
|
|
|
@ -920,10 +920,10 @@ requires
|
||||||
args, ret;
|
args, ret;
|
||||||
if (length == 0) {
|
if (length == 0) {
|
||||||
// options()
|
// 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") {
|
} else if (length == 1 && typeof arguments[0] == "string") {
|
||||||
// options(str)
|
// options(str)
|
||||||
ret = self.options[arguments[0]]
|
ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
|
||||||
} else {
|
} else {
|
||||||
// options (str, val) or options({str: val, ...})
|
// options (str, val) or options({str: val, ...})
|
||||||
// translate (str, val) to ({str: val})
|
// translate (str, val) to ({str: val})
|
||||||
|
@ -1209,6 +1209,93 @@ requires
|
||||||
return that;
|
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
|
Ox.Tabbar
|
||||||
|
@ -4447,6 +4534,7 @@ requires
|
||||||
*/
|
*/
|
||||||
|
|
||||||
Ox.SplitPanel = function(options, self) {
|
Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
that = new Ox.Element({}, self)
|
that = new Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
@ -4458,48 +4546,72 @@ requires
|
||||||
length = self.options.elements.length,
|
length = self.options.elements.length,
|
||||||
dimensions = oxui.getDimensions(self.options.orientation),
|
dimensions = oxui.getDimensions(self.options.orientation),
|
||||||
edges = oxui.getEdges(self.options.orientation);
|
edges = oxui.getEdges(self.options.orientation);
|
||||||
Ox.print(self.options);
|
|
||||||
|
that.$elements = [];
|
||||||
|
|
||||||
$.each(self.options.elements, function(i, v) {
|
$.each(self.options.elements, function(i, v) {
|
||||||
var element = v.element
|
if (Ox.isUndefined(v.collapsible)) {
|
||||||
.css({
|
v.collapsible = false;
|
||||||
position: "absolute" // fixme: this can go into a class
|
}
|
||||||
})
|
if (Ox.isUndefined(v.resizable)) {
|
||||||
|
v.resizable = false;
|
||||||
|
}
|
||||||
|
that.$elements[i] = v.element
|
||||||
.css(edges[2], 0)
|
.css(edges[2], 0)
|
||||||
.css(edges[3], 0);
|
.css(edges[3], 0);
|
||||||
if (v.size != undefined) {
|
!Ox.isUndefined(v.size) && that.$elements[i].css(dimensions[0], v.size + "px");
|
||||||
element.css(dimensions[0], v.size + "px");
|
|
||||||
}
|
|
||||||
if (i == 0) {
|
if (i == 0) {
|
||||||
element.css(edges[0], 0);
|
that.$elements[i].css(edges[0], 0);
|
||||||
if (v.size == undefined) {
|
!Ox.isUndefined(v.size) && that.$elements[i].css(
|
||||||
element.css(
|
edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + "px"
|
||||||
edges[1],
|
|
||||||
(self.options.elements[1].size + (length == 3 ? self.options.elements[2].size : 0)) + "px"
|
|
||||||
);
|
);
|
||||||
}
|
|
||||||
} else if (i == 1) {
|
} else if (i == 1) {
|
||||||
if (self.options.elements[0].size != undefined) {
|
!Ox.isUndefined(self.options.elements[0].size) && that.$elements[i].css(
|
||||||
element.css(edges[0], self.options.elements[0].size + "px");
|
edges[0], getSize(self.options.elements[0]) + "px"
|
||||||
}
|
);
|
||||||
if (self.options.elements[0].size == undefined || v.size == undefined) {
|
(!Ox.isUndefined(self.options.elements[0].size) || !Ox.isUndefined(v.size)) && that.$elements[i].css(
|
||||||
element.css(
|
edges[1], (length == 3 ? getSize(self.options.elements[2]) : 0) + "px"
|
||||||
edges[1],
|
|
||||||
(length == 3 ? self.options.elements[2].size : 0) + "px"
|
|
||||||
);
|
);
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
element.css(edges[1], 0);
|
that.$elements[i].css(edges[1], 0);
|
||||||
if (v.size == undefined) {
|
!Ox.isUndefined(v.size) && that.$elements[i].css(
|
||||||
element.css(
|
edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + "px"
|
||||||
edges[0],
|
|
||||||
(self.options.elements[0].size + self.options.elements[1].size) + "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;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Ox.TabPanel = function(options, self) {
|
Ox.TabPanel = function(options, self) {
|
||||||
|
|
Loading…
Reference in a new issue