Adding buttons to mass sliders

phetsims · Mar 8, 2023 · 7404291 · 7404291
1 parent 4a60cfa
commit 7404291
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 11 deletions.
diff --git a/js/SolarSystemCommonStrings.ts b/js/SolarSystemCommonStrings.ts
@@ -44,6 +44,10 @@ type StringsType = {
     'restartStringProperty': LinkableProperty<string>;
     'massSlider': string;
     'massSliderStringProperty': LinkableProperty<string>;
+    'increase': string;
+    'increaseStringProperty': LinkableProperty<string>;
+    'decrease': string;
+    'decreaseStringProperty': LinkableProperty<string>;
   }
 };
 

diff --git a/js/view/SolarSystemCommonSlider.ts b/js/view/SolarSystemCommonSlider.ts
@@ -1,13 +1,13 @@
 // Copyright 2023, University of Colorado Boulder
 
 /**
- * Universal slider for MySolarSystem
+ * Universal slider for SolarSystemCommon
  * 
  * @author Agustín Vallejo
  */
 
 import HSlider, { HSliderOptions } from '../../../sun/js/HSlider.js';
-import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js';
+import optionize, { combineOptions, EmptySelfOptions } from '../../../phet-core/js/optionize.js';
 import Dimension2 from '../../../dot/js/Dimension2.js';
 import Range from '../../../dot/js/Range.js';
 import Property from '../../../axon/js/Property.js';
@@ -17,35 +17,105 @@ import soundManager from '../../../tambo/js/soundManager.js';
 import SolarSystemCommonColors from '../SolarSystemCommonColors.js';
 import solarSystemCommon from '../solarSystemCommon.js';
 import SolarSystemCommonStrings from '../SolarSystemCommonStrings.js';
+import { HBox } from '../../../scenery/js/imports.js';
+import ArrowButton, { ArrowButtonOptions } from '../../../sun/js/buttons/ArrowButton.js';
+import RangeWithValue from '../../../dot/js/RangeWithValue.js';
+import DerivedProperty from '../../../axon/js/DerivedProperty.js';
 
 type SelfOptions = EmptySelfOptions;
 
-export type MySolarSystemSliderOptions = SelfOptions & HSliderOptions;
+export type SolarSystemCommonSliderOptions = SelfOptions & HSliderOptions;
 
 const massSliderSoundClip = new SoundClip( Mass_Slider_Bass_Pluck_mp3 );
 
 soundManager.addSoundGenerator( massSliderSoundClip );
 
-export default class SolarSystemCommonSlider extends HSlider {
-  public constructor( valueProperty: Property<number>, range: Range, providedOptions?: MySolarSystemSliderOptions ) {
-    const options = optionize<MySolarSystemSliderOptions, SelfOptions, HSliderOptions>()( {
+export default class SolarSystemCommonSlider extends HBox {
+  public slider: HSlider;
+
+  public constructor( valueProperty: Property<number>, range: Range, providedOptions?: SolarSystemCommonSliderOptions ) {
+    const options = optionize<SolarSystemCommonSliderOptions, SelfOptions, HSliderOptions>()( {
       trackSize: new Dimension2( 226, 2 ),
       thumbSize: new Dimension2( 15, 25 ),
       thumbTouchAreaYDilation: 2,
       thumbCenterLineStroke: 'black',
       trackFillEnabled: SolarSystemCommonColors.foregroundProperty,
       trackStroke: SolarSystemCommonColors.foregroundProperty,
-      accessibleName: SolarSystemCommonStrings.a11y.massSliderStringProperty,
       valueChangeSoundGeneratorOptions: {
         middleMovingUpSoundPlayer: massSliderSoundClip,
         middleMovingDownSoundPlayer: massSliderSoundClip,
+        minSoundPlayer: massSliderSoundClip,
+        maxSoundPlayer: massSliderSoundClip,
         numberOfMiddleThresholds: 10,
         // This mapping function the same as in Greenhouse
-        middleMovingUpPlaybackRateMapper: ( value: number ) => 0.5 + ( range.max - value ) / range.getLength(),
-        middleMovingDownPlaybackRateMapper: ( value: number ) => 0.4 + ( range.max - value ) / range.getLength()
-      }
+        middleMovingUpPlaybackRateMapper: ( value: number ) => 0.5 + ( range.max - value ) / range.getLength()
+      },
+
+      //a11y
+      accessibleName: SolarSystemCommonStrings.a11y.massSliderStringProperty
+
     }, providedOptions );
-    super( valueProperty, range, options );
+
+    const slider = new HSlider( valueProperty, range, options );
+
+    const divisionsRange = new RangeWithValue( range.min, range.max, valueProperty.value );
+
+    const arrowButtonOptions: ArrowButtonOptions = {
+      baseColor: 'white',
+      stroke: 'black',
+      lineWidth: 1,
+      scale: 0.8
+    };
+
+    // increment button
+    const incrementButton = new ArrowButton(
+      'right',
+      () => {
+        const numberValue = valueProperty.value;
+        valueProperty.value =
+          numberValue < divisionsRange.max ?
+          numberValue + 1 :
+          numberValue;
+      },
+      combineOptions<ArrowButtonOptions>( {
+        accessibleName: SolarSystemCommonStrings.a11y.increaseStringProperty,
+        enabledProperty: new DerivedProperty(
+          [ valueProperty ],
+          periodDivisions => {
+            return periodDivisions < divisionsRange.max;
+          }
+        )
+      }, arrowButtonOptions )
+    );
+
+    // decrement button
+    const decrementButton = new ArrowButton(
+      'left',
+      () => {
+        const numberValue = valueProperty.value;
+        valueProperty.value =
+          numberValue > divisionsRange.min ?
+          numberValue - 1 :
+          numberValue;
+      },
+      combineOptions<ArrowButtonOptions>( {
+        accessibleName: SolarSystemCommonStrings.a11y.decreaseStringProperty,
+        enabledProperty: new DerivedProperty(
+          [ valueProperty ],
+          periodDivisions => {
+            return periodDivisions > divisionsRange.min;
+          }
+        )
+      }, arrowButtonOptions )
+    );
+
+
+    super( {
+      spacing: 10,
+      children: [ decrementButton, slider, incrementButton ]
+    } );
+
+    this.slider = slider;
   }
 }
 

diff --git a/solar-system-common-strings_en.json b/solar-system-common-strings_en.json
@@ -44,6 +44,12 @@
     },
     "massSlider": {
       "value": "Mass Slider"
+    },
+    "increase": {
+      "value": "Increase"
+    },
+    "decrease": {
+      "value": "Decrease"
     }
   }
 }