<commit_before>// Copyright 2013-2020, University of Colorado Boulder

/**
 * The Home button that appears in the navigation bar.
 *
 * @author <NAME> (PhET Interactive Simulations)
 */

import Property from '../../axon/js/Property.js';
import Shape from '../../kite/js/Shape.js';
import inherit from '../../phet-core/js/inherit.js';
import merge from '../../phet-core/js/merge.js';
import FocusHighlightPath from '../../scenery/js/accessibility/FocusHighlightPath.js';
import Node from '../../scenery/js/nodes/Node.js';
import Rectangle from '../../scenery/js/nodes/Rectangle.js';
import ButtonInteractionState from '../../sun/js/buttons/ButtonInteractionState.js';
import FontAwesomeNode from '../../sun/js/FontAwesomeNode.js';
import joist from './joist.js';
import JoistButton from './JoistButton.js';
import joistStrings from './joistStrings.js';

// constants
const homeScreenDescriptionString = joistStrings.a11y.homeScreenDescription;

/**
 * @param {number} navBarHeight
 * @param {Property.<string>} navigationBarFillProperty - the color of the navbar, as a string.
 * @param {Tandem} tandem
 * @param {Property.<string|null>} pdomDisplayNameProperty - for the HomeScreen, for description
 * @param {Object} [options]
 * @constructor
 */
function HomeButton( navBarHeight, navigationBarFillProperty, pdomDisplayNameProperty, tandem, options ) {

  options = merge( {
    highlightExtensionWidth: 4,
    listener: null,

    // pdom,
    tagName: 'button',
    containerTagName: 'li',
    descriptionContent: homeScreenDescriptionString,
    appendDescription: true
  }, options );

  assert && assert( !options.innerContent, 'HomeButton sets its own innerContent' );

  const homeIcon = new FontAwesomeNode( 'home' );
  // scale so that the icon is slightly taller than screen button icons, value determined empirically, see joist#127
  homeIcon.setScaleMagnitude( 0.48 * navBarHeight / homeIcon.height );

  // transparent background, size determined empirically so that highlight is the same size as highlight on screen buttons
  const background = new Rectangle( 0, 0, homeIcon.width + 12, navBarHeight );
  homeIcon.center = background.center;

  const content = new Node( { children: [ background, homeIcon ] } );

  JoistButton.call( this, content, navigationBarFillProperty, tandem, options );

  // pdom - Pass a shape to the focusHighlight to prevent dilation, then tweak the bottom up just a hair so it
  // isn't off the screen.
  const highlightLineWidth = FocusHighlightPath.getOuterLineWidthFromNode( this );
  this.focusHighlight = Shape.bounds( this.bounds.setMaxY( this.bounds.maxY - highlightLineWidth / 2 ) );

  Property.multilink( [ this.interactionStateProperty, navigationBarFillProperty ], function( interactionState, navigationBarFill ) {
    if ( navigationBarFill === 'black' ) {
      homeIcon.fill = interactionState === ButtonInteractionState.PRESSED ? 'gray' : 'white';
    }
    else {
      homeIcon.fill = interactionState === ButtonInteractionState.PRESSED ? '#444' : '#222';
    }
  } );

  pdomDisplayNameProperty.link( name => {
    this.innerContent = name;
  } );
}

joist.register( 'HomeButton', HomeButton );

inherit( JoistButton, HomeButton );
export default HomeButton;<commit_msg>convert HomeButton to ES6, https://github.com/phetsims/tasks/issues/1044<commit_after>// Copyright 2013-2020, University of Colorado Boulder

/**
 * The Home button that appears in the navigation bar.
 *
 * @author <NAME> (PhET Interactive Simulations)
 */

import Property from '../../axon/js/Property.js';
import Shape from '../../kite/js/Shape.js';
import merge from '../../phet-core/js/merge.js';
import FocusHighlightPath from '../../scenery/js/accessibility/FocusHighlightPath.js';
import Node from '../../scenery/js/nodes/Node.js';
import Rectangle from '../../scenery/js/nodes/Rectangle.js';
import ButtonInteractionState from '../../sun/js/buttons/ButtonInteractionState.js';
import FontAwesomeNode from '../../sun/js/FontAwesomeNode.js';
import joist from './joist.js';
import JoistButton from './JoistButton.js';
import joistStrings from './joistStrings.js';

// constants
const homeScreenDescriptionString = joistStrings.a11y.homeScreenDescription;

class HomeButton extends JoistButton {
  /**
   * @param {number} navBarHeight
   * @param {Property.<string>} navigationBarFillProperty - the color of the navbar, as a string.
   * @param {Tandem} tandem
   * @param {Property.<string|null>} pdomDisplayNameProperty - for the HomeScreen, for description
   * @param {Object} [options]
   */
  constructor( navBarHeight, navigationBarFillProperty, pdomDisplayNameProperty, tandem, options ) {

    options = merge( {
      highlightExtensionWidth: 4,
      listener: null,

      // pdom,
      tagName: 'button',
      containerTagName: 'li',
      descriptionContent: homeScreenDescriptionString,
      appendDescription: true
    }, options );

    assert && assert( !options.innerContent, 'HomeButton sets its own innerContent' );

    const homeIcon = new FontAwesomeNode( 'home' );
    // scale so that the icon is slightly taller than screen button icons, value determined empirically, see joist#127
    homeIcon.setScaleMagnitude( 0.48 * navBarHeight / homeIcon.height );

    // transparent background, size determined empirically so that highlight is the same size as highlight on screen buttons
    const background = new Rectangle( 0, 0, homeIcon.width + 12, navBarHeight );
    homeIcon.center = background.center;

    const content = new Node( { children: [ background, homeIcon ] } );

    super( content, navigationBarFillProperty, tandem, options );

    // pdom - Pass a shape to the focusHighlight to prevent dilation, then tweak the bottom up just a hair so it
    // isn't off the screen.
    const highlightLineWidth = FocusHighlightPath.getOuterLineWidthFromNode( this );
    this.focusHighlight = Shape.bounds( this.bounds.setMaxY( this.bounds.maxY - highlightLineWidth / 2 ) );

    Property.multilink( [ this.interactionStateProperty, navigationBarFillProperty ], function( interactionState, navigationBarFill ) {
      if ( navigationBarFill === 'black' ) {
        homeIcon.fill = interactionState === ButtonInteractionState.PRESSED ? 'gray' : 'white';
      }
      else {
        homeIcon.fill = interactionState === ButtonInteractionState.PRESSED ? '#444' : '#222';
      }
    } );

    pdomDisplayNameProperty.link( name => {
      this.innerContent = name;
    } );
  }
}

joist.register( 'HomeButton', HomeButton );
export default HomeButton;
{'fraction_non_alphanumeric': 0.12076628352490422, 'fraction_numerical': 0.009348659003831418, 'mean_word_length': 3.9104589917231003, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1950644', 'n_tokens_mistral': 1905, 'n_tokens_neox': 1795, 'n_words': 531}