proper string handling, todos addressed, static text getter functions…

… added, new keyboard navigation dialog, see #109

gravity-force-lab-strings_en.json

@@ -19,5 +19,38 @@
   },
   "mass2Abbreviated": {
     "value": "m2"
+  },
+  "moveSpheresHeading": {
+    "value": "Move Spheres"
+  },
+  "moveSphereLabel": {
+    "value": "Move sphere"
+  },
+  "moveInLargerSteps": {
+    "value": "Move in larger steps"
+  },
+  "jumpToLeft": {
+    "value": "Jump to left"
+  },
+  "jumpToRight": {
+    "value": "Jump to right"
+  },
+  "changeMassHeading": {
+    "value": "Change Mass"
+  },
+  "increaseMass": {
+    "value": "Increase mass"
+  },
+  "decreaseMass": {
+    "value": "Decrease mass"
+  },
+  "changeMassInLargerSteps": {
+    "value": "Change mass in larger steps"
+  },
+  "jumpToMaximumMass": {
+    "value": "Jump to maximum mass"
+  },
+  "jumpToMinimumMass": {
+    "value": "Jump to minimum mass"
   }
 }

js/gravity-force-lab-main.js

@@ -9,6 +9,7 @@ define( function( require ) {
   'use strict';
 
   // modules
+  var GravityForceLabKeyboardHelpContent = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/GravityForceLabKeyboardHelpContent' );
   var GravityForceLabModel = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/model/GravityForceLabModel' );
   var GravityForceLabScreenView = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/GravityForceLabScreenView' );
   var Property = require( 'AXON/Property' );
@@ -22,14 +23,17 @@ define( function( require ) {
 
   // strings
   var gravityForceLabTitleString = require( 'string!GRAVITY_FORCE_LAB/gravity-force-lab.title' );
+  var keyboardHelpContent = new GravityForceLabKeyboardHelpContent( Tandem.rootTandem.createTandem( 'keyboardHelpContent' ) );
 
   var simOptions = {
     credits: {
       softwareDevelopment: 'John Blanco, Aadish Gupta, Sam Reid',
       team: 'Wendy Adams, Trish Loeblein, Ariel Paul, Noah Podolefsky, Amy Rouinfar, Carl Wieman',
       qualityAssurance: 'Steele Dalton, Bryce Griebenow, Elise Morgan, Oliver Orejola, Ben Roberts, Bryan Yoelin',
       thanks: 'Thanks to Mobile Learner Labs for working with the PhET development team to convert this simulation to HTML5.'
-    }
+    },
+    keyboardHelpNode: keyboardHelpContent,
+    accessibility: true
   };
 
   SimLauncher.launch( function() {

js/gravity-force-lab/GravityForceLabA11yStrings.js

@@ -34,6 +34,7 @@ define( require => {
       value: 'm2, Red Sphere'
     },
 
+
     ////////////////////////
     // Qualitative values //
     ////////////////////////
@@ -84,6 +85,44 @@ define( require => {
       value: 'very very dense'
     },
 
+    // Controls and checkboxes
+
+    massControlsLabel: {
+      value: 'Mass Controls'
+    },
+
+    /************************************
+     Keyboard Help Content
+     ************************************/
+
+    moveSphereDescription: {
+      value: 'Move sphere left and right with the Left and Right Arrow keys.'
+    },
+    moveInLargerStepsDescription: {
+      value: 'Move in larger steps with Page Up and Page Down keys.'
+    },
+    jumpToLeftDescription: {
+      value: 'Jump to left with Home key.'
+    },
+    jumpToRightDescription: {
+      value: 'Jump to right with End key.'
+    },
+    increaseMassDescription: {
+      value: 'Increase mass with Up or Right Arrow key.'
+    },
+    decreaseMassDescription: {
+      value: 'Decrease mass with Down or Left Arrow key.'
+    },
+    changeMassInLargerStepsDescription: {
+      value: 'Change mass in larger steps with Page Up and Page Down keys.'
+    },
+    jumpToMaximumMassDescription: {
+      value: 'Jump to maximum mass with End key.'
+    },
+    jumpToMinimumMassDescription: {
+      value: 'Jump to minimum mass with Home key.'
+    },
+
     ///////////
     // Units //
     ///////////

js/gravity-force-lab/view/GravityForceLabKeyboardHelpContent.js

@@ -0,0 +1,155 @@
+// Copyright 2018, University of Colorado Boulder
+
+/**
+ * Content for the "Hot Keys and Help" dialog that can be brought up from the sim navigation bar.
+ *
+ * @author Jesse Greenberg (PhET Interactive Simulations)
+ * @author Michael Barlow
+ */
+define( function( require ) {
+  'use strict';
+
+  // modules
+  var ArrowKeyNode = require( 'SCENERY_PHET/keyboard/ArrowKeyNode' );
+  var EndKeyNode = require( 'SCENERY_PHET/keyboard/EndKeyNode' );
+  var GeneralNavigationHelpContent = require( 'SCENERY_PHET/keyboard/help/GeneralNavigationHelpContent' );
+  var gravityForceLab = require( 'GRAVITY_FORCE_LAB/gravityForceLab' );
+  var GravityForceLabA11yStrings = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/GravityForceLabA11yStrings' );
+  var HBox = require( 'SCENERY/nodes/HBox' );
+  var HelpContent = require( 'SCENERY_PHET/keyboard/help/HelpContent' );
+  var HomeKeyNode = require( 'SCENERY_PHET/keyboard/HomeKeyNode' );
+  var inherit = require( 'PHET_CORE/inherit' );
+  var RichText = require( 'SCENERY/nodes/RichText' );
+  var VBox = require( 'SCENERY/nodes/VBox' );
+
+  // strings
+  var changeMassHeadingString = require( 'string!GRAVITY_FORCE_LAB/changeMassHeading' );
+  var changeMassInLargerStepsString = require( 'string!GRAVITY_FORCE_LAB/changeMassInLargerSteps' );
+  var decreaseMassString = require( 'string!GRAVITY_FORCE_LAB/decreaseMass' );
+  var increaseMassString = require( 'string!GRAVITY_FORCE_LAB/increaseMass' );
+  var jumpToLeftString = require( 'string!GRAVITY_FORCE_LAB/jumpToLeft' );
+  var jumpToMaximumMassString = require( 'string!GRAVITY_FORCE_LAB/jumpToMaximumMass' );
+  var jumpToMinimumMassString = require( 'string!GRAVITY_FORCE_LAB/jumpToMinimumMass' );
+  var jumpToRightString = require( 'string!GRAVITY_FORCE_LAB/jumpToRight' );
+  var moveInLargerStepsString = require( 'string!GRAVITY_FORCE_LAB/moveInLargerSteps' );
+  var moveSphereLabelString = require( 'string!GRAVITY_FORCE_LAB/moveSphereLabel' );
+  var moveSpheresHeadingString = require( 'string!GRAVITY_FORCE_LAB/moveSpheresHeading' );
+
+  // a11y strings
+  var moveSphereDescriptionString = GravityForceLabA11yStrings.moveSphereDescription.value;
+  var moveInLargerStepsDescriptionString = GravityForceLabA11yStrings.moveInLargerStepsDescription.value;
+  var jumpToLeftDescriptionString = GravityForceLabA11yStrings.jumpToLeftDescription.value;
+  var jumpToRightDescriptionString = GravityForceLabA11yStrings.jumpToRightDescription.value;
+  var increaseMassDescriptionString = GravityForceLabA11yStrings.increaseMassDescription.value;
+  var decreaseMassDescriptionString = GravityForceLabA11yStrings.decreaseMassDescription.value;
+  var changeMassInLargerStepsDescriptionString = GravityForceLabA11yStrings.changeMassInLargerStepsDescription.value;
+  var jumpToMaximumMassDescriptionString = GravityForceLabA11yStrings.jumpToMaximumMassDescription.value;
+  var jumpToMinimumMassDescriptionString = GravityForceLabA11yStrings.jumpToMinimumMassDescription.value;
+
+  // constants
+  var DEFAULT_LABEL_OPTIONS = {
+    font: HelpContent.DEFAULT_LABEL_FONT,
+    maxWidth: HelpContent.DEFAULT_TEXT_MAX_WIDTH
+  };
+
+  // helper functions that return icons for the dialog
+  var ICON_CREATOR = {
+    home: function () {
+      return new HomeKeyNode();
+    },
+    end: function() {
+      return new EndKeyNode();
+    },
+    leftRight: function() {
+      return HelpContent.leftRightArrowKeysRowIcon();
+    },
+    downOrLeft: function() {
+      return HelpContent.iconOrIcon( new ArrowKeyNode( 'down' ), new ArrowKeyNode( 'left' ) );
+    },
+    upOrRight: function() {
+      return HelpContent.iconOrIcon( new ArrowKeyNode( 'up' ), new ArrowKeyNode( 'right' ) );
+    },
+    pageUpPageDown: function() {
+      return HelpContent.pageUpPageDownRowIcon();
+    }
+  };
+
+  /**
+   * Constructor.
+   *
+   * @param {Tandem} tandem
+   * @constructor
+   */
+  function GravityForceLabKeyboardHelpContent( tandem ) {
+
+    // Mass movement help dialog section
+    // move mass content
+    var moveMassRow = this.constructRow( moveSphereLabelString, moveSphereDescriptionString, 'leftRight' );
+
+    // 'move in larger steps' content
+    var moveLargeStepsRow = this.constructRow( moveInLargerStepsString, moveInLargerStepsDescriptionString, 'pageUpPageDown' );
+
+    // 'jump to left' content
+    var jumpLeftRow = this.constructRow( jumpToLeftString, jumpToLeftDescriptionString, 'home' );
+
+    // 'jump to right' content
+    var jumpRightRow = this.constructRow( jumpToRightString, jumpToRightDescriptionString, 'end' );
+
+    var moveMassRows = [ moveMassRow, moveLargeStepsRow, jumpLeftRow, jumpRightRow ];
+    var moveMassHelpContent = new HelpContent( moveSpheresHeadingString, moveMassRows );
+
+    // Mass adjustment help section
+    var increaseMassRow = this.constructRow( increaseMassString, increaseMassDescriptionString, 'upOrRight' );
+    var decreaseMassRow = this.constructRow( decreaseMassString, decreaseMassDescriptionString, 'downOrLeft' );
+    var changeMassLargeStepsRow = this.constructRow( changeMassInLargerStepsString, changeMassInLargerStepsDescriptionString, 'pageUpPageDown' );
+    var jumpToMinMassRow = this.constructRow( jumpToMinimumMassString, jumpToMinimumMassDescriptionString, 'home' );
+    var jumpToMaxMassRow = this.constructRow( jumpToMaximumMassString, jumpToMaximumMassDescriptionString, 'end' );
+
+    var adjustMassRows = [ increaseMassRow, decreaseMassRow, changeMassLargeStepsRow, jumpToMinMassRow, jumpToMaxMassRow ];
+    var adjustMassHelpContent = new HelpContent( changeMassHeadingString, adjustMassRows );
+
+    // align icons for the mass movement and adjustment sections
+    HelpContent.alignHelpContentIcons( [ moveMassHelpContent, adjustMassHelpContent ] );
+
+    var generalNavigationHelpContent = new GeneralNavigationHelpContent();
+
+    var leftContent = new VBox( {
+      children: [ moveMassHelpContent, adjustMassHelpContent ],
+      align: 'top',
+      spacing: 30
+    } );
+
+    var rightContent = new VBox( {
+      children: [ generalNavigationHelpContent ],
+      align: 'top',
+      spacing: 30
+    } );
+
+    HBox.call( this, {
+      children: [ leftContent, rightContent ],
+      align: 'top',
+      spacing: 30,
+      tandem: tandem
+    } );
+  }
+
+  gravityForceLab.register( 'GravityForceLabKeyboardHelpContent', GravityForceLabKeyboardHelpContent );
+
+  return inherit( HBox, GravityForceLabKeyboardHelpContent, {
+
+    /**
+     * Construct a row for the help dialog, assembling a label with an icon using Helpcontent. Usages will look like:
+     * this.constructRow( 'jump to the end', 'end' );
+     *
+     * @param  {string} labelString - the text label for the row (visual)
+     * @param  {string} descriptionString - must be one of the keys in ICON_CREATOR
+     * @param  {string} iconID - must be one of ICON_CREATOR keys, see that above
+     */
+    constructRow: function( labelString, descriptionString, iconID ) {
+      var labelNode = new RichText( labelString, DEFAULT_LABEL_OPTIONS );
+      var iconNode = ICON_CREATOR[ iconID ]();
+
+      return HelpContent.labelWithIcon( labelNode, iconNode, descriptionString );
+    }
+  } );
+} );

js/gravity-force-lab/view/GravityForceLabScreenView.js

@@ -17,6 +17,7 @@ define( function( require ) {
   var Bounds2 = require( 'DOT/Bounds2' );
   var ControlAreaNode = require( 'SCENERY_PHET/accessibility/nodes/ControlAreaNode' );
   var gravityForceLab = require( 'GRAVITY_FORCE_LAB/gravityForceLab' );
+  var GravityForceLabA11yStrings = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/GravityForceLabA11yStrings' );
   var GravityForceLabConstants = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/GravityForceLabConstants' );
   var GravityForceLabScreenSummaryNode = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/GravityForceLabScreenSummaryNode' );
   var GravityForceLabStringManager = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/view/GravityForceLabStringManager' );
@@ -49,8 +50,9 @@ define( function( require ) {
   var unitsMetersString = require( 'string!GRAVITY_FORCE_LAB/units.meters' );
 
   // a11y Strings
-  const spherePositionsString = ISLCA11yStrings.spherePositions.value;
-  const spherePositionHelpTextString = ISLCA11yStrings.spherePositionHelpText.value;
+  var spherePositionsString = ISLCA11yStrings.spherePositions.value;
+  var spherePositionHelpTextString = ISLCA11yStrings.spherePositionHelpText.value;
+  var massControlsLabelString = GravityForceLabA11yStrings.massControlsLabel.value;
 
   // constants
   var CONTROL_SCALE = 0.72;
@@ -150,10 +152,9 @@ define( function( require ) {
     );
     playAreaNode.addChild( gravityForceLabRuler );
 
-    // TODO: implement proper string usage
     var massControlsNode = new Node( {
       labelTagName: 'h3',
-      labelContent: 'Mass Controls',
+      labelContent: massControlsLabelString,
       tagName: 'ul'
     } );
     playAreaNode.addChild( massControlsNode );
@@ -179,21 +180,20 @@ define( function( require ) {
     massControlsNode.addChild( massControl2 );
 
     var TEXT_SIZE = 15;
-    // TODO: implement correct string usage and review a11 best practices
-    //    - double check enabling/disabling checkboxes
+
     var checkboxItems = [
       new ISLCCheckboxItem( constantSizeString, model.constantRadiusProperty, {
-        accessibleName: 'Constant Radius',
+        accessibleName: constantSizeString,
         textSize: TEXT_SIZE,
         tandem: tandem.createTandem( 'constantRadiusCheckbox' )
       } ),
       new ISLCCheckboxItem( forceValuesString, model.forceValuesProperty, {
-        accessibleName: 'Force Values',
+        accessibleName: forceValuesString,
         textSize: TEXT_SIZE,
         tandem: tandem.createTandem( 'forceValuesCheckbox' )
       } ),
       new ISLCCheckboxItem( scientificNotationString, model.scientificNotationProperty, {
-        accessibleName: 'Scientific Notation',
+        accessibleName: scientificNotationString,
         textSize: TEXT_SIZE,
         tandem: tandem.createTandem( 'scientificNotationCheckbox' )
       } )
@@ -221,7 +221,6 @@ define( function( require ) {
     controlAreaNode.addChild( resetAllButton );
 
     // positioning the nodes
-    // TODO: Position based on layout (consider using HBox like GFL:B)
     parameterControlPanel.right = this.layoutBounds.width - 15;
     parameterControlPanel.top = gravityForceLabRuler.bottom + 15;
     massControl2.right = parameterControlPanel.left - 45;

js/gravity-force-lab/view/MassControl.js

@@ -14,11 +14,13 @@ define( function( require ) {
   var Dimension2 = require( 'DOT/Dimension2' );
   var gravityForceLab = require( 'GRAVITY_FORCE_LAB/gravityForceLab' );
   var inherit = require( 'PHET_CORE/inherit' );
+  var ISLCA11yStrings = require( 'INVERSE_SQUARE_LAW_COMMON/ISLCA11yStrings' );
   var ISLCObjectControlPanel = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCObjectControlPanel' );
   var PhetFont = require( 'SCENERY_PHET/PhetFont' );
 
   // strings
   var unitsKgString = require( 'string!GRAVITY_FORCE_LAB/units.kg' );
+  var valueKilogramsPatternString = ISLCA11yStrings.valueKilogramsPattern.value;
 
   // constants
   var TRACK_SIZE = new Dimension2( 170, 3 );
@@ -55,10 +57,9 @@ define( function( require ) {
         thumbFillHighlighted: thumbColor.colorUtilsBrighter( 0.35 ),
 
         // a11y
-        // TODO: review proper string implementation
         keyboardStep: 50,
         accessibleName: titleString,
-        accessibleValuePattern: '{{value}} kilograms'
+        accessibleValuePattern: valueKilogramsPatternString // {{value}} kilograms
       },
 
       tickLabelOptions: {

js/gravity-force-lab/view/MassNode.js

@@ -15,6 +15,7 @@ define( function( require ) {
   var GravityForceLabConstants = require( 'GRAVITY_FORCE_LAB/gravity-force-lab/GravityForceLabConstants' );
   var inherit = require( 'PHET_CORE/inherit' );
   var ISLCObjectNode = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCObjectNode' );
+  var ISLCStringManager = require( 'INVERSE_SQUARE_LAW_COMMON/view/ISLCStringManager' );
   var RadialGradient = require( 'SCENERY/util/RadialGradient' );
   var Tandem = require( 'TANDEM/Tandem' );
 
@@ -40,17 +41,14 @@ define( function( require ) {
       y: MASS_NODE_Y_POSITION,
       snapToNearest: GravityForceLabConstants.LOCATION_SNAP_VALUE,
 
-      // TODO: scale factor for the arrow so that it has requested size, calculate this if design team likes the feel,
-      // see https://github.com/phetsims/inverse-square-law-common/issues/21
       maxArrowWidth: 300,
 
       tandem: Tandem.required,
 
       // a11y
-      // TODO: refactor into proper string usage
       createAriaValueText: function( formattedValue, previousValue ) {
         formattedValue += 5;
-        return `${formattedValue} meter mark`;
+        return ISLCStringManager.getPositionMeterMarkText( formattedValue );
       }
     }, options );