convert ComboBox and its subtypes to class, phetsims/sun#456

phetsims · Jan 20, 2019 · 68c2b89 · 68c2b89
1 parent 7dfbc4e
commit 68c2b89
Showing 1 changed file with 54 additions and 47 deletions.
diff --git a/js/molarity/view/SoluteComboBox.js b/js/molarity/view/SoluteComboBox.js
@@ -1,4 +1,4 @@
-// Copyright 2013-2018, University of Colorado Boulder
+// Copyright 2013-2019, University of Colorado Boulder
 
 /**
  * Combo box for choosing a solute.
@@ -9,73 +9,80 @@ define( function( require ) {
   'use strict';
 
   // modules
-  var ComboBox = require( 'SUN/ComboBox' );
-  var ComboBoxItem = require( 'SUN/ComboBoxItem' );
-  var inherit = require( 'PHET_CORE/inherit' );
-  var molarity = require( 'MOLARITY/molarity' );
-  var Node = require( 'SCENERY/nodes/Node' );
-  var PhetFont = require( 'SCENERY_PHET/PhetFont' );
-  var Rectangle = require( 'SCENERY/nodes/Rectangle' );
-  var StringUtils = require( 'PHETCOMMON/util/StringUtils' );
-  var Text = require( 'SCENERY/nodes/Text' );
+  const ComboBox = require( 'SUN/ComboBox' );
+  const ComboBoxItem = require( 'SUN/ComboBoxItem' );
+  const HBox = require( 'SCENERY/nodes/HBox' );
+  const molarity = require( 'MOLARITY/molarity' );
+  const PhetFont = require( 'SCENERY_PHET/PhetFont' );
+  const Rectangle = require( 'SCENERY/nodes/Rectangle' );
+  const StringUtils = require( 'PHETCOMMON/util/StringUtils' );
+  const Text = require( 'SCENERY/nodes/Text' );
 
   // strings
-  var pattern0LabelString = require( 'string!MOLARITY/pattern.0label' );
-  var soluteString = require( 'string!MOLARITY/solute' );
+  const pattern0LabelString = require( 'string!MOLARITY/pattern.0label' );
+  const soluteString = require( 'string!MOLARITY/solute' );
 
-  /**
-   * @param {Solute[]} solutes
-   * @param {Property.<Solute>} selectedSoluteProperty
-   * @param {Node} listParent parent node for the popup list
-   * @param {Tandem} tandem
-   * @param {Object} [options]
-   * @constructor
-   */
-  function SoluteComboBox( solutes, selectedSoluteProperty, listParent, tandem, options ) {
+  class SoluteComboBox  extends ComboBox {
+    /**
+     * @param {Solute[]} solutes
+     * @param {Property.<Solute>} selectedSoluteProperty
+     * @param {Node} listParent parent node for the popup list
+     * @param {Tandem} tandem
+     * @param {Object} [options]
+     * @constructor
+     */
+    constructor( solutes, selectedSoluteProperty, listParent, tandem, options ) {
 
-    options = _.extend( {
-      labelNode: new Text( StringUtils.format( pattern0LabelString, soluteString ), { font: new PhetFont( 22 ) } ), // 'Solute' label
-      listPosition: 'above',
-      cornerRadius: 8,
-      xMargin: 16,
-      yMargin: 16,
-      highlightFill: 'rgb( 218, 255, 255 )',
+      options = _.extend( {
+        labelNode: new Text( StringUtils.format( pattern0LabelString, soluteString ), { font: new PhetFont( 22 ) } ), // 'Solute' label
+        listPosition: 'above',
+        cornerRadius: 8,
+        xMargin: 16,
+        yMargin: 16,
+        highlightFill: 'rgb( 218, 255, 255 )',
 
-      // a11y
-      a11yButtonLabel: 'Solute'
-    }, options );
+        // a11y
+        a11yButtonLabel: 'Solute'
+      }, options );
 
-    assert && assert( !options.tandem, 'tandem is a required constructor parameter' );
-    options.tandem = tandem;
+      assert && assert( !options.tandem, 'tandem is a required constructor parameter' );
+      options.tandem = tandem;
 
-    // items
-    var items = solutes.map( createItem );
+      // {ComboBoxItem[]}
+      const items = solutes.map( createItem );
 
-    ComboBox.call( this, items, selectedSoluteProperty, listParent, options );
+      super( items, selectedSoluteProperty, listParent, options );
+    }
   }
 
   molarity.register( 'SoluteComboBox', SoluteComboBox );
 
   /**
    * Creates an item for the combo box.
-   * @param solute
+   * @param {Solute} solute
    * @returns {ComboBoxItem}
    */
-  var createItem = function( solute ) {
+  const createItem = function( solute ) {
+
+    const colorNode = new Rectangle( 0, 0, 20, 20, {
+      fill: solute.maxColor,
+      stroke: solute.maxColor.darkerColor()
+    } );
 
-    var node = new Node();
-    var colorNode = new Rectangle( 0, 0, 20, 20, { fill: solute.maxColor, stroke: solute.maxColor.darkerColor() } );
-    var textNode = new Text( solute.name, { font: new PhetFont( 20 ) } );
-    node.addChild( colorNode );
-    node.addChild( textNode );
-    textNode.left = colorNode.right + 5;
-    textNode.centerY = colorNode.centerY;
+    const textNode = new Text( solute.name, {
+      font: new PhetFont( 20 )
+    } );
+
+    const hBox = new HBox( {
+      spacing: 5,
+      children: [ colorNode, textNode ]
+    } );
 
-    return new ComboBoxItem( node, solute, {
+    return new ComboBoxItem( hBox, solute, {
       tandemName: solute.tandem.tail,
       a11yLabel: solute.name
     } );
   };
 
-  return inherit( ComboBox, SoluteComboBox );
+  return SoluteComboBox;
 } );