<commit_before>// Copyright 2015, University of Colorado Boulder

/**
 * Demonstration of misc sun UI components.
 * Demos are selected from a combo box, and are instantiated on demand.
 * Use the 'component' query parameter to set the initial selection of the combo box.
 *
 * @author <NAME> (PhET Interactive Simulations)
 * @author <NAME> (PixelZoom, Inc.)
 */
define( function( require ) {
  'use strict';

  // modules
  var Carousel = require( 'SUN/Carousel' );
  var CheckBox = require( 'SUN/CheckBox' );
  var Circle = require( 'SCENERY/nodes/Circle' );
  var ComboBox = require( 'SUN/ComboBox' );
  var DemosScreenView = require( 'SUN/demo/DemosScreenView' );
  var Dimension2 = require( 'DOT/Dimension2' );
  var HSlider = require( 'SUN/HSlider' );
  var inherit = require( 'PHET_CORE/inherit' );
  var Node = require( 'SCENERY/nodes/Node' );
  var NumberSpinner = require( 'SUN/NumberSpinner' );
  var OnOffSwitch = require( 'SUN/OnOffSwitch' );
  var PageControl = require( 'SUN/PageControl' );
  var Panel = require( 'SUN/Panel' );
  var PhetFont = require( 'SCENERY_PHET/PhetFont' );
  var Property = require( 'AXON/Property' );
  var Range = require( 'DOT/Range' );
  var RangeWithValue = require( 'DOT/RangeWithValue' );
  var Rectangle = require( 'SCENERY/nodes/Rectangle' );
  var RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' );
  var Text = require( 'SCENERY/nodes/Text' );
  var Timer = require( 'PHET_CORE/Timer' );
  var sun = require( 'SUN/sun' );
  var sunQueryParameters = require( 'SUN/sunQueryParameters' );
  var HBox = require( 'SCENERY/nodes/HBox' );
  var VBox = require( 'SCENERY/nodes/VBox' );
  var AlignBox = require( 'SCENERY/nodes/AlignBox' );
  var AlignGroup = require( 'SCENERY/nodes/AlignGroup' );

  /**
   * @constructor
   */
  function ComponentsScreenView() {
    DemosScreenView.call( this, [

      /**
       * To add a demo, add an object literal here. Each object has these properties:
       *
       * {string} label - label in the combo box
       * {function(Bounds2): Node} getNode - creates the scene graph for the demo
       */
      { label: 'Carousel', getNode: demoCarousel },
      { label: 'ComboBox', getNode: demoComboBox },
      { label: 'HSlider', getNode: demoHSlider },
      { label: 'OnOffSwitch', getNode: demoOnOffSwitch },
      { label: 'PageControl', getNode: demoPageControl },
      { label: 'NumberSpinner', getNode: demoNumberSpinner },
      { label: 'AlignGroup', getNode: demoAlignGroup }
    ], {
      selectedDemoLabel: sunQueryParameters.component
    } );
  }

  sun.register( 'ComponentsScreenView', ComponentsScreenView );

  // Creates a demo for Carousel
  var demoCarousel = function( layoutBounds ) {

    // create items
    var colors = [ 'red', 'blue', 'green', 'yellow', 'pink', 'white', 'orange', 'magenta', 'purple', 'pink' ];
    var vItems = [];
    var hItems = [];
    colors.forEach( function( color ) {
      vItems.push( new Rectangle( 0, 0, 60, 60, { fill: color, stroke: 'black' } ) );
      hItems.push( new Circle( 30, { fill: color, stroke: 'black' } ) );
    } );

    // vertical carousel
    var vCarousel = new Carousel( vItems, {
      orientation: 'vertical',
      separatorsVisible: true,
      buttonTouchAreaXDilation: 5,
      buttonTouchAreaYDilation: 15,
      buttonMouseAreaXDilation: 2,
      buttonMouseAreaYDilation: 7
    } );

    // horizontal carousel
    var hCarousel = new Carousel( hItems, {
      orientation: 'horizontal',
      buttonTouchAreaXDilation: 15,
      buttonTouchAreaYDilation: 5,
      buttonMouseAreaXDilation: 7,
      buttonMouseAreaYDilation: 2,
      centerX: vCarousel.centerX,
      top: vCarousel.bottom + 50
    } );

    // button that scrolls the horizontal carousel to a specific item
    var itemIndex = 4;
    var hScrollToItemButton = new RectangularPushButton( {
      content: new Text( 'scroll to item ' + itemIndex, { font: new PhetFont( 20 ) } ),
      listener: function() {
        hCarousel.scrollToItem( hItems[ itemIndex ] );
      }
    } );

    // button that sets the horizontal carousel to a specific page number
    var pageNumber = 0;
    var hScrollToPageButton = new RectangularPushButton( {
      content: new Text( 'scroll to page ' + pageNumber, { font: new PhetFont( 20 ) } ),
      listener: function() {
        hCarousel.pageNumberProperty.set( pageNumber );
      }
    } );

    // group the buttons
    var buttonGroup = new VBox( {
      children: [ hScrollToItemButton, hScrollToPageButton ],
      align: 'left',
      spacing: 7,
      left: hCarousel.right + 30,
      centerY: hCarousel.centerY
    } );

    return new Node( {
      children: [ vCarousel, hCarousel, buttonGroup ],
      center: layoutBounds.center
    } );
  };

  // Creates a demo of ComboBox
  var demoComboBox = function( layoutBounds ) {

    var labels = [ 'one', 'two', 'three', 'four', 'five', 'six' ];
    var items = [];
    labels.forEach( function( label ) {
      items.push( ComboBox.createItem( new Text( label, { font: new PhetFont( { size: 20 } ) } ), label ) );
    } );

    var selectedItemProperty = new Property( labels[ 0 ] );

    var listParent = new Node();

    var comboBox = new ComboBox( items, selectedItemProperty, listParent, {
      listPosition: 'above'
    } );

    var enabledCheckBox = new CheckBox( new Text( 'enabled', new PhetFont( 20 ) ), comboBox.enabledProperty );

    var uiComponents = new VBox( {
      children: [ comboBox, enabledCheckBox ],
      spacing: 40,
      center: layoutBounds.center
    } );

    return new Node( { children: [ uiComponents, listParent ] } );
  };

  // Creates a demo for HSlider
  var demoHSlider = function( layoutBounds ) {

    var property = new Property( 0 );
    var range = new RangeWithValue( 0, 100 );<commit_msg>Options object fixes for Text, see https://github.com/phetsims/scenery/issues/642<commit_after>// Copyright 2015, University of Colorado Boulder

/**
 * Demonstration of misc sun UI components.
 * Demos are selected from a combo box, and are instantiated on demand.
 * Use the 'component' query parameter to set the initial selection of the combo box.
 *
 * @author <NAME> (PhET Interactive Simulations)
 * @author <NAME> (PixelZoom, Inc.)
 */
define( function( require ) {
  'use strict';

  // modules
  var Carousel = require( 'SUN/Carousel' );
  var CheckBox = require( 'SUN/CheckBox' );
  var Circle = require( 'SCENERY/nodes/Circle' );
  var ComboBox = require( 'SUN/ComboBox' );
  var DemosScreenView = require( 'SUN/demo/DemosScreenView' );
  var Dimension2 = require( 'DOT/Dimension2' );
  var HSlider = require( 'SUN/HSlider' );
  var inherit = require( 'PHET_CORE/inherit' );
  var Node = require( 'SCENERY/nodes/Node' );
  var NumberSpinner = require( 'SUN/NumberSpinner' );
  var OnOffSwitch = require( 'SUN/OnOffSwitch' );
  var PageControl = require( 'SUN/PageControl' );
  var Panel = require( 'SUN/Panel' );
  var PhetFont = require( 'SCENERY_PHET/PhetFont' );
  var Property = require( 'AXON/Property' );
  var Range = require( 'DOT/Range' );
  var RangeWithValue = require( 'DOT/RangeWithValue' );
  var Rectangle = require( 'SCENERY/nodes/Rectangle' );
  var RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' );
  var Text = require( 'SCENERY/nodes/Text' );
  var Timer = require( 'PHET_CORE/Timer' );
  var sun = require( 'SUN/sun' );
  var sunQueryParameters = require( 'SUN/sunQueryParameters' );
  var HBox = require( 'SCENERY/nodes/HBox' );
  var VBox = require( 'SCENERY/nodes/VBox' );
  var AlignBox = require( 'SCENERY/nodes/AlignBox' );
  var AlignGroup = require( 'SCENERY/nodes/AlignGroup' );

  /**
   * @constructor
   */
  function ComponentsScreenView() {
    DemosScreenView.call( this, [

      /**
       * To add a demo, add an object literal here. Each object has these properties:
       *
       * {string} label - label in the combo box
       * {function(Bounds2): Node} getNode - creates the scene graph for the demo
       */
      { label: 'Carousel', getNode: demoCarousel },
      { label: 'ComboBox', getNode: demoComboBox },
      { label: 'HSlider', getNode: demoHSlider },
      { label: 'OnOffSwitch', getNode: demoOnOffSwitch },
      { label: 'PageControl', getNode: demoPageControl },
      { label: 'NumberSpinner', getNode: demoNumberSpinner },
      { label: 'AlignGroup', getNode: demoAlignGroup }
    ], {
      selectedDemoLabel: sunQueryParameters.component
    } );
  }

  sun.register( 'ComponentsScreenView', ComponentsScreenView );

  // Creates a demo for Carousel
  var demoCarousel = function( layoutBounds ) {

    // create items
    var colors = [ 'red', 'blue', 'green', 'yellow', 'pink', 'white', 'orange', 'magenta', 'purple', 'pink' ];
    var vItems = [];
    var hItems = [];
    colors.forEach( function( color ) {
      vItems.push( new Rectangle( 0, 0, 60, 60, { fill: color, stroke: 'black' } ) );
      hItems.push( new Circle( 30, { fill: color, stroke: 'black' } ) );
    } );

    // vertical carousel
    var vCarousel = new Carousel( vItems, {
      orientation: 'vertical',
      separatorsVisible: true,
      buttonTouchAreaXDilation: 5,
      buttonTouchAreaYDilation: 15,
      buttonMouseAreaXDilation: 2,
      buttonMouseAreaYDilation: 7
    } );

    // horizontal carousel
    var hCarousel = new Carousel( hItems, {
      orientation: 'horizontal',
      buttonTouchAreaXDilation: 15,
      buttonTouchAreaYDilation: 5,
      buttonMouseAreaXDilation: 7,
      buttonMouseAreaYDilation: 2,
      centerX: vCarousel.centerX,
      top: vCarousel.bottom + 50
    } );

    // button that scrolls the horizontal carousel to a specific item
    var itemIndex = 4;
    var hScrollToItemButton = new RectangularPushButton( {
      content: new Text( 'scroll to item ' + itemIndex, { font: new PhetFont( 20 ) } ),
      listener: function() {
        hCarousel.scrollToItem( hItems[ itemIndex ] );
      }
    } );

    // button that sets the horizontal carousel to a specific page number
    var pageNumber = 0;
    var hScrollToPageButton = new RectangularPushButton( {
      content: new Text( 'scroll to page ' + pageNumber, { font: new PhetFont( 20 ) } ),
      listener: function() {
        hCarousel.pageNumberProperty.set( pageNumber );
      }
    } );

    // group the buttons
    var buttonGroup = new VBox( {
      children: [ hScrollToItemButton, hScrollToPageButton ],
      align: 'left',
      spacing: 7,
      left: hCarousel.right + 30,
      centerY: hCarousel.centerY
    } );

    return new Node( {
      children: [ vCarousel, hCarousel, buttonGroup ],
      center: layoutBounds.center
    } );
  };

  // Creates a demo of ComboBox
  var demoComboBox = function( layoutBounds ) {

    var labels = [ 'one', 'two', 'three', 'four', 'five', 'six' ];
    var items = [];
    labels.forEach( function( label ) {
      items.push( ComboBox.createItem( new Text( label, { font: new PhetFont( { size: 20 } ) } ), label ) );
    } );

    var selectedItemProperty = new Property( labels[ 0 ] );

    var listParent = new Node();

    var comboBox = new ComboBox( items, selectedItemProperty, listParent, {
      listPosition: 'above'
    } );

    var enabledCheckBox = new CheckBox( new Text( 'enabled', { font: new PhetFont( 20 ) } ), comboBox.enabledProperty );

    var uiComponents = new VBox( {
      children: [ comboBox, enabledCheckBox ],
      spacing: 40,
      center: layoutBounds.center
    } );

    return new Node( { children: [ uiComponents, listParent ] } );
  };

  // Creates a demo for HSlider
  var demoHSlider = function( layoutBounds ) {

    var property = new Property( 0 );
    var range = new RangeWithValue( 0, 100 );
{'fraction_non_alphanumeric': 0.12547072920232796, 'fraction_numerical': 0.008473125641903457, 'mean_word_length': 3.0756888733868153, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, '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': '3928242', 'n_tokens_mistral': 3768, 'n_tokens_neox': 3603, 'n_words': 1037}