Submenu: WIP (#151)

Author: cronvel

lib/document/BaseMenu.js

@@ -62,7 +62,9 @@ function BaseMenu( options = {} ) {
 
 	// Submenu
 	this.hasSubmenu = !! options.submenu ;
+	this.isSubmenu = !! options.isSubmenu ;
 	this.submenu = null ;	// A child (column) menu
+	this.submenuParentButton = null ;	// The button that opened the submenu
 	this.submenuOptions = null ;
 
 	if ( this.hasSubmenu ) {
@@ -324,8 +326,18 @@ BaseMenu.prototype.onButtonSubmit = function( buttonValue , action , button ) {
 			this.nextPage() ;
 			break ;
 		default :
-			if ( this.hasSubmenu && this.submenuOptions.openOn === 'submit' ) { this.openSubmenu( button.value , button ) ; }
-			this.emit( 'submit' , buttonValue , action , this ) ;
+			if ( this.hasSubmenu && button.def.items ) {
+				if ( this.submenuOptions.openOn === 'parentSubmit' ) {
+					this.openSubmenu( button.value , button ) ;
+				}
+				
+				if ( this.submenu ) {
+					this.document.giveFocusTo( this.submenu ) ;
+				}
+			}
+			else {
+				this.emit( 'submit' , buttonValue , action , this ) ;
+			}
 	}
 } ;
 
@@ -337,8 +349,14 @@ BaseMenu.prototype.onButtonBlinked = function( buttonValue , action , button ) {
 		case 'nextPage' :
 			break ;
 		default :
-			if ( this.hasSubmenu && this.submenuOptions.openOn === 'blinked' ) { this.openSubmenu( button.value , button ) ; }
-			this.emit( 'blinked' , buttonValue , action , this ) ;
+			if ( this.hasSubmenu && button.def.items ) {
+				if ( this.submenuOptions.openOn === 'parentBlinked' ) {
+					this.openSubmenu( button.value , button ) ;
+				}
+			}
+			else {
+				this.emit( 'blinked' , buttonValue , action , this ) ;
+			}
 	}
 } ;
 
@@ -350,7 +368,10 @@ BaseMenu.prototype.onButtonFocus = function( focus , type , button ) {
 		case 'nextPage' :
 			break ;
 		default :
-			if ( this.hasSubmenu && this.submenuOptions.openOn === 'focus' ) { this.openSubmenu( button.value , button ) ; }
+			if ( focus && this.hasSubmenu && button.def.items && this.submenuOptions.openOn === 'parentFocus' ) {
+				this.openSubmenu( button.value , button ) ;
+			}
+
 			this.emit( 'itemFocus' , button.value , focus , button ) ;
 	}
 } ;

lib/document/ColumnMenu.js

@@ -434,16 +434,18 @@ ColumnMenu.prototype.initPage = function( page = this.page ) {
 // Internal: .submenu( itemValue , button )
 ColumnMenu.prototype.openSubmenu = function( itemValue , button = null ) {
 	var x , y , width , height ,
-		itemDef = button ? this.pageItemsDef[ this.page ][ button.childId ] :
+		itemDef = button ? this.itemsDef.find( it => it === button.def ) :
 			this.itemsDef.find( it => it.value === itemValue ) ;
 
 	if ( ! itemDef || ! itemDef.items || ! itemDef.items.length ) { return ; }
 
 	if ( this.submenu ) {
-		if ( this.submenu.meta.fromItemDef === itemDef ) { return ; }
-		else { this.submenu.destroy() ; }
+		if ( this.submenu.def === itemDef ) { return ; }
+		else { this.closeSubmenu() ; }
 	}
 
+	this.submenuParentButton = button ;
+
 	switch ( this.submenuOptions.disposition ) {
 		case 'overwrite' :
 			x = this.outputX ;
@@ -466,7 +468,8 @@ ColumnMenu.prototype.openSubmenu = function( itemValue , button = null ) {
 	this.submenu = new ColumnMenu( Object.assign( {} , this.submenuOptions , {
 		internal: true ,
 		parent: this ,
-		meta: { fromItemDef: itemDef } ,
+		isSubmenu: true ,
+		def: itemDef ,
 		outputX: x ,
 		outputY: y ,
 		outputWidth: width ,
@@ -476,14 +479,17 @@ ColumnMenu.prototype.openSubmenu = function( itemValue , button = null ) {
 	} ) ) ;
 
 	this.redraw() ;
-	this.document.giveFocusTo( this.submenu ) ;
+	
+	if ( this.submenuOptions.focusOnOpen ) {
+		this.document.giveFocusTo( this.submenu ) ;
+	}
 
 	this.submenu.on( 'submit' , this.onSubmenuSubmit ) ;
 } ;
 
 
 
-ColumnMenu.prototype.clearSubmenu = function() {
+ColumnMenu.prototype.closeSubmenu = function() {
 	if ( ! this.submenu ) { return false ; }
 	this.submenu.destroy() ;
 	this.submenu = null ;
@@ -495,9 +501,11 @@ ColumnMenu.prototype.clearSubmenu = function() {
 ColumnMenu.prototype.onSubmenuSubmit = function( buttonValue , action , button ) {
 	button.once( 'blinked' , ( buttonValue_ , reserved , button_ ) => {
 		if ( this.submenuOptions.hideParent ) { this.children.forEach( e => e.hidden = false ) ; }
-		this.submenu.destroy() ;
-		this.document.giveFocusTo( this ) ;
-
+		if ( this.submenuOptions.closeOn === 'childSubmit' ) {
+			this.closeSubmenu() ;
+			this.document.giveFocusTo( this.submenuParentButton || this ) ;
+			//this.document.giveFocusTo( this ) ;
+		}
 		this.emit( 'blinked' , buttonValue_ , reserved , this ) ;
 	} ) ;
 

package.json

@@ -7,7 +7,7 @@
     "test": "test"
   },
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=14.0.0"
   },
   "dependencies": {
     "@cronvel/get-pixels": "^3.4.0",

sample/document/column-menu-submenu-test.js

@@ -56,11 +56,15 @@ var columnMenu = new termkit.ColumnMenu( {
 		/*
 		disposition: 'overwrite' ,
 		hideParent: true ,
-		openOn: 'blinked' ,
+		openOn: 'parentBlinked' ,
+		focusOnOpen: true ,
 		//*/
 		//*
 		disposition: 'right' ,
-		openOn: 'focus' ,
+		hideParent: false ,
+		openOn: 'parentFocus' ,
+		closeOn: 'childSubmit' ,
+		focusOnOpen: false ,
 		//*/
 	} ,
 	buttonEvenBlurAttr: { bgColor: '@dark-gray' , color: 'white' , bold: true } ,