Skip to content

Commit

Permalink
Form minor refacto, preparing multi-line TextInput
Browse files Browse the repository at this point in the history
  • Loading branch information
Cédric Ronvel committed Aug 17, 2018
1 parent 1d6d25c commit 1f59bca
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 44 deletions.
89 changes: 46 additions & 43 deletions lib/document/Form.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,9 @@ function Form( options = {} ) {
Element.call( this , options ) ;

this.submitValue = null ;

this.textInputsDef = options.textInputs || [] ;

// /!\ options.textInputs is only use for backward compatibility, and will be removed later (writing this on 17/08/18)
this.inputsDef = options.inputs || options.textInputs || [] ;
this.textInputs = [] ;
this.buttonsDef = options.buttons || [] ;
this.buttons = [] ;
Expand Down Expand Up @@ -113,39 +114,39 @@ Form.prototype.textInputKeyBindings = {

// Create TextInput and Button automatically
Form.prototype.initChildren = function initChildren() {
var i , iMax ,
labelMaxLength = 0 , label ,
buttonsTextLength = 0 , buttonSpacing = 0 , buttonOffsetX , buttonOffsetY ;


// TextInput part
iMax = this.textInputsDef.length ;
var labelMaxWidth = 0 ,
offsetX = 0 , offsetY = 0 ,
buttonsTextWidth = 0 , buttonSpacing = 0 ;

for ( i = 0 ; i < iMax ; i ++ ) {
if ( this.textInputsDef[ i ].label.length > labelMaxLength ) { labelMaxLength = this.textInputsDef[ i ].label.length ; }
}
this.inputsDef.forEach( def => {
def.labelWidth = Element.computeContentWidth( def.label , def.labelHasMarkup ) ;
if ( def.labelWidth > labelMaxWidth ) { labelMaxWidth = def.labelWidth ; }
} ) ;

for ( i = 0 ; i < iMax ; i ++ ) {
label = this.textInputsDef[ i ].label + ' '.repeat( labelMaxLength - this.textInputsDef[ i ].label.length ) ;
this.inputsDef.forEach( ( def , index ) => {
var label = def.label + ' '.repeat( labelMaxWidth - def.labelWidth ) ;
var height = def.height || 1 ;

this.textInputs[ i ] = new TextInput( {
this.textInputs[ index ] = new TextInput( {
parent: this ,
label: label ,
content: this.textInputsDef[ i ].content ,
key: this.textInputsDef[ i ].key ,
content: def.content ,
key: def.key ,
outputX: this.outputX ,
outputY: this.outputY + i ,
outputWidth: this.textInputsDef[ i ].outputWidth || this.textInputsDef[ i ].width || this.outputWidth ,
outputHeight: 1 ,
textAttr: this.textInputsDef[ i ].textAttr || this.textAttr ,
emptyAttr: this.textInputsDef[ i ].emptyAttr || this.emptyAttr ,
hidden: this.textInputsDef[ i ].hidden ,
labelFocusAttr: this.textInputsDef[ i ].labelFocusAttr || this.labelFocusAttr ,
labelBlurAttr: this.textInputsDef[ i ].labelBlurAttr || this.labelBlurAttr ,
outputY: this.outputY + offsetY ,
outputWidth: def.outputWidth || def.width || this.outputWidth ,
outputHeight: height ,
textAttr: def.textAttr || this.textAttr ,
emptyAttr: def.emptyAttr || this.emptyAttr ,
hidden: def.hidden ,
labelFocusAttr: def.labelFocusAttr || this.labelFocusAttr ,
labelBlurAttr: def.labelBlurAttr || this.labelBlurAttr ,
keyBindings: this.textInputKeyBindings ,
noDraw: true
} ) ;
}

offsetY += height ;
} ) ;


// Submit Button part
Expand All @@ -156,30 +157,32 @@ Form.prototype.initChildren = function initChildren() {
} ) ;
}

iMax = this.buttonsDef.length ;

for ( i = 0 ; i < iMax ; i ++ ) { buttonsTextLength += this.buttonsDef[ i ].content.length ; }
buttonSpacing = Math.floor( ( this.outputWidth - buttonsTextLength ) / ( this.buttonsDef.length + 1 ) ) ;
this.buttonsDef.forEach( def => {
def.contentWidth = Element.computeContentWidth( def.content , def.contentHasMarkup ) ;
buttonsTextWidth += def.contentWidth ;
} ) ;

buttonSpacing = Math.floor( ( this.outputWidth - buttonsTextWidth ) / ( this.buttonsDef.length + 1 ) ) ;

buttonOffsetX = buttonSpacing ;
buttonOffsetY = this.textInputsDef.length + 1 ;
offsetX = buttonSpacing ;
offsetY ++ ;

for ( i = 0 ; i < iMax ; i ++ ) {
this.buttons[ i ] = new Button( {
this.buttonsDef.forEach( ( def , index ) => {
this.buttons[ index ] = new Button( {
parent: this ,
content: this.buttonsDef[ i ].content ,
value: this.buttonsDef[ i ].value ,
outputX: this.outputX + buttonOffsetX ,
outputY: this.outputY + buttonOffsetY ,
focusAttr: this.buttonsDef[ i ].focusAttr || this.buttonFocusAttr ,
blurAttr: this.buttonsDef[ i ].blurAttr || this.buttonBlurAttr ,
content: def.content ,
value: def.value ,
outputX: this.outputX + offsetX ,
outputY: this.outputY + offsetY ,
focusAttr: def.focusAttr || this.buttonFocusAttr ,
blurAttr: def.blurAttr || this.buttonBlurAttr ,
noDraw: true
} ) ;

this.buttons[ i ].on( 'submit' , this.onButtonSubmit ) ;
this.buttons[ index ].on( 'submit' , this.onButtonSubmit ) ;

buttonOffsetX += this.buttonsDef[ i ].content.length + buttonSpacing ;
}
offsetX += def.contentWidth + buttonSpacing ;
} ) ;
} ;


Expand Down
10 changes: 9 additions & 1 deletion sample/document/form-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,13 @@ var form = new termkit.Form( {
x: 10 ,
y: 10 ,
width: 40 ,
textInputs: [
inputs: [
{
key: 'login' ,
label: 'Login: ' ,
content: '[email protected]' ,

// Validators are not yet implemented
validator: { type: 'string' }
} ,
{
Expand All @@ -78,6 +80,12 @@ var form = new termkit.Form( {
label: 'age: ' ,
validator: { type: 'string' }
} ,
{
key: 'comment' ,
label: 'comment: ' ,
height: 3 ,
validator: { type: 'string' }
} ,
] ,
buttons: [
{
Expand Down

0 comments on commit 1f59bca

Please sign in to comment.