#222 remove 'black'/'white' logic from HighlightNode

phetsims · Jul 13, 2015 · 0f4cdb8 · 0f4cdb8
1 parent c68145f
commit 0f4cdb8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/js/HighlightNode.js b/js/HighlightNode.js
@@ -10,6 +10,7 @@ define( function( require ) {
   'use strict';
 
   // modules
+  var Color = require( 'SCENERY/util/Color' );
   var HBox = require( 'SCENERY/nodes/HBox' );
   var inherit = require( 'PHET_CORE/inherit' );
   var LinearGradient = require( 'SCENERY/util/LinearGradient' );
@@ -24,20 +25,22 @@ define( function( require ) {
   function HighlightNode( width, height, options ) {
 
     options = _.extend( {
-      whiteHighlight: true,
-      hightlightWidth: 1,
+      fill: 'white',
+      highlightWidth: 1,
       pickable: false
     }, options );
 
-    //TODO joist#222 innerColor should be options.fill, outerColor should be transparent
-    var innerColor = options.whiteHighlight ? 'white' : 'black';
-    var outerColor = options.whiteHighlight ? 'black' : 'white';
+    var innerColor = options.fill;
+    var outerColor = Color.toColor( innerColor ).withAlpha( 0 ); // transparent
 
     var barOptions = {
-      fill: new LinearGradient( 0, 0, 0, height ).addColorStop( 0, outerColor ).addColorStop( 0.5, innerColor ).addColorStop( 1, outerColor )
+      fill: new LinearGradient( 0, 0, 0, height )
+        .addColorStop( 0, outerColor )
+        .addColorStop( 0.5, innerColor )
+        .addColorStop( 1, outerColor )
     };
-    var leftBar = new Rectangle( 0, 0, options.hightlightWidth, height, barOptions );
-    var rightBar = new Rectangle( 0, 0, options.hightlightWidth, height, barOptions );
+    var leftBar = new Rectangle( 0, 0, options.highlightWidth, height, barOptions );
+    var rightBar = new Rectangle( 0, 0, options.highlightWidth, height, barOptions );
 
     options.children = [ leftBar, rightBar ];
     options.spacing = width;

diff --git a/js/JoistButton.js b/js/JoistButton.js
@@ -43,21 +43,21 @@ define( function( require ) {
     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 ) {
+    var createHighlight = function( fill ) {
 
       return new HighlightNode( content.width + options.highlightExtensionWidth, content.height + options.highlightExtensionHeight, {
         centerX: content.centerX + options.highlightCenterOffsetX,
         centerY: content.centerY + options.highlightCenterOffsetY,
-        whiteHighlight: whiteHighlight,
+        fill: fill,
         pickable: false
       } );
     };
 
     // Highlight against the black background
-    var brightenHighlight = createHighlight( true );
+    var brightenHighlight = createHighlight( 'white' );
 
     // Highlight against the white background
-    var darkenHighlight = createHighlight( false );
+    var darkenHighlight = createHighlight( 'black' );
 
     Node.call( this, { children: [ content, brightenHighlight, darkenHighlight ] } );
 

diff --git a/js/NavigationBarScreenButton.js b/js/NavigationBarScreenButton.js
@@ -83,8 +83,8 @@ define( function( require ) {
     var overlay = new Rectangle( 0, 0, box.width, box.height, { center: box.center } );
 
     // highlights
-    var brightenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, true );
-    var darkenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, false );
+    var brightenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, 'white' );
+    var darkenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, 'black' );
 
     this.addChild( box );
     this.addChild( overlay );
@@ -121,19 +121,19 @@ define( function( require ) {
       // recreate the highlights to account for the smaller text
       this.removeChild( brightenHighlight );
       this.removeChild( darkenHighlight );
-      brightenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, true );
-      darkenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, false );
+      brightenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, 'white' );
+      darkenHighlight = createHighlight( overlay.width + ( 2 * HIGHLIGHT_SPACING ), overlay.height, box.center, 'black' );
       this.addChild( brightenHighlight );
       this.addChild( darkenHighlight );
     }
 
     this.mutate( _.omit( options, 'tandem' ) );
   }
 
-  var createHighlight = function( width, height, center, whiteHighlight ) {
+  var createHighlight = function( width, height, center, fill ) {
     return new HighlightNode( width, height, {
       center: center,
-      whiteHighlight: whiteHighlight,
+      fill: fill,
       pickable: false
     } );
   };