From 33e6de1df6650aabae3dc0aa77f6b5538bd1439b Mon Sep 17 00:00:00 2001 From: Jonathan Olson Date: Fri, 12 Aug 2022 21:39:47 -0600 Subject: [PATCH] Adding ROUGH DRAFT locale switcher for development purposes, see https://github.com/phetsims/chipper/issues/1302 --- js/NavigationBar.ts | 63 +++++++++++++++++++++++++++++++++++++++++--- js/Sim.ts | 2 +- js/localeProperty.ts | 2 +- 3 files changed, 61 insertions(+), 6 deletions(-) diff --git a/js/NavigationBar.ts b/js/NavigationBar.ts index 52b587c2..fbc60f12 100644 --- a/js/NavigationBar.ts +++ b/js/NavigationBar.ts @@ -28,7 +28,7 @@ import StringProperty from '../../axon/js/StringProperty.js'; import Dimension2 from '../../dot/js/Dimension2.js'; import IntentionalAny from '../../phet-core/js/types/IntentionalAny.js'; import PhetFont from '../../scenery-phet/js/PhetFont.js'; -import { AlignBox, Color, HBox, ManualConstraint, RelaxedManualConstraint, Node, PDOMPeer, Rectangle, Text } from '../../scenery/js/imports.js'; +import { AlignBox, Color, FireListener, GridBox, HBox, ManualConstraint, Node, Path, PDOMPeer, Rectangle, RelaxedManualConstraint, Text } from '../../scenery/js/imports.js'; import Tandem from '../../tandem/js/Tandem.js'; import A11yButtonsHBox from './A11yButtonsHBox.js'; import HomeButton from './HomeButton.js'; @@ -43,6 +43,10 @@ import ReadOnlyProperty from '../../axon/js/ReadOnlyProperty.js'; import Bounds2 from '../../dot/js/Bounds2.js'; import Screen from './Screen.js'; import BooleanProperty from '../../axon/js/BooleanProperty.js'; +import localeInfoModule from '../../chipper/js/data/localeInfoModule.js'; +import localeProperty from './localeProperty.js'; +import globeAmericasSolidShape from '../../sherpa/js/fontawesome-5/globeAmericasSolidShape.js'; +import Panel from '../../sun/js/Panel.js'; // constants // for layout of the NavigationBar, used in the following way: @@ -68,6 +72,7 @@ class NavigationBar extends Node { private readonly background: Rectangle; private readonly barContents: Node; private readonly a11yButtonsHBox: A11yButtonsHBox; + private readonly localeNode: Node; private readonly homeButton: HomeButton | null = null; // mutated if multiscreen sim public constructor( sim: Sim, tandem: Tandem ) { @@ -128,6 +133,52 @@ class NavigationBar extends Node { ); this.barContents.addChild( phetButton ); + this.localeNode = new Path( globeAmericasSolidShape, { + scale: 0.04, + fill: new DerivedProperty( [ this.navigationBarFillProperty ], color => { + return color.equals( Color.BLACK ) ? 'white' : 'black'; + } ), + inputListeners: [ + new FireListener( { + fire: () => { + localePopup.visible = !localePopup.visible; + } + } ) + ], + cursor: 'pointer' + } ); + this.localeNode.mouseArea = this.localeNode.localBounds.dilated( 5 ); + this.localeNode.touchArea = this.localeNode.localBounds.dilated( 5 ); + + const localePopup = new Panel( new GridBox( { + xMargin: 10, + yMargin: 3, + xAlign: 'left', + autoRows: 15, + children: localeProperty.validValues!.map( locale => { + // @ts-ignore + return new Text( localeInfoModule[ locale ].localizedName, { + font: new PhetFont( 14 ), + cursor: 'pointer', + inputListeners: [ + new FireListener( { + fire: () => { + localeProperty.value = locale; + localePopup.visible = false; + } + } ) + ] + } ); + } ) + } ), { + visible: false + } ); + sim.topLayer.addChild( localePopup ); + + ManualConstraint.create( sim.rootNode, [ this.localeNode, localePopup ], ( localeNodeProxy, popupProxy ) => { + popupProxy.rightBottom = localeNodeProxy.rightTop; + } ); + // a11y HBox, button fills determined by state of navigationBarFillProperty this.a11yButtonsHBox = new A11yButtonsHBox( sim, @@ -136,6 +187,7 @@ class NavigationBar extends Node { } ); this.barContents.addChild( this.a11yButtonsHBox ); + this.barContents.addChild( this.localeNode ); // pdom - tell this node that it is aria-labelled by its own labelContent. this.addAriaLabelledbyAssociation( { @@ -153,7 +205,7 @@ class NavigationBar extends Node { // title can occupy all space to the left of the PhET button titleText.maxWidth = HomeScreenView.LAYOUT_BOUNDS.width - TITLE_LEFT_MARGIN - TITLE_RIGHT_MARGIN - - PHET_BUTTON_LEFT_MARGIN - this.a11yButtonsHBox.width - PHET_BUTTON_LEFT_MARGIN - + PHET_BUTTON_LEFT_MARGIN - this.a11yButtonsHBox.width - this.localeNode.width - PHET_BUTTON_LEFT_MARGIN - phetButton.width - PHET_BUTTON_RIGHT_MARGIN; } else { @@ -217,7 +269,7 @@ class NavigationBar extends Node { // available width right of center const availableRight = ( HomeScreenView.LAYOUT_BOUNDS.width / 2 ) - PHET_BUTTON_LEFT_MARGIN - - this.a11yButtonsHBox.width - PHET_BUTTON_LEFT_MARGIN - phetButton.width - + this.a11yButtonsHBox.width - this.localeNode.width - PHET_BUTTON_LEFT_MARGIN - phetButton.width - PHET_BUTTON_RIGHT_MARGIN; // total available width for the screen buttons when they are centered @@ -305,11 +357,14 @@ class NavigationBar extends Node { phetButtonProxy.right = backgroundProxy.right - PHET_BUTTON_RIGHT_MARGIN; } ); - ManualConstraint.create( this.barContents, [ phetButton, this.a11yButtonsHBox ], ( phetButtonProxy, a11yButtonsHBoxProxy ) => { + ManualConstraint.create( this.barContents, [ phetButton, this.a11yButtonsHBox, this.localeNode ], ( phetButtonProxy, a11yButtonsHBoxProxy, localeNodeProxy ) => { a11yButtonsHBoxProxy.right = phetButtonProxy.left - PHET_BUTTON_LEFT_MARGIN; // The icon is vertically adjusted in KeyboardHelpButton, so that the centers can be aligned here a11yButtonsHBoxProxy.centerY = phetButtonProxy.centerY; + + localeNodeProxy.centerY = phetButtonProxy.centerY; + localeNodeProxy.right = Math.min( a11yButtonsHBoxProxy.left, phetButtonProxy.left ) - PHET_BUTTON_LEFT_MARGIN; } ); this.layout( 1, NAVIGATION_BAR_SIZE.width, NAVIGATION_BAR_SIZE.height ); diff --git a/js/Sim.ts b/js/Sim.ts index 426d9a31..ecd4c377 100644 --- a/js/Sim.ts +++ b/js/Sim.ts @@ -240,7 +240,7 @@ export default class Sim extends PhetioObject { } ); // layer for popups, dialogs, and their backgrounds and barriers - private readonly topLayer: TopLayerNode = new Node( { + public readonly topLayer: TopLayerNode = new Node( { children: [ this.barrierRectangle ] } ); diff --git a/js/localeProperty.ts b/js/localeProperty.ts index 88076de4..c702334d 100644 --- a/js/localeProperty.ts +++ b/js/localeProperty.ts @@ -13,7 +13,7 @@ import joist from './joist.js'; const localeProperty = new StringProperty( phet.chipper.locale || 'en', { tandem: Tandem.GENERAL_VIEW.createTandem( 'localeProperty' ), phetioFeatured: true, - validValues: Object.keys( phet.chipper.strings ) + validValues: Object.keys( phet.chipper.strings ).sort() } ); joist.register( 'localeProperty', localeProperty );