diff --git a/js/molecules-and-light-main.js b/js/molecules-and-light-main.js index 21d80abb..4b14d16b 100644 --- a/js/molecules-and-light-main.js +++ b/js/molecules-and-light-main.js @@ -26,7 +26,7 @@ define( require => { keyboardHelpNode: keyboardHelpContent, createOptionsDialogContent: phet.chipper.queryParameters.supportsSound ? - () => { return malSoundOptionsDialogContent; } : + () => { return malSoundOptionsDialogContent.getContent(); } : null, credits: { diff --git a/js/moleculesandlight/view/malSoundOptionsDialogContent.js b/js/moleculesandlight/view/malSoundOptionsDialogContent.js index ef799641..b7a6b3e3 100644 --- a/js/moleculesandlight/view/malSoundOptionsDialogContent.js +++ b/js/moleculesandlight/view/malSoundOptionsDialogContent.js @@ -36,44 +36,65 @@ define( require => { * @param {Node} content - content for the dialog * @param {Tandem} tandem */ - class MALSoundOptionsDialogContent extends Node { + class MALSoundOptionsDialogContent { constructor() { - super(); // @public (read-only) this.photonSoundSetProperty = new NumberProperty( 3 ); - // Create the radio buttons. I (jbphet) know that it's a bit silly to have numbers for radio button entries, but - // I've done it this way so that the sound families can be easily named if desired. - const oneRadioButton = new AquaRadioButton( - this.photonSoundSetProperty, - 1, - new Text( '1', RADIO_BUTTON_TEXT_OPTIONS ), - { tandem: Tandem.optional } - ); - const twoRadioButton = new AquaRadioButton( - this.photonSoundSetProperty, - 2, - new Text( '2', RADIO_BUTTON_TEXT_OPTIONS ), - { tandem: Tandem.optional } - ); - const threeRadioButton = new AquaRadioButton( - this.photonSoundSetProperty, - 3, - new Text( '3', RADIO_BUTTON_TEXT_OPTIONS ), - { tandem: Tandem.optional } - ); - - this.addChild( new VBox( { - children: [ - new Text( 'Photon Sound Family', { font: new PhetFont( 20 ), weight: 'bold' } ), - oneRadioButton, - twoRadioButton, - threeRadioButton - ], - align: 'left' - } ) ); + // @private {Node} - dialog content, created when requested, see explanation below + this.dialogContent = null; + + + } + + /** + * Get the content, which consists of the UI controls to set the sound options. This can't be created during + * construction because the creation process references the phet.joist.sim.supportsSound flag, which isn't availabe + * at RequireJS load time. + * @returns {Node} + * @public + */ + getContent() { + + if ( !this.dialogContent ) { + + this.dialogContent = new Node(); + + // Create the radio buttons. I (jbphet) know that it's a bit silly to have numbers for radio button entries, + // but I've done it this way so that the sound families can be easily named if desired. + const oneRadioButton = new AquaRadioButton( + this.photonSoundSetProperty, + 1, + new Text( '1', RADIO_BUTTON_TEXT_OPTIONS ), + { tandem: Tandem.optional } + ); + const twoRadioButton = new AquaRadioButton( + this.photonSoundSetProperty, + 2, + new Text( '2', RADIO_BUTTON_TEXT_OPTIONS ), + { tandem: Tandem.optional } + ); + const threeRadioButton = new AquaRadioButton( + this.photonSoundSetProperty, + 3, + new Text( '3', RADIO_BUTTON_TEXT_OPTIONS ), + { tandem: Tandem.optional } + ); + + this.dialogContent.addChild( new VBox( { + children: [ + new Text( 'Photon Sound Family', { font: new PhetFont( 20 ), weight: 'bold' } ), + oneRadioButton, + twoRadioButton, + threeRadioButton + ], + align: 'left' + } ) ); + } + + return this.dialogContent; } }