From a18a2100eba7d185b354449fca93a68df401ecb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Ronvel?= Date: Wed, 17 Feb 2021 12:11:08 +0100 Subject: [PATCH] Add the Element#show() and Element#hide() methods, fixing the missing API (#151) --- CHANGELOG | 6 ++++++ doc/Element.md | 25 ++++++++++++++++++++++++- lib/document/Element.js | 28 ++++++++++++++++++++++++++-- lib/document/SelectList.js | 20 ++++++++++---------- lib/document/SelectListMulti.js | 20 ++++++++++---------- package.json | 2 +- sample/document/buttons-test.js | 1 + 7 files changed, 78 insertions(+), 24 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 46c3e20a..b539830b 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,4 +1,10 @@ +v1.47.2 +------- + +Add the Element#show() and Element#hide() methods, fixing the missing API (#151) + + v1.47.1 ------- diff --git a/doc/Element.md b/doc/Element.md index 6591568d..0980d30d 100644 --- a/doc/Element.md +++ b/doc/Element.md @@ -24,6 +24,8 @@ * [.topZ()](#ref.Element.topZ) * [.bottomZ()](#ref.Element.bottomZ) * [.setContent()](#ref.Element.setContent) + * [.show()](#ref.Element.show) + * [.hide()](#ref.Element.hide) * [.draw()](#ref.Element.draw) * [.redraw()](#ref.Element.redraw) * [.drawCursor()](#ref.Element.drawCursor) @@ -122,6 +124,24 @@ Set the content of this *element*. + +### .show( [dontDraw] ) + +* dontDraw `boolean` when set (default: false) the element is not redrawn (it will be made visible the next time something trigger a *redraw*) + +Turn the element visibility **on** and redraw it immediately (unless the `dontDraw` option is on). + + + + +### .hide( [dontDraw] ) + +* dontDraw `boolean` when set (default: false) the element is not redrawn (it will be hidden the next time something trigger a *redraw* on its parent) + +Turn the element visibility **off** and redraw its parent immediately (unless the `dontDraw` option is on). + + + ### .draw() @@ -132,7 +152,10 @@ It is called internally/automatically, userland code should not be bothered with -### .redraw() +### .redraw( [force] ) + +* force `boolean` **INTERNAL** when set (default: false) the element is *redrawn* even if it is hidden: i.e. the parent is redrawn, + it would effectively clear an hidden element from its parent Redraw the *element*. While `.draw()` is used when drawing the current *element* is enough (the *element* has not moved, and has not been resized), diff --git a/lib/document/Element.js b/lib/document/Element.js index 6d326fe7..2c183ae1 100644 --- a/lib/document/Element.js +++ b/lib/document/Element.js @@ -156,6 +156,29 @@ Element.prototype.destroy = function( isSubDestroy = false , noDraw = false ) { +Element.prototype.show = function( noDraw = false ) { + if ( ! this.hidden ) { return this ; } + this.hidden = false ; + if ( ! noDraw ) { this.redraw() ; } + return this ; +} ; + + + +Element.prototype.hide = function( noDraw = false ) { + if ( this.hidden ) { return this ; } + this.hidden = true ; + + if ( ! noDraw ) { + // .redraw() with the 'force' option on, because .redraw() does nothing if the element is hidden, but here we want to clear it from its parent + this.redraw( true ) ; + } + + return this ; +} ; + + + // Clear the Element, destroy all children Element.prototype.clear = function() { var i , iMax ; @@ -617,8 +640,9 @@ Element.prototype.draw = function( isInitialInlineDraw = false ) { // If it has, then it is necessary to draw the closest ancestor which is a container. // /!\ THIS METHOD IS WRONG: it should draw the parent container, but don't redraw any children of its children Container // /!\ Maybe rename this .outerDraw() or .parentDraw() -Element.prototype.redraw = function() { - if ( ! this.document || this.hidden ) { return this ; } +// Option 'force' redraw even if the element is hidden, in fact it is used by the .hide() method to effectively hide the element on the parent container. +Element.prototype.redraw = function( force = false ) { + if ( ! this.document || ( this.hidden && ! force ) ) { return this ; } var container = this.getParentContainer() ; diff --git a/lib/document/SelectList.js b/lib/document/SelectList.js index 3f8be303..347f5a35 100644 --- a/lib/document/SelectList.js +++ b/lib/document/SelectList.js @@ -62,16 +62,16 @@ function SelectList( options ) { ColumnMenu.call( this , options ) ; - this.show = false ; + this.showMenu = false ; this.zIndexRef = this.zIndex ; // Back-up for zIndex if ( options.value !== undefined && this.setValue( options.value , true ) ) { // .initPage() is called by .setValue() only when a correct value was found - this.toggle( this.show , options.noDraw ) ; + this.toggle( this.showMenu , options.noDraw ) ; } else { this.initPage() ; - this.toggle( this.show , options.noDraw ) ; + this.toggle( this.showMenu , options.noDraw ) ; } @@ -127,26 +127,26 @@ SelectList.prototype.destroy = function( isSubDestroy , noDraw = false ) { -SelectList.prototype.toggle = function( show = null , noDraw = false ) { +SelectList.prototype.toggle = function( showMenu = null , noDraw = false ) { var i , iMax ; - if ( show === null ) { this.show = ! this.show ; } - else { this.show = !! show ; } + if ( showMenu === null ) { this.showMenu = ! this.showMenu ; } + else { this.showMenu = !! showMenu ; } for ( i = 1 , iMax = this.buttons.length ; i < iMax ; i ++ ) { - this.buttons[ i ].hidden = ! this.show ; + this.buttons[ i ].hidden = ! this.showMenu ; } // Adjust outputHeight, to avoid the list to be clickable when reduced - this.outputHeight = this.show ? this.pageHeight : 1 ; + this.outputHeight = this.showMenu ? this.pageHeight : 1 ; - if ( this.show ) { this.topZ() ; } + if ( this.showMenu ) { this.topZ() ; } else { this.restoreZ() ; } // Return now if noDraw is set, bypassing both drawing and focus if ( noDraw ) { return ; } - if ( show ) { + if ( showMenu ) { for ( i = 1 , iMax = this.buttons.length ; i < iMax ; i ++ ) { if ( this.buttons[ i ].value === this.value ) { this.document.giveFocusTo( this.buttons[ i ] ) ; diff --git a/lib/document/SelectListMulti.js b/lib/document/SelectListMulti.js index 1e10a60c..76fdfbfb 100644 --- a/lib/document/SelectListMulti.js +++ b/lib/document/SelectListMulti.js @@ -62,11 +62,11 @@ function SelectListMulti( options ) { ColumnMenuMulti.call( this , options ) ; - this.show = false ; + this.showMenu = false ; this.zIndexRef = this.zIndex ; // Back-up for zIndex this.initPage() ; - this.toggle( this.show , options.noDraw ) ; + this.toggle( this.showMenu , options.noDraw ) ; this.onClickOut = this.onClickOut.bind( this ) ; @@ -120,20 +120,20 @@ SelectListMulti.prototype.destroy = function( isSubDestroy , noDraw = false ) { -SelectListMulti.prototype.toggle = function( show = null , noDraw = false ) { +SelectListMulti.prototype.toggle = function( showMenu = null , noDraw = false ) { var i , iMax ; - if ( show === null ) { this.show = ! this.show ; } - else { this.show = !! show ; } + if ( showMenu === null ) { this.showMenu = ! this.showMenu ; } + else { this.showMenu = !! showMenu ; } for ( i = 1 , iMax = this.buttons.length ; i < iMax ; i ++ ) { - this.buttons[ i ].hidden = ! this.show ; + this.buttons[ i ].hidden = ! this.showMenu ; } // Adjust outputHeight, to avoid the list to be clickable when reduced - this.outputHeight = this.show ? this.pageHeight : 1 ; + this.outputHeight = this.showMenu ? this.pageHeight : 1 ; - if ( this.show ) { this.topZ() ; } + if ( this.showMenu ) { this.topZ() ; } else { this.restoreZ() ; } // Return now if noDraw is set, bypassing both drawing and focus @@ -158,7 +158,7 @@ SelectListMulti.prototype.onButtonSubmit = function( buttonValue , action , butt this.toggle() ; // Submit when reducing - if ( ! this.show ) { + if ( ! this.showMenu ) { this.emit( 'submit' , this.value , action , this ) ; } break ; @@ -170,7 +170,7 @@ SelectListMulti.prototype.onButtonSubmit = function( buttonValue , action , butt SelectListMulti.prototype.onClickOut = function() { - if ( this.show ) { + if ( this.showMenu ) { this.toggle( false ) ; // We also submit when the menu is closed on click out this.emit( 'submit' , this.value , undefined , this ) ; diff --git a/package.json b/package.json index a5937937..c87060e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "terminal-kit", - "version": "1.47.1", + "version": "1.47.2", "description": "256 colors, keys and mouse, input field, progress bars, screen buffer (including 32-bit composition and image loading), text buffer, and many more... Whether you just need colors and styles, build a simple interactive command line tool or a complexe terminal app: this is the absolute terminal lib for Node.js!", "main": "lib/termkit.js", "directories": { diff --git a/sample/document/buttons-test.js b/sample/document/buttons-test.js index b339b8b1..8b862cfd 100755 --- a/sample/document/buttons-test.js +++ b/sample/document/buttons-test.js @@ -124,6 +124,7 @@ function onBlinked( value , action ) { function onToggle( value ) { term.saveCursor() ; term.moveTo.styleReset.eraseLine( 1 , 22 , 'Toggled #%i: %J\n' , counter ++ , value ) ; + //if ( value ) { button1.hide() ; } else { button1.show() ; } term.restoreCursor() ; }