From add8aaa6646a3f3298ee9a7a589370ed82579075 Mon Sep 17 00:00:00 2001 From: Christopher Jeffrey Date: Tue, 23 Jul 2013 06:54:21 -0500 Subject: [PATCH] stop using the options object for positioning. --- README.md | 1 + lib/widget.js | 113 +++++++++++++++++++++++++++----------------------- 2 files changed, 61 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index 3e62173..5470bf1 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/lib/widget.js b/lib/widget.js index c540aef..1a3d37c 100644 --- a/lib/widget.js +++ b/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;