1440 lines
44 KiB
JavaScript
1440 lines
44 KiB
JavaScript
/**
|
|
** ==============================
|
|
** O O O OOOO
|
|
** O O O O O O
|
|
** O O O O O O
|
|
** OOOO OOOO O OOO OOOO
|
|
** O O O O O O O
|
|
** O O O O O O O
|
|
** OOOO OOOO O O OOOO
|
|
** ==============================
|
|
** Dr. Stefan Bosse http://www.bsslab.de
|
|
**
|
|
** COPYRIGHT: THIS SOFTWARE, EXECUTABLE AND SOURCE CODE IS OWNED
|
|
** BY THE AUTHOR(S).
|
|
** THIS SOURCE CODE MAY NOT BE COPIED, EXTRACTED,
|
|
** MODIFIED, OR OTHERWISE USED IN A CONTEXT
|
|
** OUTSIDE OF THE SOFTWARE SYSTEM.
|
|
**
|
|
** $AUTHORS: Stefan Bosse
|
|
** $INITIAL: (C) 2006-2021 bLAB
|
|
** $CREATED: 14-08-17 by sbosse.
|
|
** $VERSION: 1.8.2
|
|
**
|
|
** $INFO:
|
|
**
|
|
** WEB GUI toolkit supporting pages using blessed/curses emulation library.
|
|
** App layout is similar to mobile application programs.
|
|
** A set of styles can defined used as default styles for various elements.
|
|
**
|
|
** type styles = {
|
|
** button?:{fg?,bg?,border?},
|
|
** checkbox?:{},
|
|
** dialog?:{fg?,bg?},
|
|
** filemanager?:{fg?,bg?,arrows?:{fg?,bg?},border?,box:{bg?,border?},
|
|
** label?:{fg?,bg?},input?:{fg?,bg?}},
|
|
** input:{fg?,bg?,border?,label?},
|
|
** keyboard?:{bg?,border?,label?:{fg,bg}},
|
|
** label:{bold?,fg?,bg?},
|
|
**
|
|
** New: App Builder from compact template
|
|
**
|
|
** Template (builder) Type Interface
|
|
** =================================
|
|
**
|
|
** (@: smybolic identifier, parameter name, or wildcard place holder, $: type macro, ?:optional, ..:more,
|
|
** st {a,b,..}: sub type of object type st)
|
|
**
|
|
** typeof @border = { type? : string = 'line'|'none'|.., fg:string is color, .. }
|
|
**
|
|
** typeof @styles = {
|
|
** button?: { fg?, bg?, border? },
|
|
** input?: { border? },
|
|
** tree?: { border? },
|
|
** ..,
|
|
** @customstyle : { .. },
|
|
** ..
|
|
** }
|
|
**
|
|
** Widget event handler:
|
|
**
|
|
** type handler = function (wname:string,wval:boolean|number|string)
|
|
** type handlerT = function (wname:string,label:string,path:string,data:{name:string,parent:node,..})
|
|
** type handlerL = function (wname:string,label:string,data:{content:string,..})
|
|
** type handler1 = function (wname:string) is check handler
|
|
** type handlerp = function (pname:string) is page handler
|
|
** type handlerd = function (wname:string,data:*)
|
|
**
|
|
** Widget styles and attributes:
|
|
**
|
|
** $pos = top:number | left:number | right:number | center:boolean
|
|
** $geom = width:number | hight:number
|
|
** $cstyle = fg:string | bg:string
|
|
**
|
|
** Widget descriptor types:
|
|
**
|
|
** type button = { type='button', $pos?, $geom?, content:string, $cstyle, .. , onclick?:handler }
|
|
** type label = { type='label', $pos?, $geom?,content:string, .. }
|
|
** type info = { type='info', $pos?, $geom?, label:string, value?:string, .. }
|
|
** type checkbox = { type='checkbox', $pos?, $geom?, text:string, value:string, .. , onclick?:handler, on?: on {check,uncheck} }
|
|
** type input = { type='input', $pos, $geom?, wrap?:boolean, label:string, value?:string, onchange?:handler, .. }
|
|
** type radiobutton = { type='radiobutton', $pos, $geom?, .. }
|
|
** type group = { type='group', name?:string, @but1:radiobutton, @but2:radiobutton, .., onclick?:handler }
|
|
** type tree = { type='tree', $pos, $geom, .. , onclick?:handlerT }
|
|
** type list = { type='list', depth?:number, $pos, $geom, .. , onclick?:handlerL }
|
|
**
|
|
** type widget = button | label | checkbox | input | group | tree | ..
|
|
**
|
|
** The builder creates widget objects from descriptors that can be accessed by App.pages.@name.
|
|
**
|
|
** method (object of info).update (string)
|
|
** method (object of tree).update ({})
|
|
** method (object of info).update (string)
|
|
** method (object of info).setValue (string)
|
|
** method (object of input).getValue ()
|
|
** method (object of widget).setStyle ({})
|
|
**
|
|
** type on = { click?:handler|string, onclick?:handler|string,
|
|
** check?:handler1, uncheck?:handler1,
|
|
** keypress:{key: string | string [], handler: fucntion (@char,@key)] [],
|
|
** selected?:handlerd, change?:handler,
|
|
** show?:handlerp, hide?: handlerp }
|
|
**
|
|
** $pageparam = next:string | prev:string | on: on {show,hide} | show:function | hide:function
|
|
** $widget = @name : widget
|
|
**
|
|
** typeof content = {
|
|
** pages : { main: { $widget, $widget, .. , $pageparam, $pageparam, .. }, @p2: { @widget, .. }, .. }
|
|
** info?: {}
|
|
** }
|
|
**
|
|
** App creation (w/o builder, programmatically):
|
|
** ============================================
|
|
**
|
|
** var ui = App.App({
|
|
** pages : number,
|
|
** styles : {},
|
|
** terminal: '',
|
|
** title : string
|
|
** });
|
|
** ui.pages[index]={
|
|
** id$ : ui.<constructor>(options),
|
|
** }
|
|
** ui.pages[index]["$id"].on(event,handler)
|
|
**
|
|
** ui.start(main?)
|
|
**
|
|
** Supported Widget Constructors
|
|
** =============================
|
|
**
|
|
** Button: button({left,right,top,width,height:number,content:string, action:function|navigation string, styles,....}) -> button
|
|
** Chat Dialog: chat({left,right,top,width,height:number,prompt:string,label:string,bot:style,user:style, styles,.. }}
|
|
** Checkbox: checkbox(left,right,top,width,height:number,content:string, value:boolean, action:function, styles,....})
|
|
** Info: info({left,right,top,bottom,width,height:number,multiline:boolean,wrap:boolean,label:string, styles,.. }}
|
|
** Input: input({left,right,top,width,height:number,multiline:boolean,wrap:boolean,label:string, styles,..}}
|
|
** Label: label({left,right,top,center:boolean, width,height:number,content:string, styles,..}}
|
|
** Radiobut: radiobutton(left,right,top,width,height:number,content:string, group:number|string, value:boolean, action:function, styles,....})
|
|
** Status: status({left,right,top,bottom,width,height:number,multiline:boolean,wrap:boolean,label:string, styles,..}}
|
|
** Text: text({left,right,top,width,height:number,multiline:boolean,wrap:boolean,scrollable:boolean,label:string, styles,..}}
|
|
** Terminal: terminal({left,right,top,width,height:number,prompt:string,label:string, styles,..}}
|
|
**
|
|
** type styles = {fg:string,bg:string, bold:boolean, ..}
|
|
** type navigation string = 'prev'|'next'|pageid
|
|
**
|
|
** type checkbox'event = select:boolean
|
|
** type radiobutton'event = select:boolean , check:object
|
|
** type chat'event = eval:string
|
|
**
|
|
** methods chat = { message:function (string), ask:function(string,options,callback), }
|
|
** methods input = { setValue:function (string), getValue:function(), }
|
|
**
|
|
**
|
|
** ---
|
|
**
|
|
** Examples (with template builder, see also ui/app/demo2.js)
|
|
**
|
|
** AppApp = Require('ui/app/app');
|
|
** App = AppApp.App({});
|
|
** App.init();
|
|
** styles = {}
|
|
** content = { pages : {
|
|
** main: {
|
|
** lab1: {type:'label', center:true, top:1, content:'Menu'},
|
|
** but1: {type:'button', left:1, content:'QAppT', bg:'red', onclick: process.exit },
|
|
** but2: {type:'button', right:1, content:'SETUP', onclick:'setup' },
|
|
** },
|
|
** setup: {
|
|
** lab1: {type:'label', center:true, top:1, content:'Menu'},
|
|
** but1: {type:'button', left:1, content:'<< MENU', onclick:'main' },
|
|
** }
|
|
** }}
|
|
** App.builder(styles,content)
|
|
** App.start()
|
|
**
|
|
** ----------------------
|
|
**
|
|
** Examples (without builder, programmatically):
|
|
**
|
|
** ui=AppApp.App({
|
|
** pages:7,
|
|
** terminal:this.options.terminal||'xterm-color',
|
|
** title:'JAMAPP (C) Stefan Bosse'
|
|
** });
|
|
** ui.init();
|
|
** page=ui.pages[1];
|
|
** page.b1= ui.button({left:1,content:'QAppT'});
|
|
** page.b1.on('press', function(data) {
|
|
** return process.exit(0);
|
|
** });
|
|
** page.l1 = ui.label({center:true,top:1,content:'Menu'});
|
|
** page.b2 = ui.button({right:1,content:'SETUP'});
|
|
** page.b2.on('press', function(data) {
|
|
** ui.pages.hide(1);
|
|
** ui.pages.show(2);
|
|
** });
|
|
** // or
|
|
** page.b2.on('press', function(data) {
|
|
** ui.pages.hide();
|
|
** ui.pages.show('next');
|
|
** });
|
|
**
|
|
** page.l2 = ui.label({center:true,top:1,content:'Setup'});
|
|
** page.i1 = ui.input({top:4,left:4,label:'Broker IP Address',value:'localhost'});
|
|
** page.i1.setValue('127.0.0.1');
|
|
** url=page.i1.getValue();
|
|
**
|
|
** page.i4 = ui.info({top:16,left:4,width:ui.screen.width-8,label:'JAM Status'});
|
|
**
|
|
** page.l2 = ui.label({left:4,top:16,content:'Protocol'});
|
|
** page.ch21 = ui.radiobutton({left:4,top:18,text:'HTTP',value:false,group:2});
|
|
** page.ch22 = ui.radiobutton({left:4,top:20,text:'TCPIP',value:true,group:2});
|
|
**
|
|
** page.l3 = ui.label({left:4,top:22,content:'Messages'});
|
|
** page.ch31 = ui.checkbox({left:4,top:24,text:'Agent ID',value:false});
|
|
** page.ch32 = ui.checkbox({left:4,top:26,text:'Parent ID',value:false});
|
|
**
|
|
** $ENDOFINFO
|
|
*/
|
|
/** Main User Interface providing a multiple page view
|
|
* Events: pages -> 'load'
|
|
* typeof options = {pages,terminal,forceCursor,styles}
|
|
*/
|
|
|
|
/* GUI => ui.js => blessed emulation */
|
|
|
|
var options = {
|
|
version: '1.8.2'
|
|
}
|
|
|
|
/** pre-defined layouts based on screen rows and columns
|
|
*
|
|
*/
|
|
var LAYOUT = {
|
|
SMALL:'small',
|
|
NORMAL:'normal',
|
|
LARGE:'large',
|
|
XLARGE:'xlarge',
|
|
PORTRAIT:'portrait',
|
|
LANDSCAPE:'landscape',
|
|
from: function (screen) {
|
|
if (screen.width>screen.height) {
|
|
if(screen.width<70) return {small:true,landscape:true};
|
|
else return {normal:true,landscape:true};
|
|
} else {
|
|
if(screen.height<70) return {small:true,portrait:true};
|
|
else return {normal:true,portrait:true};
|
|
}
|
|
}
|
|
}
|
|
|
|
function App(options) {
|
|
var self=this,i;
|
|
if (!(this instanceof App)) {
|
|
return new App(options);
|
|
}
|
|
this.options=options||{};
|
|
if (!this.options.pages) this.options.pages=1;
|
|
if (!this.options.terminal) {
|
|
this.options.terminal=
|
|
(process.platform === 'win32' ? 'windows-ansi' : 'xterm-color');
|
|
}
|
|
if (this.options.forceCursor==undefined) this.options.forceCursor=true;
|
|
|
|
this.page = 1;
|
|
this.pages = []; // Pages
|
|
this.static = {}; // Top-level widegts visible on all pages
|
|
this.styles=options.styles||{};
|
|
|
|
for(i=0;i<=this.options.pages;i++) {
|
|
this.pages.push({});
|
|
}
|
|
this.pages.show = function (page) {
|
|
var thepage,p,current=self.page;
|
|
switch (page) {
|
|
case 'prev':
|
|
if (self.pages[self.page] && self.pages[self.page].prev) page=self.pages[self.page].prev;
|
|
else if (self.pages[self.page-1]) page=self.page-1;
|
|
break;
|
|
case 'next':
|
|
if (self.pages[self.page] && self.pages[self.page].next) page=self.pages[self.page].next;
|
|
else if (self.pages[self.page+1]) page=self.page+1;
|
|
break;
|
|
case 'this':
|
|
case undefined:
|
|
page=self.page; break;
|
|
}
|
|
thepage=self.pages[page];
|
|
if (self.events[page] && self.events[page]['load'])
|
|
self.events[page]['load']();
|
|
for (p in thepage) {
|
|
if (thepage[p] && thepage[p].show && !thepage[p].noshow) thepage[p].show();
|
|
}
|
|
self.screen.render();
|
|
self.page=page;
|
|
};
|
|
this.pages.hide = function (page) {
|
|
var thepage,p;
|
|
if (page=='this' || page==undefined) page=self.page;
|
|
thepage=self.pages[page];
|
|
for (p in thepage)
|
|
if (thepage[p] && thepage[p].hide) thepage[p].hide();
|
|
// hide cursor
|
|
if (self.options.terminal.indexOf('xterm') != -1 && self.options.forceCursor)
|
|
self.screen.program.hideCursor(true);
|
|
};
|
|
this.events=[];
|
|
this.pages.on = function(page,event,callback) {
|
|
if (!self.events[page]) self.events[page]=[];
|
|
self.events[page][event]=callback;
|
|
}
|
|
}
|
|
|
|
/** Button widget
|
|
* Methods: on
|
|
* Events: 'press'
|
|
* typeof @options ={
|
|
* width,content,center,left,right,top,
|
|
* fg is textcolor,bg is button color,border,
|
|
* click:function,
|
|
* action:function|string
|
|
* }
|
|
*/
|
|
App.prototype.button = function(options) {
|
|
var self=this,width=options.width;
|
|
if (Comp.obj.isString(options.width)) {
|
|
// relative value in %!
|
|
width=Comp.pervasives.int_of_string(options.width);
|
|
width=this.screen.width*width/100;
|
|
}
|
|
var obj = GUI.button({
|
|
width: options.width||(options.content.length+4),
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top||0,
|
|
height: 3,
|
|
align: 'center',
|
|
content: options.content||'?',
|
|
mouse:true,
|
|
focus:false,
|
|
border: options.border||this.getStyle('button.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('button.fg','white'),
|
|
bg: options.bg||this.getStyle('button.bg','blue'),
|
|
bold:true,
|
|
border: {
|
|
fg: this.getStyle('button.border.fg','black'),
|
|
bg: this.getStyle('button.border.bg',undefined),
|
|
},
|
|
hover: {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
// generic handler
|
|
if (options.click) obj.on('press',options.click);
|
|
// dedicated action handlers with page navigation support
|
|
if (options.action) {
|
|
switch (typeof options.action) {
|
|
case 'function': obj.on('press',options.action); break;
|
|
case 'string':
|
|
if (options.action=='next' || options.action=='prev') {
|
|
obj.on('press',function () {
|
|
if (self.pages[self.page][options.action]) {
|
|
self.pages.hide('this');
|
|
self.pages.show(self.pages[self.page][options.action]);
|
|
}
|
|
});
|
|
} else {
|
|
obj.on('press',function () {
|
|
if (self.pages[options.action]) {
|
|
self.pages.hide('this');
|
|
self.pages.show(options.action);
|
|
}
|
|
});
|
|
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
/** Chat terminal shell widget
|
|
* typeof options = {top,left,right,width,height,label:string,bot:style,user:style,fg:style,bg:style}
|
|
*/
|
|
App.prototype.chat = function(options) {
|
|
var self=this, width=options.width||(this.screen.width-(options.left*2||2));
|
|
options.scrollable=true;
|
|
options.scrollbar = {
|
|
ch: ' ',
|
|
track: {
|
|
bg: 'yellow'
|
|
},
|
|
style: {
|
|
fg: 'cyan',
|
|
inverse: true
|
|
}
|
|
};
|
|
options.mouse=true;
|
|
var obj = GUI.chat({
|
|
label: options.label||'My Text',
|
|
value: options.value||'',
|
|
//fg: 'blue',
|
|
bg: 'default',
|
|
barBg: 'default',
|
|
barFg: 'blue',
|
|
width: width,
|
|
height: options.height||8,
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top||0,
|
|
keys: true,
|
|
vi: false,
|
|
mouse: true,
|
|
inputOnFocus: true,
|
|
tags:true,
|
|
focus:true,
|
|
wrap : options.wrap,
|
|
multiline : true,
|
|
scrollbar : options.scrollbar,
|
|
scrollable : options.scrollable,
|
|
//draggable:true,
|
|
prompt:options.prompt,
|
|
border: this.getStyle('input.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('input.fg','blue'),
|
|
bg: options.bg||this.getStyle('input.bg',undefined),
|
|
user : options.user,
|
|
bot : options.bot,
|
|
border: {
|
|
fg: this.getStyle('input.border.fg','black'),
|
|
bg: this.getStyle('input.border.bg',undefined),
|
|
},
|
|
label:this.getStyle('input.label',undefined),
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
obj.on('focus',function () {
|
|
if (!self.options.keyboard) // show cursor
|
|
return self.options.terminal.indexOf('xterm')!=-1 && self.options.forceCursor?
|
|
self.screen.program._write('\x1b[?12;25h'):0;
|
|
if (!self._keyboard)
|
|
self._keyboard=self.keyboard({
|
|
width:self.screen.width<60?'100%':'80%',
|
|
height:self.layout.small?'100%':'90%',
|
|
compact:self.layout.small
|
|
});
|
|
self._keyboard.setCallback(function (v) {if (v) obj.setValue(v),obj.update();});
|
|
self._keyboard.setValue(obj.getValue());
|
|
self._keyboard.setLabel(obj.getLabel());
|
|
self._keyboard.show();
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
/** Checkbox widget
|
|
* Methods: on
|
|
* Events: 'check','uncheck'
|
|
* typeof @options ={value?,left?,right?,top?,text,hidden?}
|
|
*/
|
|
App.prototype.checkbox = function(options) {
|
|
var obj = GUI.checkbox({
|
|
checked: options.value||false,
|
|
left: options.left,
|
|
right : options.right,
|
|
top: options.top||0,
|
|
mouse: true,
|
|
inputOnFocus: true,
|
|
height: 1,
|
|
text:options.text||'empty'
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Dialog pop-up window widget
|
|
*
|
|
* typeof @options = {width,height,center?,left?,right?,top?,okButton?,cancelButton}
|
|
*/
|
|
App.prototype.dialog = function(options) {
|
|
var width=options.width,height=options.height;
|
|
if (Comp.obj.isString(options.width)) {
|
|
// relative value in %!
|
|
width=Comp.pervasives.int_of_string(options.width);
|
|
width=int(this.screen.width*width/100);
|
|
}
|
|
if (Comp.obj.isString(options.height)) {
|
|
// relative value in %!
|
|
height=Comp.pervasives.int_of_string(options.height);
|
|
height=int(this.screen.height*height/100);
|
|
}
|
|
var obj = GUI.Question({
|
|
width: width,
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top||(options.center?int(this.screen.height/2-height/2):0),
|
|
height: height,
|
|
noshow:true,
|
|
okButton : options.okButton||'Okay',
|
|
cancelButton : options.cancelButton,
|
|
style: {
|
|
bg:this.getStyle('dialog.bg','red'),
|
|
fg:this.getStyle('dialog.fg','white'),
|
|
bold:true
|
|
}
|
|
});
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** File manager widget with buttons
|
|
*
|
|
* typeof @options={fg?,bg?,parent?,border?,label?,height?,width?,top?,left?,autohide?,
|
|
* okayBotton?,cancelButton?,input?,box?,arrows?}
|
|
*/
|
|
App.prototype.fileManager = function(options) {
|
|
if (options.box) {
|
|
options.box.border=this.getStyle('filemanager.box.border',options.box.border);
|
|
options.box.bg=this.getStyle('filemanager.box.bg',options.box.bg);
|
|
options.input=this.getStyle('filemanager.input',options.input);
|
|
}
|
|
if (options.arrows) {
|
|
options.arrows.fg=this.getStyle('filemanager.arrows.fg',options.arrows.fg);
|
|
options.arrows.bg=this.getStyle('filemanager.arrows.bg',options.arrows.bg);
|
|
}
|
|
var obj = GUI.FileManager({
|
|
parent:options.parent,
|
|
border:options.border||this.getStyle('filemanager.border',{}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('filemanager.fg',undefined),
|
|
bg: options.bg||this.getStyle('filemanager.bg',undefined),
|
|
label:options.label||this.getStyle('filemanager.label',undefined),
|
|
selected: {
|
|
bg: 'blue',
|
|
fg:'white'
|
|
},
|
|
focus: {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
},
|
|
height: options.height||'half',
|
|
width: options.width||'half',
|
|
top: options.top||'center',
|
|
left: options.left||'center',
|
|
label: '%path',
|
|
cwd: options.cwd||process.env.PWD||process.env.CWD||process.env.HOME,
|
|
autohide:options.autohide,
|
|
hidden:options.hidden,
|
|
noshow:options.hidden, // no show on page load
|
|
keys: true,
|
|
vi: true,
|
|
scrollbar: {
|
|
bg: 'white',
|
|
ch: ' '
|
|
},
|
|
okayButton:options.okayButton||'OK',
|
|
cancelButton:options.cancelButton||'Cancel',
|
|
input:options.input,
|
|
arrows:options.arrows,
|
|
box:options.box,
|
|
border:this.getStyle('filemanager.border',undefined)
|
|
});
|
|
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Filter supported widget options, transform special options (click,..). Used by page builder.
|
|
*
|
|
*/
|
|
App.prototype.filterOptions = function(options,wname) {
|
|
var self=this,attr,wopts = {};
|
|
for (attr in options) {
|
|
switch (attr) {
|
|
case 'type':
|
|
case 'index':
|
|
break;
|
|
case 'on':
|
|
switch (options.type) {
|
|
case 'button' :
|
|
if (options.on.click && typeof options.on.click == 'function')
|
|
wopts.click=function () { options[attr](wname) };
|
|
if (options.on.onclick && typeof options.on.onclick == 'function')
|
|
wopts.click=function () { options[attr](wname) };
|
|
break;
|
|
}
|
|
break;
|
|
case 'click':
|
|
case 'onclick':
|
|
switch (options.type) {
|
|
case 'button' :
|
|
if (typeof options[attr] == 'string') // Its a page destination; show new page
|
|
wopts.click=function () {
|
|
if (!self.pages[options[attr]]) return;
|
|
self.pages.hide('this');
|
|
self.pages.show(options[attr]);
|
|
};
|
|
else
|
|
wopts.click=options[attr];
|
|
break;
|
|
}
|
|
break;
|
|
default:
|
|
wopts[attr]=options[attr];
|
|
}
|
|
}
|
|
return wopts;
|
|
}
|
|
|
|
/** getStyle
|
|
*
|
|
*/
|
|
App.prototype.getStyle = function(attr,def) {
|
|
var path=attr.split('.'),elem,style=this.styles;
|
|
while(path.length && style) {
|
|
elem=path.shift();
|
|
style=style[elem];
|
|
}
|
|
return style!=undefined?style:def;
|
|
}
|
|
|
|
/** Information message widget
|
|
* Methods: setValue
|
|
* typeof options = {width,top,left,right, height,label,wrap,multiline,scrollable,color}
|
|
*/
|
|
App.prototype.info = function(options) {
|
|
var width=options.width;
|
|
if (Comp.obj.isString(options.width)) {
|
|
// relative value in %!
|
|
width=Comp.pervasives.int_of_string(options.width);
|
|
width=this.screen.width*width/100;
|
|
}
|
|
if (options.scrollable && !options.scrollbar) {
|
|
options.scrollbar = {
|
|
ch: ' ',
|
|
track: {
|
|
bg: 'yellow'
|
|
},
|
|
style: {
|
|
fg: 'cyan',
|
|
inverse: true
|
|
}
|
|
};
|
|
options.mouse=true;
|
|
}
|
|
var obj = GUI.textbox({
|
|
top : options.top||1,
|
|
left : (options.center?int(this.screen.width/2-width/2):options.left||(options.right?undefined:1)),
|
|
right : options.right,
|
|
width : options.width||(this.screen.width-(options.left*2||2)),
|
|
height: options.height||3,
|
|
label : options.label,
|
|
value : options.value||'',
|
|
focus : true,
|
|
wrap : options.wrap,
|
|
multiline : options.multiline,
|
|
scrollbar : options.scrollbar,
|
|
scrollable : options.scrollable,
|
|
mouse : options.mouse,
|
|
//draggable:true,
|
|
border: this.getStyle('info.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg:options.fg||this.getStyle('info.fg','blue'),
|
|
bg: options.bg||this.getStyle('info.bg',undefined),
|
|
label:this.getStyle('info.label',undefined),
|
|
border: {
|
|
fg: this.getStyle('info.border.fg','black'),
|
|
bg: this.getStyle('info.border.bg',undefined),
|
|
},
|
|
}
|
|
});
|
|
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Initialite APP and create screen
|
|
*
|
|
*/
|
|
App.prototype.init = function () {
|
|
var self=this;
|
|
// Information bar visible on all pages
|
|
this.screen = GUI.screen({
|
|
smartCSR: false,
|
|
terminal: this.options.terminal,
|
|
forceCursor:this.options.forceCursor,
|
|
});
|
|
this.screen.title = this.options.title||'APP (C) Stefan Bosse';
|
|
this.screen.cursor.color='red';
|
|
this.layout=LAYOUT.from(this.screen);
|
|
}
|
|
|
|
/** Input field widget
|
|
* typeof options = {top,left,right,width,height,label,value}
|
|
* method getValue, setValue
|
|
* events: {'set content'}
|
|
*/
|
|
App.prototype.input = function(options) {
|
|
var self=this, width=options.width||(this.screen.width-(options.left*2||2));
|
|
var obj = GUI.textbox({
|
|
label: options.label||'My Input',
|
|
value: options.value||'',
|
|
//fg: 'blue',
|
|
bg: 'default',
|
|
barBg: 'default',
|
|
barFg: 'blue',
|
|
width: width,
|
|
height: options.height||3,
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top,
|
|
bottom: options.bottom,
|
|
keys: true,
|
|
mouse: true,
|
|
inputOnFocus: true,
|
|
focus:true,
|
|
wrap:options.wrap,
|
|
multiline:options.multiline,
|
|
//draggable:true,
|
|
border: this.getStyle('input.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('input.fg','blue'),
|
|
bg: options.bg||this.getStyle('input.bg',undefined),
|
|
border: {
|
|
fg: this.getStyle('input.border.fg','black'),
|
|
bg: this.getStyle('input.border.bg',undefined),
|
|
},
|
|
label:this.getStyle('input.label',undefined),
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
obj.on('focus',function () {
|
|
if (!self.options.keyboard) // show cursor
|
|
return self.options.terminal.indexOf('xterm')!=-1 && self.options.forceCursor?
|
|
self.screen.program._write('\x1b[?12;25h'):0;
|
|
if (!self._keyboard)
|
|
self._keyboard=self.keyboard({
|
|
width:self.screen.width<60?'100%':'80%',
|
|
height:self.layout.small?'100%':'90%',
|
|
compact:self.layout.small
|
|
});
|
|
self._keyboard.setCallback(function (v) {if (v) obj.setValue(v),obj.update();});
|
|
self._keyboard.setValue(obj.getValue());
|
|
self._keyboard.setLabel(obj.getLabel());
|
|
self._keyboard.show();
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
/** Software keyboard widget
|
|
*
|
|
* typeof options = { left,top, width, height, compact, okayButton, cancelButton, border, }
|
|
*/
|
|
App.prototype.keyboard = function(options) {
|
|
var obj = GUI.keyboard({
|
|
parent:options.parent||this.screen,
|
|
border: 'line',
|
|
height: options.height||'half',
|
|
width: options.width||'half',
|
|
top: options.top||'center',
|
|
left: options.left||'center',
|
|
label: 'Keyboard',
|
|
hidden:options.hidden,
|
|
compact:options.compact,
|
|
okayButton:options.okayButton||'OK',
|
|
cancelButton:options.cancelButton||(this.layout.small?'CAN':'Cancel'),
|
|
delButton:'DEL',
|
|
shiftButton:'>>',
|
|
border:options.border||this.getStyle('keyboard.border',{}),
|
|
style:{
|
|
bg: options.bg||this.getStyle('keyboard.bg',undefined),
|
|
label:options.label||this.getStyle('keyboard.label',undefined),
|
|
}
|
|
});
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Generic label widget
|
|
* method setValue(string)|mutable=true
|
|
* typeof options = {width?,left?,right?,top?,center?,mutable?,content}
|
|
*/
|
|
App.prototype.label = function(options) {
|
|
var obj = GUI.text({
|
|
width: options.width||(options.content.length),
|
|
left: (options.center?int(this.screen.width/2-options.content.length/2):options.left),
|
|
right : options.right,
|
|
top: options.top||0,
|
|
height: options.height||1,
|
|
focus:false,
|
|
align: 'center',
|
|
content: options.content||'?',
|
|
style: {
|
|
bg:options.style?options.style.bg:this.getStyle('label.bg',undefined),
|
|
fg:options.style?options.style.fg:this.getStyle('label.fg',undefined),
|
|
bold:this.getStyle('label.bold',false)
|
|
}
|
|
});
|
|
if (options.mutable)
|
|
obj.setValue = function (content) {
|
|
obj.setContent('');
|
|
obj.position.left=(options.center?int(this.screen.width/2-content.length/2):options.left);
|
|
obj.setContent(content);
|
|
};
|
|
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Generic list navigator widget with scrollbar
|
|
* typeof options = {top,left,width,height,label}
|
|
* method set(data:object|array)
|
|
*/
|
|
App.prototype.list = function(options) {
|
|
var obj = GUI.list({
|
|
top: options.top,
|
|
left: options.left,
|
|
width: options.width||(this.screen.width-options.left*2),
|
|
height: options.height||(this.screen.height-options.top-4),
|
|
label: options.label||'Log',
|
|
focus:true,
|
|
mouse:true,
|
|
keys:true,
|
|
arrows:options.arrows,
|
|
border: this.getStyle('list.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
bg: options.bg||this.getStyle('list.bg',undefined),
|
|
selected:options.selected||{fg:'white',bg:'red',bold:true},
|
|
item:options.item||{bold:true},
|
|
border: {
|
|
fg: this.getStyle('list.border.fg','black')
|
|
},
|
|
label:this.getStyle('list.label',undefined),
|
|
hover: {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
},
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
obj.set = obj.update = function (data) {
|
|
var p,items=[];
|
|
obj.clearItems();
|
|
if (Comp.obj.isArray(data)) items=data;
|
|
else for (p in data) {
|
|
items.push(p);
|
|
}
|
|
obj.setItems(items);
|
|
obj.screen.render();
|
|
}
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Log message widget with scrollbar
|
|
* typeof options = {left,top,width,height,label,scrollback,..}
|
|
*/
|
|
App.prototype.log = function(options) {
|
|
if (options.top == undefined) options.top=2;
|
|
if (options.left == undefined && options.right==undefined) options.left=1;
|
|
var obj = GUI.log({
|
|
top: options.top,
|
|
left: options.left,
|
|
right: options.right,
|
|
width: options.width||(this.screen.width-options.left*2),
|
|
height: options.height||(this.screen.height-options.top-4),
|
|
label: options.label||'Log',
|
|
mouse:true,
|
|
keys:true,
|
|
scrollback:options.scrollback||100,
|
|
border: this.getStyle('log.border',{
|
|
type: 'line'
|
|
}),
|
|
scrollbar: {
|
|
ch: ' ',
|
|
track: {
|
|
bg: 'yellow'
|
|
},
|
|
style: {
|
|
fg: 'cyan',
|
|
inverse: true
|
|
}
|
|
},
|
|
alwaysScroll:true,
|
|
scrollOnInput:true,
|
|
style: {
|
|
fg: options.fg||this.getStyle('log.fg','white'),
|
|
bg: options.bg||this.getStyle('log.bg','black'),
|
|
label:this.getStyle('log.label',undefined),
|
|
border: {
|
|
fg: this.getStyle('log.border.fg','green'),
|
|
bg: this.getStyle('log.border.bg',undefined),
|
|
},
|
|
focus: {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
},
|
|
arrows:options.arrows,
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Apply post option actions (event handling)
|
|
*
|
|
*/
|
|
App.prototype.postOptions = function(options,widget,wname) {
|
|
var self=this,attr;
|
|
for (attr in options) {
|
|
switch (attr) {
|
|
case 'on':
|
|
switch (options.type) {
|
|
case 'checkbox' :
|
|
if (options.on.click && typeof options.on.click == 'function')
|
|
widget.on('check',function () { options.on.click(wname,true) }),
|
|
widget.on('uncheck',function () { options.on.click(wname,false) });
|
|
if (options.on.onclick && typeof options.on.onclick == 'function')
|
|
widget.on('check',function () { options.on.onclick(wname,true) }),
|
|
widget.on('uncheck',function () { options.on.onclick(wname,false) });
|
|
if (options.on.check && typeof options.on.check == 'function')
|
|
widget.on('check',function () { options.on.check(wname,true) });
|
|
if (options.on.uncheck && typeof options.on.uncheck == 'function')
|
|
widget.on('uncheck',function () { options.on.uncheck(wname,false) });
|
|
if (options.on.selected && typeof options.on.selected == 'function')
|
|
widget.on('selected',function (data) { options.on.uncheck(wname,data) });
|
|
if (options.on.change && typeof options.on.change == 'function')
|
|
widget.on('change',function (data) { options.on.change(wname,data) });
|
|
break;
|
|
}
|
|
break;
|
|
case 'click':
|
|
case 'onclick':
|
|
switch (options.type) {
|
|
case 'checkbox' :
|
|
if (typeof options[attr] == 'function')
|
|
widget.on('check',function () { options[attr](wname,true) }),
|
|
widget.on('uncheck',function () { options[attr](wname,false) })
|
|
break;
|
|
case 'list':
|
|
if (typeof options[attr] == 'function')
|
|
widget.on('selected',function (data) { options[attr](wname,data.content,data) })
|
|
break;
|
|
case 'tree':
|
|
if (typeof options[attr] == 'function')
|
|
widget.on('selected',function (data) {
|
|
var _data=data,path=data.name;
|
|
data=data.parent;
|
|
while(data)
|
|
path=data.name+(data.name!='/'?'/':'')+path,
|
|
data=data.parent;
|
|
options[attr](wname,_data.name,path,_data)
|
|
})
|
|
break;
|
|
}
|
|
break;
|
|
case 'onchange':
|
|
switch (options.type) {
|
|
case 'input' :
|
|
if (typeof options[attr] == 'function')
|
|
widget.on('change',function (data) {
|
|
var content = widget.getContent();
|
|
options[attr](wname,content)
|
|
})
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Radio button widget; can be grouped
|
|
*
|
|
*/
|
|
App.prototype.radiobutton = function(options) {
|
|
var obj = GUI.radiobutton({
|
|
checked: options.value||false,
|
|
left: options.left,
|
|
right : options.right,
|
|
top: options.top||0,
|
|
group:options.group,
|
|
mouse: true,
|
|
inputOnFocus: true,
|
|
height: 1,
|
|
text:options.text||'empty'
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
|
|
App.prototype.start = function (main) {
|
|
var self=this;
|
|
if (main==undefined) main=this.pages.main?'main':null;
|
|
Object.keys(this.pages).forEach(function (page) {
|
|
if (typeof self.pages[page] != 'object') return;
|
|
if (Object.keys(self.pages[page]).length==0) return;
|
|
self.pages.hide(page);
|
|
if (!main) main=page;
|
|
});
|
|
if (main) this.pages.show(main);
|
|
this.screen.render();
|
|
this.screen.program.hideCursor(this.options.terminal.indexOf('xterm') != -1 && this.options.forceCursor);
|
|
}
|
|
|
|
/** Status field widget
|
|
* typeof options = {top,bottom,left,right,width,height,label,value}
|
|
* method getvalue, setValue
|
|
* events: {'set content'}
|
|
*/
|
|
App.prototype.status = function(options) {
|
|
var self=this, width=options.width||(this.screen.width-(options.left*2||2));
|
|
var obj = GUI.textbox({
|
|
label: options.label||'My Input',
|
|
value: options.value||'',
|
|
//fg: 'blue',
|
|
bg: 'default',
|
|
barBg: 'default',
|
|
barFg: 'blue',
|
|
width: width,
|
|
height: options.height||3,
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top,
|
|
bottom: options.bottom,
|
|
wrap:options.wrap,
|
|
multiline:options.multiline,
|
|
//draggable:true,
|
|
border: this.getStyle('input.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('input.fg','blue'),
|
|
bg: options.bg||this.getStyle('input.bg',undefined),
|
|
border: {
|
|
fg: this.getStyle('input.border.fg','black'),
|
|
bg: this.getStyle('input.border.bg',undefined),
|
|
},
|
|
label:this.getStyle('input.label',undefined),
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Table widget
|
|
* typeof options = {left,right,top,width,height,label,header,cell,data,..}
|
|
*/
|
|
App.prototype.table = function(options) {
|
|
if (options.top == undefined) options.top=2;
|
|
if (options.left == undefined && options.right==undefined) options.left=1;
|
|
var obj = GUI.table({
|
|
top: options.top,
|
|
left: options.left,
|
|
right: options.right,
|
|
width: options.width||(this.screen.width-options.left*2),
|
|
height: options.height||(this.screen.height-options.top-4),
|
|
label: options.label||'Table',
|
|
data: options.data,
|
|
border: this.getStyle('table.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('log.fg','white'),
|
|
bg: options.bg||this.getStyle('log.bg','black'),
|
|
label:this.getStyle('log.label',undefined),
|
|
border: {
|
|
fg: this.getStyle('log.border.fg','green'),
|
|
bg: this.getStyle('log.border.bg',undefined),
|
|
},
|
|
header : options.header,
|
|
cell : options.cell,
|
|
focus: {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
},
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
/** Terminal shell widget
|
|
* typeof options = {top,left,right,width,height,label,header:style,cell:style}
|
|
*/
|
|
App.prototype.terminal = function(options) {
|
|
var self=this, width=options.width||(this.screen.width-(options.left*2||2));
|
|
options.scrollable=true;
|
|
if (options.scrollable && !options.scrollbar) {
|
|
options.scrollbar = {
|
|
ch: ' ',
|
|
track: {
|
|
bg: 'yellow'
|
|
},
|
|
style: {
|
|
fg: 'cyan',
|
|
inverse: true
|
|
}
|
|
};
|
|
options.mouse=true;
|
|
}
|
|
var obj = GUI.terminal({
|
|
label: options.label||'My Text',
|
|
value: options.value||'',
|
|
//fg: 'blue',
|
|
bg: 'default',
|
|
barBg: 'default',
|
|
barFg: 'blue',
|
|
width: width,
|
|
height: options.height||8,
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top||0,
|
|
keys: true,
|
|
vi: false,
|
|
mouse: true,
|
|
inputOnFocus: true,
|
|
focus:true,
|
|
wrap : options.wrap,
|
|
multiline : true,
|
|
scrollbar : options.scrollbar,
|
|
scrollable : options.scrollable,
|
|
//draggable:true,
|
|
prompt:options.prompt,
|
|
border: this.getStyle('input.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('input.fg','blue'),
|
|
bg: options.bg||this.getStyle('input.bg',undefined),
|
|
border: {
|
|
fg: this.getStyle('input.border.fg','black'),
|
|
bg: this.getStyle('input.border.bg',undefined),
|
|
},
|
|
label:this.getStyle('input.label',undefined),
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
obj.on('focus',function () {
|
|
if (!self.options.keyboard) // show cursor
|
|
return self.options.terminal.indexOf('xterm')!=-1 && self.options.forceCursor?
|
|
self.screen.program._write('\x1b[?12;25h'):0;
|
|
if (!self._keyboard)
|
|
self._keyboard=self.keyboard({
|
|
width:self.screen.width<60?'100%':'80%',
|
|
height:self.layout.small?'100%':'90%',
|
|
compact:self.layout.small
|
|
});
|
|
self._keyboard.setCallback(function (v) {if (v) obj.setValue(v),obj.update();});
|
|
self._keyboard.setValue(obj.getValue());
|
|
self._keyboard.setLabel(obj.getLabel());
|
|
self._keyboard.show();
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
/** Text field widget
|
|
* typeof options = {top,left,right,width,height,label,value}
|
|
* method getValue, setValue
|
|
* events: {'set content'}
|
|
*/
|
|
App.prototype.text = function(options) {
|
|
var self=this, width=options.width||(this.screen.width-(options.left*2||2));
|
|
if (options.scrollable && !options.scrollbar) {
|
|
options.scrollbar = {
|
|
ch: ' ',
|
|
track: {
|
|
bg: 'yellow'
|
|
},
|
|
style: {
|
|
fg: 'cyan',
|
|
inverse: true
|
|
}
|
|
};
|
|
options.mouse=true;
|
|
}
|
|
var obj = GUI.textarea({
|
|
label: options.label||'My Text',
|
|
value: options.value||'',
|
|
//fg: 'blue',
|
|
bg: 'default',
|
|
barBg: 'default',
|
|
barFg: 'blue',
|
|
width: width,
|
|
height: options.height||8,
|
|
left: (options.center?int(this.screen.width/2-width/2):options.left),
|
|
right : options.right,
|
|
top: options.top||0,
|
|
keys: true,
|
|
vi: false,
|
|
mouse: true,
|
|
inputOnFocus: true,
|
|
focus:true,
|
|
wrap : options.wrap,
|
|
multiline : true,
|
|
scrollbar : options.scrollbar,
|
|
scrollable : options.scrollable,
|
|
//draggable:true,
|
|
border: this.getStyle('input.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
fg: options.fg||this.getStyle('input.fg','blue'),
|
|
bg: options.bg||this.getStyle('input.bg',undefined),
|
|
border: {
|
|
fg: this.getStyle('input.border.fg','black'),
|
|
bg: this.getStyle('input.border.bg',undefined),
|
|
},
|
|
label:this.getStyle('input.label',undefined),
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
obj.noshow=options.hidden;
|
|
this.screen.append(obj);
|
|
obj.on('focus',function () {
|
|
if (!self.options.keyboard) // show cursor
|
|
return self.options.terminal.indexOf('xterm')!=-1 && self.options.forceCursor?
|
|
self.screen.program._write('\x1b[?12;25h'):0;
|
|
if (!self._keyboard)
|
|
self._keyboard=self.keyboard({
|
|
width:self.screen.width<60?'100%':'80%',
|
|
height:self.layout.small?'100%':'90%',
|
|
compact:self.layout.small
|
|
});
|
|
self._keyboard.setCallback(function (v) {if (v) obj.setValue(v),obj.update();});
|
|
self._keyboard.setValue(obj.getValue());
|
|
self._keyboard.setLabel(obj.getLabel());
|
|
self._keyboard.show();
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
/** Generic data object tree navigator widget with scrollbar
|
|
* typeof options = {top,left,width,height,label,depth}
|
|
* method set(dats)/update(data)
|
|
*
|
|
* Data object can contain _update attributes (function) modifying the data content of elements
|
|
* before opening a tree branch. Root data _update must call self.update(new data)!
|
|
* Deeper _update functions have only to modify the object data passed as an argument.
|
|
* Scalar tree leafes can be updated before opening branch by a virtual object:
|
|
* {_virtual:string|number|boolean,_update:function (data) {data._value=<newval>}}
|
|
*/
|
|
|
|
App.prototype.tree = function(options) {
|
|
var obj = GUI.tree({
|
|
top: options.top,
|
|
left: options.left,
|
|
width: options.width||(this.screen.width-options.left*2),
|
|
height: options.height||(this.screen.height-options.top-4),
|
|
label: options.label||'Log',
|
|
focus:true,
|
|
arrows:options.arrows,
|
|
border: this.getStyle('tree.border',{
|
|
type: 'line'
|
|
}),
|
|
style: {
|
|
bold:true,
|
|
border: {
|
|
fg: this.getStyle('tree.border.fg','black')
|
|
},
|
|
label:this.getStyle('tree.label',undefined),
|
|
hover: {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
},
|
|
focus : {
|
|
border: {
|
|
fg: 'red'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
function makeleaf (element,reference,data) {
|
|
var content,children,name,funpat,isfun,p;
|
|
children={};
|
|
name = element.toString();
|
|
funpat = /function[\s0-9a-zA-Z_$]*\(/i;
|
|
isfun=Comp.obj.isFunction(element)||funpat.test(name);
|
|
if (isfun) {
|
|
element=Comp.string.sub(name,0,name.indexOf('{'));
|
|
}
|
|
if (!isfun || (isfun && options.showfun)) {
|
|
children[element]={};
|
|
content={children : children,reference:reference,data:data};
|
|
}
|
|
return content;
|
|
}
|
|
function maketree (element,reference) {
|
|
var content,children,p;
|
|
children={};
|
|
if (element && (Comp.obj.isObject(element) || Comp.obj.isArray(element))) {
|
|
// console.log(element)
|
|
if (element._update != undefined) element._update(element);
|
|
if (element._value != undefined) return makeleaf(element._value,_,element);
|
|
for (p in element) {
|
|
if (p != '_update')
|
|
children[p]={};
|
|
}
|
|
content={
|
|
children : children,
|
|
data : element
|
|
}
|
|
} else if (element != undefined) {
|
|
return makeleaf(element,reference);
|
|
} else {
|
|
children[element]={};
|
|
content={children : children};
|
|
}
|
|
return content;
|
|
};
|
|
obj.noshow=options.hidden;
|
|
// Create sub-trees
|
|
obj.on('preselect',function(node){
|
|
var content,children,element,data,name;
|
|
if (node.name != '/' && !node.extended) {
|
|
// Io.out(node.extended);
|
|
data = node.data;
|
|
if (data != none && (Comp.obj.isObject(data) || Comp.obj.isArray(data))) {
|
|
node.children = {};
|
|
if (Comp.obj.isArray(data) && Comp.array.empty(data) && Comp.hashtbl.empty(data)) {
|
|
node.children={'[]' : {}};
|
|
} else {
|
|
if (data._update != undefined) data._update(data);
|
|
if (data._value != undefined) return node.children=makeleaf(data._value,_,data).children;
|
|
for (var p in data) {
|
|
if (p != '_update') {
|
|
element = data[p];
|
|
content=maketree(element,data);
|
|
if (content) node.children[p]=content;
|
|
}
|
|
}
|
|
}
|
|
} else if (data == none && node.reference) {
|
|
node.children = {};
|
|
element=node.reference[node.name];
|
|
name=element.toString();
|
|
var funpat = /function[\s0-9a-zA-Z_$]*\(/i;
|
|
var isfun=Comp.obj.isFunction(element)||funpat.test(name);
|
|
if (isfun) {
|
|
element=Comp.string.sub(name,0,name.indexOf('{'));
|
|
}
|
|
node.children[element]={};
|
|
}
|
|
} else if (node.name == '/' && node.extended) {
|
|
if (node.data && node.data._update) {
|
|
node.data._update()
|
|
}
|
|
}
|
|
});
|
|
obj.set = obj.update = function (data) {
|
|
obj.DATA = {
|
|
name:'/',
|
|
extended:true,
|
|
children: {},
|
|
data:data,
|
|
};
|
|
for (var p in data) {
|
|
var element=data[p];
|
|
var content=options.depth && options.depth==1?{}:maketree(element,data);
|
|
if (content) obj.DATA.children[p]=content;
|
|
}
|
|
obj.setData(obj.DATA);
|
|
};
|
|
obj.DATA = {
|
|
name:'/',
|
|
extended:true,
|
|
children: {},
|
|
};
|
|
obj.setData(obj.DATA);
|
|
this.screen.append(obj);
|
|
return obj;
|
|
}
|
|
|
|
|
|
// App App using GUI (blessed emu)
|
|
|
|
UI = {
|
|
options:options,
|
|
LAYOUT:LAYOUT,
|
|
UI:App
|
|
}
|