-
Notifications
You must be signed in to change notification settings - Fork 6
/
NavigationBar.js
364 lines (303 loc) · 14.9 KB
/
NavigationBar.js
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
// Copyright 2013-2021, University of Colorado Boulder
/**
* The navigation bar at the bottom of the screen.
* For a single-screen sim, it shows the name of the sim at the far left and the PhET button at the far right.
* For a multi-screen sim, it additionally shows buttons for each screen, and a home button.
*
* Layout of NavigationBar adapts to different text widths, icon widths, and numbers of screens, and attempts to
* perform an "optimal" layout. The sim title is initially constrained to a max percentage of the bar width,
* and that's used to compute how much space is available for screen buttons. After creation and layout of the
* screen buttons, we then compute how much space is actually available for the sim title, and use that to
* constrain the title's width.
*
* The bar is composed of a background (always pixel-perfect), and expandable content (that gets scaled as one part).
* If we are width-constrained, the navigation bar is in a 'compact' state where the children of the content (e.g.
* home button, screen buttons, phet menu, title) do not change positions. If we are height-constrained, the amount
* available to the bar expands, so we lay out the children to fit. See https://github.com/phetsims/joist/issues/283
* for more details on how this is done.
*
* @author Sam Reid (PhET Interactive Simulations)
* @author Chris Malley (PixelZoom, Inc.)
* @author Jonathan Olson <[email protected]>
* @author Chris Klusendorf (PhET Interactive Simulations)
*/
import DerivedProperty from '../../axon/js/DerivedProperty.js';
import StringProperty from '../../axon/js/StringProperty.js';
import Dimension2 from '../../dot/js/Dimension2.js';
import PhetFont from '../../scenery-phet/js/PhetFont.js';
import PDOMPeer from '../../scenery/js/accessibility/pdom/PDOMPeer.js';
import Node from '../../scenery/js/nodes/Node.js';
import Rectangle from '../../scenery/js/nodes/Rectangle.js';
import Text from '../../scenery/js/nodes/Text.js';
import A11yButtonsHBox from './A11yButtonsHBox.js';
import HomeButton from './HomeButton.js';
import HomeScreen from './HomeScreen.js';
import HomeScreenView from './HomeScreenView.js';
import joist from './joist.js';
import joistStrings from './joistStrings.js';
import NavigationBarScreenButton from './NavigationBarScreenButton.js';
import PhetButton from './PhetButton.js';
// constants
// for layout of the NavigationBar, used in the following way:
// [
// {TITLE_LEFT_MARGIN}Title{TITLE_RIGHT_MARGIN}
// {HOME_BUTTON_LEFT_MARGIN}HomeButton{HOME_BUTTON_RIGHT_MARGIN} (if visible)
// {ScreenButtons centered} (if visible)
// a11yButtonsHBox (if present){PHET_BUTTON_LEFT_MARGIN}PhetButton{PHET_BUTTON_RIGHT_MARGIN}
// ]
const NAVIGATION_BAR_SIZE = new Dimension2( HomeScreenView.LAYOUT_BOUNDS.width, 40 );
const TITLE_LEFT_MARGIN = 10;
const TITLE_RIGHT_MARGIN = 25;
const PHET_BUTTON_LEFT_MARGIN = 6;
const PHET_BUTTON_RIGHT_MARGIN = 10;
const PHET_BUTTON_BOTTOM_MARGIN = 0;
const HOME_BUTTON_LEFT_MARGIN = 5;
const HOME_BUTTON_RIGHT_MARGIN = HOME_BUTTON_LEFT_MARGIN;
const SCREEN_BUTTON_SPACING = 0;
const MINIMUM_SCREEN_BUTTON_WIDTH = 60; // Make sure each button is at least a minimum width so they don't get too close together, see #279
class NavigationBar extends Node {
/**
* @param {Sim} sim
* @param {Tandem} tandem
*/
constructor( sim, tandem ) {
super();
// @private
this.simScreens = sim.simScreens;
// @private - The nav bar fill and determining fill for elements on the nav bar (if it's black, the elements are white)
this.navigationBarFillProperty = new DerivedProperty( [
sim.screenProperty,
sim.lookAndFeel.navigationBarFillProperty
], ( screen, simNavigationBarFill ) => {
const showHomeScreen = screen === sim.homeScreen;
// If the homescreen is showing, the navigation bar should blend into it. This is done by making it the same color.
// It cannot be made transparent here, because other code relies on the value of navigationBarFillProperty being
// 'black' to make the icons show up as white, even when the navigation bar is hidden on the home screen.
return showHomeScreen ? HomeScreen.BACKGROUND_COLOR : simNavigationBarFill;
} );
// @private - The bar's background (resized in layout)
this.background = new Rectangle( 0, 0, NAVIGATION_BAR_SIZE.width, NAVIGATION_BAR_SIZE.height, {
pickable: true,
fill: this.navigationBarFillProperty
} );
this.addChild( this.background );
// @private - Everything else besides the background in the navigation bar (used for scaling)
this.barContents = new Node();
this.addChild( this.barContents );
this.titleText = new Text( sim.displayedSimNameProperty.value, {
font: new PhetFont( 16 ),
fill: sim.lookAndFeel.navigationBarTextFillProperty,
tandem: tandem.createTandem( 'titleText' ),
phetioDocumentation: 'Displays the title of the simulation in the navigation bar (bottom left)',
visiblePropertyOptions: { phetioFeatured: true },
textPropertyOptions: { phetioReadOnly: true }
} );
// Container node so that the visibility of the Navigation Bar title text can be controlled
// independently by PhET-iO and whether the user is on the homescreen.
const titleContainerNode = new Node( {
visible: false,
children: [ this.titleText ]
} );
this.barContents.addChild( titleContainerNode );
sim.displayedSimNameProperty.link( title => {
this.titleText.setText( title );
} );
// @private - PhET button, fill determined by state of navigationBarFillProperty
this.phetButton = new PhetButton(
sim,
this.navigationBarFillProperty,
tandem.createTandem( 'phetButton' )
);
this.barContents.addChild( this.phetButton );
// @private - a11y HBox, button fills determined by state of navigationBarFillProperty
this.a11yButtonsHBox = new A11yButtonsHBox(
sim,
this.navigationBarFillProperty,
tandem // no need for a container here. If there is a conflict, then it will error loudly.
);
this.barContents.addChild( this.a11yButtonsHBox );
// pdom - tell this node that it is aria-labelled by its own labelContent.
this.addAriaLabelledbyAssociation( {
thisElementName: PDOMPeer.PRIMARY_SIBLING,
otherNode: this,
otherElementName: PDOMPeer.LABEL_SIBLING
} );
let buttons = null;
if ( this.simScreens.length === 1 ) {
/* single-screen sim */
// title can occupy all space to the left of the PhET button
this.titleText.maxWidth = HomeScreenView.LAYOUT_BOUNDS.width - TITLE_LEFT_MARGIN - TITLE_RIGHT_MARGIN -
PHET_BUTTON_LEFT_MARGIN - this.a11yButtonsHBox.width - PHET_BUTTON_LEFT_MARGIN -
this.phetButton.width - PHET_BUTTON_RIGHT_MARGIN;
}
else {
/* multi-screen sim */
// Start with the assumption that the title can occupy (at most) this percentage of the bar.
const maxTitleWidth = Math.min( this.titleText.width, 0.20 * HomeScreenView.LAYOUT_BOUNDS.width );
// pdom - container for the homeButton and all the screen buttons.
buttons = new Node( {
tagName: 'ol',
containerTagName: 'nav',
labelTagName: 'h2',
labelContent: joistStrings.a11y.simScreens
} );
buttons.ariaLabelledbyAssociations = [ {
thisElementName: PDOMPeer.CONTAINER_PARENT,
otherElementName: PDOMPeer.LABEL_SIBLING,
otherNode: buttons
} ];
buttons.setVisible( false );
this.barContents.addChild( buttons );
// @private - Create the home button
this.homeButton = new HomeButton(
NAVIGATION_BAR_SIZE.height,
sim.lookAndFeel.navigationBarFillProperty,
sim.homeScreen ? sim.homeScreen.pdomDisplayNameProperty : new StringProperty( 'NO HOME SCREEN' ),
tandem.createTandem( 'homeButton' ), {
listener: () => {
sim.screenProperty.value = sim.homeScreen;
// only if fired from a11y
if ( this.homeButton.isPDOMClicking() ) {
sim.homeScreen.view.focusHighlightedScreenButton();
}
}
} );
// Add the home button, but only if the homeScreen exists
sim.homeScreen && buttons.addChild( this.homeButton );
/*
* Allocate remaining horizontal space equally for screen buttons, assuming they will be centered in the navbar.
* Computations here reflect the left-to-right layout of the navbar.
*/
// available width left of center
const availableLeft = ( HomeScreenView.LAYOUT_BOUNDS.width / 2 ) - TITLE_LEFT_MARGIN - maxTitleWidth - TITLE_RIGHT_MARGIN -
HOME_BUTTON_LEFT_MARGIN - this.homeButton.width - HOME_BUTTON_RIGHT_MARGIN;
// available width right of center
const availableRight = ( HomeScreenView.LAYOUT_BOUNDS.width / 2 ) - PHET_BUTTON_LEFT_MARGIN -
this.a11yButtonsHBox.width - PHET_BUTTON_LEFT_MARGIN - this.phetButton.width -
PHET_BUTTON_RIGHT_MARGIN;
// total available width for the screen buttons when they are centered
const availableTotal = 2 * Math.min( availableLeft, availableRight );
// width per screen button
const screenButtonWidth = ( availableTotal - ( this.simScreens.length - 1 ) * SCREEN_BUTTON_SPACING ) / this.simScreens.length;
// Create the screen buttons
const screenButtons = this.simScreens.map( screen => {
return new NavigationBarScreenButton(
sim.lookAndFeel.navigationBarFillProperty,
sim.screenProperty,
screen,
this.simScreens.indexOf( screen ),
NAVIGATION_BAR_SIZE.height, {
maxButtonWidth: screenButtonWidth,
tandem: tandem.createTandem( `${screen.tandem.name}Button` )
} );
} );
// Layout out screen buttons horizontally, with equal distance between their centers
// Make sure each button is at least a minimum size, so they don't get too close together, see #279
const maxScreenButtonWidth = Math.max( MINIMUM_SCREEN_BUTTON_WIDTH, _.maxBy( screenButtons, button => {
return button.width;
} ).width );
// Compute the distance between *centers* of each button
const spaceBetweenButtons = maxScreenButtonWidth + SCREEN_BUTTON_SPACING;
screenButtons.forEach( ( screenButton, i ) => {
// Equally space the centers of the buttons around the origin of their parent (screenButtonsContainer)
screenButton.localBoundsProperty.link( localBounds => {
screenButton.centerX = spaceBetweenButtons * ( i - ( screenButtons.length - 1 ) / 2 );
} );
} );
// @private - Put all screen buttons under a parent, to simplify layout
this.screenButtonsContainer = new Node( {
children: screenButtons,
// NOTE: these layout settings are duplicated in layout(), but are necessary due to title's maxWidth requiring layout
x: this.background.centerX, // since we have buttons centered around our origin, this centers the buttons
centerY: this.background.centerY,
maxWidth: availableTotal // in case we have so many screens that the screen buttons need to be scaled down
} );
buttons.addChild( this.screenButtonsContainer );
// Now determine the actual width constraint for the sim title.
this.titleText.maxWidth = this.screenButtonsContainer.left - TITLE_LEFT_MARGIN - TITLE_RIGHT_MARGIN -
HOME_BUTTON_RIGHT_MARGIN - this.homeButton.width - HOME_BUTTON_LEFT_MARGIN;
}
// initial layout (that doesn't need to change when we are re-laid out)
this.titleText.left = TITLE_LEFT_MARGIN;
this.titleText.centerY = NAVIGATION_BAR_SIZE.height / 2;
this.phetButton.bottom = NAVIGATION_BAR_SIZE.height - PHET_BUTTON_BOTTOM_MARGIN;
// only if some a11y buttons exist
if ( this.a11yButtonsHBox.getChildrenCount() > 0 ) {
// The icon is vertically adjusted in KeyboardHelpButton, so that the centers can be aligned here
this.a11yButtonsHBox.centerY = this.phetButton.centerY;
}
if ( this.simScreens.length !== 1 ) {
this.screenButtonsContainer.centerY = NAVIGATION_BAR_SIZE.height / 2;
this.homeButton.centerY = NAVIGATION_BAR_SIZE.height / 2;
}
this.layout( 1, NAVIGATION_BAR_SIZE.width, NAVIGATION_BAR_SIZE.height );
const simResourcesContainer = new Node( {
// pdom
tagName: 'div',
containerTagName: 'section',
labelTagName: 'h2',
labelContent: joistStrings.a11y.simResources,
pdomOrder: [
this.a11yButtonsHBox,
this.phetButton
].filter( node => node !== undefined )
} );
simResourcesContainer.ariaLabelledbyAssociations = [ {
thisElementName: PDOMPeer.CONTAINER_PARENT,
otherElementName: PDOMPeer.LABEL_SIBLING,
otherNode: simResourcesContainer
} ];
this.addChild( simResourcesContainer );
// only show the home button and screen buttons on the nav bar when a screen is showing, not the home screen
sim.screenProperty.link( screen => {
const showHomeScreen = screen === sim.homeScreen;
titleContainerNode.visible = !showHomeScreen;
if ( buttons ) {
buttons.setVisible( !showHomeScreen );
}
} );
}
/**
* Called when the navigation bar layout needs to be updated, typically when the browser window is resized.
* @param {number} scale
* @param {number} width
* @param {number} height
* @public
*/
layout( scale, width, height ) {
// resize the background
this.background.rectWidth = width;
this.background.rectHeight = height;
// scale the entire bar contents
this.barContents.setScaleMagnitude( scale );
// determine our local-coordinate 'right' side of the screen, so we can expand if necessary
let right;
if ( NAVIGATION_BAR_SIZE.width * scale < width ) {
// expanded
right = width / scale;
}
else {
// compact
right = NAVIGATION_BAR_SIZE.width;
}
// horizontal positioning
this.phetButton.right = right - PHET_BUTTON_RIGHT_MARGIN;
if ( this.a11yButtonsHBox.getChildrenCount() > 0 ) {
this.a11yButtonsHBox.right = this.phetButton.left - PHET_BUTTON_LEFT_MARGIN;
}
// For multi-screen sims ...
if ( this.simScreens.length !== 1 ) {
// Screen buttons centered. These buttons are centered around the origin in the screenButtonsContainer, so the
// screenButtonsContainer can be put at the center of the navbar.
this.screenButtonsContainer.x = right / 2;
// home button to the left of screen buttons
this.homeButton.right = this.screenButtonsContainer.left - HOME_BUTTON_RIGHT_MARGIN;
// max width relative to position of home button
this.titleText.maxWidth = this.homeButton.left - TITLE_LEFT_MARGIN - TITLE_RIGHT_MARGIN;
}
}
}
// @public
NavigationBar.NAVIGATION_BAR_SIZE = NAVIGATION_BAR_SIZE;
joist.register( 'NavigationBar', NavigationBar );
export default NavigationBar;