* Work on forms
* More work on VerticalMenuView: setItems(), etc.
This commit is contained in:
parent
4f3a8ac500
commit
4234e03008
|
@ -119,6 +119,8 @@ MCIViewFactory.prototype.createFromMCI = function(mci) {
|
||||||
|
|
||||||
case 'VM' :
|
case 'VM' :
|
||||||
setOption(0, 'itemSpacing');
|
setOption(0, 'itemSpacing');
|
||||||
|
setOption(1, 'justify');
|
||||||
|
setOption(2, 'textStyle');
|
||||||
|
|
||||||
view = new VerticalMenuView(this.client, options);
|
view = new VerticalMenuView(this.client, options);
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -17,19 +17,10 @@ function MenuView(client, options) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
//// --- TESTING
|
|
||||||
options.items = [ 'Login', 'Apply', 'Logout' ];
|
|
||||||
//options.itemSpacing = 2;
|
|
||||||
//// --- TESTING
|
|
||||||
|
|
||||||
this.items = [];
|
|
||||||
if(this.options.items) {
|
if(this.options.items) {
|
||||||
this.options.items.forEach(function onItem(itemText) {
|
this.setItems(this.options.items);
|
||||||
self.items.push({
|
} else {
|
||||||
text : itemText,
|
this.items = [];
|
||||||
selected : false,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.focusedItemIndex = this.options.focusedItemIndex || 0;
|
this.focusedItemIndex = this.options.focusedItemIndex || 0;
|
||||||
|
@ -40,7 +31,23 @@ function MenuView(client, options) {
|
||||||
|
|
||||||
this.focusPrefix = this.options.focusPrefix || '';
|
this.focusPrefix = this.options.focusPrefix || '';
|
||||||
this.focusSuffix = this.options.focusSuffix || '';
|
this.focusSuffix = this.options.focusSuffix || '';
|
||||||
|
|
||||||
|
this.fillChar = miscUtil.valueWithDefault(this.options.fillChar, ' ').substr(0, 1);
|
||||||
|
this.justify = this.options.justify || 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
util.inherits(MenuView, View);
|
util.inherits(MenuView, View);
|
||||||
|
|
||||||
|
MenuView.prototype.setItems = function(items) {
|
||||||
|
var self = this;
|
||||||
|
if(items) {
|
||||||
|
this.items = []; // :TODO: better way?
|
||||||
|
items.forEach(function onItem(itemText) {
|
||||||
|
self.items.push({
|
||||||
|
text : itemText,
|
||||||
|
selected : false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
|
@ -120,16 +120,20 @@ function pad(s, len, padChar, dir) {
|
||||||
var padlen = len - s.length;
|
var padlen = len - s.length;
|
||||||
|
|
||||||
switch(dir) {
|
switch(dir) {
|
||||||
|
case 'L' :
|
||||||
case 'left' :
|
case 'left' :
|
||||||
s = new Array(padlen).join(padChar) + s;
|
s = new Array(padlen).join(padChar) + s;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 'C' :
|
||||||
|
case 'center' :
|
||||||
case 'both' :
|
case 'both' :
|
||||||
var right = Math.ceil(padlen) / 2;
|
var right = Math.ceil(padlen / 2);
|
||||||
var left = padlen - right;
|
var left = padlen - right;
|
||||||
s = new Array(left + 1).join(padChar) + s + new Array(right + 1).join(padChar);
|
s = new Array(left + 1).join(padChar) + s + new Array(right + 1).join(padChar);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 'R' :
|
||||||
case 'right' :
|
case 'right' :
|
||||||
s = s + new Array(padlen).join(padChar);
|
s = s + new Array(padlen).join(padChar);
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -20,6 +20,8 @@ function TextView(client, options) {
|
||||||
this.multiLine = this.options.multiLine || false;
|
this.multiLine = this.options.multiLine || false;
|
||||||
this.fillChar = miscUtil.valueWithDefault(this.options.fillChar, ' ').substr(0, 1);
|
this.fillChar = miscUtil.valueWithDefault(this.options.fillChar, ' ').substr(0, 1);
|
||||||
|
|
||||||
|
this.justify = this.options.justify || 'none';
|
||||||
|
|
||||||
assert(!this.multiLine); // :TODO: not yet supported
|
assert(!this.multiLine); // :TODO: not yet supported
|
||||||
|
|
||||||
if(!this.multiLine) {
|
if(!this.multiLine) {
|
||||||
|
@ -29,7 +31,7 @@ function TextView(client, options) {
|
||||||
this.setText(this.options.text || '');
|
this.setText(this.options.text || '');
|
||||||
|
|
||||||
if(this.isPasswordTextStyle) {
|
if(this.isPasswordTextStyle) {
|
||||||
this.textMaskChar = miscUtil.valueWithDefault(this.options.textMaskChar, '*').substr(0, 1);
|
this.textMaskChar = miscUtil.valueWithDefault(this.textMaskChar, '*').substr(0, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,25 @@ function VerticalMenuView(client, options) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
this.calculateDimens = function() {
|
||||||
|
if(!self.dimens || !self.dimens.width) {
|
||||||
|
var l = 0;
|
||||||
|
self.items.forEach(function onItem(item) {
|
||||||
|
if(item.text.length > l) {
|
||||||
|
l = item.text.length;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
self.dimens = self.dimens || {};
|
||||||
|
self.dimens.width = l;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!self.dimens.height) {
|
||||||
|
//this.dimens.height = self.items.length
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.calculateDimens();
|
||||||
|
|
||||||
this.cacheXPositions = function() {
|
this.cacheXPositions = function() {
|
||||||
if(self.xPositionCacheExpired) {
|
if(self.xPositionCacheExpired) {
|
||||||
var count = this.items.length;
|
var count = this.items.length;
|
||||||
|
@ -42,9 +61,12 @@ function VerticalMenuView(client, options) {
|
||||||
index === self.focusedItemIndex || item.selected ? self.getFocusColor() : self.getColor()));
|
index === self.focusedItemIndex || item.selected ? self.getFocusColor() : self.getColor()));
|
||||||
|
|
||||||
var text = strUtil.stylizeString(item.text, item.hasFocus ? self.focusTextStyle : self.textStyle);
|
var text = strUtil.stylizeString(item.text, item.hasFocus ? self.focusTextStyle : self.textStyle);
|
||||||
self.client.term.write(text); // :TODO: apply justify
|
|
||||||
|
self.client.term.write(
|
||||||
|
strUtil.pad(text, this.dimens.width, this.fillChar, this.justify));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// :TODO: move to MenuView
|
||||||
this.moveSelection = function(fromIndex, toIndex) {
|
this.moveSelection = function(fromIndex, toIndex) {
|
||||||
assert(!self.xPositionCacheExpired);
|
assert(!self.xPositionCacheExpired);
|
||||||
assert(fromIndex >= 0 && fromIndex <= self.items.length);
|
assert(fromIndex >= 0 && fromIndex <= self.items.length);
|
||||||
|
@ -67,6 +89,7 @@ VerticalMenuView.prototype.setPosition = function(pos) {
|
||||||
this.xPositionCacheExpired = true;
|
this.xPositionCacheExpired = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// :TODO: Could be moved to base with just this.cachePositions() ?
|
||||||
VerticalMenuView.prototype.redraw = function() {
|
VerticalMenuView.prototype.redraw = function() {
|
||||||
VerticalMenuView.super_.prototype.redraw.call(this);
|
VerticalMenuView.super_.prototype.redraw.call(this);
|
||||||
|
|
||||||
|
@ -107,4 +130,16 @@ VerticalMenuView.prototype.onSpecialKeyPress = function(keyName) {
|
||||||
}
|
}
|
||||||
|
|
||||||
VerticalMenuView.super_.prototype.onSpecialKeyPress.call(this, keyName);
|
VerticalMenuView.super_.prototype.onSpecialKeyPress.call(this, keyName);
|
||||||
|
};
|
||||||
|
|
||||||
|
VerticalMenuView.prototype.getViewData = function() {
|
||||||
|
return this.focusedItemIndex;
|
||||||
|
};
|
||||||
|
|
||||||
|
VerticalMenuView.prototype.setItems = function(items) {
|
||||||
|
VerticalMenuView.super_.prototype.setItems.call(this, items);
|
||||||
|
|
||||||
|
this.xPositionCacheExpired = true;
|
||||||
|
this.cacheXPositions();
|
||||||
|
this.calculateDimens();
|
||||||
};
|
};
|
|
@ -32,6 +32,8 @@ function View(client, options) {
|
||||||
this.acceptsFocus = options.acceptsFocus || false;
|
this.acceptsFocus = options.acceptsFocus || false;
|
||||||
this.acceptsInput = options.acceptsInput || false;
|
this.acceptsInput = options.acceptsInput || false;
|
||||||
|
|
||||||
|
this.submit = this.acceptsInput ? options.acceptsInput || false : false;
|
||||||
|
|
||||||
this.position = { x : 0, y : 0 };
|
this.position = { x : 0, y : 0 };
|
||||||
this.dimens = { height : 1, width : 0 };
|
this.dimens = { height : 1, width : 0 };
|
||||||
|
|
||||||
|
@ -143,4 +145,7 @@ View.prototype.onSpecialKeyPress = function(keyName) {
|
||||||
} else if(this.isSpecialKeyMapped('next', keyName)) {
|
} else if(this.isSpecialKeyMapped('next', keyName)) {
|
||||||
this.emit('action', 'next');
|
this.emit('action', 'next');
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype.getViewData = function() {
|
||||||
};
|
};
|
|
@ -8,13 +8,14 @@ var MCIViewFactory = require('./mci_view_factory.js').MCIViewFactory;
|
||||||
|
|
||||||
exports.ViewController = ViewController;
|
exports.ViewController = ViewController;
|
||||||
|
|
||||||
function ViewController(client) {
|
function ViewController(client, formId) {
|
||||||
events.EventEmitter.call(this);
|
events.EventEmitter.call(this);
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
this.client = client;
|
this.client = client;
|
||||||
this.views = {}; // map of ID -> view
|
this.views = {}; // map of ID -> view
|
||||||
|
this.formId = formId || 0;
|
||||||
|
|
||||||
this.onClientKeyPress = function(key, isSpecial) {
|
this.onClientKeyPress = function(key, isSpecial) {
|
||||||
if(isSpecial) {
|
if(isSpecial) {
|
||||||
|
@ -40,13 +41,42 @@ function ViewController(client) {
|
||||||
self.nextFocus();
|
self.nextFocus();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'accept' :
|
case 'accept' : // :TODO: consider naming this 'done'
|
||||||
// :TODO: check if id is submit, etc.
|
// :TODO: check if id is submit, etc.
|
||||||
self.nextFocus();
|
if(self.focusedView && self.focusedView.submit) {
|
||||||
|
self.submitForm();
|
||||||
|
} else {
|
||||||
|
self.nextFocus();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.submitForm = function() {
|
||||||
|
var formData = {
|
||||||
|
id : self.formId,
|
||||||
|
viewId : self.focusedView.id,
|
||||||
|
values : [],
|
||||||
|
};
|
||||||
|
|
||||||
|
var viewData;
|
||||||
|
for(var id in self.views) {
|
||||||
|
try {
|
||||||
|
viewData = self.views[id].getViewData();
|
||||||
|
if(typeof viewData !== 'undefined') {
|
||||||
|
formData.values.push({
|
||||||
|
id : id,
|
||||||
|
data : viewData,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
self.emit('submit', formData);
|
||||||
|
};
|
||||||
|
|
||||||
this.attachClientEvents();
|
this.attachClientEvents();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -149,7 +179,7 @@ ViewController.prototype.loadFromMCIMap = function(mciMap) {
|
||||||
|
|
||||||
if(view) {
|
if(view) {
|
||||||
view.on('action', self.onViewAction);
|
view.on('action', self.onViewAction);
|
||||||
self.addView(view);
|
self.addView(view); // :TODO: Needs detached
|
||||||
view.redraw(); // :TODO: This can result in double redraw() if we set focus on this item after
|
view.redraw(); // :TODO: This can result in double redraw() if we set focus on this item after
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -64,6 +64,8 @@ function entryPoint(client) {
|
||||||
//vc.getView(3).setText('New');
|
//vc.getView(3).setText('New');
|
||||||
//vc.getView(4).setText('Login');
|
//vc.getView(4).setText('Login');
|
||||||
vc.setViewOrder();
|
vc.setViewOrder();
|
||||||
|
vc.getView(1).submit = true;
|
||||||
|
vc.getView(1).setItems(['System Login', 'Apply', 'GTFO!']);
|
||||||
vc.switchFocus(1);
|
vc.switchFocus(1);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue