From 6bfc825c8bcc9c8215cabb8c35bbe9ad00ce6419 Mon Sep 17 00:00:00 2001 From: twant Date: Tue, 8 Oct 2019 23:51:28 -0700 Subject: [PATCH] https://github.com/phetsims/resistance-in-a-wire/issues/210 implement nested options for SliderUnit --- js/resistance-in-a-wire/view/ControlPanel.js | 108 ++++++++++--------- js/resistance-in-a-wire/view/SliderUnit.js | 87 ++++++++------- 2 files changed, 103 insertions(+), 92 deletions(-) diff --git a/js/resistance-in-a-wire/view/ControlPanel.js b/js/resistance-in-a-wire/view/ControlPanel.js index c727b93..f66ceb6 100644 --- a/js/resistance-in-a-wire/view/ControlPanel.js +++ b/js/resistance-in-a-wire/view/ControlPanel.js @@ -124,23 +124,25 @@ define( require => { StringUtils.format( pattern0ResistanceUnits1LengthUnitsString, symbolOhmsString, cmString ), resistivitySliderLabelString, tandem.createTandem( 'resistivitySlider' ), { - keyboardStep: 0.05, // ohm-cm - shiftKeyStep: 0.01, // ohms-cm - a11yCreateAriaValueText: value => StringUtils.fillIn( resistivityUnitsPatternString, { value: value } ), - startDrag: function() { - rhoOnStart = model.resistivityProperty.get(); - resistanceOnStart = model.resistanceProperty.get(); - }, - endDrag: function() { - const resistance = model.resistanceProperty.get(); - const deltaRho = model.resistivityProperty.get() - rhoOnStart; - const deltaResistance = resistance - resistanceOnStart; - - // announce to assistive technology if there is a change - no need to queue many alerts when pressing keys - // rapidly - if ( deltaRho && deltaResistance ) { - changeUtterance.alert = getSizeChangeAlert( resistance, deltaResistance, deltaRho, letterRhoString ); - utteranceQueue.addToBack( changeUtterance ); + sliderOptions: { + keyboardStep: 0.05, // ohm-cm + shiftKeyStep: 0.01, // ohms-cm + a11yCreateAriaValueText: value => StringUtils.fillIn( resistivityUnitsPatternString, { value: value } ), + startDrag: function() { + rhoOnStart = model.resistivityProperty.get(); + resistanceOnStart = model.resistanceProperty.get(); + }, + endDrag: function() { + const resistance = model.resistanceProperty.get(); + const deltaRho = model.resistivityProperty.get() - rhoOnStart; + const deltaResistance = resistance - resistanceOnStart; + + // announce to assistive technology if there is a change - no need to queue many alerts when pressing keys + // rapidly + if ( deltaRho && deltaResistance ) { + changeUtterance.alert = getSizeChangeAlert( resistance, deltaResistance, deltaRho, letterRhoString ); + utteranceQueue.addToBack( changeUtterance ); + } } } } @@ -156,23 +158,25 @@ define( require => { cmString, lengthSliderLabelString, tandem.createTandem( 'lengthSlider' ), { - keyboardStep: 1.0, // cm - shiftKeyboardStep: 0.01, // cm - a11yCreateAriaValueText: value => StringUtils.fillIn( lengthUnitsPatternString, { value: value } ), - startDrag: function() { - lengthOnStart = model.lengthProperty.get(); - resistanceOnStart = model.resistanceProperty.get(); - }, - endDrag: function() { - const resistance = model.resistanceProperty.get(); - const deltaLength = model.lengthProperty.get() - lengthOnStart; - const deltaResistance = resistance - resistanceOnStart; - - // announce to assistive technology if there is a change - no need to queue many alerts when pressing keys - // rapidly - if ( deltaLength && deltaResistance ) { - changeUtterance.alert = getSizeChangeAlert( resistance, deltaResistance, deltaLength, letterLString ); - utteranceQueue.addToBack( changeUtterance ); + sliderOptions: { + keyboardStep: 1.0, // cm + shiftKeyboardStep: 0.01, // cm + a11yCreateAriaValueText: value => StringUtils.fillIn( lengthUnitsPatternString, { value: value } ), + startDrag: function() { + lengthOnStart = model.lengthProperty.get(); + resistanceOnStart = model.resistanceProperty.get(); + }, + endDrag: function() { + const resistance = model.resistanceProperty.get(); + const deltaLength = model.lengthProperty.get() - lengthOnStart; + const deltaResistance = resistance - resistanceOnStart; + + // announce to assistive technology if there is a change - no need to queue many alerts when pressing keys + // rapidly + if ( deltaLength && deltaResistance ) { + changeUtterance.alert = getSizeChangeAlert( resistance, deltaResistance, deltaLength, letterLString ); + utteranceQueue.addToBack( changeUtterance ); + } } } } @@ -189,23 +193,25 @@ define( require => { cmString + '2', areaSliderLabelString, tandem.createTandem( 'areaSlider' ), { - keyboardStep: 1.0, // cm^2 - shiftKeyboardStep: 0.01, // cm^2 - a11yCreateAriaValueText: value => StringUtils.fillIn( areaUnitsPatternString, { value: value } ), - startDrag: function() { - areaOnStart = model.areaProperty.get(); - resistanceOnStart = model.resistanceProperty.get(); - }, - endDrag: function() { - const resistance = model.resistanceProperty.get(); - const deltaArea = model.areaProperty.get() - areaOnStart; - const deltaResistance = resistance - resistanceOnStart; - - // announce to assistive technology if there is a change - no need to queue many alerts when pressing keys - // rapidly - if ( deltaArea && deltaResistance ) { - changeUtterance.alert = getSizeChangeAlert( resistance, deltaResistance, deltaArea, letterAString ); - utteranceQueue.addToBack( changeUtterance ); + sliderOptions: { + keyboardStep: 1.0, // cm^2 + shiftKeyboardStep: 0.01, // cm^2 + a11yCreateAriaValueText: value => StringUtils.fillIn( areaUnitsPatternString, { value: value } ), + startDrag: function() { + areaOnStart = model.areaProperty.get(); + resistanceOnStart = model.resistanceProperty.get(); + }, + endDrag: function() { + const resistance = model.resistanceProperty.get(); + const deltaArea = model.areaProperty.get() - areaOnStart; + const deltaResistance = resistance - resistanceOnStart; + + // announce to assistive technology if there is a change - no need to queue many alerts when pressing keys + // rapidly + if ( deltaArea && deltaResistance ) { + changeUtterance.alert = getSizeChangeAlert( resistance, deltaResistance, deltaArea, letterAString ); + utteranceQueue.addToBack( changeUtterance ); + } } } } diff --git a/js/resistance-in-a-wire/view/SliderUnit.js b/js/resistance-in-a-wire/view/SliderUnit.js index 67d03f6..b90fb7f 100644 --- a/js/resistance-in-a-wire/view/SliderUnit.js +++ b/js/resistance-in-a-wire/view/SliderUnit.js @@ -11,6 +11,7 @@ define( require => { // modules const Dimension2 = require( 'DOT/Dimension2' ); const inherit = require( 'PHET_CORE/inherit' ); + const merge = require( 'PHET_CORE/merge' ); const Node = require( 'SCENERY/nodes/Node' ); const resistanceInAWire = require( 'RESISTANCE_IN_A_WIRE/resistanceInAWire' ); const ResistanceInAWireConstants = require( 'RESISTANCE_IN_A_WIRE/resistance-in-a-wire/ResistanceInAWireConstants' ); @@ -35,15 +36,53 @@ define( require => { const self = this; Node.call( this ); - options = _.extend( { - a11yMapValue: value => Util.toFixedNumber( value, 2 ), - keyboardStep: 1, - shiftKeyboardStep: 0.01, + options = merge( { + sliderOptions: { + trackFillEnabled: 'black', + trackSize: new Dimension2( ResistanceInAWireConstants.SLIDER_HEIGHT - 30, 4 ), + thumbSize: new Dimension2( 22, 45 ), + thumbFill: '#c3c4c5', + thumbFillHighlighted: '#dedede', + startDrag: function( event ) { + if ( event.type === 'keydown' ) { + self.keyboardDragging = true; + } + options.startDrag && options.startDrag( event ); + }, + endDrag: function( event ) { + self.keyboardDragging = false; + options.endDrag && options.endDrag( event ); + }, + + // physical values in this sim can have up to 2 decimals + constrainValue: function( value ) { + return Util.toFixedNumber( value, 2 ); + }, + + // a11y + keyboardStep: 1, // delta for keyboard step + shiftKeyboardStep: 0.01, // delta when holding shift + roundToStepSize: true, // default keyboard step rounds to pedagogically useful values + containerTagName: 'li', + labelContent: labelContent, + labelTagName: 'label', + a11yMapValue: value => Util.toFixedNumber( value, 2 ), + + // phet-io + tandem: tandem.createTandem( 'slider' ) + }, startDrag: _.noop, - endDrag: _.noop + endDrag: _.noop, + + // {number} + decimalPlaces: 0, + + // phet-io + tandem: tandem // to be passed to supertype + }, options ); - // text for the symbol, text bounds must be accurate for correct layou + // text for the symbol, text bounds must be accurate for correct layout const symbolText = new Text( symbolString, { font: ResistanceInAWireConstants.SYMBOL_FONT, fill: ResistanceInAWireConstants.BLUE_COLOR, @@ -63,41 +102,7 @@ define( require => { this.keyboardDragging = false; // @private - const slider = new VSlider( property, range, { - trackFillEnabled: 'black', - trackSize: new Dimension2( ResistanceInAWireConstants.SLIDER_HEIGHT - 30, 4 ), - thumbSize: new Dimension2( 22, 45 ), - thumbFill: '#c3c4c5', - thumbFillHighlighted: '#dedede', - tandem: tandem.createTandem( 'slider' ), - startDrag: function( event ) { - if ( event.type === 'keydown' ) { - self.keyboardDragging = true; - } - options.startDrag && options.startDrag( event ); - }, - endDrag: function( event ) { - self.keyboardDragging = false; - options.endDrag && options.endDrag( event ); - }, - - // physical values in this sim can have up to 2 decimals - constrainValue: function( value ) { - return Util.toFixedNumber( value, 2 ); - }, - - // a11y - keyboardStep: options.keyboardStep, // delta for keyboard step - shiftKeyboardStep: options.shiftKeyboardStep, // delta when holding shift - a11yCreateAriaValueText: options.a11yCreateAriaValueText, - a11yMapValue: options.a11yMapValue, - roundToStepSize: true, // default keyboard step rounds to pedegogically useful values - - // a11y - containerTagName: 'li', - labelContent: labelContent, - labelTagName: 'label' - } ); + const slider = new VSlider( property, range, options.sliderOptions ); const valueText = new Text( Util.toFixed( range.max, 2 ), { font: ResistanceInAWireConstants.READOUT_FONT,