Generalized JoistButton to support HomeButton, see #182

phetsims · Nov 13, 2014 · ede735d · ede735d
1 parent f9c0c8f
commit ede735d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 66 deletions.
diff --git a/js/HomeButton.js b/js/HomeButton.js
@@ -1,8 +1,9 @@
 // Copyright 2002-2013, University of Colorado Boulder
 
-//TODO this should handle wiring up the callback that goes to the home screen, currently done in NavigationBar
 /**
  * The Home button that appears in the navigation bar.
+ *
+ * @author Sam Reid
  */
 define( function( require ) {
   'use strict';
@@ -13,25 +14,31 @@ define( function( require ) {
   var Shape = require( 'KITE/Shape' );
   var NodesPushButton = require( 'SUN/buttons/NodesPushButton' );
   var HighlightNode = require( 'JOIST/HighlightNode' );
+  var JoistButton = require( 'JOIST/JoistButton' );
+  var Property = require( 'AXON/Property' );
 
-  function HomeButton( fill, pressedFill, whiteColorScheme, options ) {
+  function HomeButton( fill, pressedFill, invertedFill, invertedPressedFill, whiteColorScheme, model, options ) {
+    var homeIcon = new FontAwesomeNode( 'home', { scale: 0.75 } );
+    options = _.extend( {
+      ariaLabel: 'Home',
+      highlightExtensionWidth: 4,
 
-    var icon = function( fill, highlighted ) {
-      var node = new FontAwesomeNode( 'home', { fill: fill, scale: 0.75 } );
-      if ( highlighted ) {
-        return new Node( {
-          children: [
-            node,
-            new HighlightNode( node.width + 4, node.height, {center: node.center, whiteHighlight: !whiteColorScheme} )
-          ]} );
+      // When pressed, take the user to the home screen.
+      listener: function() {
+        model.showHomeScreen = true;
+      }
+    }, options );
+    JoistButton.call( this, whiteColorScheme, homeIcon, options );
+
+    Property.multilink( [this.interactionStateProperty, whiteColorScheme], function( interactionState, useInvertedColors ) {
+      if ( !useInvertedColors ) {
+        homeIcon.fill = interactionState === 'pressed' ? pressedFill : fill;
       }
       else {
-        return node;
+        homeIcon.fill = interactionState === 'pressed' ? invertedPressedFill : invertedFill;
       }
-    };
-    NodesPushButton.call( this, icon( fill, false ), icon( fill, true ), icon( pressedFill, true ), icon( fill, false ), options );
-    this.mouseArea = this.touchArea = Shape.rectangle( this.bounds.minX, this.bounds.minY, this.bounds.width, this.bounds.height );
+    } );
   }
 
-  return inherit( NodesPushButton, HomeButton );
+  return inherit( JoistButton, HomeButton );
 } );
diff --git a/js/JoistButton.js b/js/JoistButton.js
@@ -19,27 +19,34 @@ define( function( require ) {
   var Property = require( 'AXON/Property' );
 
   /**
-   * @param {Sim} sim
+   * @param {Property.<boolean>} useInvertedColorsProperty
    * @param {Node} content - the scenery node to render as the content of the button
    * @param {Object} [options] Unused in client code.
    * @constructor
    */
-  function JoistButton( sim, content, options ) {
+  function JoistButton( useInvertedColorsProperty, content, options ) {
 
     options = _.extend( {
       cursor: 'pointer', // {string}
       listener: null, // {function}
-      ariaLabel: '' // {string}
+      ariaLabel: '', // {string}
+
+      //Customization for the highlight region, see overrides in HomeButton and PhetButton
+      highlightExtensionWidth: 0,
+      highlightExtensionHeight: 0,
+      highlightCenterOffsetX: 0,
+      highlightCenterOffsetY: 0
     }, options );
 
     // Button model
     this.buttonModel = new PushButtonModel( options ); // @private
 
     // Create both highlights and only make the one visible that corresponds to the color scheme
     var createHighlight = function( whiteHighlight ) {
-      return new HighlightNode( content.width + 6, content.height + 5, {
-        centerX: content.centerX,
-        centerY: content.centerY + 4,
+
+      return new HighlightNode( content.width + options.highlightExtensionWidth, content.height + options.highlightExtensionHeight, {
+        centerX: content.centerX + options.highlightCenterOffsetX,
+        centerY: content.centerY + options.highlightCenterOffsetY,
         whiteHighlight: whiteHighlight,
         pickable: false
       } );
@@ -59,7 +66,7 @@ define( function( require ) {
     this.interactionStateProperty = interactionStateProperty;//@protected
 
     // Update the highlights based on whether the button is highlighted and whether it is against a light or dark background.
-    Property.multilink( [interactionStateProperty, sim.useInvertedColorsProperty], function( interactionState, useInvertedColors ) {
+    Property.multilink( [interactionStateProperty, useInvertedColorsProperty], function( interactionState, useInvertedColors ) {
       normalHighlight.visible = !useInvertedColors && (interactionState === 'over' || interactionState === 'pressed');
       invertedHighlight.visible = useInvertedColors && (interactionState === 'over' || interactionState === 'pressed');
     } );

diff --git a/js/NavigationBar.js b/js/NavigationBar.js
@@ -69,17 +69,9 @@ define( function( require ) {
       this.buttonHBox = new HBox( {children: buttons, spacing: 4} );
       this.addChild( this.buttonHBox );
 
-      //add the home icon
-      this.normalHomeIcon = new HomeButton( 'white', 'gray', false );
-      this.normalHomeIcon.addListener( function() { model.showHomeScreen = true; } );
-      this.addChild( this.normalHomeIcon );
-      this.invertedHomeIcon = new HomeButton( '#222', '#444', true );
-      this.invertedHomeIcon.addListener( function() { model.showHomeScreen = true; } );
-      this.addChild( this.invertedHomeIcon );
-      sim.link( 'useInvertedColors', function( whiteColorScheme ) {
-        thisNode.normalHomeIcon.visible = !whiteColorScheme;
-        thisNode.invertedHomeIcon.visible = whiteColorScheme;
-      } );
+      //add the home button
+      this.homeButton = new HomeButton( 'white', 'gray', '#222', '#444', sim.useInvertedColorsProperty, model );
+      this.addChild( this.homeButton );
     }
   }
 
@@ -107,12 +99,9 @@ define( function( require ) {
         this.buttonHBox.top = 2;
 
         //Center the home icon vertically and make it a bit larger than the icons and text, see https://github.com/phetsims/joist/issues/127
-        navigationBar.normalHomeIcon.setScaleMagnitude( this.navBarScale * 1.1 );
-        navigationBar.normalHomeIcon.centerY = navigationBar.background.rectHeight / 2;
-        navigationBar.normalHomeIcon.left = navigationBar.buttonHBox.right + 15;
-        navigationBar.invertedHomeIcon.setScaleMagnitude( this.navBarScale * 1.1 );
-        navigationBar.invertedHomeIcon.centerY = navigationBar.background.rectHeight / 2;
-        navigationBar.invertedHomeIcon.left = navigationBar.buttonHBox.right + 15;
+        navigationBar.homeButton.setScaleMagnitude( this.navBarScale * 1.1 );
+        navigationBar.homeButton.centerY = navigationBar.background.rectHeight / 2;
+        navigationBar.homeButton.left = navigationBar.buttonHBox.right + 15;
 
         //If the title overlaps the screen icons, scale it down.  See #128
         var availableSpace = this.buttonHBox.left - titleInset - distanceBetweenTitleAndFirstScreenIcon;

diff --git a/js/PhetButton.js b/js/PhetButton.js
@@ -31,7 +31,37 @@ define( function( require ) {
   function PhetButton( sim, options ) {
 
     options = _.extend( {
-      phetLogoScale: 0.28 // {number}
+      ariaLabel: 'PhET Options',
+      phetLogoScale: 0.28, // {number}
+      highlightExtensionWidth: 6,
+      highlightExtensionHeight: 5,
+      highlightCenterOffsetY: 4,
+      listener: function() {
+
+        var phetMenu = new PhetMenu( sim, {
+          showSaveAndLoad: sim.options.showSaveAndLoad,
+          closeCallback: function() {
+
+            // hides the popup and barrier background
+            sim.hidePopup( phetMenu, true );
+          }
+        } );
+
+        function onResize( bounds, screenBounds, scale ) {
+
+          // because it starts at null
+          if ( bounds ) {
+            phetMenu.setScaleMagnitude( Math.max( 1, scale * 0.7 ) ); // minimum size for small devices
+            phetMenu.right = bounds.right - 10 * scale;
+            phetMenu.bottom = ( bounds.bottom + screenBounds.bottom ) / 2;
+          }
+        }
+
+        sim.on( 'resized', onResize );
+        onResize( sim.bounds, sim.screenBounds, sim.scale );
+
+        sim.showPopup( phetMenu, true );
+      }
     }, options );
 
     // The PhET Label, which is the PhET logo
@@ -50,37 +80,12 @@ define( function( require ) {
     // The icon combines the PhET label and the thre horizontal bars in the right relative positions
     var icon = new Node( {children: [phetLabel, optionsButton]} );
 
-    JoistButton.call( this, sim, icon, {listener: function() {
-
-      var phetMenu = new PhetMenu( sim, {
-        showSaveAndLoad: sim.options.showSaveAndLoad,
-        closeCallback: function() {
-          // hides the popup and barrier background
-          sim.hidePopup( phetMenu, true );
-        }
-      } );
-
-      function onResize( bounds, screenBounds, scale ) {
-        // because it starts at null
-        if ( bounds ) {
-          phetMenu.setScaleMagnitude( Math.max( 1, scale * 0.7 ) ); // minimum size for small devices
-          phetMenu.right = bounds.right - 10 * scale;
-          phetMenu.bottom = ( bounds.bottom + screenBounds.bottom ) / 2;
-        }
-      }
-
-      sim.on( 'resized', onResize );
-      onResize( sim.bounds, sim.screenBounds, sim.scale );
-
-      sim.showPopup( phetMenu, true );
-    }} );
+    JoistButton.call( this, sim.useInvertedColorsProperty, icon, options );
 
     Property.multilink( [this.interactionStateProperty, sim.useInvertedColorsProperty], function( interactionState, useInvertedColors ) {
       optionsButton.fill = useInvertedColors ? '#222' : 'white';
       phetLabel.image = useInvertedColors ? phetLogoDarker : phetLogo;
     } );
-
-    this.mutate( options );
   }
 
   return inherit( JoistButton, PhetButton, {},