nested options for NumberControl, see phetsims/scenery-phet#451

phetsims · Jan 31, 2019 · c9924f4 · c9924f4
1 parent 2868124
commit c9924f4
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 41 deletions.
diff --git a/js/common/view/FrictionSliderNode.js b/js/common/view/FrictionSliderNode.js
@@ -68,31 +68,32 @@ define( function( require ) {
 
     var numberControl = new PendulumNumberControl( frictionString, sliderValueProperty, sliderValueRange, '{0}', 'rgb(50,145,184)', {
       hasReadoutProperty: new BooleanProperty( false ),
-      thumbFillEnabled: '#00C4DF',
-      thumbFillHighlighted: '#71EDFF',
       excludeTweakers: true,
       sliderPadding: 14,
+      sliderOptions: {
+        thumbFillEnabled: '#00C4DF',
+        thumbFillHighlighted: '#71EDFF',
+        minorTickLength: 5,
+        majorTickLength: 10,
+        constrainValue: function( value ) {
+          return Util.roundSymmetric( value );
+        },
+
+        majorTicks: [
+          {
+            value: sliderValueRange.min,
+            label: new Text( noneString, { font: PendulumLabConstants.TICK_FONT, maxWidth: 50 } )
+          }, {
+            value: sliderValueRange.getCenter(),
+            label: null
+          }, {
+            value: sliderValueRange.max,
+            label: new Text( lotsString, { font: PendulumLabConstants.TICK_FONT, maxWidth: 50 } )
+          }
+        ],
 
-      minorTickLength: 5,
-      majorTickLength: 10,
-      constrainValue: function( value ) {
-        return Util.roundSymmetric( value );
-      },
-
-      majorTicks: [
-        {
-          value: sliderValueRange.min,
-          label: new Text( noneString, { font: PendulumLabConstants.TICK_FONT, maxWidth: 50 } )
-        }, {
-          value: sliderValueRange.getCenter(),
-          label: null
-        }, {
-          value: sliderValueRange.max,
-          label: new Text( lotsString, { font: PendulumLabConstants.TICK_FONT, maxWidth: 50 } )
-        }
-      ],
-
-      minorTickSpacing: sliderValueRange.getLength() / 10
+        minorTickSpacing: sliderValueRange.getLength() / 10
+      }
     } );
 
     // describes the panel box containing the friction slider

diff --git a/js/common/view/GravityControlNode.js b/js/common/view/GravityControlNode.js
@@ -74,8 +74,6 @@ define( function( require ) {
       } ),
       minTick: options.useTextSliderLabels ? noneString : null,
       maxTick: options.useTextSliderLabels ? lotsString : null,
-      thumbFillEnabled: '#00C4DF',
-      thumbFillHighlighted: '#71EDFF',
       createBottomContent: function( bottomBox ) {
 
         // Supports Pendulum Lab's questionText where a question is substituted for the slider
@@ -95,9 +93,15 @@ define( function( require ) {
       },
       excludeTweakers: options.useTextSliderLabels,
       sliderPadding: options.useTextSliderLabels ? 14 : 0,
-      // See https://github.com/phetsims/pendulum-lab/issues/183 for rounding
-      constrainValue: function( value ) {
-        return Util.roundSymmetric( value * 2 ) / 2;
+
+      // subcomponent options
+      sliderOptions: {
+        thumbFillEnabled: '#00C4DF',
+        thumbFillHighlighted: '#71EDFF',
+        // See https://github.com/phetsims/pendulum-lab/issues/183 for rounding
+        constrainValue: function( value ) {
+          return Util.roundSymmetric( value * 2 ) / 2;
+        }
       }
     } );
 

diff --git a/js/common/view/PendulumNumberControl.js b/js/common/view/PendulumNumberControl.js
@@ -40,17 +40,27 @@ define( function( require ) {
     }, options );
 
     var numberControlOptions = _.extend( {
-      titleFont: PendulumLabConstants.TITLE_FONT_BOLD,
-      valueFont: PendulumLabConstants.READOUT_FONT,
-      titleMaxWidth: 70,
-      valuePattern: pattern,
-      valueMaxWidth: 100,
-      decimalPlaces: 2,
       delta: 0.01,
       layoutFunction: NumberControl.createLayoutFunction4( options ),
-      useRichText: true,
-      majorTickLength: 5,
+
+      // subcomponent options
+      titleNodeOptions: {
+        font: PendulumLabConstants.TITLE_FONT_BOLD,
+        maxWidth: 70
+      },
+      numberDisplayOptions: {
+        font: PendulumLabConstants.READOUT_FONT,
+        valuePattern: pattern,
+        maxWidth: 100,
+        decimalPlaces: 2,
+        useRichText: true
+      },
       arrowButtonOptions: { scale: 0.56 },
+      sliderOptions: null
+    }, options );
+
+    var sliderOptions = _.extend( {
+      majorTickLength: 5,
       constrainValue: function( value ) {
         return Util.roundSymmetric( value * 10 ) / 10;
       },
@@ -66,19 +76,22 @@ define( function( require ) {
         value: range.max,
         label: new Text( options.maxTick || range.max, { font: PendulumLabConstants.TICK_FONT, maxWidth: 50 } )
       } ]
-    }, options );
+    }, options.sliderOptions );
 
     var trackWidth = 500;
-    var testControl = new NumberControl( title, property, range, _.extend( {}, numberControlOptions, {
+    var testControlSliderOptions = _.extend( {}, sliderOptions, {
       trackSize: new Dimension2( trackWidth, PendulumLabConstants.TRACK_HEIGHT )
-    } ) );
+    } );
+    numberControlOptions.sliderOptions = testControlSliderOptions;
+    var testControl = new NumberControl( title, property, range, numberControlOptions );
 
     var testWidth = testControl.width;
     testControl.dispose();
-
-    NumberControl.call( this, title, property, range, _.extend( {}, numberControlOptions, {
+    var numberControlSliderOptions = _.extend( {}, sliderOptions, {
       trackSize: new Dimension2( trackWidth + PendulumLabConstants.RIGHT_CONTENT_WIDTH - testWidth, PendulumLabConstants.TRACK_HEIGHT )
-    } ) );
+    } );
+    numberControlOptions.sliderOptions = numberControlSliderOptions;
+    NumberControl.call( this, title, property, range, numberControlOptions );
   }
 
   pendulumLab.register( 'PendulumNumberControl', PendulumNumberControl );