* Lots of minor code cleanup
* WIP work on HorizontalMenuView * Initial art for HorizontalMenuView demo
This commit is contained in:
parent
c87c0d69b7
commit
d346fe72ee
|
@ -5,24 +5,91 @@ var MenuView = require('./menu_view.js').MenuView;
|
||||||
var ansi = require('./ansi_term.js');
|
var ansi = require('./ansi_term.js');
|
||||||
var strUtil = require('./string_util.js');
|
var strUtil = require('./string_util.js');
|
||||||
|
|
||||||
function HorizontalMenuView = function(options) {
|
var assert = require('assert');
|
||||||
|
|
||||||
|
exports.HorizontalMenuView = HorizontalMenuView;
|
||||||
|
|
||||||
|
function HorizontalMenuView(options) {
|
||||||
options.cursor = options.cursor || 'hide';
|
options.cursor = options.cursor || 'hide';
|
||||||
|
|
||||||
MenuView.call(this, options);
|
MenuView.call(this, options);
|
||||||
|
|
||||||
|
this.dimens.height = 1; // always the case
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
this.getSpacer = function() {
|
||||||
|
return new Array(self.itemSpacing).join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.performAutoScale = function() {
|
||||||
|
if(self.autoScale.width) {
|
||||||
|
var spacer = self.getSpacer();
|
||||||
|
var width = self.items.join(spacer).length + (spacer.length * 2);
|
||||||
|
assert(width <= self.client.term.termWidth - self.position.col);
|
||||||
|
self.dimens.width = width;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.performAutoScale();
|
||||||
|
|
||||||
|
this.cachePositions = function() {
|
||||||
|
if(this.positionCacheExpired) {
|
||||||
|
var col = self.position.col;
|
||||||
|
var spacer = self.getSpacer();
|
||||||
|
|
||||||
|
self.itemColumns = [];
|
||||||
|
for(var i = 0; i < self.items.length; ++i) {
|
||||||
|
self.itemColumns[i] = col;
|
||||||
|
col += spacer.length + self.items[i].length + spacer.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.positionCacheExpired = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.drawItem = function(index) {
|
||||||
|
assert(self.itemColumns.length === self.items.length);
|
||||||
|
|
||||||
|
var item = self.items[index];
|
||||||
|
if(!item) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.client.term.write(ansi.goto(item.row, self.itemColumns[index]));
|
||||||
|
self.client.term.write(index === self.focusedItemIndex ? self.getFocusSGR() : self.getSGR());
|
||||||
|
|
||||||
|
var text = strUtil.stylizeString(item.text, item.focused ? self.focusTextStyle : self.textStyle);
|
||||||
|
|
||||||
|
var extraPad = self.getSpacer().length * 2;
|
||||||
|
self.client.term.write(
|
||||||
|
strUtil.pad(text, text.length + extraPad, this.fillChar, 'center'));
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
require('util').inherits(HorizontalMenuView, MenuView);
|
require('util').inherits(HorizontalMenuView, MenuView);
|
||||||
|
|
||||||
|
HorizontalMenuView.prototype.setHeight = function(height) {
|
||||||
|
height = parseInt(height, 10);
|
||||||
|
assert(1 === height); // nothing else allowed here
|
||||||
|
HorizontalMenuView.super_.prototype.setHeight(this, height);
|
||||||
|
};
|
||||||
|
|
||||||
HorizontalMenuView.prototype.redraw = function() {
|
HorizontalMenuView.prototype.redraw = function() {
|
||||||
HorizontalMenuView.super_.prototype.redraw.call(this);
|
HorizontalMenuView.super_.prototype.redraw.call(this);
|
||||||
|
|
||||||
|
this.cachePositions();
|
||||||
|
|
||||||
|
for(var i = 0; i < this.items.length; ++i) {
|
||||||
|
this.items[i].focused = this.focusedItemIndex === i;
|
||||||
|
this.drawItem(i);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
HorizontalMenuView.prototype.setPosition = function(pos) {
|
HorizontalMenuView.prototype.setPosition = function(pos) {
|
||||||
HorizontalMenuView.super_.prototype.setPosition.call(this, pos);
|
HorizontalMenuView.super_.prototype.setPosition.call(this, pos);
|
||||||
|
|
||||||
|
this.positionCacheExpired = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
HorizontalMenuView.prototype.setFocus = function(focused) {
|
HorizontalMenuView.prototype.setFocus = function(focused) {
|
||||||
|
@ -34,17 +101,5 @@ HorizontalMenuView.prototype.setFocus = function(focused) {
|
||||||
HorizontalMenuView.prototype.setItems = function(items) {
|
HorizontalMenuView.prototype.setItems = function(items) {
|
||||||
HorizontalMenuView.super_.prototype.setItems.call(this, items);
|
HorizontalMenuView.super_.prototype.setItems.call(this, items);
|
||||||
|
|
||||||
//
|
this.positionCacheExpired = true;
|
||||||
// Styles:
|
|
||||||
// * itemPadding: n
|
|
||||||
// *
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// item1 item2 itemThree itemfour!!!!!
|
|
||||||
// ^^^^^^^^^
|
|
||||||
//
|
|
||||||
// item1 item2 itemThree item!!!!!
|
|
||||||
// ^^^^^^^
|
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
|
@ -5,6 +5,7 @@ var TextView = require('./text_view.js').TextView;
|
||||||
var EditTextView = require('./edit_text_view.js').EditTextView;
|
var EditTextView = require('./edit_text_view.js').EditTextView;
|
||||||
var ButtonView = require('./button_view.js').ButtonView;
|
var ButtonView = require('./button_view.js').ButtonView;
|
||||||
var VerticalMenuView = require('./vertical_menu_view.js').VerticalMenuView;
|
var VerticalMenuView = require('./vertical_menu_view.js').VerticalMenuView;
|
||||||
|
var HorizontalMenuView = require('./horizontal_menu_view.js').HorizontalMenuView;
|
||||||
var SpinnerMenuView = require('./spinner_menu_view.js').SpinnerMenuView;
|
var SpinnerMenuView = require('./spinner_menu_view.js').SpinnerMenuView;
|
||||||
var ToggleMenuView = require('./toggle_menu_view.js').ToggleMenuView;
|
var ToggleMenuView = require('./toggle_menu_view.js').ToggleMenuView;
|
||||||
var MaskEditTextView = require('./mask_edit_text_view.js').MaskEditTextView;
|
var MaskEditTextView = require('./mask_edit_text_view.js').MaskEditTextView;
|
||||||
|
@ -174,6 +175,16 @@ MCIViewFactory.prototype.createFromMCI = function(mci) {
|
||||||
view = new VerticalMenuView(options);
|
view = new VerticalMenuView(options);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
// Horizontal Menu
|
||||||
|
case 'HM' :
|
||||||
|
setOption(0, 'itemSpacing');
|
||||||
|
setOption(1, 'textStyle');
|
||||||
|
|
||||||
|
setFocusOption(0, 'focusTextStyle');
|
||||||
|
|
||||||
|
view = new HorizontalMenuView(options);
|
||||||
|
break;
|
||||||
|
|
||||||
case 'SM' :
|
case 'SM' :
|
||||||
setOption(0, 'textStyle');
|
setOption(0, 'textStyle');
|
||||||
setOption(1, 'justify');
|
setOption(1, 'justify');
|
||||||
|
|
|
@ -40,58 +40,10 @@ function MenuView(options) {
|
||||||
|
|
||||||
this.fillChar = miscUtil.valueWithDefault(options.fillChar, ' ').substr(0, 1);
|
this.fillChar = miscUtil.valueWithDefault(options.fillChar, ' ').substr(0, 1);
|
||||||
this.justify = options.justify || 'none';
|
this.justify = options.justify || 'none';
|
||||||
/*
|
|
||||||
this.moveSelection = function(fromIndex, toIndex) {
|
|
||||||
assert(!self.positionCacheExpired);
|
|
||||||
assert(fromIndex >= 0 && fromIndex <= self.items.length);
|
|
||||||
assert(toIndex >= 0 && toIndex <= self.items.length);
|
|
||||||
|
|
||||||
self.items[fromIndex].focused = false;
|
|
||||||
self.drawItem(fromIndex);
|
|
||||||
|
|
||||||
self.items[toIndex].focused = true;
|
|
||||||
self.focusedItemIndex = toIndex;
|
|
||||||
self.drawItem(toIndex);
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
this.cachePositions = function() {
|
|
||||||
// :TODO: implement me!
|
|
||||||
};
|
|
||||||
|
|
||||||
this.drawItem = function(index) {
|
|
||||||
// :TODO: implement me!
|
|
||||||
};*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
util.inherits(MenuView, View);
|
util.inherits(MenuView, View);
|
||||||
|
|
||||||
MenuView.prototype.redrawAllItems = function() {
|
|
||||||
MenuView.super_.prototype.redraw.call(this);
|
|
||||||
|
|
||||||
this.cachePositions();
|
|
||||||
|
|
||||||
var count = this.items.length;
|
|
||||||
for(var i = 0; i < count; ++i) {
|
|
||||||
this.items[i].focused = this.focusedItemIndex === i;
|
|
||||||
this.drawItem(i);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/*
|
|
||||||
|
|
||||||
MenuView.prototype.redraw = function() {
|
|
||||||
MenuView.super_.prototype.redraw.call(this);
|
|
||||||
|
|
||||||
this.cachePositions();
|
|
||||||
|
|
||||||
var count = this.items.length;
|
|
||||||
for(var i = 0; i < count; ++i) {
|
|
||||||
this.items[i].focused = this.focusedItemIndex === i;
|
|
||||||
this.drawItem(i);
|
|
||||||
}
|
|
||||||
};*/
|
|
||||||
|
|
||||||
MenuView.prototype.setItems = function(items) {
|
MenuView.prototype.setItems = function(items) {
|
||||||
var self = this;
|
var self = this;
|
||||||
if(items) {
|
if(items) {
|
||||||
|
|
|
@ -989,6 +989,7 @@ MultiLineEditTextView2.prototype.redraw = function() {
|
||||||
|
|
||||||
MultiLineEditTextView2.prototype.setFocus = function(focused) {
|
MultiLineEditTextView2.prototype.setFocus = function(focused) {
|
||||||
this.client.term.write(this.getSGRFor('text'));
|
this.client.term.write(this.getSGRFor('text'));
|
||||||
|
this.moveClientCusorToCursorPos();
|
||||||
|
|
||||||
MultiLineEditTextView2.super_.prototype.setFocus.call(this, focused);
|
MultiLineEditTextView2.super_.prototype.setFocus.call(this, focused);
|
||||||
};
|
};
|
||||||
|
|
|
@ -19,9 +19,11 @@ function SpinnerMenuView(options) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
/*
|
||||||
this.cachePositions = function() {
|
this.cachePositions = function() {
|
||||||
self.positionCacheExpired = false;
|
self.positionCacheExpired = false;
|
||||||
};
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
this.updateSelection = function() {
|
this.updateSelection = function() {
|
||||||
assert(!self.positionCacheExpired);
|
assert(!self.positionCacheExpired);
|
||||||
|
@ -52,7 +54,7 @@ util.inherits(SpinnerMenuView, MenuView);
|
||||||
SpinnerMenuView.prototype.redraw = function() {
|
SpinnerMenuView.prototype.redraw = function() {
|
||||||
SpinnerMenuView.super_.prototype.redraw.call(this);
|
SpinnerMenuView.super_.prototype.redraw.call(this);
|
||||||
|
|
||||||
this.cachePositions();
|
//this.cachePositions();
|
||||||
this.drawItem(this.focusedItemIndex);
|
this.drawItem(this.focusedItemIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -18,9 +18,11 @@ function ToggleMenuView (options) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
/*
|
||||||
this.cachePositions = function() {
|
this.cachePositions = function() {
|
||||||
self.positionCacheExpired = false;
|
self.positionCacheExpired = false;
|
||||||
};
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
this.updateSelection = function() {
|
this.updateSelection = function() {
|
||||||
assert(!self.positionCacheExpired);
|
assert(!self.positionCacheExpired);
|
||||||
|
@ -35,7 +37,7 @@ util.inherits(ToggleMenuView, MenuView);
|
||||||
ToggleMenuView.prototype.redraw = function() {
|
ToggleMenuView.prototype.redraw = function() {
|
||||||
ToggleMenuView.super_.prototype.redraw.call(this);
|
ToggleMenuView.super_.prototype.redraw.call(this);
|
||||||
|
|
||||||
this.cachePositions();
|
//this.cachePositions();
|
||||||
|
|
||||||
this.client.term.write(this.hasFocus ? this.getFocusSGR() : this.getSGR());
|
this.client.term.write(this.hasFocus ? this.getFocusSGR() : this.getSGR());
|
||||||
|
|
||||||
|
|
|
@ -69,6 +69,7 @@ util.inherits(VerticalMenuView, MenuView);
|
||||||
VerticalMenuView.prototype.redraw = function() {
|
VerticalMenuView.prototype.redraw = function() {
|
||||||
VerticalMenuView.super_.prototype.redraw.call(this);
|
VerticalMenuView.super_.prototype.redraw.call(this);
|
||||||
|
|
||||||
|
// :TODO: rename positionCacheExpired to something that makese sense; combine methods for such
|
||||||
if(this.positionCacheExpired) {
|
if(this.positionCacheExpired) {
|
||||||
this.performAutoScale();
|
this.performAutoScale();
|
||||||
this.updateViewVisibleItems();
|
this.updateViewVisibleItems();
|
||||||
|
|
|
@ -5,6 +5,7 @@ var events = require('events');
|
||||||
var util = require('util');
|
var util = require('util');
|
||||||
var assert = require('assert');
|
var assert = require('assert');
|
||||||
var ansi = require('./ansi_term.js');
|
var ansi = require('./ansi_term.js');
|
||||||
|
var colorCodes = require('./color_codes.js');
|
||||||
|
|
||||||
var _ = require('lodash');
|
var _ = require('lodash');
|
||||||
|
|
||||||
|
@ -217,7 +218,7 @@ View.prototype.setPropertyValue = function(propName, value) {
|
||||||
if(_.isObject(value)) {
|
if(_.isObject(value)) {
|
||||||
this[propName] = ansi.getSGRFromGraphicRendition(value, true);
|
this[propName] = ansi.getSGRFromGraphicRendition(value, true);
|
||||||
} else if(_.isString(value)) {
|
} else if(_.isString(value)) {
|
||||||
this[propName] = ansi.fromPipeCode(value);
|
this[propName] = colorCodes.pipeToAnsi(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Binary file not shown.
Binary file not shown.
|
@ -243,6 +243,10 @@
|
||||||
"value" : { "1" : 3 },
|
"value" : { "1" : 3 },
|
||||||
"action" : "@menu:demoMultiLineEditTextView"
|
"action" : "@menu:demoMultiLineEditTextView"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"value" : { "1" : 5 },
|
||||||
|
"action" : "@menu:demoHorizontalMenuView"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"value" : { "1" : 6 },
|
"value" : { "1" : 6 },
|
||||||
"action" : "@menu:demoArtDisplay"
|
"action" : "@menu:demoArtDisplay"
|
||||||
|
@ -397,6 +401,25 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"demoHorizontalMenuView" : {
|
||||||
|
"art" : "demo_horizontal_menu_view1.ans",
|
||||||
|
"options" : { "cls" : true },
|
||||||
|
"form" : {
|
||||||
|
"0" : {
|
||||||
|
"BT5HM1" : {
|
||||||
|
"mci" : {
|
||||||
|
"HM1" : {
|
||||||
|
"items" : [ "A Clockwork Orange", "Pulp Fiction", "Goonies" ]
|
||||||
|
},
|
||||||
|
"BT5" : {
|
||||||
|
"text" : "< Back",
|
||||||
|
"submit" : [ "escape" ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"demoArtDisplay" : {
|
"demoArtDisplay" : {
|
||||||
"art" : "demo_selection_vm.ans",
|
"art" : "demo_selection_vm.ans",
|
||||||
"options" : { "cls" : true },
|
"options" : { "cls" : true },
|
||||||
|
|
Loading…
Reference in New Issue