factor out radio buttons control into ISLCForceValuesDisplayControl, …

…instrument the force values text, #207
phetsims · Dec 31, 2019 · 1a609ea · 1a609ea
1 parent 27dbf6d
commit 1a609ea
Show file tree

Hide file tree

Showing 2 changed files with 169 additions and 103 deletions.
diff --git a/js/gravity-force-lab/view/GravityForceLabControlPanel.js b/js/gravity-force-lab/view/GravityForceLabControlPanel.js
@@ -12,34 +12,25 @@ define( require => {
 
   // modules
   const Checkbox = require( 'SUN/Checkbox' );
-  const ForceValuesDisplayEnum = require( 'INVERSE_SQUARE_LAW_COMMON/model/ForceValuesDisplayEnum' );
   const gravityForceLab = require( 'GRAVITY_FORCE_LAB/gravityForceLab' );
   const GravityForceLabA11yStrings = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/GravityForceLabA11yStrings' );
   const HSeparator = require( 'SUN/HSeparator' );
-  const ISLCA11yStrings = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCA11yStrings' );
   const ISLCConstants = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCConstants' );
+  const ISLCForceValuesDisplayControl = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCForceValuesDisplayControl' );
   const ISLCPanel = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCPanel' );
   const merge = require( 'PHET_CORE/merge' );
-  const PhetFont = require( 'SCENERY_PHET/PhetFont' );
   const Tandem = require( 'TANDEM/Tandem' );
   const Text = require( 'SCENERY/nodes/Text' );
   const VBox = require( 'SCENERY/nodes/VBox' );
-  const VerticalAquaRadioButtonGroup = require( 'SUN/VerticalAquaRadioButtonGroup' );
 
   // strings
   const constantSizeString = require( 'string!GRAVITY_FORCE_LAB/constantSize' );
-  const decimalNotationString = require( 'string!INVERSE_SQUARE_LAW_COMMON/decimalNotation' );
-  const forceValuesString = require( 'string!INVERSE_SQUARE_LAW_COMMON/forceValues' );
-  const hiddenString = require( 'string!INVERSE_SQUARE_LAW_COMMON/hidden' );
-  const scientificNotationString = require( 'string!INVERSE_SQUARE_LAW_COMMON/scientificNotation' );
 
   // a11y strings
   const constantSizeCheckboxHelpTextString = GravityForceLabA11yStrings.constantSizeCheckboxHelpText.value;
-  const forceValuesHelpTextString = ISLCA11yStrings.forceValuesHelpText.value;
 
   // constants
   const CHECKBOX_TEXT_SIZE = 15;
-  const TEXT_TANDEM_NAME = 'labelText';
 
   class GravityForceLabControlPanel extends ISLCPanel {
 
@@ -53,49 +44,13 @@ define( require => {
         tandem: Tandem.required
       }, options );
 
-      const forceValuesGroupTandem = options.tandem.createTandem( 'forceValuesRadioButtonGroup' );
-
-      // create these "throw away" Tandems in order to have the proper
-      const decimalNotationTandem = forceValuesGroupTandem.createTandem( 'decimalNotationRadioButton' );
-      const scientificNotationTandem = forceValuesGroupTandem.createTandem( 'scientificNotationRadioButton' );
-      const hiddenTandem = forceValuesGroupTandem.createTandem( 'hiddenRadioButton' );
-      const radioButtonContent = [
-        {
-          value: ForceValuesDisplayEnum.DECIMAL,
-          node: new Text( decimalNotationString, merge( {}, ISLCConstants.UI_TEXT_OPTIONS, {
-            tandem: decimalNotationTandem.createTandem( TEXT_TANDEM_NAME )
-          } ) ),
-          tandemName: decimalNotationTandem.name,
-          labelContent: decimalNotationString
-        },
-        {
-          value: ForceValuesDisplayEnum.SCIENTIFIC,
-          node: new Text( scientificNotationString, merge( {}, ISLCConstants.UI_TEXT_OPTIONS, {
-            tandem: scientificNotationTandem.createTandem( TEXT_TANDEM_NAME )
-          } ) ),
-          tandemName: scientificNotationTandem.name,
-          labelContent: scientificNotationString
-        },
-        {
-          value: ForceValuesDisplayEnum.HIDDEN,
-          node: new Text( hiddenString, merge( {}, ISLCConstants.UI_TEXT_OPTIONS, {
-            tandem: hiddenTandem.createTandem( TEXT_TANDEM_NAME )
-          } ) ),
-          tandemName: hiddenTandem.name,
-          labelContent: hiddenString
-        }
-      ];
-      const radioButtonGroup = new VerticalAquaRadioButtonGroup( model.forceValuesDisplayProperty, radioButtonContent, {
-        selectedLineWidth: 4,
-        labelTagName: 'h3',
-        labelContent: forceValuesString,
-        descriptionContent: forceValuesHelpTextString,
-        tandem: forceValuesGroupTandem
+      const forceValuesDisplayControl = new ISLCForceValuesDisplayControl( model.forceValuesDisplayProperty, {
+        tandem: options.tandem.createTandem( 'forceValuesDisplayControl' )
       } );
 
       const constantSizeCheckboxTandem = options.tandem.createTandem( 'constantRadiusCheckbox' );
       const constantSizeText = new Text( constantSizeString, merge( {}, ISLCConstants.UI_TEXT_OPTIONS, {
-        tandem: constantSizeCheckboxTandem.createTandem( TEXT_TANDEM_NAME )
+        tandem: constantSizeCheckboxTandem.createTandem( 'labelText' )
       } ) );
       const constantSizeCheckbox = new Checkbox( constantSizeText, model.constantRadiusProperty,
         merge( {}, ISLCConstants.CHECKBOX_OPTIONS, {
@@ -108,14 +63,8 @@ define( require => {
 
       super( new VBox( {
         children: [
-          new VBox( {
-            children: [
-              new Text( forceValuesString, { font: new PhetFont( { size: 14, weight: 'bold' } ) } ),
-              radioButtonGroup ],
-            align: 'left',
-            spacing: 5
-          } ),
-          new HSeparator( radioButtonGroup.width ),
+          forceValuesDisplayControl,
+          new HSeparator( forceValuesDisplayControl.width ),
           constantSizeCheckbox
         ],
         spacing: 10,