kopia lustrzana https://github.com/c9/core
995 wiersze
38 KiB
JavaScript
995 wiersze
38 KiB
JavaScript
define(function(require, module, exports) {
|
|
return function(apf) {
|
|
var $setTimeout = setTimeout;
|
|
var $setInterval = setInterval;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* A container that stacks its children vertically.
|
|
*
|
|
* #### Example
|
|
*
|
|
* ```xml, demo
|
|
* <a:application xmlns:a="http://ajax.org/2005/aml">
|
|
* <!-- startcontent -->
|
|
* <a:vbox width="100">
|
|
* <a:button height="28" edge="5">Button 1</a:button>
|
|
* <a:button height="28" edge="5">Button 2</a:button>
|
|
* <a:button height="28" edge="5">Button 3</a:button>
|
|
* </a:vbox>
|
|
* <!-- endcontent -->
|
|
* </a:application>
|
|
* ```
|
|
*
|
|
* @class apf.vbox
|
|
* @layout
|
|
* @define vbox
|
|
*
|
|
*
|
|
* @see element.hbox
|
|
*
|
|
* @author Ruben Daniels (ruben AT ajax DOT org)
|
|
* @version %I%, %G%
|
|
* @since 0.9
|
|
* @layout
|
|
*/
|
|
/**
|
|
* A container that stacks its children horizontally.
|
|
*
|
|
* #### Example
|
|
*
|
|
* ```xml, demo
|
|
* <a:application xmlns:a="http://ajax.org/2005/aml">
|
|
* <!-- startcontent -->
|
|
* <a:hbox height="29" width="300" lean="right" margin="5 0 0 0">
|
|
* <a:button width="100" edge="5">Button 1</a:button>
|
|
* <a:button width="100">Button 2</a:button>
|
|
* <a:button width="100">Button 3</a:button>
|
|
* </a:hbox>
|
|
* <!-- endcontent -->
|
|
* </a:application>
|
|
* ```
|
|
*
|
|
*
|
|
* #### Remarks
|
|
*
|
|
* Firefox has some issues:
|
|
*
|
|
* 1. Sometimes it's necessary to put a fixed width to have it calculate the right
|
|
* height value.
|
|
* 2. Using flex="1" on non fixed height/width tree's will give unexpected results.
|
|
*
|
|
*
|
|
*
|
|
* @class apf.hbox
|
|
* @inherits apf.GuiElement
|
|
* @define hbox
|
|
* @layout
|
|
*
|
|
* @see element.vbox
|
|
* @author Ruben Daniels (ruben AT ajax DOT org)
|
|
* @version %I%, %G%
|
|
* @since 0.9
|
|
*/
|
|
apf.hbox = function(struct, tagName) {
|
|
this.$init(tagName || "hbox", apf.NODE_VISIBLE, struct);
|
|
};
|
|
apf.vbox = function(struct, tagName) {
|
|
this.$init(tagName || "vbox", apf.NODE_VISIBLE, struct);
|
|
};
|
|
|
|
(function(){
|
|
this.minwidth = 0;
|
|
this.minheight = 0;
|
|
|
|
// *** Properties and Attributes *** //
|
|
|
|
this.$focussable = false;
|
|
this.$useLateDom = true;
|
|
this.$box = true;
|
|
this.$layout = true;
|
|
|
|
var input = {"INPUT":1, "SELECT":1, "TEXTAREA":1};
|
|
|
|
/**
|
|
* @attribute {String} [padding=2] Sets or gets the space between each element.
|
|
*/
|
|
/**
|
|
* @attribute {Boolean} reverse Sets or gets whether the sequence of the elements is in reverse order.
|
|
*/
|
|
/**
|
|
* @attribute {String} [edge="5,5,5,5"] Sets or gets the space between the container and the elements, space seperated in pixels for each side. Similar to CSS in the sequence (_.i.e._. `top right bottom left`).
|
|
*
|
|
* #### Example
|
|
*
|
|
* ```xml
|
|
* <a:vbox edge="10 10 40 10" />
|
|
* ```
|
|
*/
|
|
// @todo Doc
|
|
/**
|
|
* @attribute {String} pack
|
|
*
|
|
* Possible values include:
|
|
*
|
|
* - `"start"`:
|
|
* - `"center"`:
|
|
* - `"end"`:
|
|
*/
|
|
/**
|
|
* @attribute {Boolean} align
|
|
*
|
|
* Possible values include:
|
|
*
|
|
* - `"start"`:
|
|
* - `"center"`:
|
|
* - `"end"`:
|
|
* - `"stretch"`:
|
|
*/
|
|
this.$booleanProperties["splitters"] = true;
|
|
this.$supportedProperties.push("padding", "reverse", "edge", "pack", "align", "splitters");
|
|
|
|
this.$propHandlers["padding"] = function(value) {
|
|
this.padding = parseInt(value);
|
|
|
|
var node, nodes = this.childNodes, elms = [];
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
if ((node = nodes[i]).nodeFunc == apf.NODE_VISIBLE
|
|
&& node.$ext && node.visible !== false)
|
|
elms.push(node);
|
|
}
|
|
|
|
if (!elms.length)
|
|
return;
|
|
|
|
for (var last, b, el, i = elms.length - 2; i >= 0; i--) {
|
|
b = (el = elms[i]).margin && apf.getBox(el.margin) || [0,0,0,0];
|
|
|
|
if ((!last || !last.$splitter) && !el.$splitter) {
|
|
b[this.$vbox ? 2 : 1] += this.padding;
|
|
|
|
if (!apf.hasFlexibleBox && i != 0 && this.align == "stretch" && this.$vbox)
|
|
b[0] += this.padding;
|
|
}
|
|
|
|
el.$ext.style.margin = b.join("px ") + "px";
|
|
last = el;
|
|
}
|
|
b = (el = elms[elms.length - 1]).margin && apf.getBox(el.margin) || [0,0,0,0];
|
|
el.$ext.style.margin = b.join("px ") + "px";
|
|
|
|
if (!apf.hasFlexibleBox)
|
|
this.$resize();
|
|
}
|
|
|
|
this.$propHandlers["reverse"] = function(value) {
|
|
if (apf.hasFlexibleBox)
|
|
this.$int.style[apf.CSSPREFIX + "BoxDirection"] = value ? "reverse" : "normal";
|
|
else {
|
|
//@todo
|
|
}
|
|
};
|
|
|
|
this.$propHandlers["edge"] = function(value) {
|
|
var el = !apf.hasFlexibleBox && this.$vbox ? this.$ext : this.$int;
|
|
el.style.padding = (this.$edge = apf.getBox(value)).join("px ") + "px";
|
|
|
|
if (!apf.hasFlexibleBox)
|
|
this.$resize();
|
|
};
|
|
|
|
this.$propHandlers["pack"] = function(value) {
|
|
if (apf.hasFlex) {
|
|
if (value == "start" || value == "end")
|
|
value = "flex-" + value;
|
|
this.$int.style.justifyContent = value || "flex-start";
|
|
} else if (apf.hasFlexibleBox) {
|
|
this.$int.style[apf.CSSPREFIX + "BoxPack"] = value || "start";
|
|
} else if (this.$amlLoaded) {
|
|
if (this.$vbox) {
|
|
this.$int.style.verticalAlign = value == "center" ? "middle" : (value == "end" ? "bottom" : "top");
|
|
}
|
|
else {
|
|
this.$int.style.textAlign = "";
|
|
|
|
var nodes = this.childNodes;
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
var node = nodes[i];
|
|
if (node.nodeFunc != apf.NODE_VISIBLE || !node.$amlLoaded) //|| node.visible === false
|
|
continue;
|
|
|
|
node.$ext.style.textAlign = apf.getStyle(node.$ext, "textAlign") || "left";
|
|
}
|
|
|
|
this.$int.style.textAlign = value == "center" ? "center" : (value == "end" ? "right" : "left");
|
|
}
|
|
}
|
|
};
|
|
|
|
//@todo change overflow when height/width changes depending on $vbox
|
|
|
|
this.$propHandlers["align"] = function(value) {
|
|
if (apf.hasFlex) {
|
|
if (value == "start" || value == "end")
|
|
value = "flex-" + value;
|
|
this.$int.style.alignItems = value || "stretch"; // flex-start
|
|
}
|
|
else if (apf.hasFlexibleBox) {
|
|
this.$int.style[apf.CSSPREFIX + "BoxAlign"] = value || "stretch";
|
|
|
|
//@todo this should probably be reinstated
|
|
var stretch = !value || value == "stretch";
|
|
var nodes = this.childNodes;
|
|
var size = this.$vbox ? "width" : "height";
|
|
|
|
var isInFixed = false, loopNode = this;
|
|
while (!isInFixed && loopNode) {
|
|
isInFixed = loopNode[size] || loopNode.anchors || (loopNode.$vbox ? loopNode.top && loopNode.bottom : loopNode.left && loopNode.right);
|
|
if (!loopNode.flex)
|
|
break;
|
|
loopNode = loopNode.parentNode || loopNode.$parentNode;
|
|
}
|
|
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
if (!(node = nodes[i]).$ext || node.$ext.nodeType != 1)
|
|
continue;
|
|
|
|
//(this[size] || this.anchors || (this.$vbox ? this.top && this.bottom : this.left && this.right)
|
|
if (stretch && !node[size]) //(node.$altExt ||
|
|
node.$ext.style[size] = (input[node.$ext.tagName]
|
|
? "100%" : "auto");
|
|
else if (node[size])
|
|
handlers["true"][size].call(node, node[size]);
|
|
}
|
|
}
|
|
else if (this.$amlLoaded) {
|
|
var stretch = !value || value == "stretch";
|
|
|
|
if (!this.$vbox) {
|
|
var nodes = this.childNodes;
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
if ((node = nodes[i]).nodeFunc != apf.NODE_VISIBLE || !node.$amlLoaded) //|| node.visible === false
|
|
continue;
|
|
|
|
node.$ext.style.verticalAlign = value == "center" ? "middle" : (value == "end" ? "bottom" : "top");
|
|
}
|
|
}
|
|
else {
|
|
var el = !apf.hasFlexibleBox && this.$vbox ? this.$ext : this.$int;
|
|
el.style.textAlign = "";
|
|
|
|
var node, nodes = this.childNodes;
|
|
for (var i = 0, l = nodes.length; i < l; i++) {
|
|
if ((node = nodes[i]).nodeFunc != apf.NODE_VISIBLE || !node.$amlLoaded) //|| node.visible === false
|
|
continue;
|
|
|
|
if (node.visible !== false) {
|
|
node.$ext.style.display = value == "stretch" ? "block" : "inline-block";
|
|
node.$br.style.display = value == "stretch" ? "none" : "";
|
|
}
|
|
node.$ext.style.textAlign = apf.getStyle(node.$ext, "textAlign") || "left";
|
|
}
|
|
|
|
el.style.textAlign = value == "center" ? "center" : (value == "end" ? "right" : "left");
|
|
}
|
|
}
|
|
};
|
|
|
|
function visibleHandler(e) {
|
|
|
|
if (this.parentNode.splitters && !this.$splitter) {
|
|
if (!e.value) {
|
|
if (this.nextSibling && this.nextSibling.$splitter)
|
|
this.nextSibling.removeNode();
|
|
else if (this.previousSibling && this.previousSibling.$splitter)
|
|
this.previousSibling.removeNode();
|
|
}
|
|
else {
|
|
var isLast = isLastVisibleChild(this);
|
|
if (!isLast) {
|
|
if (!this.nextSibling.$splitter && !this.nextSibling.nosplitter
|
|
&& !isFirstVisibleChild(this) && !this.nosplitter) {
|
|
this.parentNode.insertBefore(
|
|
this.ownerDocument.createElementNS(apf.ns.aml, "splitter"),
|
|
this.nextSibling);
|
|
}
|
|
}
|
|
else if (this.previousSibling && !this.previousSibling.$splitter
|
|
&& !this.previousSibling.nosplitter) {
|
|
this.parentNode.insertBefore(
|
|
this.ownerDocument.createElementNS(apf.ns.aml, "splitter"),
|
|
this);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//@todo this can be more optimized by calcing if it WAS the last vis child.
|
|
if (this.parentNode.$propHandlers["padding"]) {// && isLastVisibleChild(this)) {
|
|
this.parentNode.$propHandlers["padding"]
|
|
.call(this.parentNode, this.parentNode.padding);
|
|
}
|
|
|
|
apf.layout.forceResize(this.parentNode.$int);
|
|
|
|
if (apf.hasFlexibleBox) {
|
|
if (this.$altExt)
|
|
this.$altExt.style.display = e.value
|
|
? apf.CSS_DISPLAY_FLEX
|
|
: "none";
|
|
return;
|
|
}
|
|
|
|
if (e.value) {
|
|
this.$ext.style.display = this.parentNode.$vbox
|
|
&& this.parentNode.align == "stretch" ? "block" : "inline-block";
|
|
if (this.$br)
|
|
this.$br.style.display = this.parentNode.align == "stretch" ? "none" : "";
|
|
}
|
|
else {
|
|
if (this.$br)
|
|
this.$br.style.display = "none";
|
|
}
|
|
|
|
this.parentNode.$resize();
|
|
}
|
|
|
|
function resizeHandler(){
|
|
if (!this.flex) {
|
|
if (this.$isRszHandling || this.$lastSizeChild &&
|
|
this.$lastSizeChild[0] == this.$ext.offsetWidth &&
|
|
this.$lastSizeChild[1] == this.$ext.offsetHeight)
|
|
return;
|
|
|
|
/*if (this.$skipResizeOnce)
|
|
delete this.$skipResizeOnce;
|
|
else*/
|
|
this.parentNode.$resize(true);
|
|
|
|
this.$lastSizeChild = [this.$ext.offsetWidth, this.$ext.offsetHeight];
|
|
}
|
|
}
|
|
|
|
var handlers = {
|
|
//Handlers for flexible box layout
|
|
"true" : {
|
|
"optimize" : function(value) {
|
|
this.optimize = apf.isTrue(value);
|
|
},
|
|
|
|
"width" : function(value) {
|
|
//@todo this should check the largest and only allow that one
|
|
//if (this.parentNode.$vbox && this.parentNode.align == "stretch")
|
|
//return;
|
|
|
|
(this.$altExt || this.$ext).style.width = !apf.isNot(value)
|
|
? (parseFloat(value) == value
|
|
? value + "px"
|
|
: value)
|
|
: "";
|
|
},
|
|
|
|
"height" : function(value) {
|
|
//@todo this should check the largest and only allow that one
|
|
//if (!this.parentNode.$vbox && this.parentNode.align == "stretch")
|
|
//return;
|
|
|
|
(this.$altExt || this.$ext).style.height = !apf.isNot(value)
|
|
? (parseFloat(value) == value
|
|
? value + "px"
|
|
: value)
|
|
: (apf.isGecko && this.flex && this.parentNode.$vbox ? "auto" : "");
|
|
},
|
|
|
|
"margin" : function(value) {
|
|
var b = apf.getBox(value);
|
|
if (!isLastVisibleChild(this))
|
|
b[this.parentNode.$vbox ? 2 : 1] += this.parentNode.padding;
|
|
this.$ext.style.margin = b.join("px ") + "px";
|
|
},
|
|
|
|
"flex" : function(value) {
|
|
this.flex = value = parseInt(value);
|
|
if (value) {
|
|
if (!this.optimize && !this.$altExt) {
|
|
this.$altExt = this.$ext.ownerDocument.createElement("div");
|
|
this.parentNode.$int.replaceChild(this.$altExt, this.$ext);
|
|
this.$altExt.appendChild(this.$ext);
|
|
this.$altExt.style.boxSizing = "border-box";
|
|
this.$altExt.style.display = apf.CSS_DISPLAY_FLEX;
|
|
this.$altExt.style[apf.CSSPREFIX + "BoxOrient"] = "vertical";
|
|
this.$ext.style[apf.CSS_FLEX_PROP] = 1;
|
|
var size = this.parentNode.$vbox ? "height" : "width";
|
|
//var osize = this.parentNode.$vbox ? "width" : "height";
|
|
|
|
if (!this.preventforcezero)
|
|
this.$altExt.style[size] = "0px";
|
|
}
|
|
|
|
(this.$altExt || this.$ext).style[apf.CSS_FLEX_PROP] = parseInt(value) || 1;
|
|
}
|
|
else if (this.$altExt) {
|
|
this.parentNode.$int.replaceChild(this.$ext, this.$altExt);
|
|
this.$ext.style[apf.CSS_FLEX_PROP] = "";
|
|
delete this.$altExt;
|
|
}
|
|
}
|
|
},
|
|
|
|
//Handlers for older browsers
|
|
"false" : {
|
|
"width" : function(value) {
|
|
//@todo this should check the largest and only allow that one
|
|
//if (this.parentNode.$vbox && this.parentNode.align == "stretch")
|
|
//return;
|
|
|
|
this.$ext.style.width = value
|
|
? (parseFloat(value) == value
|
|
? Math.max(0, value - apf.getWidthDiff(this.$ext)) + "px"
|
|
: value)
|
|
: "";
|
|
},
|
|
|
|
"height" : function(value) {
|
|
//@todo this should check the largest and only allow that one
|
|
//if (this.parentNode.localName == "hbox" && this.parentNode.align == "stretch")
|
|
//return;
|
|
|
|
this.$ext.style.height = value
|
|
? (parseFloat(value) == value
|
|
? Math.max(0, value - apf.getHeightDiff(this.$ext)) + "px"
|
|
: value)
|
|
: "";
|
|
},
|
|
|
|
"margin" : function(value) {
|
|
var b = apf.getBox(value);
|
|
if (this.padding) {
|
|
if (!isLastVisibleChild(this))
|
|
b[this.parentNode.$vbox ? 2 : 1] += this.padding;
|
|
if (this != this.parentNode.firstChild && this.parentNode.align == "stretch" && this.parentNode.$vbox) //@todo
|
|
b[0] += this.padding;
|
|
}
|
|
this.$ext.style.margin = b.join("px ") + "px";
|
|
},
|
|
|
|
"flex" : function(value) {
|
|
this.flex = parseInt(value);
|
|
if (this.$amlLoaded)
|
|
this.parentNode.$resize(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
function isFirstVisibleChild(amlNode) {
|
|
var firstChild = amlNode.parentNode.firstChild;
|
|
while (firstChild && (firstChild.nodeFunc != apf.NODE_VISIBLE
|
|
|| firstChild.visible === false
|
|
|| firstChild.visible == 2 && apf.isFalse(firstChild.getAttribute("visible")))) {
|
|
firstChild = firstChild.nextSibling;
|
|
}
|
|
|
|
return firstChild && firstChild == amlNode;
|
|
}
|
|
|
|
function isLastVisibleChild(amlNode) {
|
|
var lastChild = amlNode.parentNode.lastChild;
|
|
while (lastChild && (lastChild.nodeFunc != apf.NODE_VISIBLE
|
|
|| lastChild.visible === false
|
|
|| lastChild.visible == 2 && apf.isFalse(lastChild.getAttribute("visible")))) {
|
|
lastChild = lastChild.previousSibling;
|
|
}
|
|
|
|
return lastChild && lastChild == amlNode;
|
|
}
|
|
|
|
//@todo move this to enableTable, disableTable
|
|
this.register = function(amlNode, insert) {
|
|
if (amlNode.$altExt) //@todo hack, need to re-arch layouting
|
|
return;
|
|
|
|
amlNode.$propHandlers["left"] =
|
|
amlNode.$propHandlers["top"] =
|
|
amlNode.$propHandlers["right"] =
|
|
amlNode.$propHandlers["bottom"] = apf.K;
|
|
|
|
var propHandlers = handlers[apf.hasFlexibleBox];
|
|
for (var prop in propHandlers) {
|
|
amlNode.$propHandlers[prop] = propHandlers[prop];
|
|
}
|
|
|
|
if (amlNode.nodeFunc == apf.NODE_VISIBLE) {
|
|
if (apf.hasFlexibleBox) {
|
|
//input elements are not handled correctly by firefox and webkit
|
|
if (amlNode.$ext.tagName == "INPUT" || input[amlNode.$ext.tagName]) {
|
|
var doc = amlNode.$ext.ownerDocument;
|
|
amlNode.$altExt = doc.createElement("div");
|
|
amlNode.parentNode.$int.replaceChild(amlNode.$altExt, amlNode.$ext);
|
|
amlNode.$altExt.style.boxSizing = "border-box";
|
|
amlNode.$altExt.appendChild(amlNode.$ext);
|
|
|
|
var d = apf.getDiff(amlNode.$ext);
|
|
//amlNode.$altExt.style.padding = "0 " + d[0] + "px " + d[1] + "px 0";
|
|
amlNode.$altExt.style.height = "100%";
|
|
amlNode.$altExt.style.width = "0";
|
|
amlNode.$altExt.style.lineHeight = 0;
|
|
amlNode.$altExt.style.margin = "-1px 0 0 0";
|
|
amlNode.$ext.style.width = "100%";
|
|
amlNode.$ext.style.height = "100%";
|
|
amlNode.$ext.style.top = "1px";
|
|
amlNode.$ext.style.position = "relative";
|
|
}
|
|
else {
|
|
if (apf.getStyle(amlNode.$ext, "display") == "inline")
|
|
amlNode.$ext.style.display = "block"; //@todo undo
|
|
//This is nice for positioning elements in the context of an hbox/vbox
|
|
//if (apf.getStyle(amlNode.$ext, "position") == "absolute")
|
|
//amlNode.$ext.style.position = "relative"; //@todo undo
|
|
}
|
|
|
|
amlNode.$ext.style.boxSizing = "border-box";
|
|
}
|
|
else {
|
|
if (this.$vbox) {
|
|
amlNode.$br = this.$int.insertBefore(amlNode.$ext.ownerDocument.createElement("br"), amlNode.$ext.nextSibling);
|
|
if (amlNode.visible === false)
|
|
amlNode.$br.style.display = "none";
|
|
}
|
|
else {
|
|
if (amlNode.visible !== false) {
|
|
amlNode.$ext.style.display = "inline-block";
|
|
}
|
|
this.$int.style.whiteSpace = "";
|
|
amlNode.$ext.style.whiteSpace = apf.getStyle(amlNode.$ext, "whiteSpace") || "normal";
|
|
this.$int.style.whiteSpace = "nowrap";
|
|
}
|
|
|
|
this.$int.style.fontSize = "0";
|
|
if (!amlNode.$box) {
|
|
var fontSize = apf.getStyle(amlNode.$ext, "fontSize");
|
|
if (fontSize == "0px") {
|
|
amlNode.$ext.style.fontSize = "";
|
|
var pNode = this.$int.parentNode;
|
|
while (apf.getStyle(pNode, "fontSize") == "0px") {
|
|
pNode = pNode.parentNode;
|
|
}
|
|
fontSize = apf.getStyle(pNode, "fontSize");
|
|
}
|
|
amlNode.$ext.style.fontSize = fontSize;//apf.getStyle(amlNode.$ext, "fontSize") || "normal";
|
|
}
|
|
|
|
amlNode.addEventListener("resize", resizeHandler);
|
|
}
|
|
|
|
amlNode.addEventListener("prop.visible", visibleHandler);
|
|
|
|
this.$noResize = true;
|
|
|
|
if (amlNode.height)
|
|
propHandlers.height.call(amlNode, amlNode.height);
|
|
if (amlNode.width)
|
|
propHandlers.width.call(amlNode, amlNode.width);
|
|
if (amlNode.margin)
|
|
propHandlers.margin.call(amlNode, amlNode.margin);
|
|
if (amlNode.flex)
|
|
propHandlers.flex.call(amlNode, amlNode.flex);
|
|
|
|
//Ie somehow sets the visible flags in between registration
|
|
var isLast = isLastVisibleChild(amlNode);
|
|
if (isLast || insert) {
|
|
this.$propHandlers["padding"].call(this, this.padding);
|
|
this.$propHandlers["align"].call(this, this.align);
|
|
|
|
if (!apf.hasFlexibleBox)
|
|
this.$propHandlers["pack"].call(this, this.pack);
|
|
|
|
if (amlNode.visible !== false) //insert && - removed because for new nodes that are being attached to the tree insert is not set
|
|
visibleHandler.call(amlNode, {value: true});
|
|
|
|
//@todo this needs more work
|
|
if (insert && amlNode.previousSibling) {
|
|
var prev = amlNode.previousSibling;
|
|
while (prev && (prev.nodeType != 1 || prev.localName == "splitter"))
|
|
prev = prev.previousSibling;
|
|
if (prev)
|
|
visibleHandler.call(prev, {value: true});
|
|
}
|
|
}
|
|
|
|
else if (this.splitters && !amlNode.$splitter && amlNode.visible !== false && !amlNode.nosplitter) {
|
|
if (amlNode.$ext.nextSibling != (amlNode.nextSibling
|
|
&& (amlNode.nextSibling.$altExt || amlNode.nextSibling.$ext))) {
|
|
var _self = this;
|
|
setTimeout(function(){
|
|
_self.insertBefore(
|
|
_self.ownerDocument.createElementNS(apf.ns.aml, "splitter"),
|
|
amlNode.nextSibling);
|
|
});
|
|
}
|
|
else {
|
|
this.insertBefore(
|
|
this.ownerDocument.createElementNS(apf.ns.aml, "splitter"),
|
|
amlNode.nextSibling);
|
|
}
|
|
}
|
|
|
|
|
|
delete this.$noResize;
|
|
|
|
if (!apf.hasFlexibleBox && isLast)
|
|
this.$resize();
|
|
}
|
|
}
|
|
|
|
this.unregister = function(amlNode) {
|
|
if (!amlNode.$propHandlers)
|
|
return;
|
|
|
|
amlNode.$propHandlers["left"] =
|
|
amlNode.$propHandlers["top"] =
|
|
amlNode.$propHandlers["right"] =
|
|
amlNode.$propHandlers["bottom"] = null;
|
|
|
|
var propHandlers = handlers[apf.hasFlexibleBox];
|
|
for (var prop in propHandlers) {
|
|
delete amlNode.$propHandlers[prop];
|
|
}
|
|
|
|
//Clear css properties and set layout
|
|
if (amlNode.nodeFunc == apf.NODE_VISIBLE) {
|
|
if (amlNode.flex) {
|
|
var flex = amlNode.flex;
|
|
propHandlers.flex.call(amlNode, 0);
|
|
amlNode.flex = flex;
|
|
}
|
|
|
|
if (apf.hasFlexibleBox) {
|
|
amlNode.$ext.style.boxSizing = "";
|
|
}
|
|
else {
|
|
amlNode.$ext.style.verticalAlign = "";
|
|
amlNode.$ext.style.textAlign = "";
|
|
amlNode.$ext.style.whiteSpace = "";
|
|
|
|
if (amlNode.$br) {
|
|
amlNode.$br.parentNode.removeChild(amlNode.$br);
|
|
delete amlNode.$br;
|
|
//amlNode.$ext.style.fontSize = "";
|
|
}
|
|
|
|
amlNode.removeEventListener("resize", resizeHandler);
|
|
}
|
|
|
|
amlNode.removeEventListener("prop.visible", visibleHandler);
|
|
|
|
amlNode.$ext.style.display = amlNode.visible ? "block" : "none";
|
|
|
|
if (amlNode.margin)
|
|
amlNode.$ext.style.margin = "";
|
|
|
|
if (amlNode.width)
|
|
amlNode.$ext.style.width = "";
|
|
|
|
|
|
if (this.splitters && !amlNode.$splitter) {
|
|
if (amlNode.nextSibling && amlNode.nextSibling.$splitter)
|
|
amlNode.nextSibling.removeNode();
|
|
if (isLastVisibleChild(amlNode) && amlNode.previousSibling
|
|
&& amlNode.previousSibling.$splitter)
|
|
amlNode.previousSibling.removeNode();
|
|
}
|
|
|
|
}
|
|
}
|
|
/*
|
|
this.addEventListener("DOMNodeInsertedIntoDocument", function(e) {
|
|
this.register(this.parentNode);
|
|
});
|
|
*/
|
|
|
|
// *** DOM Hooks *** //
|
|
|
|
this.addEventListener("DOMNodeRemoved", function(e) {
|
|
if (e.$doOnlyAdmin || e.currentTarget == this)
|
|
return;
|
|
|
|
if (e.relatedNode == this) {
|
|
this.unregister(e.currentTarget);
|
|
//e.currentTarget.$setLayout();
|
|
}
|
|
});
|
|
|
|
this.addEventListener("DOMNodeInserted", function(e) {
|
|
if (e.currentTarget == this) {
|
|
if (this.visible)
|
|
this.$ext.style.display = apf.CSS_DISPLAY_FLEX; //Webkit issue
|
|
return;
|
|
}
|
|
|
|
if (e.currentTarget.nodeType != 1
|
|
|| e.currentTarget.nodeFunc != apf.NODE_VISIBLE)
|
|
return;
|
|
|
|
if (e.relatedNode == this && !e.$isMoveWithinParent) {
|
|
e.currentTarget.$setLayout(this.localName, true);
|
|
|
|
if (e.currentTarget.$altExt) {
|
|
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
function myVisibleHandler(e) {
|
|
if (e.value)
|
|
this.$int.style.display = apf.CSS_DISPLAY_FLEX;
|
|
}
|
|
|
|
function myHeightHandler(e) {
|
|
clearInterval(this.$heighttimer);
|
|
if (e.value || this.align != "stretch") {
|
|
delete this.$heighttimer;
|
|
}
|
|
else if (!this.$heighttimer) {
|
|
var _self = this;
|
|
this.$heighttimer = $setInterval(function(){
|
|
if (_self.$amlDestroyed)
|
|
return;
|
|
|
|
var nodes = _self.childNodes;
|
|
for (var $int, i = 0, l = nodes.length; i < l; i++) {
|
|
if (!($int = (node = nodes[i]).$int || node.$container))
|
|
continue;
|
|
|
|
if (Math.min($int.scrollHeight, node["maxheight"] || 10000) > $int.offsetHeight)
|
|
return _self.$resize(true);
|
|
}
|
|
|
|
if (_self.flex)
|
|
clearInterval(this.$heighttimer);
|
|
}, this.flex ? 1 : 500);
|
|
}
|
|
}
|
|
|
|
this.$draw = function(){
|
|
var doc = this.$pHtmlNode.ownerDocument;
|
|
this.$ext = this.$pHtmlNode.appendChild(doc.createElement("div"));
|
|
if (this.getAttribute("style"))
|
|
this.$ext.setAttribute("style", this.getAttribute("style"));
|
|
this.$ext.className = this.localName;
|
|
|
|
this.$vbox = this.localName == "vbox";
|
|
this.$int = !apf.hasFlexibleBox && this.$vbox //@todo reparenting for gecko needs some admin work
|
|
? this.$ext.appendChild(doc.createElement("div"))
|
|
: this.$ext;
|
|
this.$ext.host = this;
|
|
|
|
if (!apf.hasFlexibleBox && this.$vbox) {
|
|
this.$int.style.display = "inline-block";
|
|
this.$int.style.width = "100%";
|
|
}
|
|
|
|
if (apf.hasFlex) {
|
|
this.$display = "-" + apf.CSSPREFIX +"-box";
|
|
|
|
this.$int.style.display = this.$int.style.display || apf.CSS_DISPLAY_FLEX;
|
|
this.$int.style.flexDirection = this.localName == "hbox" ? "" : "column";
|
|
this.$int.style.alignItems = "stretch";
|
|
|
|
this.addEventListener("prop.visible", myVisibleHandler);
|
|
}
|
|
else if (apf.hasFlexibleBox) {
|
|
this.$display = "-" + apf.CSSPREFIX +"-box";
|
|
|
|
this.$int.style.display = apf.CSS_DISPLAY_FLEX;
|
|
this.$int.style[apf.CSSPREFIX + "BoxOrient"] = this.localName == "hbox" ? "horizontal" : "vertical";
|
|
this.$int.style[apf.CSSPREFIX + "BoxAlign"] = "stretch";
|
|
|
|
this.addEventListener("prop.visible", myVisibleHandler);
|
|
}
|
|
else {
|
|
if (!this.$vbox) {
|
|
this.$int.style.whiteSpace = "nowrap";
|
|
this.addEventListener("prop.height", myHeightHandler);
|
|
}
|
|
|
|
var spacer = (!apf.hasFlexibleBox && this.$vbox ? this.$ext : this.$int)
|
|
.appendChild(doc.createElement("strong"));
|
|
spacer.style.height = "100%";
|
|
spacer.style.display = "inline-block";
|
|
//spacer.style.marginLeft = "-4px";
|
|
spacer.style.verticalAlign = "middle";
|
|
|
|
this.addEventListener("resize", this.$resize);
|
|
}
|
|
|
|
if (this.getAttribute("class"))
|
|
apf.setStyleClass(this.$ext, this.getAttribute("class"));
|
|
|
|
this.$originalMin = [this.minwidth || 0, this.minheight || 0];
|
|
};
|
|
|
|
this.$resize = function(force) {
|
|
if (!this.$amlLoaded || this.$noResize)
|
|
return;
|
|
|
|
//Protection for stretch re-resizing
|
|
if (force !== true && this.$lastSize &&
|
|
this.$lastSize[0] == this.$int.offsetWidth &&
|
|
this.$lastSize[1] == this.$int.offsetHeight)
|
|
return;
|
|
|
|
if (!apf.window.vManager.check(this, this.$uniqueId, this.$resize))
|
|
return;
|
|
|
|
this.$noResize = true;
|
|
this.$lastSize = [this.$int.offsetWidth, this.$int.offsetHeight];
|
|
|
|
//this.$ext.style.border = "1px solid " + (["red", "green", "blue", "orange", "pink", "yellow"])[Math.round(Math.random() * 5)];
|
|
|
|
/*if (this.$table.offsetWidth >= this.$ext.offsetWidth)
|
|
this.$ext.style.minWidth = (this.minwidth = Math.max(0, this.$table.offsetWidth
|
|
- apf.getWidthDiff(this.$ext))) + "px";
|
|
else {
|
|
this.$ext.style.minWidth = "";
|
|
this.minwidth = this.$originalMin[0];
|
|
}
|
|
|
|
if (this.$table.offsetHeight >= this.$ext.offsetHeight)
|
|
this.$ext.style.minHeight = (this.minheight = Math.max(0, this.$table.offsetHeight
|
|
- apf.getHeightDiff(this.$ext))) + "px";
|
|
else {
|
|
this.$ext.style.minHeight = "";
|
|
this.minheight = this.$originalMin[1];
|
|
}*/
|
|
|
|
//if (!this.$vbox) alert("here");
|
|
|
|
var total = 0;
|
|
var size = this.$vbox ? "width" : "height";
|
|
var minsize = this.$vbox ? "minWidth" : "minHeight";
|
|
var osize = this.$vbox ? "height" : "width";
|
|
var scroll = this.$vbox ? "scrollWidth" : "scrollHeight";
|
|
var offset = this.$vbox ? "offsetWidth" : "offsetHeight";
|
|
var ooffset = this.$vbox ? "offsetHeight" : "offsetWidth";
|
|
var getDiff = this.$vbox ? "getWidthDiff" : "getHeightDiff";
|
|
var ogetDiff = this.$vbox ? "getHeightDiff" : "getWidthDiff";
|
|
var inner = this.$vbox ? "getHtmlInnerWidth" : "getHtmlInnerHeight";
|
|
var oinner = this.$vbox ? "getHtmlInnerHeight" : "getHtmlInnerWidth";
|
|
var borders = this.$vbox ? "getVerBorders" : "getHorBorders";
|
|
|
|
var nodes = this.childNodes, hNodes = [], fW = 0, max = 0;
|
|
for (var node, i = 0; i < nodes.length; i++) {
|
|
if ((node = nodes[i]).nodeFunc != apf.NODE_VISIBLE || node.visible === false || !node.$amlLoaded)
|
|
continue;
|
|
|
|
hNodes.push(node);
|
|
if (!node[size]) {
|
|
//if (!node.$skipResizeOnce) node.$skipResizeOnce = 1;
|
|
//else node.$skipResizeOnce++;
|
|
//node.$skipResizeOnce = 1
|
|
//node.$ext.style[size] = ""; //@todo this is a sucky way of measuring
|
|
var m = node.margin && apf.getBox(node.margin);
|
|
if (m && this.$vbox) m.unshift();
|
|
var mdiff = (m ? m[0] + m[2] : 0);
|
|
max = Math.max(max, mdiff + Math.min(node.$ext[scroll] + apf[borders](node.$ext), node["max" + size] || 10000));
|
|
}
|
|
|
|
if (parseInt(node.flex))
|
|
total += parseFloat(node.flex);
|
|
else {
|
|
var m = node.margin && apf.getBox(node.margin);
|
|
if (m && !this.$vbox) m.shift();
|
|
fW += node.$ext[ooffset] + (m ? m[0] + m[2] : 0); //this.padding +
|
|
}
|
|
}
|
|
if (!max && this[size]) {
|
|
max = this[size]
|
|
//- (this.$vbox ? this.$edge[0] + this.$edge[2] : this.$edge[1] + this.$edge[3]);
|
|
- apf[ogetDiff](this.$ext);
|
|
}
|
|
|
|
/*
|
|
&& (this[size] || this.flex)
|
|
*/
|
|
if (this.align == "stretch") {
|
|
//var hasSize = this[size] || this.flex;
|
|
var l = hNodes.length;
|
|
var pH = max;//this.$int[offset] - apf[getDiff](this.$int);// - (2 * this.padding);
|
|
for (var i = 0; i < l; i++) {
|
|
node = hNodes[i];
|
|
|
|
if (!node[size] && !this.$vbox || this.$vbox && input[node.$ext.tagName]) {
|
|
var m = node.margin && apf.getBox(node.margin);
|
|
if (m && this.$vbox) m.unshift();
|
|
var mdiff = (m ? m[0] + m[2] : 0);
|
|
|
|
/*shouldClear = !this[size] && !this.flex && node.$ext.offsetHeight == (pH - mdiff);
|
|
if (shouldClear)
|
|
node.$ext.style[size] = "";
|
|
else
|
|
node.$ext.style[size] = Math.max(0, pH - apf[getDiff](node.$ext) - mdiff) + "px";
|
|
node.$setResizeHeight = !shouldClear;*/
|
|
|
|
//!this[size] && !this.flex
|
|
if (max && Math.min(node.$ext[scroll], node["max" + size] || 10000) != max)
|
|
node.$ext.style[size] = Math.max(0, max - apf[getDiff](node.$ext) - mdiff) + "px";
|
|
else
|
|
node.$ext.style[size] = "";
|
|
|
|
/*node.$ext.style[size] = !this[size] && !this.flex && node.$ext.offsetHeight == pH - mdiff
|
|
? ""
|
|
: Math.max(0, pH - apf[getDiff](node.$ext) - mdiff) + "px";*/
|
|
}
|
|
}
|
|
}
|
|
|
|
//Flexing
|
|
if (total > 0) {
|
|
if (this.$vbox)
|
|
this.$int.style.height = "100%";
|
|
this.$int.style.overflow = "hidden";
|
|
|
|
var splitterCount = this.$aml.querySelectorAll("splitter").length * 2;
|
|
|
|
var rW = this.$int[ooffset] - apf[ogetDiff](this.$int) - fW
|
|
- ((hNodes.length - 1 - splitterCount) * this.padding);// - (2 * this.edge);
|
|
var lW = rW, done = 0;
|
|
for (var i = 0, l = hNodes.length; i < l; i++) {
|
|
if ((node = hNodes[i]).flex) {
|
|
var v = (i % 2 == 0 ? Math.floor : Math.ceil)((rW / total) * parseInt(node.flex));
|
|
done += parseInt(node.flex);
|
|
var m = node.margin && apf.getBox(node.margin);
|
|
if (m && !this.$vbox) m.shift();
|
|
node.$ext.style[osize] = Math.max(0, (done == total ? lW : v) - apf[ogetDiff](node.$ext) - (m ? m[0] + m[2] : 0)) + "px";
|
|
lW -= v;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
if (this.$vbox)
|
|
this.$int.style.height = "";
|
|
this.$int.style.overflow = "";
|
|
}
|
|
|
|
this.$noResize = false;
|
|
/*this.$noResize = true;
|
|
var _self = this;
|
|
setTimeout(function(){
|
|
_self.$noResize = false;
|
|
});*/
|
|
}
|
|
|
|
this.$loadAml = function(x) {
|
|
if (this.padding == undefined)
|
|
this.padding = 0;
|
|
//this.$propHandlers.padding.call(this, this.padding = 0);
|
|
if (this.edge == undefined)
|
|
this.$propHandlers.edge.call(this, this.edge = 0);
|
|
if (this.pack == undefined)
|
|
this.$propHandlers.pack.call(this, this.edge = "start");
|
|
if (this.align == undefined)
|
|
this.align = "stretch";
|
|
//this.$propHandlers.align.call(this, this.align = "stretch");
|
|
if (!apf.hasFlexibleBox && !this.$vbox && !this.height && this.align == "stretch")
|
|
myHeightHandler.call(this, {});
|
|
};
|
|
}).call(apf.vbox.prototype = new apf.GuiElement());
|
|
|
|
apf.hbox.prototype = apf.vbox.prototype;
|
|
|
|
apf.aml.setElement("hbox", apf.hbox);
|
|
apf.aml.setElement("vbox", apf.vbox);
|
|
|
|
|
|
};
|
|
}); |