From f6662ade56baa5b5c6b5315c201a031325bd1c2c Mon Sep 17 00:00:00 2001 From: jbphet Date: Tue, 28 Nov 2023 15:20:42 -0700 Subject: [PATCH] add list item that describes IR layers, see https://github.com/phetsims/greenhouse-effect/issues/374 --- .../LayerModelObservationWindowPDOMNode.ts | 17 +++++++ .../LayerModelScreenSummaryContentNode.ts | 26 ++--------- ...raredAbsorbingLayersDescriptionProperty.ts | 44 +++++++++++++++++++ .../WaveLandscapeObservationWindowPDOMNode.ts | 2 +- 4 files changed, 66 insertions(+), 23 deletions(-) create mode 100644 js/layer-model/view/describers/InfraredAbsorbingLayersDescriptionProperty.ts diff --git a/js/layer-model/view/LayerModelObservationWindowPDOMNode.ts b/js/layer-model/view/LayerModelObservationWindowPDOMNode.ts index e99f0da4..6c4688aa 100644 --- a/js/layer-model/view/LayerModelObservationWindowPDOMNode.ts +++ b/js/layer-model/view/LayerModelObservationWindowPDOMNode.ts @@ -3,6 +3,9 @@ import ObservationWindowPDOMNode from '../../common/view/ObservationWindowPDOMNode.js'; import greenhouseEffect from '../../greenhouseEffect.js'; import LayerModelModel from '../model/LayerModelModel.js'; +import { Node } from '../../../../scenery/js/imports.js'; +import InfraredAbsorbingLayersDescriptionProperty from './describers/InfraredAbsorbingLayersDescriptionProperty.js'; +import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; /** * Responsible for PDOM content related to the observation window used in the waves screen. @@ -14,6 +17,20 @@ class LayerModelObservationWindowPDOMNode extends ObservationWindowPDOMNode { public constructor( model: LayerModelModel ) { super( model.sunEnergySource.isShiningProperty ); + + // Create a string Property that describes the number of infrared-absorbing layers in the atmosphere. + const infraredAbsorbingLayersPhraseProperty = new InfraredAbsorbingLayersDescriptionProperty( + model.numberOfActiveAtmosphereLayersProperty + ); + + // Create the node that will place the description of IR layers into the PDOM. + const irLayersItemNode = new Node( { tagName: 'li' } ); + this.addChild( irLayersItemNode ); + + // Update the PDOM item when the description string changes. + infraredAbsorbingLayersPhraseProperty.link( infraredAbsorbingLayersPhrase => { + irLayersItemNode.innerContent = StringUtils.capitalize( infraredAbsorbingLayersPhrase ) + '.'; + } ); } } diff --git a/js/layer-model/view/LayerModelScreenSummaryContentNode.ts b/js/layer-model/view/LayerModelScreenSummaryContentNode.ts index adb2e2b5..1d1e8d4c 100644 --- a/js/layer-model/view/LayerModelScreenSummaryContentNode.ts +++ b/js/layer-model/view/LayerModelScreenSummaryContentNode.ts @@ -13,6 +13,7 @@ import GreenhouseEffectScreenSummaryContentNode from '../../common/view/Greenhou import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; import TemperatureDescriber from '../../common/view/describers/TemperatureDescriber.js'; +import InfraredAbsorbingLayersDescriptionProperty from './describers/InfraredAbsorbingLayersDescriptionProperty.js'; export default class LayerModelScreenSummaryContentNode extends GreenhouseEffectScreenSummaryContentNode { @@ -25,28 +26,9 @@ export default class LayerModelScreenSummaryContentNode extends GreenhouseEffect GreenhouseEffectStrings.a11y.layerModel.screenSummary.controlAreaDescriptionStringProperty ); - // A derived Property containing a string that represents the number of infrared-absorbing layers in the atmosphere, - // for example, "one infrared absorbing layer in atmosphere". - const infraredAbsorbingLayersPhraseProperty = new DerivedProperty( - [ model.numberOfActiveAtmosphereLayersProperty ], - numberOfActiveAtmosphereLayers => { - - // parameter checking - assert && assert( - numberOfActiveAtmosphereLayers >= 0, - `numberOfActiveAtmosphereLayers must be positive, got ${numberOfActiveAtmosphereLayers}` - ); - - return StringUtils.fillIn( - GreenhouseEffectStrings.a11y.layerModel.observationWindow.numberOfAbsorbingLayersPatternStringProperty, - { - number: numberOfActiveAtmosphereLayers > 0 ? - numberOfActiveAtmosphereLayers : - GreenhouseEffectStrings.a11y.qualitativeAmountDescriptions.noStringProperty, // say 'no' for zero - s: numberOfActiveAtmosphereLayers === 1 ? '' : 's' // use plural except for a single layer - } - ); - } + // a string Property that describes the number of infrared-absorbing layers in the atmosphere + const infraredAbsorbingLayersPhraseProperty = new InfraredAbsorbingLayersDescriptionProperty( + model.numberOfActiveAtmosphereLayersProperty ); // A derived property containing a string that describes the surface temperature, for example, "Earth's surface diff --git a/js/layer-model/view/describers/InfraredAbsorbingLayersDescriptionProperty.ts b/js/layer-model/view/describers/InfraredAbsorbingLayersDescriptionProperty.ts new file mode 100644 index 00000000..41c2ef2f --- /dev/null +++ b/js/layer-model/view/describers/InfraredAbsorbingLayersDescriptionProperty.ts @@ -0,0 +1,44 @@ +// Copyright 2023, University of Colorado Boulder + +/** + * InfraredAbsorbingLayersDescriptionProperty is a Property that describes the current number of the IR- + * absorbing layers in the atmosphere. For example, one possible value is "2 infrared absorbing layers in atmosphere". + * + * @author John Blanco (PhET Interactive Simulations) + */ +import greenhouseEffect from '../../../greenhouseEffect.js'; +import StringProperty from '../../../../../axon/js/StringProperty.js'; +import Multilink from '../../../../../axon/js/Multilink.js'; +import TRangedProperty from '../../../../../axon/js/TRangedProperty.js'; +import GreenhouseEffectStrings from '../../../GreenhouseEffectStrings.js'; +import StringUtils from '../../../../../phetcommon/js/util/StringUtils.js'; + +class InfraredAbsorbingLayersDescriptionProperty extends StringProperty { + public constructor( numberOfActiveAtmosphereLayersProperty: TRangedProperty ) { + super( '' ); + + // Monitor the intensity Property and update the value of the string. + Multilink.multilink( [ numberOfActiveAtmosphereLayersProperty ], numberOfActiveAtmosphereLayers => { + + // parameter checking + assert && assert( + numberOfActiveAtmosphereLayers >= 0, + `numberOfActiveAtmosphereLayers must be positive, got ${numberOfActiveAtmosphereLayers}` + ); + + this.value = StringUtils.fillIn( + GreenhouseEffectStrings.a11y.layerModel.observationWindow.numberOfAbsorbingLayersPatternStringProperty, + { + number: numberOfActiveAtmosphereLayers > 0 ? + numberOfActiveAtmosphereLayers : + GreenhouseEffectStrings.a11y.qualitativeAmountDescriptions.noStringProperty, // say 'no' for zero + s: numberOfActiveAtmosphereLayers === 1 ? '' : 's' // use plural except for a single layer + } + ); + } + ); + } +} + +greenhouseEffect.register( 'InfraredAbsorbingLayersDescriptionProperty', InfraredAbsorbingLayersDescriptionProperty ); +export default InfraredAbsorbingLayersDescriptionProperty; \ No newline at end of file diff --git a/js/waves/view/WaveLandscapeObservationWindowPDOMNode.ts b/js/waves/view/WaveLandscapeObservationWindowPDOMNode.ts index e1e0f817..f93bbef8 100644 --- a/js/waves/view/WaveLandscapeObservationWindowPDOMNode.ts +++ b/js/waves/view/WaveLandscapeObservationWindowPDOMNode.ts @@ -39,7 +39,7 @@ class WaveLandscapeObservationWindowPDOMNode extends LandscapeObservationWindowP EnergyRepresentation.WAVE ); - // if the sun isn't shining yet, hide this portion of the content + // If the sun isn't shining yet, hide this portion of the content. this.sunlightItemNode.pdomVisible = isShining; } );