fixes. scrollble work.
This commit is contained in:
parent
4fe0e98704
commit
493004b521
|
@ -68,11 +68,33 @@ screen.append(new blessed.List({
|
|||
{ content: 'one' },
|
||||
{ content: 'two' },
|
||||
{ content: 'three' },
|
||||
{ content: 'four' }
|
||||
{ content: 'four' },
|
||||
{ content: 'five' },
|
||||
{ content: 'six' },
|
||||
{ content: 'seven' },
|
||||
{ content: 'eight' },
|
||||
{ content: 'nine' },
|
||||
{ content: 'ten' }
|
||||
]
|
||||
}));
|
||||
|
||||
screen.children[0].prepend(new blessed.Text({
|
||||
screen: screen,
|
||||
parent: screen.children[0],
|
||||
left: 2,
|
||||
content: ' My list '
|
||||
}));
|
||||
|
||||
program.on('keypress', function(ch, key) {
|
||||
if (key.name === 'up') {
|
||||
screen.children[0].up();
|
||||
screen.render();
|
||||
return;
|
||||
} else if (key.name === 'down') {
|
||||
screen.children[0].down();
|
||||
screen.render();
|
||||
return;
|
||||
}
|
||||
if (key.name === 'escape' || key.name === 'q') {
|
||||
program.disableMouse();
|
||||
program.clear();
|
||||
|
|
210
lib/high.js
210
lib/high.js
|
@ -291,21 +291,10 @@ Element.prototype.__proto__ = Node.prototype;
|
|||
Element.prototype.__defineGetter__('left', function() {
|
||||
var left = this.position.left;
|
||||
|
||||
/*
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
left = +left.slice(0, -1) / 100;
|
||||
var len = Math.min(this.content.length, this.screen.cols);
|
||||
//left = (this.screen.cols - len) * left | 0;
|
||||
left = (this.parent.width - len) * left | 0;
|
||||
}
|
||||
*/
|
||||
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
left = +left.slice(0, -1) / 100;
|
||||
var len = Math.min(this.width, this.screen.cols);
|
||||
//left = (this.screen.cols - len) * left | 0;
|
||||
var len = Math.min(this.width, this.parent.width);
|
||||
left = (this.parent.width - len) * left | 0;
|
||||
}
|
||||
|
||||
|
@ -318,23 +307,11 @@ Element.prototype.__defineGetter__('right', function() {
|
|||
|
||||
Element.prototype.__defineGetter__('top', function() {
|
||||
var top = this.position.top;
|
||||
/*
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
top = +top.slice(0, -1) / 100;
|
||||
//var len = Math.min(this.content.length, this.screen.cols);
|
||||
//top = (this.screen.cols - len) * top | 0;
|
||||
var len = (this.content.length - this.left) / this.screen.cols;
|
||||
//top = (this.screen.rows - len) * top | 0;
|
||||
top = (this.parent.height - len) * top | 0;
|
||||
}
|
||||
*/
|
||||
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
top = +top.slice(0, -1) / 100;
|
||||
var len = Math.min(this.height, this.screen.rows);
|
||||
//top = (this.screen.rows - len) * top | 0;
|
||||
var len = Math.min(this.height, this.parent.height);
|
||||
top = (this.parent.height - len) * top | 0;
|
||||
}
|
||||
|
||||
|
@ -350,13 +327,17 @@ Element.prototype.__defineGetter__('width', function() {
|
|||
if (typeof width === 'string') {
|
||||
if (width === 'half') width = '50%';
|
||||
width = +width.slice(0, -1) / 100;
|
||||
//return this.screen.cols * width | 0;
|
||||
return this.parent.width * width | 0;
|
||||
}
|
||||
if (!width) {
|
||||
//width = this.screen.cols - this.position.right - this.position.left;
|
||||
width = this.parent.width - this.position.right - this.position.left;
|
||||
width = width || 0;
|
||||
// Problem if .left is 'center', we can't calculate the width
|
||||
var left = this.position.left;
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
left = +left.slice(0, -1) / 100;
|
||||
left = this.parent.width * left | 0;
|
||||
}
|
||||
width = this.parent.width - this.position.right - left;
|
||||
}
|
||||
return width;
|
||||
});
|
||||
|
@ -366,17 +347,55 @@ Element.prototype.__defineGetter__('height', function() {
|
|||
if (typeof height === 'string') {
|
||||
if (height === 'half') height = '50%';
|
||||
height = +height.slice(0, -1) / 100;
|
||||
//return this.screen.rows * height | 0;
|
||||
return this.parent.height * height | 0;
|
||||
}
|
||||
if (!height) {
|
||||
//height = this.screen.rows - this.position.bottom - this.position.top;
|
||||
height = this.parent.height - this.position.bottom - this.position.top;
|
||||
height = height || 0;
|
||||
// Problem if .top is 'center', we can't calculate the height
|
||||
var top = this.position.top;
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
top = +top.slice(0, -1) / 100;
|
||||
top = this.parent.height * top | 0;
|
||||
}
|
||||
height = this.parent.height - this.position.bottom - top;
|
||||
}
|
||||
return height;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('rleft', function() {
|
||||
var left = this.position.left;
|
||||
|
||||
if (typeof left === 'string') {
|
||||
if (left === 'center') left = '50%';
|
||||
left = +left.slice(0, -1) / 100;
|
||||
var len = Math.min(this.width, this.parent.width);
|
||||
left = len * left | 0;
|
||||
}
|
||||
|
||||
return left;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('rright', function() {
|
||||
return this.position.right;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('rtop', function() {
|
||||
var top = this.position.top;
|
||||
|
||||
if (typeof top === 'string') {
|
||||
if (top === 'center') top = '50%';
|
||||
top = +top.slice(0, -1) / 100;
|
||||
var len = Math.min(this.height, this.parent.height);
|
||||
top = len * top | 0;
|
||||
}
|
||||
|
||||
return top;
|
||||
});
|
||||
|
||||
Element.prototype.__defineGetter__('rbottom', function() {
|
||||
return this.position.bottom;
|
||||
});
|
||||
|
||||
/**
|
||||
* Box
|
||||
*/
|
||||
|
@ -476,11 +495,6 @@ Text.prototype.render = function() {
|
|||
, ci = 0
|
||||
, cl = this.content.length;
|
||||
|
||||
if (this.full) {
|
||||
this.position.width = '100%';
|
||||
this.position.width = this.width - 4; // TODO: FIX
|
||||
}
|
||||
|
||||
if (this.position.width) {
|
||||
xl = xi + this.width;
|
||||
}
|
||||
|
@ -489,6 +503,14 @@ Text.prototype.render = function() {
|
|||
yl = yi + this.height;
|
||||
}
|
||||
|
||||
if (this.full) {
|
||||
xl = xi + this.parent.width - (this.parent.border ? 2 : 0) - this.rleft;
|
||||
}
|
||||
|
||||
//if (this.parent.childOffset) {
|
||||
// yi -= this.parent.childOffset;
|
||||
//}
|
||||
|
||||
var ended = -1;
|
||||
|
||||
for (yi = this.top; yi < yl; yi++) {
|
||||
|
@ -536,7 +558,7 @@ ScrollableBox.prototype.scroll = function(offset) {
|
|||
this.childOffset += offset;
|
||||
if (this.childOffset < 0) {
|
||||
this.childOffset = 0;
|
||||
} else if (this.childOffset >= this.children.length) {
|
||||
} else if (this.childOffset > this.children.length - 1) {
|
||||
this.childOffset = this.children.length - 1;
|
||||
}
|
||||
};
|
||||
|
@ -544,7 +566,8 @@ ScrollableBox.prototype.scroll = function(offset) {
|
|||
ScrollableBox.prototype._render = ScrollableBox.prototype.render;
|
||||
ScrollableBox.prototype.render = function() {
|
||||
var children = this.children;
|
||||
this.children = this.children.slice(this.childOffset);
|
||||
this.children = this.children.slice(this.childOffset,
|
||||
this.childOffset + this.height - (this.border ? 1 : 0));
|
||||
this._render();
|
||||
this.children = children;
|
||||
};
|
||||
|
@ -555,7 +578,8 @@ ScrollableBox.prototype.render = function() {
|
|||
|
||||
function List(options) {
|
||||
ScrollableBox.call(this, options);
|
||||
this.children = options.children || [];
|
||||
|
||||
this.items = [];
|
||||
this.selected = 0;
|
||||
|
||||
this.selectedBg = options.selectedBg || -1;
|
||||
|
@ -568,59 +592,121 @@ function List(options) {
|
|||
|
||||
if (options.items) {
|
||||
options.items.forEach(this.add.bind(this));
|
||||
this.select(this.selected);
|
||||
}
|
||||
|
||||
if (this.children.length) {
|
||||
this.select(0);
|
||||
}
|
||||
}
|
||||
|
||||
List.prototype.__proto__ = ScrollableBox.prototype;
|
||||
|
||||
List.prototype.add = function(item) {
|
||||
this.append(new Text({
|
||||
var item = new Text({
|
||||
screen: this.screen,
|
||||
parent: this,
|
||||
fg: this.fg,
|
||||
bg: this.bg,
|
||||
content: item.content,
|
||||
top: this.children.length + 1,
|
||||
left: 2,
|
||||
full: true
|
||||
//height: 1 // TODO: FIX
|
||||
}));
|
||||
left: (this.border ? 1 : 0) + 1,
|
||||
full: true,
|
||||
height: 1
|
||||
});
|
||||
this.append(item);
|
||||
this.items.push(item);
|
||||
};
|
||||
|
||||
List.prototype._remove = List.prototype.remove;
|
||||
List.prototype.remove = function(child) {
|
||||
if (typeof child === 'number') {
|
||||
child = this.children[child];
|
||||
}
|
||||
var i = this.items.indexOf(child);
|
||||
if (~i) this.items.splice(i, 1);
|
||||
this._remove(child);
|
||||
};
|
||||
|
||||
List.prototype.select = function(index) {
|
||||
if (!this.items.length) return;
|
||||
|
||||
if (typeof index === 'object') {
|
||||
index = this.children.indexOf(index);
|
||||
index = this.items.indexOf(index);
|
||||
}
|
||||
|
||||
if (index < 0) index = 0;
|
||||
else if (index >= this.items.length) index = this.items.length - 1;
|
||||
|
||||
if (this.selected === index && this._listInitialized) return;
|
||||
this._listInitialized = true;
|
||||
|
||||
if (this.selectedBg) {
|
||||
this.children[this.selected].bg = this.bg;
|
||||
this.children[index].bg = this.selectedBg;
|
||||
this.items[this.selected].bg = this.bg;
|
||||
this.items[index].bg = this.selectedBg;
|
||||
}
|
||||
|
||||
if (this.selectedFg) {
|
||||
this.children[this.selected].fg = this.fg;
|
||||
this.children[index].fg = this.selectedFg;
|
||||
this.items[this.selected].fg = this.fg;
|
||||
this.items[index].fg = this.selectedFg;
|
||||
}
|
||||
|
||||
if (this.selectedBold != null) {
|
||||
this.children[this.selected].bold = this.bold;
|
||||
this.children[index].bold = this.selectedBold;
|
||||
this.items[this.selected].bold = this.bold;
|
||||
this.items[index].bold = this.selectedBold;
|
||||
}
|
||||
|
||||
if (this.selectedUnderline != null) {
|
||||
this.children[this.selected].underline = this.underline;
|
||||
this.children[index].underline = this.selectedUnderline;
|
||||
this.items[this.selected].underline = this.underline;
|
||||
this.items[index].underline = this.selectedUnderline;
|
||||
}
|
||||
|
||||
this.selected = index;
|
||||
|
||||
var height = this.height;
|
||||
// Find the number of non-item children preceding the items.
|
||||
var self = this;
|
||||
var sawNon = false;
|
||||
var children = this.children.filter(function(c, i) {
|
||||
if (sawNon) return;
|
||||
if (~self.items.indexOf(c)) {
|
||||
sawNon = true;
|
||||
return;
|
||||
}
|
||||
return !self.border || c.position.top > 0;
|
||||
}).length;
|
||||
|
||||
//var height = this.height - (this.children.length - this.items.length);
|
||||
var height = this.height - children;
|
||||
if (this.selected >= height) {
|
||||
this.scroll(this.selected - height);
|
||||
}
|
||||
};
|
||||
|
||||
List.prototype.remove = function(index) {
|
||||
if (typeof index === 'object') {
|
||||
index = this.children.indexOf(index);
|
||||
}
|
||||
this.children.splice(index, 1);
|
||||
List.prototype.move = function(offset) {
|
||||
this.select(this.selected + offset);
|
||||
};
|
||||
|
||||
List.prototype.up = function(offset) {
|
||||
this.move(-(offset || 1));
|
||||
};
|
||||
|
||||
List.prototype.down = function(offset) {
|
||||
this.move(offset || 1);
|
||||
};
|
||||
|
||||
//List.prototype.remove = function(index) {
|
||||
// if (typeof index === 'object') {
|
||||
// index = this.children.indexOf(index);
|
||||
// }
|
||||
// this.children.splice(index, 1);
|
||||
//};
|
||||
|
||||
/*
|
||||
List.prototype._render = List.prototype.render;
|
||||
List.prototype.render = function() {
|
||||
this._render();
|
||||
};
|
||||
*/
|
||||
|
||||
/**
|
||||
* Input
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue