Add expandedProperties to all accordion boxes, see #2

phetsims · Oct 12, 2019 · 0fa1024 · 0fa1024
1 parent 43270bf
commit 0fa1024
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 43 deletions.
diff --git a/js/common/view/NumberAccordionBox.js b/js/common/view/NumberAccordionBox.js
@@ -71,16 +71,15 @@ define( require => {
     /**
      * @param {NumberProperty} currentNumberProperty
      * @param {number} height - the height of this accordion box
-     * @param {ColorDef} fill - the background fill of this accordion box
+     * @param {Object} [options]
      */
-    constructor( currentNumberProperty, height, fill ) {
+    constructor( currentNumberProperty, height, options ) {
 
-      const options = merge( {
+      options = merge( {
         titleNode: new Text( numberString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
-        fill: fill,
         minWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH
-      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );
+      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, options );
 
       // const stringValueText = new Text( MAP_NUMBER_TO_STRING[ currentNumberProperty.value ] );
 

diff --git a/js/common/view/NumberPlayScreenView.js b/js/common/view/NumberPlayScreenView.js
@@ -9,6 +9,7 @@ define( require => {
   'use strict';
 
   // modules
+  const BooleanProperty = require( 'AXON/BooleanProperty' );
   const merge = require( 'PHET_CORE/merge' );
   const NumberAccordionBox = require( 'NUMBER_PLAY/common/view/NumberAccordionBox' );
   const NumeralAccordionBox = require( 'NUMBER_PLAY/common/view/NumeralAccordionBox' );
@@ -47,41 +48,54 @@ define( require => {
 
       super( options );
 
+      // @private {BooleanProperty} - Properties used to control the expanded state of each accordion box
+      this.numberAccordionBoxExpandedProperty = new BooleanProperty( false );
+      this.numeralAccordionBoxExpandedProperty = new BooleanProperty( true );
+      this.tenFrameAccordionBoxExpandedProperty = new BooleanProperty( false );
+      this.onesAccordionBoxExpandedProperty = new BooleanProperty( true );
+      this.objectsAccordionBoxExpandedProperty = new BooleanProperty( true );
+
       // create and add the NumberAccordionBox
       const numberAccordionBox = new NumberAccordionBox(
         model.currentNumberProperty,
-        options.upperAccordionBoxHeight,
-        options.numberAccordionBoxFill
-      );
+        options.upperAccordionBoxHeight, {
+          expandedProperty: this.numberAccordionBoxExpandedProperty,
+          fill: options.numberAccordionBoxFill
+        } );
       numberAccordionBox.left = this.layoutBounds.minX + NumberPlayConstants.ACCORDION_BOX_X_MARGIN;
       numberAccordionBox.top = this.layoutBounds.minY + NumberPlayConstants.ACCORDION_BOX_TOP_MARGIN;
       this.addChild( numberAccordionBox );
 
       // create and add the NumeralAccordionBox
       const numeralAccordionBox = new NumeralAccordionBox(
         model.currentNumberProperty,
-        options.upperAccordionBoxHeight,
-        options.numeralAccordionBoxFill
-      );
+        options.upperAccordionBoxHeight, {
+          expandedProperty: this.numeralAccordionBoxExpandedProperty,
+          fill: options.numeralAccordionBoxFill
+        } );
       numeralAccordionBox.centerX = this.layoutBounds.centerX;
       numeralAccordionBox.top = numberAccordionBox.top;
       this.addChild( numeralAccordionBox );
 
       // create and add the TenFrameAccordionBox
       const tenFrameAccordionBox = new TenFrameAccordionBox(
         model.currentNumberProperty,
-        options.upperAccordionBoxHeight,
-        options.tenFrameAccordionBoxFill
-      );
+        options.upperAccordionBoxHeight, {
+          expandedProperty: this.tenFrameAccordionBoxExpandedProperty,
+          fill: options.tenFrameAccordionBoxFill
+        } );
       tenFrameAccordionBox.right = this.layoutBounds.maxX - NumberPlayConstants.ACCORDION_BOX_X_MARGIN;
       tenFrameAccordionBox.top = numberAccordionBox.top;
       this.addChild( tenFrameAccordionBox );
 
       // create and add the OnesAccordionBox
       const onesAccordionBox = new OnesAccordionBox(
         model.currentNumberProperty,
-        options.onesAccordionBoxWidth,
-        options.lowerAccordionBoxHeight
+        options.lowerAccordionBoxHeight, {
+          expandedProperty: this.onesAccordionBoxExpandedProperty,
+          minWidth: options.onesAccordionBoxWidth,
+          maxWidth: options.onesAccordionBoxWidth
+        }
       );
       onesAccordionBox.left = this.layoutBounds.minX + NumberPlayConstants.ACCORDION_BOX_X_MARGIN;
       onesAccordionBox.bottom = this.layoutBounds.maxY - NumberPlayConstants.ACCORDION_BOX_BOTTOM_MARGIN;
@@ -90,8 +104,11 @@ define( require => {
       // create and add the ObjectsAccordionBox
       const objectsAccordionBox = new ObjectsAccordionBox(
         model.currentNumberProperty,
-        options.objectsAccordionBoxWidth,
-        options.lowerAccordionBoxHeight
+        options.lowerAccordionBoxHeight, {
+          expandedProperty: this.objectsAccordionBoxExpandedProperty,
+          minWidth: options.objectsAccordionBoxWidth,
+          maxWidth: options.objectsAccordionBoxWidth
+        }
       );
       objectsAccordionBox.right = this.layoutBounds.maxX - NumberPlayConstants.ACCORDION_BOX_X_MARGIN;
       objectsAccordionBox.bottom = onesAccordionBox.bottom;
@@ -116,7 +133,11 @@ define( require => {
      * @public
      */
     reset() {
-      //TODO
+      this.numberAccordionBoxExpandedProperty.reset();
+      this.numeralAccordionBoxExpandedProperty.reset();
+      this.tenFrameAccordionBoxExpandedProperty.reset();
+      this.onesAccordionBoxExpandedProperty.reset();
+      this.objectsAccordionBoxExpandedProperty.reset();
     }
   }
 

diff --git a/js/common/view/NumeralAccordionBox.js b/js/common/view/NumeralAccordionBox.js
@@ -28,16 +28,15 @@ define( require => {
     /**
      * @param {NumberProperty} currentNumberProperty
      * @param {number} height - the height of this accordion box
-     * @param {ColorDef} fill - the background fill of this accordion box
+     * @param {Object} [options]
      */
-    constructor( currentNumberProperty, height, fill ) {
+    constructor( currentNumberProperty, height, options ) {
 
-      const options = merge( {
+      options = merge( {
         titleNode: new Text( numeralString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
-        fill: fill,
         minWidth: NumberPlayConstants.NUMERAL_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.NUMERAL_ACCORDION_BOX_WIDTH
-      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );
+      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, options );
 
       const contentNode = new Rectangle( { rectHeight: height } );
 

diff --git a/js/common/view/ObjectsAccordionBox.js b/js/common/view/ObjectsAccordionBox.js
@@ -24,17 +24,15 @@ define( require => {
 
     /**
      * @param {NumberProperty} currentNumberProperty
-     * @param {number} width - the width of this accordion box
      * @param {number} height - the height of this accordion box
+     * @param {Object} [options]
      */
-    constructor( currentNumberProperty, width, height ) {
+    constructor( currentNumberProperty, height, options ) {
 
-      const options = merge( {
+      options = merge( {
         titleNode: new Text( objectsString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
-        fill: NumberPlayConstants.BLUE_BACKGROUND,
-        minWidth: width,
-        maxWidth: width
-      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );
+        fill: NumberPlayConstants.BLUE_BACKGROUND
+      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, options );
 
       const contentNode = new Rectangle( { rectHeight: height } );
 

diff --git a/js/common/view/OnesAccordionBox.js b/js/common/view/OnesAccordionBox.js
@@ -24,17 +24,15 @@ define( require => {
 
     /**
      * @param {NumberProperty} currentNumberProperty
-     * @param {number} width - the width of this accordion box
      * @param {number} height - the height of this accordion box
+     * @param {Object} [options]
      */
-    constructor( currentNumberProperty, width, height ) {
+    constructor( currentNumberProperty, height, options ) {
 
-      const options = merge( {
+      options = merge( {
         titleNode: new Text( onesString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
-        fill: NumberPlayConstants.PURPLE_BACKGROUND,
-        minWidth: width,
-        maxWidth: width
-      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );
+        fill: NumberPlayConstants.PURPLE_BACKGROUND
+      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, options );
 
       const contentNode = new Rectangle( { rectHeight: height } );
 

diff --git a/js/common/view/TenFrameAccordionBox.js b/js/common/view/TenFrameAccordionBox.js
@@ -25,16 +25,15 @@ define( require => {
     /**
      * @param {NumberProperty} currentNumberProperty
      * @param {number} height - the height of this accordion box
-     * @param {ColorDef} fill - the background fill of this accordion box
+     * @param {Object} [options]
      */
-    constructor( currentNumberProperty, height, fill ) {
+    constructor( currentNumberProperty, height, options ) {
 
-      const options = merge( {
+      options = merge( {
         titleNode: new Text( tenFrameString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
-        fill: fill,
         minWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH
-      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );
+      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, options );
 
       const contentNode = new Rectangle( { rectHeight: height } );