Skip to content

Commit

Permalink
#210 implement nested options for SliderUnit
Browse files Browse the repository at this point in the history
  • Loading branch information
@twant
twant committed Oct 9, 2019
1 parent 6475c3d commit 6bfc825
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 92 deletions.
108 changes: 57 additions & 51 deletions js/resistance-in-a-wire/view/ControlPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
}
}
}
Expand All @@ -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 );
}
}
}
}
Expand All @@ -189,23 +193,25 @@ define( require => {
cmString + '<sup>2</sup>',
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 );
}
}
}
}
Expand Down
87 changes: 46 additions & 41 deletions js/resistance-in-a-wire/view/SliderUnit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand All @@ -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,
Expand All @@ -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,
Expand Down

0 comments on commit 6bfc825

Please sign in to comment.