1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | "use strict" ;
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | const RowMenu = require( './RowMenu.js' ) ;
|
33 | const ColumnMenu = require( './ColumnMenu.js' ) ;
|
34 |
|
35 |
|
36 |
|
37 | function DropDownMenu( options ) {
|
38 |
|
39 | options = ! options ? {} : options.internal ? options : Object.create( options ) ;
|
40 | options.internal = true ;
|
41 |
|
42 | var i , iMax ;
|
43 |
|
44 | RowMenu.call( this , options ) ;
|
45 |
|
46 | this.initPage() ;
|
47 |
|
48 | this.columnMenu = null ;
|
49 | this.columnButtonFocusAttr = options.buttonFocusAttr || { bgColor: 'blue' , color: 'white' , bold: true } ;
|
50 | this.columnButtonBlurAttr = options.buttonBlurAttr || { bgColor: 'brightBlack' , color: 'white' , bold: true } ;
|
51 |
|
52 | this.onClickOut = this.onClickOut.bind( this ) ;
|
53 | this.onButtonFocus = this.onButtonFocus.bind( this ) ;
|
54 | this.onButtonSubmit = this.onButtonSubmit.bind( this ) ;
|
55 | this.onColumnMenuSubmit = this.onColumnMenuSubmit.bind( this ) ;
|
56 |
|
57 |
|
58 | this.on( 'clickOut' , this.onClickOut ) ;
|
59 |
|
60 | for ( i = 0 , iMax = this.buttons.length ; i < iMax ; i ++ ) {
|
61 | this.buttons[ i ].on( 'focus' , this.onButtonFocus ) ;
|
62 | }
|
63 |
|
64 |
|
65 | if ( this.elementType === 'DropDownMenu' && ! options.noDraw ) { this.draw() ; }
|
66 | }
|
67 |
|
68 | module.exports = DropDownMenu ;
|
69 |
|
70 | DropDownMenu.prototype = Object.create( RowMenu.prototype ) ;
|
71 | DropDownMenu.prototype.constructor = DropDownMenu ;
|
72 | DropDownMenu.prototype.elementType = 'DropDownMenu' ;
|
73 |
|
74 |
|
75 |
|
76 | DropDownMenu.prototype.destroy = function( isSubDestroy ) {
|
77 | this.off( 'clickOut' , this.onClickOut ) ;
|
78 |
|
79 | RowMenu.prototype.destroy.call( this , isSubDestroy ) ;
|
80 | } ;
|
81 |
|
82 |
|
83 |
|
84 | DropDownMenu.prototype.keyBindings = {
|
85 | LEFT: 'previous' ,
|
86 | RIGHT: 'next' ,
|
87 | ESCAPE: 'clearColumnMenu' ,
|
88 | UP: 'clearColumnMenu' ,
|
89 | DOWN: 'dropDown' ,
|
90 | ENTER: 'submit' ,
|
91 | KP_ENTER: 'submit' ,
|
92 | ALT_ENTER: 'submit'
|
93 | } ;
|
94 |
|
95 |
|
96 |
|
97 | DropDownMenu.prototype.dropDown = function( index , x , y , submittedButtonValue , submittedButtonAction ) {
|
98 | var itemsDef = this.itemsDef[ index ].items ;
|
99 |
|
100 |
|
101 |
|
102 | if ( this.columnMenu ) {
|
103 |
|
104 | if ( this.columnMenu.index === index ) { return ; }
|
105 | this.clearColumnMenu() ;
|
106 | }
|
107 |
|
108 |
|
109 | if ( ! itemsDef || ! itemsDef.length ) {
|
110 | if ( submittedButtonValue && this.itemsDef[ index ].topSubmit ) {
|
111 |
|
112 | this.emit( 'submit' , submittedButtonValue , submittedButtonAction , this ) ;
|
113 | }
|
114 |
|
115 | return ;
|
116 | }
|
117 |
|
118 |
|
119 | this.columnMenu = new ColumnMenu( {
|
120 | internal: true ,
|
121 | parent: this.children[ index ] ,
|
122 | x: x ,
|
123 | y: y ,
|
124 | width: this.outputWidth - x ,
|
125 | leftPadding: ' ' ,
|
126 | rightPadding: ' ' ,
|
127 | items: itemsDef ,
|
128 | buttonFocusAttr: this.columnButtonFocusAttr ,
|
129 | buttonBlurAttr: this.columnButtonBlurAttr
|
130 | } ) ;
|
131 |
|
132 | this.columnMenu.on( 'submit' , this.onColumnMenuSubmit ) ;
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | } ;
|
140 |
|
141 |
|
142 |
|
143 | DropDownMenu.prototype.clearColumnMenu = function() {
|
144 | if ( ! this.columnMenu ) { return false ; }
|
145 | this.columnMenu.destroy() ;
|
146 | this.columnMenu = null ;
|
147 | return true ;
|
148 | } ;
|
149 |
|
150 |
|
151 |
|
152 | DropDownMenu.prototype.onClickOut = function( buttonValue , data , button ) {
|
153 | if ( this.columnMenu ) {
|
154 | this.clearColumnMenu() ;
|
155 | }
|
156 | } ;
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 | DropDownMenu.prototype.onButtonSubmit = function( buttonValue , action , button ) {
|
171 | this.dropDown( button.childId , button.outputX , button.outputY + 1 , buttonValue , action ) ;
|
172 | } ;
|
173 |
|
174 |
|
175 |
|
176 | DropDownMenu.prototype.onButtonFocus = function( focus , type , button ) {
|
177 | if ( focus ) { this.dropDown( button.childId , button.outputX , button.outputY + 1 ) ; }
|
178 | } ;
|
179 |
|
180 |
|
181 |
|
182 | DropDownMenu.prototype.onColumnMenuSubmit = function( buttonValue , action , button ) {
|
183 | this.emit( 'submit' , buttonValue , action , this ) ;
|
184 | } ;
|
185 |
|
186 |
|
187 |
|
188 | DropDownMenu.prototype.onKey = function( key , trash , data ) {
|
189 | switch( this.keyBindings[ key ] ) {
|
190 | case 'previous' :
|
191 | this.focusChild = this.focusPreviousChild() ;
|
192 |
|
193 | break ;
|
194 | case 'next' :
|
195 | this.focusChild = this.focusNextChild() ;
|
196 |
|
197 | break ;
|
198 | case 'dropDown' :
|
199 | if ( this.columnMenu ) { this.columnMenu.focusNextChild() ; }
|
200 |
|
201 |
|
202 | break ;
|
203 | case 'clearColumnMenu' :
|
204 |
|
205 | return this.clearColumnMenu() ;
|
206 | default :
|
207 | return ;
|
208 | }
|
209 |
|
210 | return true ;
|
211 | } ;
|
212 |
|