support for dynamic locale, #140

phetsims · Aug 31, 2022 · b732823 · b732823
1 parent ec4dcd1
commit b732823
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/js/common/view/DipoleDirectionControl.js b/js/common/view/DipoleDirectionControl.js
@@ -33,10 +33,10 @@ class DipoleDirectionControl extends VBox {
     }, options );
 
     // title
-    const titleText = new Text( moleculePolarityStrings.dipoleDirectionStringProperty, {
+    const dipoleDirectionText = new Text( moleculePolarityStrings.dipoleDirectionStringProperty, {
       font: new PhetFont( 18 ),
       maxWidth: 500,
-      tandem: options.tandem.createTandem( 'titleText' ),
+      tandem: options.tandem.createTandem( 'dipoleDirectionText' ),
       phetioVisiblePropertyInstrumented: false
     } );
 
@@ -46,13 +46,13 @@ class DipoleDirectionControl extends VBox {
     } );
 
     assert && assert( !options.children, 'DipoleDirectionControl sets children' );
-    options.children = [ titleText, radioButtonGroup ];
+    options.children = [ dipoleDirectionText, radioButtonGroup ];
 
     super( options );
 
     // @private
     this.disposeDipoleDirectionControl = () => {
-      titleText.dispose();
+      dipoleDirectionText.dispose();
       radioButtonGroup.dispose();
     };
   }

diff --git a/js/common/view/DipoleDirectionRadioButtonGroup.js b/js/common/view/DipoleDirectionRadioButtonGroup.js
@@ -6,13 +6,15 @@
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import merge from '../../../../phet-core/js/merge.js';
 import AssertUtils from '../../../../phetcommon/js/AssertUtils.js';
 import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import { Text } from '../../../../scenery/js/imports.js';
 import AquaRadioButtonGroup from '../../../../sun/js/AquaRadioButtonGroup.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import StringIO from '../../../../tandem/js/types/StringIO.js';
 import moleculePolarity from '../../moleculePolarity.js';
 import moleculePolarityStrings from '../../moleculePolarityStrings.js';
 import DipoleDirection from '../model/DipoleDirection.js';
@@ -21,7 +23,8 @@ import MPConstants from '../MPConstants.js';
 // constants
 const TEXT_OPTIONS = {
   font: new PhetFont( 24 ),
-  maxWidth: 500
+  maxWidth: 500,
+  phetioVisiblePropertyInstrumented: false
 };
 
 class DipoleDirectionRadioButtonGroup extends AquaRadioButtonGroup {
@@ -39,40 +42,61 @@ class DipoleDirectionRadioButtonGroup extends AquaRadioButtonGroup {
     }, MPConstants.AQUA_RADIO_BUTTON_OPTIONS, options );
 
     // d+ -> d-
-    //TODO https://github.com/phetsims/molecule-polarity/issues/140 support for dynamic locale
-    const positiveToNegativeString = StringUtils.fillIn( moleculePolarityStrings.pattern.dipoleDirection, {
-      from: moleculePolarityStrings.deltaPlus,
-      to: moleculePolarityStrings.deltaMinus
-    } );
+    //TODO https://github.com/phetsims/molecule-polarity/issues/140 not showing up in Studio, maybe because dialog is in a PhetioCapsule?
+    const positiveToNegativeStringProperty = new DerivedProperty( [
+      moleculePolarityStrings.pattern.dipoleDirectionStringProperty,
+      moleculePolarityStrings.deltaPlusStringProperty,
+      moleculePolarityStrings.deltaMinusStringProperty
+    ], ( patternString, deltaPlusString, deltaMinusString ) =>
+      StringUtils.fillIn( patternString, {
+        from: deltaPlusString,
+        to: deltaMinusString
+      }, {
+        tandem: options.tandem.createTandem( 'positiveToNegativeStringProperty' ),
+        phetioValueType: StringIO
+      } ) );
 
     // d- -> d+
-    //TODO https://github.com/phetsims/molecule-polarity/issues/140 support for dynamic locale
-    const negativeToPositiveString = StringUtils.fillIn( moleculePolarityStrings.pattern.dipoleDirection, {
-      from: moleculePolarityStrings.deltaMinus,
-      to: moleculePolarityStrings.deltaPlus
-    } );
+    //TODO https://github.com/phetsims/molecule-polarity/issues/140 not showing up in Studio, maybe because dialog is in a PhetioCapsule?
+    const negativeToPositiveStringProperty = new DerivedProperty( [
+      moleculePolarityStrings.pattern.dipoleDirectionStringProperty,
+      moleculePolarityStrings.deltaPlusStringProperty,
+      moleculePolarityStrings.deltaMinusStringProperty
+    ], ( patternString, deltaPlusString, deltaMinusString ) =>
+      StringUtils.fillIn( patternString, {
+        from: deltaMinusString,
+        to: deltaPlusString
+      }, {
+        tandem: options.tandem.createTandem( 'negativeToPositiveStringProperty' ),
+        phetioValueType: StringIO
+      } ) );
+
+    const positiveToNegativeRadioButtonTandemName = 'positiveToNegativeRadioButton';
+    const negativeToPositiveRadioButtonTandem = 'negativeToPositiveRadioButton';
 
     const radioButtonGroupItems = [
       {
         value: DipoleDirection.POSITIVE_TO_NEGATIVE,
-        node: new Text( positiveToNegativeString, merge( {
-          tandem: options.tandem.createTandem( 'positiveToNegativeText' )
+        node: new Text( positiveToNegativeStringProperty, merge( {
+          tandem: options.tandem.createTandem( positiveToNegativeRadioButtonTandemName ).createTandem( 'positiveToNegativeText' )
         }, TEXT_OPTIONS ) ),
-        tandemName: 'positiveToNegativeRadioButton'
+        tandemName: positiveToNegativeRadioButtonTandemName
       },
       {
         value: DipoleDirection.NEGATIVE_TO_POSITIVE,
-        node: new Text( negativeToPositiveString, merge( {
-          tandem: options.tandem.createTandem( 'negativeToPositiveText' )
+        node: new Text( negativeToPositiveStringProperty, merge( {
+          tandem: options.tandem.createTandem( negativeToPositiveRadioButtonTandem ).createTandem( 'negativeToPositiveText' )
         }, TEXT_OPTIONS ) ),
-        tandemName: 'negativeToPositiveRadioButton'
+        tandemName: negativeToPositiveRadioButtonTandem
       }
     ];
 
     super( dipoleDirectionProperty, radioButtonGroupItems, options );
 
     // @private
     this.disposeDipoleDirectionRadioButtonGroup = () => {
+      positiveToNegativeStringProperty.dispose();
+      negativeToPositiveStringProperty.dispose();
       radioButtonGroupItems.forEach( item => item.node.dispose() );
     };
   }