From 9210ae1099207b6d281d74e337e9d08392536591 Mon Sep 17 00:00:00 2001 From: Jesse Date: Tue, 22 Jan 2019 16:49:54 -0500 Subject: [PATCH 1/4] remove Reset All button accessible label from translatable strings, see phetsims/tasks#984 --- js/SceneryPhetA11yStrings.js | 3 +++ js/buttons/ResetAllButton.js | 4 +--- scenery-phet-strings_en.json | 4 ---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/js/SceneryPhetA11yStrings.js b/js/SceneryPhetA11yStrings.js index 9bfd85290..4632c157f 100644 --- a/js/SceneryPhetA11yStrings.js +++ b/js/SceneryPhetA11yStrings.js @@ -48,6 +48,9 @@ define( function( require ) { soundToggleLabelString: { value: 'Mute Sound' }, + resetAllLabelString: { + value: 'Reset All' + }, // SoundToggleButton alerts simSoundOnString: { diff --git a/js/buttons/ResetAllButton.js b/js/buttons/ResetAllButton.js index 8314b1a51..2558e87d4 100644 --- a/js/buttons/ResetAllButton.js +++ b/js/buttons/ResetAllButton.js @@ -27,10 +27,8 @@ define( function( require ) { // constants var RESET_ALL_BUTTON_RADIUS = 24; // derived from the image files that were originally used for this button - // strings - var resetAllButtonNameString = require( 'string!SCENERY_PHET/ResetAllButton.name' ); - // a11y strings - not translatable + var resetAllButtonNameString = SceneryPhetA11yStrings.resetAllLabelString.value; var resetAllAlertString = SceneryPhetA11yStrings.resetAllAlertString.value; /** diff --git a/scenery-phet-strings_en.json b/scenery-phet-strings_en.json index f8ff1aab3..91c4ce6f0 100644 --- a/scenery-phet-strings_en.json +++ b/scenery-phet-strings_en.json @@ -71,10 +71,6 @@ "webglWarning.ie11StencilBody": { "value": "Update Internet Explorer by installing recommended Windows Update patches." }, - "ResetAllButton.name": { - "value": "Reset All", - "visible": false - }, "SoundToggleButton.name": { "value": "Toggle Sound", "visible": false From a7c29d2b7f32a4d16643df9b72c0d2c14d40b85e Mon Sep 17 00:00:00 2001 From: Jesse Date: Tue, 22 Jan 2019 16:51:04 -0500 Subject: [PATCH 2/4] remove sound toggle button label from translatable strings, see phetsims/tasks#984 --- scenery-phet-strings_en.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/scenery-phet-strings_en.json b/scenery-phet-strings_en.json index 91c4ce6f0..47b86268f 100644 --- a/scenery-phet-strings_en.json +++ b/scenery-phet-strings_en.json @@ -71,10 +71,6 @@ "webglWarning.ie11StencilBody": { "value": "Update Internet Explorer by installing recommended Windows Update patches." }, - "SoundToggleButton.name": { - "value": "Toggle Sound", - "visible": false - }, "keyboardHelpDialog.sliderControls": { "value": "Slider Controls" }, From ea2e117d49411dab06f70b38d4d4d16e72509944 Mon Sep 17 00:00:00 2001 From: Chris Malley Date: Tue, 22 Jan 2019 17:10:27 -0700 Subject: [PATCH 3/4] add enabledProperty and demo, #461 --- js/FineCoarseSpinner.js | 36 ++++++++++++++++++++++++++++++++- js/demo/ComponentsScreenView.js | 18 ++++++++++++++--- 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/js/FineCoarseSpinner.js b/js/FineCoarseSpinner.js index ce23a50b1..c57479ee1 100644 --- a/js/FineCoarseSpinner.js +++ b/js/FineCoarseSpinner.js @@ -12,6 +12,7 @@ define( require => { // modules const ArrowButton = require( 'SUN/buttons/ArrowButton' ); + const BooleanProperty = require( 'AXON/BooleanProperty' ); const HBox = require( 'SCENERY/nodes/HBox' ); const Node = require( 'SCENERY/nodes/Node' ); const NumberDisplay = require( 'SCENERY_PHET/NumberDisplay' ); @@ -31,7 +32,9 @@ define( require => { arrowButtonOptions: null, // {*|null} options propagated to all ArrowButton subcomponents deltaFine: 1, // {number} amount to increment/decrement when the 'fine' tweakers are pressed deltaCoarse: 10, // {number} amount to increment/decrement when the 'coarse' tweakers are pressed - spacing: 10 // {number} horizontal space between subcomponents + spacing: 10, // {number} horizontal space between subcomponents + enabledProperty: null, // {BooleanProperty|null} is this control enabled? + disabledOpacity: 0.5 // {number} opacity used to make the control look disabled }, options ); if ( !options.range ) { @@ -39,6 +42,9 @@ define( require => { options.range = valueProperty.range; } + // Provide a default if not specified + options.enabledProperty = options.enabledProperty || new BooleanProperty( true ); + assert && assert( options.deltaFine > 0, 'invalid deltaFine: ' + options.deltaFine ); assert && assert( options.deltaCoarse > 0, 'invalid deltaCoarse: ' + options.deltaCoarse ); assert && assert( !options.arrowButtonOptions || options.arrowButtonOptions.numberOfArrows === undefined, @@ -94,6 +100,15 @@ define( require => { super( options ); + // @public + this.enabledProperty = options.enabledProperty; + const enabledObserver = enabled => { + this.interruptSubtreeInput(); // interrupt interaction + this.pickable = enabled; + this.opacity = enabled ? 1.0 : options.disabledOpacity; + }; + this.enabledProperty.link( enabledObserver ); + // Disable the buttons when the value is at min or max of the range const valuePropertyListener = value => { @@ -108,6 +123,7 @@ define( require => { // @private this.disposeFineCoarseSpinner = () => { valueProperty.unlink( valuePropertyListener ); + this.enabledProperty.unlink( enabledObserver ); }; } @@ -116,6 +132,24 @@ define( require => { this.disposeFineCoarseSpinner(); super.dispose(); } + + /** + * Sets whether this Node is enabled or disabled. + * @param {boolean} enabled + * @public + */ + setEnabled( enabled ) { this.enabledProperty.set( enabled ); } + + set enabled( value ) { this.setEnabled( value ); } + + /** + * Gets whether this Node is enabled or disabled. + * @returns {boolean} + * @public + */ + getEnabled() { return this.enabledProperty.get(); } + + get enabled() { return this.getEnabled(); } } return sceneryPhet.register( 'FineCoarseSpinner', FineCoarseSpinner ); diff --git a/js/demo/ComponentsScreenView.js b/js/demo/ComponentsScreenView.js index 6b0902a55..1de83db81 100644 --- a/js/demo/ComponentsScreenView.js +++ b/js/demo/ComponentsScreenView.js @@ -368,13 +368,25 @@ define( function( require ) { }; // Creates a demo for FineCoarseSpinner - var demoFineCoarseSpinner = function( layoutBounds ) { + const demoFineCoarseSpinner = function( layoutBounds ) { - var numberProperty = new NumberProperty( 0, { + const numberProperty = new NumberProperty( 0, { range: new Range( 0, 100 ) } ); - return new FineCoarseSpinner( numberProperty, { + const enabledProperty = new BooleanProperty( true ); + + const spinner = new FineCoarseSpinner( numberProperty, { + enabledProperty: enabledProperty + } ); + + const checkbox = new Checkbox( new Text( 'enabled', { + font: new PhetFont( 20 ) + } ), enabledProperty ); + + return new VBox( { + spacing: 60, + children: [ spinner, checkbox ], center: layoutBounds.center } ); }; From 8396e5441dd3a117e5ca13d1b3826932f4ed4141 Mon Sep 17 00:00:00 2001 From: Chris Malley Date: Tue, 22 Jan 2019 17:41:52 -0700 Subject: [PATCH 4/4] adjust default pointer areas for arrow buttons, #459 --- js/FineCoarseSpinner.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/js/FineCoarseSpinner.js b/js/FineCoarseSpinner.js index c57479ee1..cffcd74cc 100644 --- a/js/FineCoarseSpinner.js +++ b/js/FineCoarseSpinner.js @@ -54,7 +54,13 @@ define( require => { const fineButtonOptions = _.extend( { numberOfArrows: 1, arrowWidth: 12, // width of base - arrowHeight: 14 // from tip to base + arrowHeight: 14, // from tip to base + + // pointer areas + touchAreaXDilation: 3, + touchAreaYDilation: 3, + mouseAreaXDilation: 0, + mouseAreaYDilation: 0 }, options.arrowButtonOptions ); // options for the 'coarse' arrow buttons, which show 2 arrows