stop using the options object for positioning.
This commit is contained in:
Christopher Jeffrey
parent
11c6e7269f
commit
add8aaa664
|
|
@ -263,6 +263,7 @@ The base element.
|
|||
- **left, right, top, bottom** - offsets of the element **relative to its
|
||||
parent**. can be a number, percentage (`0-100%`), or keyword (`center`).
|
||||
`right` and `bottom` do not accept keywords.
|
||||
- **position** - can contain the above options.
|
||||
|
||||
##### Properties:
|
||||
|
||||
|
|
|
|||
113
lib/widget.js
113
lib/widget.js
|
|
@ -1579,20 +1579,27 @@ function Element(options) {
|
|||
|
||||
this.name = options.name;
|
||||
|
||||
if (options.width === 'shrink' || options.height === 'shrink') {
|
||||
if (options.width === 'shrink') delete options.width;
|
||||
if (options.height === 'shrink') delete options.height;
|
||||
options.position = options.position || {
|
||||
left: options.left,
|
||||
right: options.right,
|
||||
top: options.top,
|
||||
bottom: options.bottom,
|
||||
width: options.width,
|
||||
height: options.height
|
||||
};
|
||||
|
||||
if (options.position.width === 'shrink'
|
||||
|| options.position.height === 'shrink') {
|
||||
if (options.position.width === 'shrink') {
|
||||
delete options.position.width;
|
||||
}
|
||||
if (options.position.height === 'shrink') {
|
||||
delete options.position.height;
|
||||
}
|
||||
options.shrink = true;
|
||||
}
|
||||
|
||||
this.position = {
|
||||
left: options.left || 0,
|
||||
right: options.right || 0,
|
||||
top: options.top || 0,
|
||||
bottom: options.bottom || 0,
|
||||
width: options.width || null,
|
||||
height: options.height || null
|
||||
};
|
||||
this.position = options.position;
|
||||
|
||||
this.style = options.style;
|
||||
|
||||
|
|
@ -2145,7 +2152,7 @@ Element.prototype._bindPosChanged = function() {
|
|||
|
||||
Element.prototype._getWidth = function(get) {
|
||||
var parent = get ? this.parent._getPos() : this.parent;
|
||||
var width = this.position.width;
|
||||
var width = this.position.width || 0;
|
||||
|
||||
if (typeof width === 'string') {
|
||||
if (width === 'half') width = '50%';
|
||||
|
|
@ -2160,13 +2167,13 @@ Element.prototype._getWidth = function(get) {
|
|||
// decided by the width the element, so it needs to be
|
||||
// calculated here.
|
||||
if (!width) {
|
||||
var left = this.position.left;
|
||||
var left = this.position.left || 0;
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
left = +left.slice(0, -1) / 100;
|
||||
left = parent.width * left | 0;
|
||||
}
|
||||
width = parent.width - this.position.right - left;
|
||||
width = parent.width - (this.position.right || 0) - left;
|
||||
}
|
||||
|
||||
return width;
|
||||
|
|
@ -2178,7 +2185,7 @@ Element.prototype.__defineGetter__('width', function() {
|
|||
|
||||
Element.prototype._getHeight = function(get) {
|
||||
var parent = get ? this.parent._getPos() : this.parent;
|
||||
var height = this.position.height;
|
||||
var height = this.position.height || 0;
|
||||
|
||||
if (typeof height === 'string') {
|
||||
if (height === 'half') height = '50%';
|
||||
|
|
@ -2193,13 +2200,13 @@ Element.prototype._getHeight = function(get) {
|
|||
// decided by the width the element, so it needs to be
|
||||
// calculated here.
|
||||
if (!height) {
|
||||
var top = this.position.top;
|
||||
var top = this.position.top || 0;
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
top = +top.slice(0, -1) / 100;
|
||||
top = parent.height * top | 0;
|
||||
}
|
||||
height = parent.height - this.position.bottom - top;
|
||||
height = parent.height - (this.position.bottom || 0) - top;
|
||||
}
|
||||
|
||||
return height;
|
||||
|
|
@ -2211,7 +2218,7 @@ Element.prototype.__defineGetter__('height', function() {
|
|||
|
||||
Element.prototype._getLeft = function(get) {
|
||||
var parent = get ? this.parent._getPos() : this.parent;
|
||||
var left = this.position.left;
|
||||
var left = this.position.left || 0;
|
||||
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
|
|
@ -2222,7 +2229,7 @@ Element.prototype._getLeft = function(get) {
|
|||
}
|
||||
}
|
||||
|
||||
if (this.options.left == null && this.options.right != null) {
|
||||
if (this.position.left == null && this.position.right != null) {
|
||||
return this.screen.cols - this._getWidth(get) - this._getRight(get);
|
||||
}
|
||||
|
||||
|
|
@ -2235,10 +2242,10 @@ Element.prototype.__defineGetter__('left', function() {
|
|||
|
||||
Element.prototype._getRight = function(get) {
|
||||
var parent = get ? this.parent._getPos() : this.parent;
|
||||
if (this.options.right == null && this.options.left != null) {
|
||||
if (this.position.right == null && this.position.left != null) {
|
||||
return this.screen.cols - (this._getLeft(get) + this._getWidth(get));
|
||||
}
|
||||
return (parent.right || 0) + this.position.right;
|
||||
return (parent.right || 0) + (this.position.right || 0);
|
||||
};
|
||||
|
||||
Element.prototype.__defineGetter__('right', function() {
|
||||
|
|
@ -2247,7 +2254,7 @@ Element.prototype.__defineGetter__('right', function() {
|
|||
|
||||
Element.prototype._getTop = function(get) {
|
||||
var parent = get ? this.parent._getPos() : this.parent;
|
||||
var top = this.position.top;
|
||||
var top = this.position.top || 0;
|
||||
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
|
|
@ -2258,7 +2265,7 @@ Element.prototype._getTop = function(get) {
|
|||
}
|
||||
}
|
||||
|
||||
if (this.options.top == null && this.options.bottom != null) {
|
||||
if (this.position.top == null && this.position.bottom != null) {
|
||||
return this.screen.rows - this._getHeight(get) - this._getBottom(get);
|
||||
}
|
||||
|
||||
|
|
@ -2271,10 +2278,10 @@ Element.prototype.__defineGetter__('top', function() {
|
|||
|
||||
Element.prototype._getBottom = function(get) {
|
||||
var parent = get ? this.parent._getPos() : this.parent;
|
||||
if (this.options.bottom == null && this.options.top != null) {
|
||||
if (this.position.bottom == null && this.position.top != null) {
|
||||
return this.screen.rows - (this._getTop(get) + this._getHeight(get));
|
||||
}
|
||||
return (parent.bottom || 0) + this.position.bottom;
|
||||
return (parent.bottom || 0) + (this.position.bottom || 0);
|
||||
};
|
||||
|
||||
Element.prototype.__defineGetter__('bottom', function() {
|
||||
|
|
@ -2310,14 +2317,14 @@ Element.prototype.__defineSetter__('width', function(val) {
|
|||
if (this.position.width === val) return;
|
||||
this.emit('resize');
|
||||
this.clearPos();
|
||||
return this.options.width = this.position.width = val;
|
||||
return this.position.width = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('height', function(val) {
|
||||
if (this.position.height === val) return;
|
||||
this.emit('resize');
|
||||
this.clearPos();
|
||||
return this.options.height = this.position.height = val;
|
||||
return this.position.height = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('left', function(val) {
|
||||
|
|
@ -2334,7 +2341,7 @@ Element.prototype.__defineSetter__('left', function(val) {
|
|||
if (this.position.left === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.left = this.position.left = val;
|
||||
return this.position.left = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('right', function(val) {
|
||||
|
|
@ -2342,7 +2349,7 @@ Element.prototype.__defineSetter__('right', function(val) {
|
|||
if (this.position.right === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.right = this.position.right = val;
|
||||
return this.position.right = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('top', function(val) {
|
||||
|
|
@ -2359,7 +2366,7 @@ Element.prototype.__defineSetter__('top', function(val) {
|
|||
if (this.position.top === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.top = this.position.top = val;
|
||||
return this.position.top = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('bottom', function(val) {
|
||||
|
|
@ -2367,35 +2374,35 @@ Element.prototype.__defineSetter__('bottom', function(val) {
|
|||
if (this.position.bottom === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.bottom = this.position.bottom = val;
|
||||
return this.position.bottom = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('rleft', function(val) {
|
||||
if (this.position.left === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.left = this.position.left = val;
|
||||
return this.position.left = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('rright', function(val) {
|
||||
if (this.position.right === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.right = this.position.right = val;
|
||||
return this.position.right = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('rtop', function(val) {
|
||||
if (this.position.top === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.top = this.position.top = val;
|
||||
return this.position.top = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineSetter__('rbottom', function(val) {
|
||||
if (this.position.bottom === val) return;
|
||||
this.emit('move');
|
||||
this.clearPos();
|
||||
return this.options.bottom = this.position.bottom = val;
|
||||
return this.position.bottom = val;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('ileft', function() {
|
||||
|
|
@ -2475,10 +2482,10 @@ Box.prototype._getShrinkBox = function(xi, xl, yi, yl) {
|
|||
if (ret.yl > myl) myl = ret.yl;
|
||||
}
|
||||
|
||||
if (this.options.width == null
|
||||
&& (this.options.left == null
|
||||
|| this.options.right == null)) {
|
||||
if (this.options.left == null && this.options.right != null) {
|
||||
if (this.position.width == null
|
||||
&& (this.position.left == null
|
||||
|| this.position.right == null)) {
|
||||
if (this.position.left == null && this.position.right != null) {
|
||||
xi = xl - (mxl - mxi);
|
||||
xi -= this.padding.left + this.padding.right;
|
||||
} else {
|
||||
|
|
@ -2487,11 +2494,11 @@ Box.prototype._getShrinkBox = function(xi, xl, yi, yl) {
|
|||
}
|
||||
}
|
||||
|
||||
if (this.options.height == null
|
||||
&& (this.options.top == null
|
||||
|| this.options.bottom == null)
|
||||
if (this.position.height == null
|
||||
&& (this.position.top == null
|
||||
|| this.position.bottom == null)
|
||||
&& this.childBase == null) {
|
||||
if (this.options.top == null && this.options.bottom != null) {
|
||||
if (this.position.top == null && this.position.bottom != null) {
|
||||
yi = yl - (myl - myi);
|
||||
yi -= this.padding.top + this.padding.bottom;
|
||||
} else {
|
||||
|
|
@ -2508,21 +2515,21 @@ Box.prototype._getShrinkContent = function(xi, xl, yi, yl) {
|
|||
, h = hw.height
|
||||
, w = hw.width;
|
||||
|
||||
if (this.options.width == null
|
||||
&& (this.options.left == null
|
||||
|| this.options.right == null)) {
|
||||
if (this.options.left == null && this.options.right != null) {
|
||||
if (this.position.width == null
|
||||
&& (this.position.left == null
|
||||
|| this.position.right == null)) {
|
||||
if (this.position.left == null && this.position.right != null) {
|
||||
xi = xl - w - this.iwidth;
|
||||
} else {
|
||||
xl = xi + w + this.iwidth;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.height == null
|
||||
&& (this.options.top == null
|
||||
|| this.options.bottom == null)
|
||||
if (this.position.height == null
|
||||
&& (this.position.top == null
|
||||
|| this.position.bottom == null)
|
||||
&& this.childBase == null) {
|
||||
if (this.options.top == null && this.options.bottom != null) {
|
||||
if (this.position.top == null && this.position.bottom != null) {
|
||||
yi = yl - h - this.iheight;
|
||||
} else {
|
||||
yl = yi + h + this.iheight;
|
||||
|
|
@ -2556,13 +2563,13 @@ Box.prototype._getShrink = function(xi, xl, yi, yl) {
|
|||
}
|
||||
|
||||
// Recenter shrunken elements.
|
||||
if (xl < xll && this.options.left === 'center') {
|
||||
if (xl < xll && this.position.left === 'center') {
|
||||
xll = (xll - xl) / 2 | 0;
|
||||
xi += xll;
|
||||
xl += xll;
|
||||
}
|
||||
|
||||
if (yl < yll && this.options.top === 'center') {
|
||||
if (yl < yll && this.position.top === 'center') {
|
||||
yll = (yll - yl) / 2 | 0;
|
||||
yi += yll;
|
||||
yl += yll;
|
||||
|
|
|
|||
Loading…
Reference in New Issue