From 954ba7dd0b2d542d7f8097660bbf7d211276642e Mon Sep 17 00:00:00 2001 From: zepumph Date: Thu, 19 Sep 2019 14:26:15 -0800 Subject: [PATCH] var -> const using eslint auto fix, https://github.com/phetsims/tasks/issues/1012 --- js/ABSwitch.js | 18 +-- js/AccordionBox.js | 28 ++--- js/AquaRadioButton.js | 24 ++-- js/CallbackTimer.js | 8 +- js/Carousel.js | 64 +++++----- js/Checkbox.js | 16 +-- js/ClosestDragListener.js | 18 +-- js/ComboBox.js | 2 +- js/ComboBoxListBox.js | 2 +- js/ExpandCollapseBar.js | 8 +- js/FontAwesomeNode.js | 8 +- js/MenuItem.js | 36 +++--- js/MutableOptionsNode.js | 8 +- js/NumberSpinner.js | 52 ++++---- js/OnOffSwitch.js | 30 ++--- js/PageControl.js | 14 +-- js/Panel.js | 12 +- js/Slider.js | 34 +++--- js/SliderThumb.js | 8 +- js/SunA11yStrings.js | 4 +- js/ToggleNode.js | 26 ++-- js/VerticalCheckboxGroup.js | 10 +- js/accessibility/AccessibleSlider.js | 10 +- js/accessibility/AccessibleValueHandler.js | 30 ++--- js/buttons/ArrowButton.js | 8 +- js/buttons/ButtonInteractionState.js | 2 +- js/buttons/ButtonModel.js | 12 +- js/buttons/CarouselButton.js | 10 +- js/buttons/HTMLPushButton.js | 2 +- js/buttons/MomentaryButtonModel.js | 6 +- js/buttons/PushButtonModel.js | 8 +- js/buttons/RadioButtonGroup.js | 60 +++++----- js/buttons/RadioButtonGroupAppearance.js | 14 +-- js/buttons/RadioButtonGroupMember.js | 4 +- js/buttons/RadioButtonInteractionState.js | 2 +- js/buttons/RectangularButtonView.js | 114 +++++++++--------- js/buttons/RectangularMomentaryButton.js | 2 +- js/buttons/RectangularPushButton.js | 2 +- js/buttons/RectangularStickyToggleButton.js | 4 +- js/buttons/RectangularToggleButton.js | 2 +- js/buttons/RoundButtonView.js | 104 ++++++++-------- js/buttons/RoundPushButton.js | 4 +- js/buttons/RoundStickyToggleButton.js | 4 +- js/buttons/RoundToggleButton.js | 2 +- js/buttons/StickyToggleButtonModel.js | 10 +- js/buttons/TextPushButton.js | 2 +- js/buttons/ToggleButtonModel.js | 6 +- js/demo/ButtonsScreenView.js | 126 ++++++++++---------- js/demo/ComponentsScreenView.js | 114 +++++++++--------- js/demo/DemosScreenView.js | 14 +-- js/demo/DialogsScreenView.js | 16 +-- js/demo/MemoryTestsScreenView.js | 12 +- js/sun-main.js | 4 +- js/sunQueryParameters.js | 2 +- 54 files changed, 571 insertions(+), 571 deletions(-) diff --git a/js/ABSwitch.js b/js/ABSwitch.js index 45cb15f4..58c03a87 100644 --- a/js/ABSwitch.js +++ b/js/ABSwitch.js @@ -52,7 +52,7 @@ define( require => { tandem: Tandem.required }, options ); - var defaultTrackFill = new LinearGradient( 0, 0, 0, options.switchSize.height ).addColorStop( 0, 'rgb(40,40,40)' ).addColorStop( 1, 'rgb(200,200,200)' ); + const defaultTrackFill = new LinearGradient( 0, 0, 0, options.switchSize.height ).addColorStop( 0, 'rgb(40,40,40)' ).addColorStop( 1, 'rgb(200,200,200)' ); options.trackFillA = options.trackFillA || defaultTrackFill; options.trackFillB = options.trackFillB || defaultTrackFill; options.thumbFill = options.thumbFill || @@ -61,9 +61,9 @@ define( require => { Node.call( this ); // property for adapting to OnOffSwitch. 'true' is 'B', the object on the 'on' end of the OnOffSwitch. - var onProperty = new Property( valueB === property.get() ); + const onProperty = new Property( valueB === property.get() ); - var onOffSwitch = new OnOffSwitch( onProperty, { + const onOffSwitch = new OnOffSwitch( onProperty, { size: options.switchSize, cursor: options.cursor, thumbFill: options.thumbFill, @@ -89,8 +89,8 @@ define( require => { // add a horizontal strut that will cause the 'centerX' of this node to be at the center of the button if ( options.centerOnButton ) { - var additionalWidth = Math.abs( labelA.width - labelB.width ); - var strut = new Line( 0, 0, this.width + additionalWidth, 0 ); + const additionalWidth = Math.abs( labelA.width - labelB.width ); + const strut = new Line( 0, 0, this.width + additionalWidth, 0 ); this.addChild( strut ); strut.moveToBack(); if ( labelA.width < labelB.width ) { @@ -102,12 +102,12 @@ define( require => { } // sync properties, listeners must be disposed - var propertyListener = function( object ) { + const propertyListener = function( object ) { onProperty.set( valueB === object ); }; property.link( propertyListener ); - var onPropertyListener = function( on ) { + const onPropertyListener = function( on ) { property.set( on ? valueB : valueA ); if ( options.setEnabled ) { options.setEnabled( labelA, !on ); @@ -117,10 +117,10 @@ define( require => { onProperty.link( onPropertyListener ); // click on labels to select, must be disposed - var aInputListener = new ButtonListener( { + const aInputListener = new ButtonListener( { fire: function() { onProperty.set( false ); } } ); - var bInputListener = new ButtonListener( { + const bInputListener = new ButtonListener( { fire: function() { onProperty.set( true ); } } ); labelA.addInputListener( aInputListener ); diff --git a/js/AccordionBox.js b/js/AccordionBox.js index 34205736..f6036d66 100644 --- a/js/AccordionBox.js +++ b/js/AccordionBox.js @@ -36,7 +36,7 @@ define( require => { */ function AccordionBox( contentNode, options ) { - var self = this; + const self = this; options = _.extend( { @@ -168,7 +168,7 @@ define( require => { } ); // Expanded box - var boxOptions = { + const boxOptions = { fill: options.fill, cornerRadius: options.cornerRadius }; @@ -258,7 +258,7 @@ define( require => { // optional box outline, on top of everything else if ( options.stroke ) { - var outlineOptions = { + const outlineOptions = { stroke: options.stroke, lineWidth: options.lineWidth, cornerRadius: options.cornerRadius @@ -279,7 +279,7 @@ define( require => { // Watch future changes for re-layout (don't want to trigger on our first layout and queue useless ones) if ( options.resize ) { - var layoutListener = this.layout.bind( this ); + const layoutListener = this.layout.bind( this ); contentNode.on( 'bounds', layoutListener ); this.titleNode.on( 'bounds', layoutListener ); this.disposeEmitterAccordionBox.addListener( function() { @@ -289,7 +289,7 @@ define( require => { } // expand/collapse the box - var expandedPropertyObserver = function( expanded ) { + const expandedPropertyObserver = function( expanded ) { self.expandedBox.visible = expanded; self.collapsedBox.visible = !expanded; @@ -318,14 +318,14 @@ define( require => { * @private */ layout: function() { - var collapsedBoxHeight = this.getCollapsedBoxHeight(); - var boxWidth = this.getBoxWidth(); - var expandedBoxHeight = this.getExpandedBoxHeight(); + const collapsedBoxHeight = this.getCollapsedBoxHeight(); + const boxWidth = this.getBoxWidth(); + const expandedBoxHeight = this.getExpandedBoxHeight(); this.expandedBox.rectWidth = boxWidth; this.expandedBox.rectHeight = expandedBoxHeight; - var expandedBounds = this.expandedBox.selfBounds; + const expandedBounds = this.expandedBox.selfBounds; this.expandedBoxOutline.rectWidth = boxWidth; this.expandedBoxOutline.rectHeight = expandedBoxHeight; @@ -349,8 +349,8 @@ define( require => { // content layout this._contentNode.bottom = expandedBounds.bottom - this._contentYMargin; - var contentSpanLeft = expandedBounds.left + this._contentXMargin; - var contentSpanRight = expandedBounds.right - this._contentXMargin; + let contentSpanLeft = expandedBounds.left + this._contentXMargin; + let contentSpanRight = expandedBounds.right - this._contentXMargin; if ( !this._showTitleWhenExpanded ) { // content will be placed next to button if ( this._buttonAlign === 'left' ) { @@ -371,8 +371,8 @@ define( require => { } // button horizontal layout - var titleLeftSpan = expandedBounds.left + this._titleXMargin; - var titleRightSpan = expandedBounds.right - this._titleXMargin; + let titleLeftSpan = expandedBounds.left + this._titleXMargin; + let titleRightSpan = expandedBounds.right - this._titleXMargin; if ( this._buttonAlign === 'left' ) { this.expandCollapseButton.left = expandedBounds.left + this._buttonXMargin; titleLeftSpan = this.expandCollapseButton.right + this._titleXSpacing; @@ -429,7 +429,7 @@ define( require => { getBoxWidth: function() { // Initial width is dependent on width of title section of the accordion box - var width = Math.max( this._minWidth, this._buttonXMargin + this.expandCollapseButton.width + this._titleXSpacing + this.titleNode.width + this._titleXMargin ); + let width = Math.max( this._minWidth, this._buttonXMargin + this.expandCollapseButton.width + this._titleXSpacing + this.titleNode.width + this._titleXMargin ); // Limit width by the necessary space for the title node if ( this._titleAlignX === 'center' ) { diff --git a/js/AquaRadioButton.js b/js/AquaRadioButton.js index 2a3f1e2d..3a294882 100644 --- a/js/AquaRadioButton.js +++ b/js/AquaRadioButton.js @@ -21,7 +21,7 @@ define( require => { const Tandem = require( 'TANDEM/Tandem' ); // constants - var DEFAULT_RADIUS = 7; + const DEFAULT_RADIUS = 7; /** * @param property @@ -59,7 +59,7 @@ define( require => { a11yNameAttribute: null }, options ); - var self = this; + const self = this; // @private - converted to an AXON/Property from a property to support PhET-iO this.enabledProperty = new BooleanProperty( options.enabled, { @@ -68,9 +68,9 @@ define( require => { } ); // selected node creation - var selectedNode = new Node(); - var innerCircle = new Circle( options.radius / 3, { fill: options.centerColor } ); - var outerCircleSelected = new Circle( options.radius, { fill: options.selectedColor, stroke: options.stroke } ); + const selectedNode = new Node(); + const innerCircle = new Circle( options.radius / 3, { fill: options.centerColor } ); + const outerCircleSelected = new Circle( options.radius, { fill: options.selectedColor, stroke: options.stroke } ); // @private this.selectedCircleButton = new Node( { @@ -82,7 +82,7 @@ define( require => { node.centerY = outerCircleSelected.centerY; // deselected node - var deselectedNode = new Node(); + const deselectedNode = new Node(); // @private this.deselectedCircleButton = new Circle( options.radius, { @@ -97,7 +97,7 @@ define( require => { Node.call( this ); //Add an invisible node to make sure the layout for selected vs deselected is the same - var background = new Rectangle( selectedNode.bounds.union( deselectedNode.bounds ) ); + const background = new Rectangle( selectedNode.bounds.union( deselectedNode.bounds ) ); selectedNode.pickable = deselectedNode.pickable = false; // the background rectangle suffices this.addChild( background ); @@ -105,24 +105,24 @@ define( require => { this.addChild( deselectedNode ); // sync control with model - var syncWithModel = function( newValue ) { + const syncWithModel = function( newValue ) { selectedNode.visible = ( newValue === value ); deselectedNode.visible = !selectedNode.visible; }; property.link( syncWithModel ); // set property value on fire - var fire = function() { + const fire = function() { property.set( value ); }; - var inputListener = new FireListener( { + const inputListener = new FireListener( { fire: fire, tandem: options.tandem.createTandem( 'inputListener' ) } ); this.addInputListener( inputListener ); // a11y - input listener so that updates the state of the radio button with keyboard interaction - var changeListener = { + const changeListener = { change: fire }; this.addInputListener( changeListener ); @@ -137,7 +137,7 @@ define( require => { // a11y - when the property changes, make sure the correct radio button is marked as 'checked' so that this button // receives focus on 'tab' - var accessibleCheckedListener = function( newValue ) { + const accessibleCheckedListener = function( newValue ) { self.accessibleChecked = newValue === value; }; property.link( accessibleCheckedListener ); diff --git a/js/CallbackTimer.js b/js/CallbackTimer.js index b1148f61..9edff121 100644 --- a/js/CallbackTimer.js +++ b/js/CallbackTimer.js @@ -52,7 +52,7 @@ define( require => { // @public Starts the timer. start: function() { - var self = this; + const self = this; if ( !self.isRunning() ) { self.fired = false; self.delayID = timer.setTimeout( function() { @@ -100,7 +100,7 @@ define( require => { // @public Removes a {function} callback. removeCallback: function( callback ) { - var index = this.callbacks.indexOf( callback ); + const index = this.callbacks.indexOf( callback ); if ( index !== -1 ) { this.callbacks.splice( index, 1 ); } @@ -112,8 +112,8 @@ define( require => { * @public */ fire: function() { - var callbacksCopy = this.callbacks.slice( 0 ); - for ( var i = 0; i < callbacksCopy.length; i++ ) { + const callbacksCopy = this.callbacks.slice( 0 ); + for ( let i = 0; i < callbacksCopy.length; i++ ) { callbacksCopy[ i ](); } this.fired = true; diff --git a/js/Carousel.js b/js/Carousel.js index a64d899e..343da821 100644 --- a/js/Carousel.js +++ b/js/Carousel.js @@ -82,7 +82,7 @@ define( require => { */ function Carousel( items, options ) { - var self = this; + const self = this; // Override defaults with specified options options = _.extend( {}, DEFAULT_OPTIONS, options ); @@ -91,17 +91,17 @@ define( require => { assert && assert( _.includes( [ 'horizontal', 'vertical' ], options.orientation ), 'invalid orientation=' + options.orientation ); // To improve readability - var isHorizontal = ( options.orientation === 'horizontal' ); + const isHorizontal = ( options.orientation === 'horizontal' ); // Dimensions of largest item - var maxItemWidth = _.maxBy( items, function( item ) { return item.width; } ).width; - var maxItemHeight = _.maxBy( items, function( item ) { return item.height; } ).height; + const maxItemWidth = _.maxBy( items, function( item ) { return item.width; } ).width; + const maxItemHeight = _.maxBy( items, function( item ) { return item.height; } ).height; // This quantity is used make some other computations independent of orientation. - var maxItemLength = isHorizontal ? maxItemWidth : maxItemHeight; + const maxItemLength = isHorizontal ? maxItemWidth : maxItemHeight; // Options common to both buttons - var buttonOptions = { + const buttonOptions = { xMargin: 5, yMargin: 5, cornerRadius: options.cornerRadius, @@ -121,18 +121,18 @@ define( require => { }; // Next/previous buttons - var nextButton = new CarouselButton( _.extend( { arrowDirection: isHorizontal ? 'right' : 'down' }, buttonOptions ) ); - var previousButton = new CarouselButton( _.extend( { arrowDirection: isHorizontal ? 'left' : 'up' }, buttonOptions ) ); + const nextButton = new CarouselButton( _.extend( { arrowDirection: isHorizontal ? 'right' : 'down' }, buttonOptions ) ); + const previousButton = new CarouselButton( _.extend( { arrowDirection: isHorizontal ? 'left' : 'up' }, buttonOptions ) ); // Computations related to layout of items - var numberOfSeparators = ( options.separatorsVisible ) ? ( items.length - 1 ) : 0; - var scrollingLength = ( items.length * ( maxItemLength + options.spacing ) + ( numberOfSeparators * options.spacing ) + options.spacing ); - var scrollingWidth = isHorizontal ? scrollingLength : ( maxItemWidth + 2 * options.margin ); - var scrollingHeight = isHorizontal ? ( maxItemHeight + 2 * options.margin ) : scrollingLength; - var itemCenter = options.spacing + ( maxItemLength / 2 ); + const numberOfSeparators = ( options.separatorsVisible ) ? ( items.length - 1 ) : 0; + const scrollingLength = ( items.length * ( maxItemLength + options.spacing ) + ( numberOfSeparators * options.spacing ) + options.spacing ); + const scrollingWidth = isHorizontal ? scrollingLength : ( maxItemWidth + 2 * options.margin ); + const scrollingHeight = isHorizontal ? ( maxItemHeight + 2 * options.margin ) : scrollingLength; + let itemCenter = options.spacing + ( maxItemLength / 2 ); // Options common to all separators - var separatorOptions = { + const separatorOptions = { stroke: options.separatorColor, lineWidth: options.separatorLineWidth }; @@ -143,7 +143,7 @@ define( require => { // All items, arranged in the proper orientation, with margins and spacing. // Horizontal carousel arrange items left-to-right, vertical is top-to-bottom. // Translation of this node will be animated to give the effect of scrolling through the items. - var scrollingNode = new Rectangle( 0, 0, scrollingWidth, scrollingHeight ); + const scrollingNode = new Rectangle( 0, 0, scrollingWidth, scrollingHeight ); items.forEach( function( item ) { // add the item @@ -162,7 +162,7 @@ define( require => { // add optional separator if ( options.separatorsVisible ) { - var separator; + let separator; if ( isHorizontal ) { // vertical separator, to the left of the item @@ -191,36 +191,36 @@ define( require => { } ); // How much to translate scrollingNode each time a next/previous button is pressed - var scrollingDelta = options.itemsPerPage * ( maxItemLength + options.spacing ); + let scrollingDelta = options.itemsPerPage * ( maxItemLength + options.spacing ); if ( options.separatorsVisible ) { scrollingDelta += ( options.itemsPerPage * options.spacing ); } // Clipping window, to show one page at a time. // Clips at the midpoint of spacing between items so that you don't see any stray bits of the items that shouldn't be visible. - var windowLength = ( scrollingDelta + options.spacing ); + let windowLength = ( scrollingDelta + options.spacing ); if ( options.separatorsVisible ) { windowLength -= options.spacing; } - var windowWidth = isHorizontal ? windowLength : scrollingNode.width; - var windowHeight = isHorizontal ? scrollingNode.height : windowLength; - var clipArea = isHorizontal ? + const windowWidth = isHorizontal ? windowLength : scrollingNode.width; + const windowHeight = isHorizontal ? scrollingNode.height : windowLength; + const clipArea = isHorizontal ? Shape.rectangle( options.spacing / 2, 0, windowWidth - options.spacing, windowHeight ) : Shape.rectangle( 0, options.spacing / 2, windowWidth, windowHeight - options.spacing ); - var windowNode = new Node( { + const windowNode = new Node( { children: [ scrollingNode ], clipArea: clipArea } ); // Background - displays the carousel's fill color - var backgroundWidth = isHorizontal ? ( windowWidth + nextButton.width + previousButton.width ) : windowWidth; - var backgroundHeight = isHorizontal ? windowHeight : ( windowHeight + nextButton.height + previousButton.height ); - var backgroundNode = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, options.cornerRadius, options.cornerRadius, { + const backgroundWidth = isHorizontal ? ( windowWidth + nextButton.width + previousButton.width ) : windowWidth; + const backgroundHeight = isHorizontal ? windowHeight : ( windowHeight + nextButton.height + previousButton.height ); + const backgroundNode = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, options.cornerRadius, options.cornerRadius, { fill: options.fill } ); // Foreground - displays the carousel's outline, created as a separate node so that it can be placed on top of everything, for a clean look. - var foregroundNode = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, options.cornerRadius, options.cornerRadius, { + const foregroundNode = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, options.cornerRadius, options.cornerRadius, { stroke: options.stroke } ); @@ -239,7 +239,7 @@ define( require => { } // Number of pages - var numberOfPages = items.length / options.itemsPerPage; + let numberOfPages = items.length / options.itemsPerPage; if ( !Util.isInteger( numberOfPages ) ) { numberOfPages = Math.floor( numberOfPages + 1 ); } @@ -247,10 +247,10 @@ define( require => { // Number of the page that is visible in the carousel. assert && assert( options.defaultPageNumber >= 0 && options.defaultPageNumber <= numberOfPages - 1, 'defaultPageNumber is out of range: ' + options.defaultPageNumber ); - var pageNumberProperty = new Property( options.defaultPageNumber ); + const pageNumberProperty = new Property( options.defaultPageNumber ); // Change pages - var scrollAnimation = null; + let scrollAnimation = null; function pageNumberListener( pageNumber ) { @@ -270,7 +270,7 @@ define( require => { if ( self._animationEnabled ) { // options that are independent of orientation - var animationOptions = { + let animationOptions = { duration: options.animationDuration, stepEmitter: options.stepEmitter, easing: Easing.CUBIC_IN_OUT @@ -357,7 +357,7 @@ define( require => { animationEnabled: this.animationEnabled // {boolean} whether to enable animation during reset }, options ); - var saveAnimationEnabled = this.animationEnabled; + const saveAnimationEnabled = this.animationEnabled; this.animationEnabled = options.animationEnabled; this.pageNumberProperty.reset(); this.animationEnabled = saveAnimationEnabled; @@ -408,7 +408,7 @@ define( require => { * @public */ isItemVisible: function( item ) { - var itemIndex = this.items.indexOf( item ); + const itemIndex = this.items.indexOf( item ); assert && assert( itemIndex !== -1, 'item not found' ); return ( this.pageNumberProperty.get() === this.itemIndexToPageNumber( itemIndex ) ); }, diff --git a/js/Checkbox.js b/js/Checkbox.js index c6d52a71..232c700e 100644 --- a/js/Checkbox.js +++ b/js/Checkbox.js @@ -34,7 +34,7 @@ define( require => { * @constructor */ function Checkbox( content, property, options ) { - var self = this; + const self = this; options = _.extend( { spacing: 5, @@ -64,7 +64,7 @@ define( require => { PhetioObject.mergePhetioComponentOptions( { visibleProperty: { phetioFeatured: true } }, options ); // @private - sends out notifications when the checkbox is toggled. - var toggleAction = new Action( function( value ) { + const toggleAction = new Action( function( value ) { property.value = value; }, { parameters: [ { name: 'isChecked', phetioType: BooleanIO } ], @@ -86,7 +86,7 @@ define( require => { this.uncheckedNode = new FontAwesomeNode( 'check_empty', { fill: options.checkboxColor } ); - var iconScale = options.boxWidth / this.uncheckedNode.width; + const iconScale = options.boxWidth / this.uncheckedNode.width; this.uncheckedNode.scale( iconScale ); // @private @@ -110,10 +110,10 @@ define( require => { content.pickable = false; // since there's a pickable rectangle on top of content // interactivity - var checkboxButtonListener = new ButtonListener( { + const checkboxButtonListener = new ButtonListener( { fire: function() { if ( self.enabledProperty.value ) { - var newValue = !property.value; + const newValue = !property.value; toggleAction.execute( newValue ); } } @@ -121,7 +121,7 @@ define( require => { this.addInputListener( checkboxButtonListener ); // sync with property - var checkboxCheckedListener = function( checked ) { + const checkboxCheckedListener = function( checked ) { self.checkedNode.visible = checked; self.uncheckedNode.visible = !checked; self.accessibleChecked = checked; @@ -132,7 +132,7 @@ define( require => { this.mutate( options ); // does this instance own enabledProperty? - var ownsEnabledProperty = !options.enabledProperty; + const ownsEnabledProperty = !options.enabledProperty; // must be after the Checkbox is instrumented options.phetioLinkProperty && this.addLinkedElement( property, { @@ -157,7 +157,7 @@ define( require => { phetioFeatured: true } ); - var enabledListener = function( enabled ) { + const enabledListener = function( enabled ) { if ( enabled ) { self.setAccessibleAttribute( 'onclick', '' ); self.setAccessibleAttribute( 'aria-disabled', false ); diff --git a/js/ClosestDragListener.js b/js/ClosestDragListener.js index 01424075..c4338164 100644 --- a/js/ClosestDragListener.js +++ b/js/ClosestDragListener.js @@ -57,7 +57,7 @@ define( require => { * @param {item} item */ removeDraggableItem: function( item ) { - var index = _.indexOf( this.items, item ); + const index = _.indexOf( this.items, item ); assert && assert( index >= 0 ); this.items.splice( index, 1 ); }, @@ -65,7 +65,7 @@ define( require => { down: function( event ) { // If there was nothing else in the way if ( event.target === event.currentTarget ) { - var threshold = 0; + let threshold = 0; if ( event.pointer instanceof Touch ) { threshold = this.touchThreshold; } @@ -74,14 +74,14 @@ define( require => { } if ( threshold ) { // search for the closest item - var currentItem = null; - var currentDistance = Number.POSITIVE_INFINITY; - var globalPoint = event.pointer.point; - var numItems = this.items.length; - for ( var i = 0; i < numItems; i++ ) { - var item = this.items[ i ]; + let currentItem = null; + let currentDistance = Number.POSITIVE_INFINITY; + const globalPoint = event.pointer.point; + const numItems = this.items.length; + for ( let i = 0; i < numItems; i++ ) { + const item = this.items[ i ]; - var distance = item.computeDistance( globalPoint ); + const distance = item.computeDistance( globalPoint ); if ( distance < currentDistance ) { currentDistance = distance; currentItem = item; diff --git a/js/ComboBox.js b/js/ComboBox.js index 4f552d61..317d8a3f 100644 --- a/js/ComboBox.js +++ b/js/ComboBox.js @@ -192,7 +192,7 @@ define( require => { }; // So we know whether we can dispose of the enabledProperty and its tandem - var ownsEnabledProperty = !options.enabledProperty; + const ownsEnabledProperty = !options.enabledProperty; // @public Provide a default if not specified this.enabledProperty = options.enabledProperty || new BooleanProperty( true, { diff --git a/js/ComboBoxListBox.js b/js/ComboBoxListBox.js index b9213153..a4e29e50 100644 --- a/js/ComboBoxListBox.js +++ b/js/ComboBoxListBox.js @@ -159,7 +159,7 @@ define( require => { // Handle keydown keydown: event => { - var keyCode = event.domEvent.keyCode; + const keyCode = event.domEvent.keyCode; if ( keyCode === KeyboardUtil.KEY_ESCAPE || keyCode === KeyboardUtil.KEY_TAB ) { // Escape and Tab hide the list box and return focus to the button diff --git a/js/ExpandCollapseBar.js b/js/ExpandCollapseBar.js index ec1fa86b..3bad4c13 100644 --- a/js/ExpandCollapseBar.js +++ b/js/ExpandCollapseBar.js @@ -42,16 +42,16 @@ define( require => { Node.call( this ); // expand/collapse button - var button = new ExpandCollapseButton( expandedProperty, { + const button = new ExpandCollapseButton( expandedProperty, { sideLength: options.buttonLength, tandem: options.tandem.createTandem( 'button' ) } ); button.touchArea = Shape.bounds( button.localBounds.dilatedXY( 10, 10 ) ); // bar - var barWidth = Math.max( options.minWidth, titleNode.width + button.width + options.xSpacing + ( 2 * options.xMargin ) ); - var barHeight = Math.max( options.minHeight, Math.max( titleNode.height, button.height ) + ( 2 * options.yMargin ) ); - var barNode = new Rectangle( 0, 0, barWidth, barHeight, options.cornerRadius, options.cornerRadius, { + const barWidth = Math.max( options.minWidth, titleNode.width + button.width + options.xSpacing + ( 2 * options.xMargin ) ); + const barHeight = Math.max( options.minHeight, Math.max( titleNode.height, button.height ) + ( 2 * options.yMargin ) ); + const barNode = new Rectangle( 0, 0, barWidth, barHeight, options.cornerRadius, options.cornerRadius, { fill: options.barFill, stroke: options.barStroke, lineWidth: options.barLineWidth diff --git a/js/FontAwesomeNode.js b/js/FontAwesomeNode.js index a9822bb6..4709bfc8 100644 --- a/js/FontAwesomeNode.js +++ b/js/FontAwesomeNode.js @@ -36,7 +36,7 @@ define( require => { * E.g. 'fa-level-down' -> level_down. * (7) Copy the SVG data to the new field in ICONS. */ - var ICONS = { + const ICONS = { camera: 'M960 864q119 0 203.5 -84.5t84.5 -203.5t-84.5 -203.5t-203.5 -84.5t-203.5 84.5t-84.5 203.5t84.5 203.5t203.5 84.5zM1664 1280q106 0 181 -75t75 -181v-896q0 -106 -75 -181t-181 -75h-1408q-106 0 -181 75t-75 181v896q0 106 75 181t181 75h224l51 136 q19 49 69.5 84.5t103.5 35.5h512q53 0 103.5 -35.5t69.5 -84.5l51 -136h224zM960 128q185 0 316.5 131.5t131.5 316.5t-131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5z', check: 'M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z', check_empty: 'M1120 1280h-832q-66 0 -113 -47t-47 -113v-832q0 -66 47 -113t113 -47h832q66 0 113 47t47 113v832q0 66 -47 113t-113 47zM1408 1120v-832q0 -119 -84.5 -203.5t-203.5 -84.5h-832q-119 0 -203.5 84.5t-84.5 203.5v832q0 119 84.5 203.5t203.5 84.5h832 q119 0 203.5 -84.5t84.5 -203.5z', @@ -61,11 +61,11 @@ define( require => { }; // constants - var SHAPE_MATRIX = Matrix3.createFromPool( 0.025, 0, 0, 0, -0.025, 0, 0, 0, 1 ); // to create a unity-scale icon + const SHAPE_MATRIX = Matrix3.createFromPool( 0.025, 0, 0, 0, -0.025, 0, 0, 0, 1 ); // to create a unity-scale icon // keys are fontawesome icon names, values are Shape instances. // Shapes are immutable so that Path doesn't add a listener, which creates a memory leak. - var shapeCache = {}; + const shapeCache = {}; /** * @param {string} iconName - the fontawesome icon name @@ -87,7 +87,7 @@ define( require => { enableCache: true }, options ); - var shape; + let shape; if ( options.enableCache ) { // cache the shape diff --git a/js/MenuItem.js b/js/MenuItem.js index bf8d5675..dd62d3b4 100644 --- a/js/MenuItem.js +++ b/js/MenuItem.js @@ -23,21 +23,21 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // the check mark used for toggle-able menu items - var CHECK_MARK_NODE = new FontAwesomeNode( 'check', { + const CHECK_MARK_NODE = new FontAwesomeNode( 'check', { fill: 'rgba(0,0,0,0.7)', scale: 0.4 } ); // constants - var FONT_SIZE = 18; - var HIGHLIGHT_COLOR = '#a6d2f4'; - var MAX_ITEM_WIDTH = 400; - var CHECK_PADDING = 2; // padding between the check and text - var CHECK_OFFSET = CHECK_MARK_NODE.width + CHECK_PADDING; // offset that includes the check mark's width and padding - var LEFT_X_MARGIN = 2; - var RIGHT_X_MARGIN = 5; - var Y_MARGIN = 3; - var CORNER_RADIUS = 5; + const FONT_SIZE = 18; + const HIGHLIGHT_COLOR = '#a6d2f4'; + const MAX_ITEM_WIDTH = 400; + const CHECK_PADDING = 2; // padding between the check and text + const CHECK_OFFSET = CHECK_MARK_NODE.width + CHECK_PADDING; // offset that includes the check mark's width and padding + const LEFT_X_MARGIN = 2; + const RIGHT_X_MARGIN = 5; + const Y_MARGIN = 3; + const CORNER_RADIUS = 5; /** * @param {Number} width - the width of the menu item @@ -49,7 +49,7 @@ define( require => { * @constructor */ function MenuItem( width, height, closeCallback, text, callback, options ) { - var self = this; + const self = this; // Extend the object with defaults. options = _.extend( { @@ -72,13 +72,13 @@ define( require => { Node.call( this ); - var textNode = new Text( text, { + const textNode = new Text( text, { font: new PhetFont( FONT_SIZE ), fill: options.textFill, maxWidth: MAX_ITEM_WIDTH } ); - var highlight = new Rectangle( 0, 0, width + LEFT_X_MARGIN + RIGHT_X_MARGIN + CHECK_OFFSET, + const highlight = new Rectangle( 0, 0, width + LEFT_X_MARGIN + RIGHT_X_MARGIN + CHECK_OFFSET, height + Y_MARGIN + Y_MARGIN, CORNER_RADIUS, CORNER_RADIUS ); this.addChild( highlight ); @@ -92,7 +92,7 @@ define( require => { exit: function() { highlight.fill = null; } } ); - var fire = function( event ) { + const fire = function( event ) { closeCallback( event ); callback( event ); }; @@ -106,9 +106,9 @@ define( require => { this.separatorBefore = options.separatorBefore; // if there is a check-mark property, add the check mark and hook up visibility changes - var checkListener; + let checkListener; if ( options.checkedProperty ) { - var checkMarkWrapper = new Node( { + const checkMarkWrapper = new Node( { children: [ CHECK_MARK_NODE ], right: textNode.left - CHECK_PADDING, centerY: textNode.centerY @@ -121,12 +121,12 @@ define( require => { } // a11y - activate the item when selected with the keyboard - var clickListener = { + const clickListener = { click: function( event ) { fire(); // limit search of next focusable to root accessible HTML element - var rootElement = phet.joist.display.accessibleDOMElement; + const rootElement = phet.joist.display.accessibleDOMElement; options.focusAfterCallback && AccessibilityUtil.getNextFocusable( rootElement ).focus(); } }; diff --git a/js/MutableOptionsNode.js b/js/MutableOptionsNode.js index 794ed53a..5663099b 100644 --- a/js/MutableOptionsNode.js +++ b/js/MutableOptionsNode.js @@ -58,7 +58,7 @@ define( require => { // @private {Function} - The constructor for our custom subtype this._type = function MutableOptionsNodeConstructor() { // Unwrap the properties in dynamicOptions - var options = _.extend( _.mapValues( dynamicOptions, function( property ) { + const options = _.extend( _.mapValues( dynamicOptions, function( property ) { return property.value; } ), staticOptions ); @@ -85,9 +85,9 @@ define( require => { * @private */ replaceCopy: function() { - var Type = this._type; // avoids our linter complaining about uncapitalized types with 'new' - var newCopy = new Type(); - var oldCopy = this.nodeProperty.value; + const Type = this._type; // avoids our linter complaining about uncapitalized types with 'new' + const newCopy = new Type(); + const oldCopy = this.nodeProperty.value; this.nodeProperty.value = newCopy; // Add first, so that there's a good chance we won't change bounds (depending on the type) diff --git a/js/NumberSpinner.js b/js/NumberSpinner.js index 437dc8d2..a9132fdd 100644 --- a/js/NumberSpinner.js +++ b/js/NumberSpinner.js @@ -24,7 +24,7 @@ define( require => { const Util = require( 'DOT/Util' ); // possible values for options.arrowsPosition - var ARROWS_POSITION_VALUES = [ + const ARROWS_POSITION_VALUES = [ 'leftRight', // arrow buttons on left and right of value 'topBottom', // arrow buttons on top and bottom of value 'bothRight', // both arrow buttons to the right of the value @@ -32,7 +32,7 @@ define( require => { ]; // possible values for options.valueAlign - var VALUE_ALIGN_VALUES = [ 'center', 'left', 'right' ]; + const VALUE_ALIGN_VALUES = [ 'center', 'left', 'right' ]; /** * @param {Property.} numberProperty value, must be an integer @@ -91,44 +91,44 @@ define( require => { options.valuePattern.indexOf( SunConstants.VALUE_NAMED_PLACEHOLDER ) !== -1, 'missing value placeholder in options.valuePattern: ' + options.valuePattern ); - var self = this; + const self = this; - var valueOptions = { + const valueOptions = { font: options.font, fill: 'black' }; // compute max width of the value that's going to be displayed - var minString = StringUtils.fillIn( options.valuePattern, { + const minString = StringUtils.fillIn( options.valuePattern, { value: Util.toFixed( rangeProperty.value.min, options.decimalPlaces ) } ); - var maxString = StringUtils.fillIn( options.valuePattern, { + const maxString = StringUtils.fillIn( options.valuePattern, { value: Util.toFixed( rangeProperty.value.max, options.decimalPlaces ) } ); - var maxWidth = Math.max( + const maxWidth = Math.max( new Text( minString, valueOptions ).width, new Text( maxString, valueOptions ).width ); // number - var numberNode = new Text( numberProperty.get(), valueOptions ); + const numberNode = new Text( numberProperty.get(), valueOptions ); // compute the size of the background - var backgroundWidth = Math.max( maxWidth + 2 * options.xMargin, options.backgroundMinWidth ); - var backgroundHeight = numberNode.height + ( 2 * options.yMargin ); + const backgroundWidth = Math.max( maxWidth + 2 * options.xMargin, options.backgroundMinWidth ); + const backgroundHeight = numberNode.height + ( 2 * options.yMargin ); // background for displaying the value - var backgroundNode = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, + const backgroundNode = new Rectangle( 0, 0, backgroundWidth, backgroundHeight, options.cornerRadius, options.cornerRadius, { fill: options.backgroundFill, stroke: options.backgroundStroke, lineWidth: options.backgroundLineWidth } ); numberNode.center = backgroundNode.center; - var valueParent = new Node( { children: [ backgroundNode, numberNode ] } ); + const valueParent = new Node( { children: [ backgroundNode, numberNode ] } ); // buttons - var arrowButtonOptions = { + const arrowButtonOptions = { baseColor: options.arrowButtonFill, stroke: options.arrowButtonStroke, lineWidth: options.arrowButtonLineWidth, @@ -136,21 +136,21 @@ define( require => { }; // increment button - var incrementFunction = function() { + const incrementFunction = function() { numberProperty.set( numberProperty.get() + options.deltaValue ); }; - var incrementDirection = ( options.arrowsPosition === 'topBottom' || options.arrowsPosition === 'bothRight' ) ? 'up' : 'right'; - var incrementButton = new ArrowButton( incrementDirection, incrementFunction, arrowButtonOptions ); + const incrementDirection = ( options.arrowsPosition === 'topBottom' || options.arrowsPosition === 'bothRight' ) ? 'up' : 'right'; + const incrementButton = new ArrowButton( incrementDirection, incrementFunction, arrowButtonOptions ); // decrement button - var decrementFunction = function() { + const decrementFunction = function() { numberProperty.set( numberProperty.get() - options.deltaValue ); }; - var decrementDirection = ( options.arrowsPosition === 'topBottom' || options.arrowsPosition === 'bothRight' ) ? 'down' : 'left'; - var decrementButton = new ArrowButton( decrementDirection, decrementFunction, arrowButtonOptions ); + const decrementDirection = ( options.arrowsPosition === 'topBottom' || options.arrowsPosition === 'bothRight' ) ? 'down' : 'left'; + const decrementButton = new ArrowButton( decrementDirection, decrementFunction, arrowButtonOptions ); // arrow button scaling - var arrowsScale; + let arrowsScale; if ( !arrowsScale ) { if ( options.arrowsPosition === 'leftRight' ) { arrowsScale = valueParent.height / incrementButton.height; @@ -232,14 +232,14 @@ define( require => { Node.call( this, options ); - var updateEnabled = function() { + const updateEnabled = function() { // enable/disable arrow buttons incrementButton.enabled = ( ( numberProperty.value + options.deltaValue ) <= rangeProperty.value.max ); decrementButton.enabled = ( ( numberProperty.value - options.deltaValue ) >= rangeProperty.value.min ); }; // synchronize with number value - var numberPropertyObserver = function( value ) { + const numberPropertyObserver = function( value ) { assert && assert( rangeProperty.value.contains( value ), 'value out of range: ' + value ); // update the number @@ -267,7 +267,7 @@ define( require => { numberProperty.link( numberPropertyObserver ); // must be unlinked in dispose // Dynamic range changes, see https://github.com/phetsims/scenery-phet/issues/305 - var rangeObserver = function( range ) { + const rangeObserver = function( range ) { // If our value is outside our new range, adjust it to be within the range. numberProperty.value = range.constrainValue( numberProperty.value ); @@ -278,7 +278,7 @@ define( require => { // enable or disable this component this.enabledProperty = options.enabledProperty; // @public - var enabledPropertyObserver = function( enabled ) { + const enabledPropertyObserver = function( enabled ) { self.pickable = enabled; self.opacity = enabled ? 1 : 0.5; //TODO if !enabled, cancel any interaction that is in progress, see scenery#218 @@ -293,8 +293,8 @@ define( require => { this.initializeAccessibleNumberSpinner( numberProperty, rangeProperty, this.enabledProperty, options ); // a11y - click arrow buttons on keyboard increment/decrement; must be disposed - var increasedListener = function( isDown ) { isDown && incrementButton.a11yClick(); }; - var decreasedListener = function( isDown ) { isDown && decrementButton.a11yClick(); }; + const increasedListener = function( isDown ) { isDown && incrementButton.a11yClick(); }; + const decreasedListener = function( isDown ) { isDown && decrementButton.a11yClick(); }; this.incrementDownEmitter.addListener( increasedListener ); this.decrementDownEmitter.addListener( decreasedListener ); diff --git a/js/OnOffSwitch.js b/js/OnOffSwitch.js index 7a2e73bc..9cc3ae51 100644 --- a/js/OnOffSwitch.js +++ b/js/OnOffSwitch.js @@ -74,12 +74,12 @@ define( require => { phetioEventType: EventType.USER }, options ); - var self = this; + const self = this; Node.call( this ); // track that the thumb slides in - var cornerRadius = options.size.height / 2; - var trackNode = this.trackNode = new Rectangle( 0, 0, options.size.width, options.size.height, cornerRadius, cornerRadius, { + const cornerRadius = options.size.height / 2; + const trackNode = this.trackNode = new Rectangle( 0, 0, options.size.width, options.size.height, cornerRadius, cornerRadius, { fill: options.trackOffFill, stroke: options.trackStroke, cachedPaints: [ options.trackOnFill, options.trackOffFill ] @@ -87,7 +87,7 @@ define( require => { this.addChild( trackNode ); // thumb (aka knob) - var thumbNode = this.thumbNode = new Rectangle( 0, 0, 0.5 * options.size.width, options.size.height, cornerRadius, cornerRadius, { + const thumbNode = this.thumbNode = new Rectangle( 0, 0, 0.5 * options.size.width, options.size.height, cornerRadius, cornerRadius, { fill: options.thumbFill, stroke: options.thumbStroke } ); @@ -110,7 +110,7 @@ define( require => { } // move thumb to on or off position - var updateThumb = function( on ) { + const updateThumb = function( on ) { if ( on ) { thumbNode.right = options.size.width; trackNode.fill = options.trackOnFill; @@ -125,9 +125,9 @@ define( require => { onProperty.link( updateThumb.bind( this ) ); // thumb interactivity - var dragThresholdSquared = options.dragThreshold * options.dragThreshold; // comparing squared magnitudes is a bit faster - var accumulatedDelta = new Vector2( 0, 0 ); // stores how far we are from where our drag started, in our local coordinate frame - var passedDragThreshold = false; // whether we have dragged far enough to be considered for "drag" behavior (pick closest side), or "tap" behavior (toggle) + const dragThresholdSquared = options.dragThreshold * options.dragThreshold; // comparing squared magnitudes is a bit faster + const accumulatedDelta = new Vector2( 0, 0 ); // stores how far we are from where our drag started, in our local coordinate frame + let passedDragThreshold = false; // whether we have dragged far enough to be considered for "drag" behavior (pick closest side), or "tap" behavior (toggle) this.addInputListener( new SimpleDragHandler( { tandem: options.tandem.createTandem( 'simpleDragHandler' ), @@ -145,16 +145,16 @@ define( require => { drag: function( evt, trail ) { // center the thumb on the pointer's x-coordinate if possible (but clamp to left and right ends) - var viewPoint = evt.currentTarget.globalToLocalPoint( evt.pointer.point ); - var halfThumbWidth = thumbNode.width / 2; + const viewPoint = evt.currentTarget.globalToLocalPoint( evt.pointer.point ); + const halfThumbWidth = thumbNode.width / 2; thumbNode.centerX = Util.clamp( viewPoint.x, halfThumbWidth, options.size.width - halfThumbWidth ); // whether the thumb is dragged outside of the possible range far enough beyond our threshold to potentially // trigger an immediate model change - var isDraggedOutside = viewPoint.x < ( 1 - 2 * options.toggleThreshold ) * halfThumbWidth || + const isDraggedOutside = viewPoint.x < ( 1 - 2 * options.toggleThreshold ) * halfThumbWidth || viewPoint.x > ( -1 + 2 * options.toggleThreshold ) * halfThumbWidth + options.size.width; - var value = self.thumbPositionToValue(); // value represented by the current thumb position + const value = self.thumbPositionToValue(); // value represented by the current thumb position // track fill changes based on the thumb positions trackNode.fill = value ? options.trackOnFill : options.trackOffFill; @@ -165,7 +165,7 @@ define( require => { // Only signify a change if the value actually changed to avoid duplicate messages in the PhET-iO Event // stream, see https://github.com/phetsims/phet-io/issues/369 - var changed = onProperty.get() !== value; + const changed = onProperty.get() !== value; if ( changed ) { self.phetioStartEvent( 'toggled', { oldValue: !value, @@ -178,10 +178,10 @@ define( require => { }, end: function( evt, trail ) { - var oldValue = onProperty.get(); + const oldValue = onProperty.get(); // if moved past the threshold, choose value based on the side, otherwise just toggle - var newValue = passedDragThreshold ? self.thumbPositionToValue() : !onProperty.get(); + const newValue = passedDragThreshold ? self.thumbPositionToValue() : !onProperty.get(); self.phetioStartEvent( 'toggled', { oldValue: oldValue, diff --git a/js/PageControl.js b/js/PageControl.js index 59c19516..40c5c07e 100644 --- a/js/PageControl.js +++ b/js/PageControl.js @@ -52,10 +52,10 @@ define( require => { assert && assert( _.includes( [ 'horizontal', 'vertical' ], options.orientation ), 'invalid orientation=' + options.orientation ); // To improve readability - var isHorizontal = ( options.orientation === 'horizontal' ); + const isHorizontal = ( options.orientation === 'horizontal' ); // Clicking on a dot goes to that page - var dotListener = new DownUpListener( { + const dotListener = new DownUpListener( { down: function( event ) { assert && assert( event.currentTarget.hasOwnProperty( 'pageNumber' ) ); pageNumberProperty.set( event.currentTarget.pageNumber ); @@ -66,12 +66,12 @@ define( require => { // Add them to an intermediate parent node, so that additional children can't be inadvertently added. // For horizontal orientation, pages are ordered left-to-right. // For vertical orientation, pages are ordered top-to-bottom. - var dotsParent = new Node(); - for ( var pageNumber = 0; pageNumber < numberOfPages; pageNumber++ ) { + const dotsParent = new Node(); + for ( let pageNumber = 0; pageNumber < numberOfPages; pageNumber++ ) { // dot - var dotCenter = ( pageNumber * ( 2 * options.dotRadius + options.dotSpacing ) ); - var dotNode = new DotNode( pageNumber, options.dotRadius, { + const dotCenter = ( pageNumber * ( 2 * options.dotRadius + options.dotSpacing ) ); + const dotNode = new DotNode( pageNumber, options.dotRadius, { fill: options.pageFill, stroke: options.pageStroke, lineWidth: options.lineWidth, @@ -92,7 +92,7 @@ define( require => { } // Indicate which page is selected - var pageNumberObserver = function( pageNumber, oldPageNumber ) { + const pageNumberObserver = function( pageNumber, oldPageNumber ) { // previous dot if ( oldPageNumber || oldPageNumber === 0 ) { diff --git a/js/Panel.js b/js/Panel.js index 9ce0f1af..3787fae4 100644 --- a/js/Panel.js +++ b/js/Panel.js @@ -19,9 +19,9 @@ define( require => { const Tandem = require( 'TANDEM/Tandem' ); // valid values for options.align - var ALIGN_VALUES = [ 'left', 'center', 'right' ]; + const ALIGN_VALUES = [ 'left', 'center', 'right' ]; - var DEFAULT_OPTIONS = { + const DEFAULT_OPTIONS = { fill: 'white', // TODO: Should these be color constants? stroke: 'black', // TODO: Should these be color constants? lineWidth: 1, // width of the background border @@ -56,7 +56,7 @@ define( require => { Node.call( this ); // correct size will be set by updateBackground - var background = new Rectangle( 0, 0, 1, 1, { + const background = new Rectangle( 0, 0, 1, 1, { lineWidth: options.lineWidth, pickable: options.backgroundPickable, lineDash: options.lineDash, @@ -71,10 +71,10 @@ define( require => { this.addChild( content ); // flag for preventing recursion - var backgroundUpdateInProgress = false; + let backgroundUpdateInProgress = false; // Adjust the background size to match the content. - var updateBackground = function() { + const updateBackground = function() { // Check that an update isn't already in progress, lest we end up with some nasty recursion. For details, please // see https://github.com/phetsims/sun/issues/110 and https://github.com/phetsims/molecule-shapes/issues/130. @@ -91,7 +91,7 @@ define( require => { backgroundUpdateInProgress = true; // size the background to fit the content - var backgroundWidth = Math.max( options.minWidth, content.width + ( 2 * options.xMargin ) ); + const backgroundWidth = Math.max( options.minWidth, content.width + ( 2 * options.xMargin ) ); background.setRect( 0, 0, backgroundWidth, content.height + ( 2 * options.yMargin ) ); // Align the content within the background. If the content width >= minWidth, then all alignments are equivalent. diff --git a/js/Slider.js b/js/Slider.js index 9c2be962..e4d6e1fa 100644 --- a/js/Slider.js +++ b/js/Slider.js @@ -48,7 +48,7 @@ define( require => { */ function Slider( valueProperty, range, options ) { - var self = this; + const self = this; // Guard against mutually exclusive options before defaults are filled in. assert && assertMutuallyExclusiveOptions( options, [ 'thumbNode' ], [ @@ -141,8 +141,8 @@ define( require => { Node.call( this ); - var ownsEnabledProperty = !options.enabledProperty; - var ownsEnabledRangeProperty = !options.enabledRangeProperty; + const ownsEnabledProperty = !options.enabledProperty; + const ownsEnabledRangeProperty = !options.enabledRangeProperty; if ( assert && Tandem.PHET_IO_ENABLED && !ownsEnabledProperty ) { options.tandem.supplied && assert( options.enabledProperty.isPhetioInstrumented(), @@ -176,7 +176,7 @@ define( require => { 'majorTickLength', 'majorTickStroke', 'majorTickLineWidth', 'minorTickLength', 'minorTickStroke', 'minorTickLineWidth' ); - var sliderParts = []; + const sliderParts = []; // @private ticks are added to these parents, so they are behind the knob this.majorTicksParent = new Node(); @@ -207,7 +207,7 @@ define( require => { this.track.centerX = this.track.valueToPosition( ( range.max + range.min ) / 2 ); // The thumb of the slider - var thumb = options.thumbNode || new SliderThumb( { + const thumb = options.thumbNode || new SliderThumb( { // propagate options that are specific to SliderThumb size: options.thumbSize, @@ -234,7 +234,7 @@ define( require => { // Wrap all of the slider parts in a Node, and set the orientation of that Node. // This allows us to still decorate the Slider with additional children. // See https://github.com/phetsims/sun/issues/406 - var sliderPartsNode = new Node( { children: sliderParts } ); + const sliderPartsNode = new Node( { children: sliderParts } ); if ( options.orientation === 'vertical' ) { sliderPartsNode.rotation = VERTICAL_ROTATION; } @@ -251,8 +251,8 @@ define( require => { } // update value when thumb is dragged - var clickXOffset = 0; // x-offset between initial click and thumb's origin - var thumbInputListener = new SimpleDragHandler( { + let clickXOffset = 0; // x-offset between initial click and thumb's origin + const thumbInputListener = new SimpleDragHandler( { tandem: options.tandem.createTandem( 'thumbInputListener' ), @@ -262,7 +262,7 @@ define( require => { start: function( event, trail ) { if ( self.enabledProperty.get() ) { options.startDrag( event ); - var transform = trail.subtrailTo( sliderPartsNode ).getTransform(); + const transform = trail.subtrailTo( sliderPartsNode ).getTransform(); // Determine the offset relative to the center of the thumb clickXOffset = transform.inversePosition2( event.pointer.point ).x - thumb.centerX; @@ -271,9 +271,9 @@ define( require => { drag: function( event, trail ) { if ( self.enabledProperty.get() ) { - var transform = trail.subtrailTo( sliderPartsNode ).getTransform(); // we only want the transform to our parent - var x = transform.inversePosition2( event.pointer.point ).x - clickXOffset; - var newValue = self.track.valueToPosition.inverse( x ); + const transform = trail.subtrailTo( sliderPartsNode ).getTransform(); // we only want the transform to our parent + const x = transform.inversePosition2( event.pointer.point ).x - clickXOffset; + const newValue = self.track.valueToPosition.inverse( x ); valueProperty.set( options.constrainValue( newValue ) ); } @@ -288,7 +288,7 @@ define( require => { thumb.addInputListener( thumbInputListener ); // enable/disable - var enabledObserver = function( enabled ) { + const enabledObserver = function( enabled ) { self.interruptSubtreeInput(); self.pickable = enabled; self.cursor = enabled ? options.cursor : 'default'; @@ -297,13 +297,13 @@ define( require => { this.enabledProperty.link( enabledObserver ); // must be unlinked in disposeSlider // update thumb location when value changes - var valueObserver = function( value ) { + const valueObserver = function( value ) { thumb.centerX = self.track.valueToPosition( value ); }; valueProperty.link( valueObserver ); // must be unlinked in disposeSlider // when the enabled range changes, the value to position linear function must change as well - var enabledRangeObserver = function( enabledRange ) { + const enabledRangeObserver = function( enabledRange ) { // clamp the value to the enabled range if it changes valueProperty.set( Util.clamp( valueProperty.value, enabledRange.min, enabledRange.max ) ); @@ -388,10 +388,10 @@ define( require => { * @private */ addTick: function( parent, value, label, length, stroke, lineWidth ) { - var labelX = this.track.valueToPosition( value ); + const labelX = this.track.valueToPosition( value ); // ticks - var tick = new Path( new Shape() + const tick = new Path( new Shape() .moveTo( labelX, this.track.top ) .lineTo( labelX, this.track.top - length ), { stroke: stroke, lineWidth: lineWidth } ); diff --git a/js/SliderThumb.js b/js/SliderThumb.js index 8b6d9896..8c184101 100644 --- a/js/SliderThumb.js +++ b/js/SliderThumb.js @@ -36,10 +36,10 @@ define( require => { tandem: Tandem.required }, options ); - var self = this; + const self = this; // rectangle - var arcWidth = 0.25 * options.size.width; + const arcWidth = 0.25 * options.size.width; Rectangle.call( this, 0, 0, options.size.width, options.size.height, arcWidth, arcWidth, _.extend( options, { @@ -52,7 +52,7 @@ define( require => { // Paint area that is slightly larger than the slider thumb so SVG updates a large enough paintable region. // Related to https://github.com/phetsims/masses-and-springs/issues/334 - var paintLayer = Rectangle.bounds( this.bounds.dilated( 5 ), { + const paintLayer = Rectangle.bounds( this.bounds.dilated( 5 ), { fill: 'transparent', localBounds: this.bounds, pickable: false @@ -60,7 +60,7 @@ define( require => { this.addChild( paintLayer ); // vertical line down the center - var centerLineYMargin = 3; + const centerLineYMargin = 3; this.addChild( new Path( Shape.lineSegment( options.size.width / 2, centerLineYMargin, options.size.width / 2, options.size.height - centerLineYMargin ), { diff --git a/js/SunA11yStrings.js b/js/SunA11yStrings.js index 76f07e99..2a453978 100644 --- a/js/SunA11yStrings.js +++ b/js/SunA11yStrings.js @@ -13,7 +13,7 @@ define( require => { const sun = require( 'SUN/sun' ); - var SunA11yStrings = { + const SunA11yStrings = { accordionBoxCollapse: { value: 'Collapse' }, @@ -32,7 +32,7 @@ define( require => { }; if ( phet.chipper.queryParameters.stringTest === 'xss' ) { - for ( var key in SunA11yStrings ) { + for ( const key in SunA11yStrings ) { SunA11yStrings[ key ].value += ''; } } diff --git a/js/ToggleNode.js b/js/ToggleNode.js index 61ac4dd1..5e9f5bb6 100644 --- a/js/ToggleNode.js +++ b/js/ToggleNode.js @@ -27,7 +27,7 @@ define( require => { assert && assert( Array.isArray( elements ), 'elements should be an array' ); if ( assert ) { elements.forEach( function( element ) { - var keys = _.keys( element ); + const keys = _.keys( element ); assert( keys.length === 2, 'each element should have two keys' ); assert( keys[ 0 ] === 'value' || keys[ 1 ] === 'value', 'element should have a value key' ); assert( element.node instanceof Node, 'element.node should be a node' ); @@ -41,11 +41,11 @@ define( require => { tandem: Tandem.optional }, options ); - var valueListener = function( value ) { - var matchCount = 0; - for ( var i = 0; i < elements.length; i++ ) { - var element = elements[ i ]; - var visible = element.value === value; + const valueListener = function( value ) { + let matchCount = 0; + for ( let i = 0; i < elements.length; i++ ) { + const element = elements[ i ]; + const visible = element.value === value; element.node.visible = visible; if ( visible ) { matchCount++; @@ -90,7 +90,7 @@ define( require => { * @static */ CENTER: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].center = children[ 0 ].center; } }, @@ -102,7 +102,7 @@ define( require => { * @static */ CENTER_X: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].centerX = children[ 0 ].centerX; } }, @@ -114,7 +114,7 @@ define( require => { * @static */ CENTER_Y: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].centerY = children[ 0 ].centerY; } }, @@ -126,7 +126,7 @@ define( require => { * @static */ LEFT: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].left = children[ 0 ].left; } }, @@ -138,7 +138,7 @@ define( require => { * @static */ BOTTOM: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].bottom = children[ 0 ].bottom; } }, @@ -150,7 +150,7 @@ define( require => { * @static */ CENTER_BOTTOM: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].centerBottom = children[ 0 ].centerBottom; } }, @@ -162,7 +162,7 @@ define( require => { * @static */ RIGHT: function( children ) { - for ( var i = 1; i < children.length; i++ ) { + for ( let i = 1; i < children.length; i++ ) { children[ i ].right = children[ 0 ].right; } }, diff --git a/js/VerticalCheckboxGroup.js b/js/VerticalCheckboxGroup.js index 5e93f6f1..5fc14835 100644 --- a/js/VerticalCheckboxGroup.js +++ b/js/VerticalCheckboxGroup.js @@ -48,7 +48,7 @@ define( require => { assert && assert( !options.children, 'VerticalCheckboxGroup sets children' ); // Determine the max item width - var maxItemWidth = 0; + let maxItemWidth = 0; for ( var i = 0; i < items.length; i++ ) { maxItemWidth = Math.max( maxItemWidth, items[ i ].node.width ); } @@ -57,19 +57,19 @@ define( require => { options.children = []; for ( i = 0; i < items.length; i++ ) { - var item = items[ i ]; + const item = items[ i ]; // Content for the checkbox. Add an invisible strut, so that checkboxes have uniform width. - var content = new Node( { + const content = new Node( { children: [ new HStrut( maxItemWidth ), item.node ] } ); - var checkbox = new Checkbox( content, item.property, _.extend( {}, options.checkboxOptions, item.options, { + const checkbox = new Checkbox( content, item.property, _.extend( {}, options.checkboxOptions, item.options, { tandem: item.tandem || Tandem.optional } ) ); // set pointer areas, y dimensions are computed - var yDilation = options.spacing / 2; + const yDilation = options.spacing / 2; checkbox.mouseArea = checkbox.localBounds.dilatedXY( options.mouseAreaXDilation, yDilation ); checkbox.touchArea = checkbox.localBounds.dilatedXY( options.touchAreaXDilation, yDilation ); diff --git a/js/accessibility/AccessibleSlider.js b/js/accessibility/AccessibleSlider.js index 4652cc0c..0cb583b5 100644 --- a/js/accessibility/AccessibleSlider.js +++ b/js/accessibility/AccessibleSlider.js @@ -22,7 +22,7 @@ define( require => { const Node = require( 'SCENERY/nodes/Node' ); const sun = require( 'SUN/sun' ); - var AccessibleSlider = { + const AccessibleSlider = { /** * Implement functionality for a slider. @@ -35,7 +35,7 @@ define( require => { mixInto: function( type ) { assert && assert( _.includes( inheritance( type ), Node ) ); - var proto = type.prototype; + const proto = type.prototype; // mixin general value handling AccessibleValueHandler.mixInto( type ); @@ -53,9 +53,9 @@ define( require => { * @protected */ initializeAccessibleSlider: function( valueProperty, enabledRangeProperty, enabledProperty, options ) { - var self = this; + const self = this; - var defaults = { + const defaults = { startDrag: _.noop, // called when a drag sequence starts endDrag: _.noop, // called when a drag sequence ends constrainValue: _.identity // called before valueProperty is set @@ -74,7 +74,7 @@ define( require => { this.initializeAccessibleValueHandler( valueProperty, enabledRangeProperty, enabledProperty, options ); // handle all accessible event input - var accessibleInputListener = this.getAccessibleValueHandlerInputListener(); + const accessibleInputListener = this.getAccessibleValueHandlerInputListener(); this.addInputListener( accessibleInputListener ); // @private - called by disposeAccessibleSlider to prevent memory leaks diff --git a/js/accessibility/AccessibleValueHandler.js b/js/accessibility/AccessibleValueHandler.js index 0c961e30..94758a87 100644 --- a/js/accessibility/AccessibleValueHandler.js +++ b/js/accessibility/AccessibleValueHandler.js @@ -182,7 +182,7 @@ define( require => { // Some options were already mutated in the constructor, only apply the accessibility-specific options here // so options are not doubled up, see https://github.com/phetsims/sun/issues/330 - var optionsToMutate = _.pick( options, _.keys( defaults ) ); + const optionsToMutate = _.pick( options, _.keys( defaults ) ); // cannot be set by client assert && assert( options.tagName === undefined, 'AccessibleValueHandler sets tagName' ); @@ -293,7 +293,7 @@ define( require => { this.setA11yDependencies( options.a11yDependencies ); // listeners, must be unlinked in dispose - var enabledRangeObserver = enabledRange => { + const enabledRangeObserver = enabledRange => { // a11y - update enabled slider range for AT, required for screen reader events to behave correctly this.setAccessibleAttribute( 'min', enabledRange.min ); @@ -482,8 +482,8 @@ define( require => { * Add this as an input listener to the `keydown` event to the Node mixing in AccessibleValueHandler. */ handleKeyDown( event ) { - var domEvent = event.domEvent; - var code = domEvent.keyCode; + const domEvent = event.domEvent; + const code = domEvent.keyCode; this._shiftKey = domEvent.shiftKey; // if we receive a keydown event, we shouldn't handle any input events (which should only be provided @@ -504,7 +504,7 @@ define( require => { // track that a new key is being held down this.rangeKeysDown[ code ] = true; - var newValue = this._valueProperty.get(); + let newValue = this._valueProperty.get(); if ( code === KeyboardUtil.KEY_END || code === KeyboardUtil.KEY_HOME ) { // on 'end' and 'home' snap to max and min of enabled range respectively (this is typical browser @@ -519,7 +519,7 @@ define( require => { } } else { - var stepSize; + let stepSize; if ( code === KeyboardUtil.KEY_PAGE_UP || code === KeyboardUtil.KEY_PAGE_DOWN ) { // on page up and page down, the default step size is 1/10 of the range (this is typical browser behavior) stepSize = this.pageKeyboardStep; @@ -570,7 +570,7 @@ define( require => { * @param {Event} event */ handleKeyUp( event ) { - var domEvent = event.domEvent; + const domEvent = event.domEvent; // handle case where user tabbed to this input while an arrow key might have been held down if ( this.allKeysUp() ) { @@ -635,10 +635,10 @@ define( require => { // don't handle again on "change" event this.a11yInputHandled = true; - var newValue = this._valueProperty.get(); + let newValue = this._valueProperty.get(); - var inputValue = event.domEvent.target.value; - var stepSize = this._shiftKey ? this.shiftKeyboardStep : this.keyboardStep; + const inputValue = event.domEvent.target.value; + const stepSize = this._shiftKey ? this.shiftKeyboardStep : this.keyboardStep; // start of change event is start of drag this._startChange( event ); @@ -888,7 +888,7 @@ define( require => { * @returns {number} */ var roundValue = function( newValue, currentValue, stepSize ) { - var roundValue = newValue; + let roundValue = newValue; if ( stepSize !== 0 ) { // round the value to the nearest keyboard step @@ -911,14 +911,14 @@ define( require => { * @returns {number} */ var correctRounding = function( newValue, currentValue, stepSize ) { - var correctedValue = newValue; + let correctedValue = newValue; - var proposedStep = Math.abs( newValue - currentValue ); - var stepToFar = proposedStep > stepSize; + const proposedStep = Math.abs( newValue - currentValue ); + const stepToFar = proposedStep > stepSize; // it is possible that proposedStep will be larger than the stepSize but only because of precision // constraints with floating point values, don't correct if that is the cases - var stepsAboutEqual = Util.equalsEpsilon( proposedStep, stepSize, 1e-14 ); + const stepsAboutEqual = Util.equalsEpsilon( proposedStep, stepSize, 1e-14 ); if ( stepToFar && !stepsAboutEqual ) { correctedValue += ( newValue > currentValue ) ? ( -1 * stepSize ) : stepSize; } diff --git a/js/buttons/ArrowButton.js b/js/buttons/ArrowButton.js index ff654b95..ceec8f37 100644 --- a/js/buttons/ArrowButton.js +++ b/js/buttons/ArrowButton.js @@ -18,7 +18,7 @@ define( require => { const sun = require( 'SUN/sun' ); // constants - var DEFAULT_ARROW_HEIGHT = 20; + const DEFAULT_ARROW_HEIGHT = 20; /** * @param {string} direction 'up'|'down'|'left'|'right' @@ -63,11 +63,11 @@ define( require => { options.listener = callback; // arrow node - var arrowShape = new Shape(); - for ( var i = 0; i < options.numberOfArrows; i++ ) { + const arrowShape = new Shape(); + for ( let i = 0; i < options.numberOfArrows; i++ ) { // offset for the base of the arrow, shifting the shape of the arrow when there are more than one - var arrowOffset = i * ( options.arrowHeight + options.arrowSpacing ); + const arrowOffset = i * ( options.arrowHeight + options.arrowSpacing ); if ( direction === 'up' ) { arrowShape.moveTo( options.arrowHeight / 2, arrowOffset ).lineTo( options.arrowHeight, options.arrowWidth + arrowOffset ).lineTo( 0, options.arrowWidth + arrowOffset ).close(); } diff --git a/js/buttons/ButtonInteractionState.js b/js/buttons/ButtonInteractionState.js index 613cdfd7..be3f26cf 100644 --- a/js/buttons/ButtonInteractionState.js +++ b/js/buttons/ButtonInteractionState.js @@ -9,7 +9,7 @@ define( require => { const sun = require( 'SUN/sun' ); - var ButtonInteractionState = { + const ButtonInteractionState = { // button is just sitting there, doing nothing IDLE: 'IDLE', diff --git a/js/buttons/ButtonModel.js b/js/buttons/ButtonModel.js index eb7e662f..96585154 100644 --- a/js/buttons/ButtonModel.js +++ b/js/buttons/ButtonModel.js @@ -21,7 +21,7 @@ define( require => { * @constructor */ function ButtonModel( options ) { - var self = this; + const self = this; options = _.extend( { // {function()} called on pointer down @@ -92,8 +92,8 @@ define( require => { // interrupt listeners when enabled is set to false this.enabledProperty.link( function( enabled ) { if ( !enabled ) { - for ( var i = 0; i < self.listeners.length; i++ ) { - var listener = self.listeners[ i ]; + for ( let i = 0; i < self.listeners.length; i++ ) { + const listener = self.listeners[ i ]; listener.interrupt && listener.interrupt(); } } @@ -140,7 +140,7 @@ define( require => { * @public */ createListener: function( options ) { - var self = this; + const self = this; options = _.extend( { phetioDocumentation: 'Indicates when the button has been pressed or released', @@ -149,7 +149,7 @@ define( require => { } }, options ); - var pressListener = new PressListener( options ); + const pressListener = new PressListener( options ); this.listeners.push( pressListener ); // link lazily in case client externally sets downProperty - don't update until the next press @@ -160,7 +160,7 @@ define( require => { // dispose the previous multilink in case we already created a PressListener with this model this.looksPressedMultilink && this.looksPressedMultilink.dispose(); - var looksPressedProperties = this.listeners.map( function( listener ) { return listener.looksPressedProperty; } ); + const looksPressedProperties = this.listeners.map( function( listener ) { return listener.looksPressedProperty; } ); looksPressedProperties.push( this.downProperty ); // assign a new Multilink (for disposal), and make sure that the button looks pressed when any of the diff --git a/js/buttons/CarouselButton.js b/js/buttons/CarouselButton.js index b2434966..a2e22420 100644 --- a/js/buttons/CarouselButton.js +++ b/js/buttons/CarouselButton.js @@ -20,7 +20,7 @@ define( require => { const sun = require( 'SUN/sun' ); // maps arrow directions to rotation angles, in radians - var ANGLES = { + const ANGLES = { up: 0, // arrow shape is created in 'up' direction down: Math.PI, left: -Math.PI / 2, @@ -62,7 +62,7 @@ define( require => { assert && assert( ANGLES.hasOwnProperty( options.arrowDirection ), 'invalid direction: ' + options.direction ); // Generic arrow shape, points 'up' - var arrowShape = new Shape() + let arrowShape = new Shape() .moveTo( 0, 0 ) .lineTo( options.arrowSize.width / 2, -options.arrowSize.height ) .lineTo( options.arrowSize.width, 0 ); @@ -78,8 +78,8 @@ define( require => { } ); // set up the options such that the inner corners are square and outer ones are rounded - var arrowDirection = options.arrowDirection; // convenience var - var cornerRadius = options.cornerRadius; // convenience var + const arrowDirection = options.arrowDirection; // convenience var + const cornerRadius = options.cornerRadius; // convenience var options.leftTopCornerRadius = arrowDirection === 'up' || arrowDirection === 'left' ? cornerRadius : 0; options.rightTopCornerRadius = arrowDirection === 'up' || arrowDirection === 'right' ? cornerRadius : 0; options.leftBottomCornerRadius = arrowDirection === 'down' || arrowDirection === 'left' ? cornerRadius : 0; @@ -106,7 +106,7 @@ define( require => { * @returns {Bounds2} - null if no dilation is necessary, i.e. x === 0 && y === 0 */ var computePointerArea = function( button, arrowDirection, x, y ) { - var pointerArea = null; + let pointerArea = null; if ( x || y ) { switch( arrowDirection ) { case 'up': diff --git a/js/buttons/HTMLPushButton.js b/js/buttons/HTMLPushButton.js index 9a6ff380..e48e279d 100644 --- a/js/buttons/HTMLPushButton.js +++ b/js/buttons/HTMLPushButton.js @@ -25,7 +25,7 @@ define( require => { textFill: 'black' }, options ); - var htmlTextNode = new RichText( html, options ); + const htmlTextNode = new RichText( html, options ); RectangularPushButton.call( this, _.extend( { content: htmlTextNode }, options ) ); } diff --git a/js/buttons/MomentaryButtonModel.js b/js/buttons/MomentaryButtonModel.js index 82a18f54..4127462a 100644 --- a/js/buttons/MomentaryButtonModel.js +++ b/js/buttons/MomentaryButtonModel.js @@ -23,7 +23,7 @@ define( require => { * @constructor */ function MomentaryButtonModel( valueOff, valueOn, valueProperty, options ) { - var self = this; + const self = this; // Tandem support options = _.extend( { @@ -33,7 +33,7 @@ define( require => { ButtonModel.call( self, options ); - var downListener = function( down ) { + const downListener = function( down ) { // turn on when pressed (if enabled) if ( down ) { @@ -48,7 +48,7 @@ define( require => { this.downProperty.lazyLink( downListener ); // if valueProperty set externally, signify to ButtonModel - var valuePropertyListener = function( value ) { + const valuePropertyListener = function( value ) { self.downProperty.set( value === valueOn ); }; valueProperty.link( valuePropertyListener ); diff --git a/js/buttons/PushButtonModel.js b/js/buttons/PushButtonModel.js index cd99f742..bd927e71 100644 --- a/js/buttons/PushButtonModel.js +++ b/js/buttons/PushButtonModel.js @@ -40,7 +40,7 @@ define( require => { phetioReadOnly: PhetioObject.DEFAULT_OPTIONS.phetioReadOnly // to support properly passing this to children, see https://github.com/phetsims/tandem/issues/60 }, options ); - var self = this; + const self = this; ButtonModel.call( this, options ); @@ -69,7 +69,7 @@ define( require => { } // Point down - var downPropertyObserver = function( down ) { + const downPropertyObserver = function( down ) { if ( down ) { if ( self.enabledProperty.get() ) { if ( options.fireOnDown ) { @@ -81,7 +81,7 @@ define( require => { } } else { - var fire = ( !options.fireOnDown && self.overProperty.get() && self.enabledProperty.get() ); // should the button fire? + const fire = ( !options.fireOnDown && self.overProperty.get() && self.enabledProperty.get() ); // should the button fire? if ( self.timer ) { self.timer.stop( fire ); } @@ -93,7 +93,7 @@ define( require => { this.downProperty.link( downPropertyObserver ); // Stop the timer when the button is disabled. - var enabledPropertyObserver = function( enabled ) { + const enabledPropertyObserver = function( enabled ) { if ( !enabled && self.timer ) { self.timer.stop( false ); // Stop the timer, don't fire if we haven't already } diff --git a/js/buttons/RadioButtonGroup.js b/js/buttons/RadioButtonGroup.js index e98c45f5..8e69b652 100644 --- a/js/buttons/RadioButtonGroup.js +++ b/js/buttons/RadioButtonGroup.js @@ -31,14 +31,14 @@ define( require => { const Tandem = require( 'TANDEM/Tandem' ); // constants - var BUTTON_CONTENT_X_ALIGN_VALUES = [ 'center', 'left', 'right' ]; - var BUTTON_CONTENT_Y_ALIGN_VALUES = [ 'center', 'top', 'bottom' ]; - var CLASS_NAME = 'RadioButtonGroup'; // to prefix instanceCount in case there are different kinds of "groups" + const BUTTON_CONTENT_X_ALIGN_VALUES = [ 'center', 'left', 'right' ]; + const BUTTON_CONTENT_Y_ALIGN_VALUES = [ 'center', 'top', 'bottom' ]; + const CLASS_NAME = 'RadioButtonGroup'; // to prefix instanceCount in case there are different kinds of "groups" // a11y - Unique ID for each instance if RadioButtonGroup, passed to individual buttons in the group. All buttons in // the radio button group must have the same name or else the browser will treat all inputs of type radio in the // document as being in a single group. - var instanceCount = 0; + let instanceCount = 0; /** * RadioButtonGroup constructor. @@ -77,10 +77,10 @@ define( require => { return obj.hasOwnProperty( 'node' ) && obj.hasOwnProperty( 'value' ); } ), 'contentArray must be an array of objects with properties "node" and "value"' ); - var i; // for loops + let i; // for loops // make sure that each value passed into the contentArray is unique - var uniqueValues = []; + const uniqueValues = []; for ( i = 0; i < contentArray.length; i++ ) { if ( uniqueValues.indexOf( contentArray[ i ].value ) < 0 ) { uniqueValues.push( contentArray[ i ].value ); @@ -96,7 +96,7 @@ define( require => { '" that is not present in the contentArray' ); } - var defaultOptions = { + const defaultOptions = { // LayoutBox options (super class of RadioButtonGroup) spacing: 10, @@ -171,17 +171,17 @@ define( require => { 'invalid buttonContentYAlign: ' + options.buttonContentYAlign ); // make a copy of the options to pass to individual buttons that includes all default options but not scenery options - var buttonOptions = _.pick( options, _.keys( defaultOptions ) ); + const buttonOptions = _.pick( options, _.keys( defaultOptions ) ); // calculate the maximum width and height of the content so we can make all radio buttons the same size - var widestContentWidth = _.maxBy( contentArray, function( content ) { return content.node.width; } ).node.width; - var tallestContentHeight = _.maxBy( contentArray, function( content ) { return content.node.height; } ).node.height; + const widestContentWidth = _.maxBy( contentArray, function( content ) { return content.node.width; } ).node.width; + const tallestContentHeight = _.maxBy( contentArray, function( content ) { return content.node.height; } ).node.height; // make sure all radio buttons are the same size and create the RadioButtons - var buttons = []; - var button; + const buttons = []; + let button; for ( i = 0; i < contentArray.length; i++ ) { - var currentContent = contentArray[ i ]; + const currentContent = contentArray[ i ]; assert && assert( !currentContent.hasOwnProperty( 'phetioType' ), 'phetioType should be provided by ' + 'the property passed to the ' + @@ -190,7 +190,7 @@ define( require => { assert && assert( !currentContent.tandem, 'content arrays should not have tandem instances, they should use ' + 'tandemName instead' ); - var opts = _.extend( { + const opts = _.extend( { content: currentContent.node, xMargin: options.buttonContentXMargin, yMargin: options.buttonContentYMargin, @@ -217,37 +217,37 @@ define( require => { opts.descriptionContent = currentContent.descriptionContent; } - var radioButton = new RadioButtonGroupMember( property, currentContent.value, opts ); + const radioButton = new RadioButtonGroupMember( property, currentContent.value, opts ); // a11y - so the browser recognizes these buttons are in the same group, see instanceCount for more info radioButton.setAccessibleAttribute( 'name', CLASS_NAME + instanceCount ); // ensure the buttons don't resize when selected vs unselected by adding a rectangle with the max size - var maxLineWidth = Math.max( options.selectedLineWidth, options.deselectedLineWidth ); - var maxButtonWidth = maxLineWidth + widestContentWidth + options.buttonContentXMargin * 2; - var maxButtonHeight = maxLineWidth + tallestContentHeight + options.buttonContentYMargin * 2; - var boundingRect = new Rectangle( 0, 0, maxButtonWidth, maxButtonHeight, { + const maxLineWidth = Math.max( options.selectedLineWidth, options.deselectedLineWidth ); + const maxButtonWidth = maxLineWidth + widestContentWidth + options.buttonContentXMargin * 2; + const maxButtonHeight = maxLineWidth + tallestContentHeight + options.buttonContentYMargin * 2; + const boundingRect = new Rectangle( 0, 0, maxButtonWidth, maxButtonHeight, { fill: 'rgba(0,0,0,0)', center: radioButton.center } ); radioButton.addChild( boundingRect ); // default bounds for focus highlight, will include label if one exists - var defaultHighlightBounds = null; + let defaultHighlightBounds = null; // if a label is given, the button becomes a LayoutBox with the label and button if ( currentContent.label ) { - var label = currentContent.label; - var labelOrientation = ( options.labelAlign === 'bottom' || options.labelAlign === 'top' ) ? 'vertical' : 'horizontal'; - var labelChildren = ( options.labelAlign === 'left' || options.labelAlign === 'top' ) ? [ label, radioButton ] : [ radioButton, label ]; + const label = currentContent.label; + const labelOrientation = ( options.labelAlign === 'bottom' || options.labelAlign === 'top' ) ? 'vertical' : 'horizontal'; + const labelChildren = ( options.labelAlign === 'left' || options.labelAlign === 'top' ) ? [ label, radioButton ] : [ radioButton, label ]; button = new LayoutBox( { children: labelChildren, spacing: options.labelSpacing, orientation: labelOrientation } ); - var xDilation = options.touchAreaXDilation; - var yDilation = options.touchAreaYDilation; + let xDilation = options.touchAreaXDilation; + let yDilation = options.touchAreaYDilation; // override the touch and mouse areas defined in RectangularButtonView // extra width is added to the SingleRadioButtons so they don't change size if the line width changes, @@ -283,7 +283,7 @@ define( require => { } // a11y - set the focus highlight, dilated by the optional expansion values - var highlightBounds = defaultHighlightBounds.dilatedX( opts.a11yHighlightXDilation ).dilatedY( opts.a11yHighlightYDilation ); + const highlightBounds = defaultHighlightBounds.dilatedX( opts.a11yHighlightXDilation ).dilatedY( opts.a11yHighlightYDilation ); radioButton.setFocusHighlight( Shape.bounds( highlightBounds ) ); buttons.push( button ); @@ -295,7 +295,7 @@ define( require => { // super call options.children = buttons; LayoutBox.call( this, options ); - var self = this; + const self = this; // a11y - this node's primary sibling is aria-labelledby its own label so the label content is read whenever // a member of the group receives focus @@ -306,12 +306,12 @@ define( require => { } ); // When the entire RadioButtonGroup gets disabled, gray them out and make them unpickable (and vice versa) - var enabledListener = function( isEnabled ) { + const enabledListener = function( isEnabled ) { self.pickable = isEnabled; for ( i = 0; i < contentArray.length; i++ ) { if ( buttons[ i ] instanceof LayoutBox ) { - for ( var j = 0; j < 2; j++ ) { + for ( let j = 0; j < 2; j++ ) { buttons[ i ].children[ j ].enabled = isEnabled; } } @@ -323,7 +323,7 @@ define( require => { this.enabledProperty.link( enabledListener ); // make the unselected buttons pickable and have a pointer cursor - var propertyListener = function( value ) { + const propertyListener = function( value ) { if ( self.enabledProperty.get() ) { for ( i = 0; i < contentArray.length; i++ ) { if ( contentArray[ i ].value === value ) { diff --git a/js/buttons/RadioButtonGroupAppearance.js b/js/buttons/RadioButtonGroupAppearance.js index 74ced9ac..059a7351 100644 --- a/js/buttons/RadioButtonGroupAppearance.js +++ b/js/buttons/RadioButtonGroupAppearance.js @@ -26,19 +26,19 @@ define( require => { * @param {Object} [options] * @constructor */ - var DefaultRadioButtonsAppearance = function( button, interactionStateProperty, baseColorProperty, options ) { + const DefaultRadioButtonsAppearance = function( button, interactionStateProperty, baseColorProperty, options ) { // Create the fills and strokes used for various button states - var disabledStroke = new PaintColorProperty( options.disabledBaseColor, { + const disabledStroke = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); - var overStroke = new PaintColorProperty( options.overStroke || options.deselectedStroke, { + const overStroke = new PaintColorProperty( options.overStroke || options.deselectedStroke, { luminanceFactor: options.overStroke ? 0 : -0.4 } ); - var overFill = new PaintColorProperty( options.overFill || baseColorProperty, { + const overFill = new PaintColorProperty( options.overFill || baseColorProperty, { luminanceFactor: options.overFill ? 0 : 0.4 } ); - var pressedFill = new PaintColorProperty( baseColorProperty, { + const pressedFill = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); @@ -122,7 +122,7 @@ define( require => { * @constructor * @public */ - var ContentAppearanceStrategy = function( content, interactionStateProperty, options ) { + const ContentAppearanceStrategy = function( content, interactionStateProperty, options ) { // The button is not the parent of the content, therefore it is necessary to set the opacity on the content separately function handleInteractionStateChanged( state ) { @@ -170,7 +170,7 @@ define( require => { }; }; - var RadioButtonGroupAppearance = { + const RadioButtonGroupAppearance = { defaultRadioButtonsAppearance: DefaultRadioButtonsAppearance, contentAppearanceStrategy: ContentAppearanceStrategy }; diff --git a/js/buttons/RadioButtonGroupMember.js b/js/buttons/RadioButtonGroupMember.js index 8c0da6fc..9dd98d4e 100644 --- a/js/buttons/RadioButtonGroupMember.js +++ b/js/buttons/RadioButtonGroupMember.js @@ -32,7 +32,7 @@ define( require => { */ function RadioButtonGroupMember( property, value, options ) { - var self = this; + const self = this; options = _.extend( { // The fill for the rectangle behind the radio buttons. Default color is bluish color, as in the other button library. @@ -103,7 +103,7 @@ define( require => { // a11y - when the property changes, make sure the correct radio button is marked as 'checked' so that this button // receives focus on 'tab' - var accessibleCheckedListener = function( newValue ) { + const accessibleCheckedListener = function( newValue ) { self.accessibleChecked = newValue === value; }; property.link( accessibleCheckedListener ); diff --git a/js/buttons/RadioButtonInteractionState.js b/js/buttons/RadioButtonInteractionState.js index 1dfc0de3..3add97c6 100644 --- a/js/buttons/RadioButtonInteractionState.js +++ b/js/buttons/RadioButtonInteractionState.js @@ -9,7 +9,7 @@ define( require => { const sun = require( 'SUN/sun' ); - var RadioButtonInteractionState = { + const RadioButtonInteractionState = { // the button is selected and enabled SELECTED: 'SELECTED', diff --git a/js/buttons/RectangularButtonView.js b/js/buttons/RectangularButtonView.js index 57c5fabe..02311ac7 100644 --- a/js/buttons/RectangularButtonView.js +++ b/js/buttons/RectangularButtonView.js @@ -27,12 +27,12 @@ define( require => { const Tandem = require( 'TANDEM/Tandem' ); // constants - var VERTICAL_HIGHLIGHT_GRADIENT_LENGTH = 7; // In screen coords, which are roughly pixels. - var HORIZONTAL_HIGHLIGHT_GRADIENT_LENGTH = 7; // In screen coords, which are roughly pixels. - var SHADE_GRADIENT_LENGTH = 3; // In screen coords, which are roughly pixels. - var DEFAULT_COLOR = ColorConstants.LIGHT_BLUE; - var X_ALIGN_VALUES = [ 'center', 'left', 'right' ]; - var Y_ALIGN_VALUES = [ 'center', 'top', 'bottom' ]; + const VERTICAL_HIGHLIGHT_GRADIENT_LENGTH = 7; // In screen coords, which are roughly pixels. + const HORIZONTAL_HIGHLIGHT_GRADIENT_LENGTH = 7; // In screen coords, which are roughly pixels. + const SHADE_GRADIENT_LENGTH = 3; // In screen coords, which are roughly pixels. + const DEFAULT_COLOR = ColorConstants.LIGHT_BLUE; + const X_ALIGN_VALUES = [ 'center', 'left', 'right' ]; + const Y_ALIGN_VALUES = [ 'center', 'top', 'bottom' ]; /** * @param {ButtonModel} buttonModel - Model that defines the button's behavior. @@ -121,7 +121,7 @@ define( require => { Node.call( this ); - var content = options.content; // convenience variable + const content = options.content; // convenience variable // Hook up the input listener // @private (a11y) {PressListener} @@ -132,11 +132,11 @@ define( require => { this.baseColorProperty = new PaintColorProperty( options.baseColor ); // @private // Figure out the size of the button. - var buttonWidth = Math.max( content ? content.width + options.xMargin * 2 : 0, options.minWidth ); - var buttonHeight = Math.max( content ? content.height + options.yMargin * 2 : 0, options.minHeight ); + const buttonWidth = Math.max( content ? content.width + options.xMargin * 2 : 0, options.minWidth ); + const buttonHeight = Math.max( content ? content.height + options.yMargin * 2 : 0, options.minHeight ); // create and add the button node - var button = new Path( createButtonShape( buttonWidth, buttonHeight, options ), { + const button = new Path( createButtonShape( buttonWidth, buttonHeight, options ), { fill: options.baseColor, lineWidth: options.lineWidth } ); @@ -165,7 +165,7 @@ define( require => { } // Hook up the strategy that will control the basic button appearance. - var buttonAppearanceStrategy = new options.buttonAppearanceStrategy( + const buttonAppearanceStrategy = new options.buttonAppearanceStrategy( button, interactionStateProperty, this.baseColorProperty, @@ -173,11 +173,11 @@ define( require => { ); // Hook up the strategy that will control the content appearance. - var contentAppearanceStrategy = new options.contentAppearanceStrategy( content, interactionStateProperty, options ); + const contentAppearanceStrategy = new options.contentAppearanceStrategy( content, interactionStateProperty, options ); // Control the pointer state based on the interaction state. // Control the pointer state based on the interaction state. - var self = this; + const self = this; function handleInteractionStateChanged( state ) { self.cursor = state === ButtonInteractionState.DISABLED || @@ -248,92 +248,92 @@ define( require => { baseColorProperty, options ) { - var buttonWidth = button.width; - var buttonHeight = button.height; + const buttonWidth = button.width; + const buttonHeight = button.height; // compute color stops for gradient, see issue #148 assert && assert( buttonWidth >= HORIZONTAL_HIGHLIGHT_GRADIENT_LENGTH + SHADE_GRADIENT_LENGTH ); assert && assert( buttonHeight >= VERTICAL_HIGHLIGHT_GRADIENT_LENGTH + SHADE_GRADIENT_LENGTH ); - var verticalHighlightStop = Math.min( VERTICAL_HIGHLIGHT_GRADIENT_LENGTH / buttonHeight, 1 ); - var verticalShadowStop = Math.max( 1 - SHADE_GRADIENT_LENGTH / buttonHeight, 0 ); - var horizontalHighlightStop = Math.min( HORIZONTAL_HIGHLIGHT_GRADIENT_LENGTH / buttonWidth, 1 ); - var horizontalShadowStop = Math.max( 1 - SHADE_GRADIENT_LENGTH / buttonWidth, 0 ); + const verticalHighlightStop = Math.min( VERTICAL_HIGHLIGHT_GRADIENT_LENGTH / buttonHeight, 1 ); + const verticalShadowStop = Math.max( 1 - SHADE_GRADIENT_LENGTH / buttonHeight, 0 ); + const horizontalHighlightStop = Math.min( HORIZONTAL_HIGHLIGHT_GRADIENT_LENGTH / buttonWidth, 1 ); + const horizontalShadowStop = Math.max( 1 - SHADE_GRADIENT_LENGTH / buttonWidth, 0 ); - var transparentWhite = new Color( 255, 255, 255, 0.7 ); + const transparentWhite = new Color( 255, 255, 255, 0.7 ); // Color properties - var baseBrighter7 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.7 } ); - var baseBrighter5 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.5 } ); - var baseBrighter2 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.2 } ); - var baseDarker3 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.3 } ); - var baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); - var baseDarker5 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.5 } ); - var disabledBase = new PaintColorProperty( options.disabledBaseColor ); - var disabledBaseBrighter7 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.7 } ); - var disabledBaseBrighter5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.5 } ); - var disabledBaseBrighter2 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.2 } ); - var disabledBaseDarker3 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.3 } ); - var disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); - var disabledBaseDarker5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.5 } ); - var baseTransparent = new DerivedProperty( [ baseColorProperty ], function( color ) { + const baseBrighter7 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.7 } ); + const baseBrighter5 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.5 } ); + const baseBrighter2 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.2 } ); + const baseDarker3 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.3 } ); + const baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); + const baseDarker5 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.5 } ); + const disabledBase = new PaintColorProperty( options.disabledBaseColor ); + const disabledBaseBrighter7 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.7 } ); + const disabledBaseBrighter5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.5 } ); + const disabledBaseBrighter2 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.2 } ); + const disabledBaseDarker3 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.3 } ); + const disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); + const disabledBaseDarker5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.5 } ); + const baseTransparent = new DerivedProperty( [ baseColorProperty ], function( color ) { return color.withAlpha( 0 ); } ); - var disabledBaseTransparent = new DerivedProperty( [ disabledBase ], function( color ) { + const disabledBaseTransparent = new DerivedProperty( [ disabledBase ], function( color ) { return color.withAlpha( 0 ); } ); // Create the gradient fills used for various button states - var upFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) + const upFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) .addColorStop( 0, baseBrighter7 ) .addColorStop( verticalHighlightStop, baseColorProperty ) .addColorStop( verticalShadowStop, baseColorProperty ) .addColorStop( 1, baseDarker5 ); - var upFillHorizontal = new LinearGradient( 0, 0, buttonWidth, 0 ) + const upFillHorizontal = new LinearGradient( 0, 0, buttonWidth, 0 ) .addColorStop( 0, transparentWhite ) .addColorStop( horizontalHighlightStop, baseTransparent ) .addColorStop( horizontalShadowStop, baseTransparent ) .addColorStop( 1, baseDarker5 ); - var overFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) + const overFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) .addColorStop( 0, baseBrighter7 ) .addColorStop( verticalHighlightStop, baseBrighter5 ) .addColorStop( verticalShadowStop, baseBrighter5 ) .addColorStop( 1, baseDarker5 ); - var overFillHorizontal = new LinearGradient( 0, 0, buttonWidth, 0 ) + const overFillHorizontal = new LinearGradient( 0, 0, buttonWidth, 0 ) .addColorStop( 0, transparentWhite ) .addColorStop( horizontalHighlightStop / 2, new Color( 255, 255, 255, 0 ) ) .addColorStop( horizontalShadowStop, baseTransparent ) .addColorStop( 1, baseDarker3 ); - var downFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) + const downFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) .addColorStop( 0, baseBrighter7 ) .addColorStop( verticalHighlightStop * 0.67, baseDarker3 ) .addColorStop( verticalShadowStop, baseBrighter2 ) .addColorStop( 1, baseDarker5 ); - var disabledFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) + const disabledFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) .addColorStop( 0, disabledBaseBrighter7 ) .addColorStop( verticalHighlightStop, disabledBaseBrighter5 ) .addColorStop( verticalShadowStop, disabledBaseBrighter5 ) .addColorStop( 1, disabledBaseDarker5 ); - var disabledFillHorizontal = new LinearGradient( 0, 0, buttonWidth, 0 ) + const disabledFillHorizontal = new LinearGradient( 0, 0, buttonWidth, 0 ) .addColorStop( 0, disabledBaseBrighter7 ) .addColorStop( horizontalHighlightStop, disabledBaseTransparent ) .addColorStop( horizontalShadowStop, disabledBaseTransparent ) .addColorStop( 1, disabledBaseDarker5 ); - var disabledPressedFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) + const disabledPressedFillVertical = new LinearGradient( 0, 0, 0, buttonHeight ) .addColorStop( 0, disabledBaseBrighter7 ) .addColorStop( verticalHighlightStop * 0.67, disabledBaseDarker3 ) .addColorStop( verticalShadowStop, disabledBaseBrighter2 ) .addColorStop( 1, disabledBaseDarker5 ); // strokes filled in below - var enabledStroke; - var disabledStroke; + let enabledStroke; + let disabledStroke; if ( options.stroke === null ) { // The stroke was explicitly set to null, so the button should have no stroke. @@ -352,7 +352,7 @@ define( require => { } // Create the overlay that is used to add shading to left and right edges of the button. - var overlayForHorizGradient = new Path( createButtonShape( buttonWidth, buttonHeight, options ), { + const overlayForHorizGradient = new Path( createButtonShape( buttonWidth, buttonHeight, options ), { lineWidth: options.lineWidth, pickable: false } ); @@ -450,19 +450,19 @@ define( require => { RectangularButtonView.FlatAppearanceStrategy = function( button, interactionStateProperty, baseColorProperty, options ) { // Color properties - var baseBrighter4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.4 } ); - var baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); - var disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); + const baseBrighter4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.4 } ); + const baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); + const disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); // fills used for various button states - var upFill = baseColorProperty; - var overFill = baseBrighter4; - var downFill = baseDarker4; - var disabledFill = options.disabledBaseColor; - var disabledPressedFillVertical = disabledFill; - - var enabledStroke; - var disabledStroke; + const upFill = baseColorProperty; + const overFill = baseBrighter4; + const downFill = baseDarker4; + const disabledFill = options.disabledBaseColor; + const disabledPressedFillVertical = disabledFill; + + let enabledStroke; + let disabledStroke; if ( options.stroke === null ) { // The stroke was explicitly set to null, so the button should have no stroke. diff --git a/js/buttons/RectangularMomentaryButton.js b/js/buttons/RectangularMomentaryButton.js index 246c86e8..77a8ecd0 100644 --- a/js/buttons/RectangularMomentaryButton.js +++ b/js/buttons/RectangularMomentaryButton.js @@ -32,7 +32,7 @@ define( require => { }, options ); // Note it shares a tandem with this, so the emitter will be instrumented as a child of the button - var buttonModel = new MomentaryButtonModel( valueOff, valueOn, property, options ); + const buttonModel = new MomentaryButtonModel( valueOff, valueOn, property, options ); RectangularButtonView.call( this, buttonModel, new MomentaryButtonInteractionStateProperty( buttonModel ), options ); // support for binder documentation, stripped out in builds and only runs when ?binder is specified diff --git a/js/buttons/RectangularPushButton.js b/js/buttons/RectangularPushButton.js index 21ad181c..f25c1b4d 100644 --- a/js/buttons/RectangularPushButton.js +++ b/js/buttons/RectangularPushButton.js @@ -33,7 +33,7 @@ define( require => { // If a listener was passed in, save it and add it after creating the button model. This is done so that // the same code path is always used for adding listener, thus guaranteeing a consistent code path if addListener is // overridden, see https://github.com/phetsims/sun/issues/284. - var listener = options.listener; + const listener = options.listener; options = _.omit( options, [ 'listener' ] ); // Safe to pass through options to the PushButtonModel like "fireOnDown". Other scenery options will be safely ignored. diff --git a/js/buttons/RectangularStickyToggleButton.js b/js/buttons/RectangularStickyToggleButton.js index 14a255a0..79c0bfc8 100644 --- a/js/buttons/RectangularStickyToggleButton.js +++ b/js/buttons/RectangularStickyToggleButton.js @@ -27,8 +27,8 @@ define( require => { function RectangularStickyToggleButton( valueUp, valueDown, property, options ) { // Note it shares a tandem with this, so the emitter will be instrumented as a child of the button - var buttonModel = new StickyToggleButtonModel( valueUp, valueDown, property, options ); - var stickyToggleButtonInteractionStateProperty = new StickyToggleButtonInteractionStateProperty( buttonModel ); + const buttonModel = new StickyToggleButtonModel( valueUp, valueDown, property, options ); + const stickyToggleButtonInteractionStateProperty = new StickyToggleButtonInteractionStateProperty( buttonModel ); RectangularButtonView.call( this, buttonModel, stickyToggleButtonInteractionStateProperty, options ); // @private - dispose items specific to this instance diff --git a/js/buttons/RectangularToggleButton.js b/js/buttons/RectangularToggleButton.js index aecfcbf3..136f6379 100644 --- a/js/buttons/RectangularToggleButton.js +++ b/js/buttons/RectangularToggleButton.js @@ -35,7 +35,7 @@ define( require => { // @public (phet-io) // Note it shares a tandem with this, so the emitter will be instrumented as a child of the button this.toggleButtonModel = new ToggleButtonModel( valueOff, valueOn, property, options ); - var toggleButtonInteractionStateProperty = new ToggleButtonInteractionStateProperty( this.toggleButtonModel ); + const toggleButtonInteractionStateProperty = new ToggleButtonInteractionStateProperty( this.toggleButtonModel ); RectangularButtonView.call( this, this.toggleButtonModel, toggleButtonInteractionStateProperty, options ); this.addLinkedElement( property, { diff --git a/js/buttons/RoundButtonView.js b/js/buttons/RoundButtonView.js index 06d078ad..9a0a2cfa 100644 --- a/js/buttons/RoundButtonView.js +++ b/js/buttons/RoundButtonView.js @@ -29,8 +29,8 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var HIGHLIGHT_GRADIENT_LENGTH = 5; // In screen coords, which are roughly pixels. - var DEFAULT_COLOR = ColorConstants.LIGHT_BLUE; + const HIGHLIGHT_GRADIENT_LENGTH = 5; // In screen coords, which are roughly pixels. + const DEFAULT_COLOR = ColorConstants.LIGHT_BLUE; /** * @param {PushButtonModel} pushButtonModel @@ -103,8 +103,8 @@ define( require => { }, options ); Node.call( this ); - var content = options.content; // convenience variable - var upCenter = new Vector2( options.xContentOffset, options.yContentOffset ); + const content = options.content; // convenience variable + const upCenter = new Vector2( options.xContentOffset, options.yContentOffset ); // For performance reasons, the content should be unpickable. if ( content ) { @@ -115,20 +115,20 @@ define( require => { this.baseColorProperty = new PaintColorProperty( options.baseColor ); // @private // @private {PressListener} - var pressListener = pushButtonModel.createListener( options.listenerOptions ); + const pressListener = pushButtonModel.createListener( options.listenerOptions ); this.addInputListener( pressListener ); // Use the user-specified radius if present, otherwise calculate the // radius based on the content and the margin. - var buttonRadius = options.radius || + const buttonRadius = options.radius || Math.max( content.width + options.minXMargin * 2, content.height + options.minYMargin * 2 ) / 2; // Create the basic button shape. - var button = new Circle( buttonRadius, { fill: options.baseColor, lineWidth: options.lineWidth } ); + const button = new Circle( buttonRadius, { fill: options.baseColor, lineWidth: options.lineWidth } ); this.addChild( button ); // Hook up the strategy that will control the basic button appearance. - var buttonAppearanceStrategy = new options.buttonAppearanceStrategy( + const buttonAppearanceStrategy = new options.buttonAppearanceStrategy( button, interactionStateProperty, this.baseColorProperty, @@ -142,10 +142,10 @@ define( require => { } // Hook up the strategy that will control the content appearance. - var contentAppearanceStrategy = new options.contentAppearanceStrategy( content, interactionStateProperty ); + const contentAppearanceStrategy = new options.contentAppearanceStrategy( content, interactionStateProperty ); // Control the pointer state based on the interaction state. - var self = this; + const self = this; function handleInteractionStateChanged( state ) { self.cursor = state === ButtonInteractionState.DISABLED || @@ -199,71 +199,71 @@ define( require => { // Color properties // TODO: Include "Property" in all of these PaintColorProperty names - var baseBrighter8 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.8 } ); - var baseBrighter7 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.7 } ); - var baseBrighter3 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.3 } ); - var baseDarker1 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.1 } ); - var baseDarker2 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.2 } ); - var baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); - var baseDarker5 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.5 } ); - var disabledBase = new PaintColorProperty( options.disabledBaseColor ); - var disabledBaseBrighter8 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.8 } ); - var disabledBaseBrighter5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.5 } ); - var disabledBaseDarker1 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.1 } ); - var disabledBaseDarker2 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.2 } ); - var disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); - var disabledBaseDarker5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.5 } ); - var baseTransparent = new DerivedProperty( [ baseColorProperty ], function( color ) { + const baseBrighter8 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.8 } ); + const baseBrighter7 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.7 } ); + const baseBrighter3 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.3 } ); + const baseDarker1 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.1 } ); + const baseDarker2 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.2 } ); + const baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); + const baseDarker5 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.5 } ); + const disabledBase = new PaintColorProperty( options.disabledBaseColor ); + const disabledBaseBrighter8 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.8 } ); + const disabledBaseBrighter5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: 0.5 } ); + const disabledBaseDarker1 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.1 } ); + const disabledBaseDarker2 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.2 } ); + const disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); + const disabledBaseDarker5 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.5 } ); + const baseTransparent = new DerivedProperty( [ baseColorProperty ], function( color ) { return color.withAlpha( 0 ); } ); - var disabledBaseTransparent = new DerivedProperty( [ disabledBase ], function( color ) { + const disabledBaseTransparent = new DerivedProperty( [ disabledBase ], function( color ) { return color.withAlpha( 0 ); } ); // Set up variables needed to create the various gradient fills and otherwise mod the appearance - var buttonRadius = button.width / 2; - var innerGradientRadius = buttonRadius - HIGHLIGHT_GRADIENT_LENGTH / 2; - var outerGradientRadius = buttonRadius + HIGHLIGHT_GRADIENT_LENGTH / 2; - var gradientOffset = HIGHLIGHT_GRADIENT_LENGTH / 2; + const buttonRadius = button.width / 2; + const innerGradientRadius = buttonRadius - HIGHLIGHT_GRADIENT_LENGTH / 2; + const outerGradientRadius = buttonRadius + HIGHLIGHT_GRADIENT_LENGTH / 2; + const gradientOffset = HIGHLIGHT_GRADIENT_LENGTH / 2; - var upFillHighlight = new RadialGradient( gradientOffset, gradientOffset, innerGradientRadius, gradientOffset, gradientOffset, outerGradientRadius ) + const upFillHighlight = new RadialGradient( gradientOffset, gradientOffset, innerGradientRadius, gradientOffset, gradientOffset, outerGradientRadius ) .addColorStop( 0, baseColorProperty ) .addColorStop( 1, baseBrighter7 ); - var upFillShadow = new RadialGradient( -gradientOffset, -gradientOffset, innerGradientRadius, -gradientOffset, -gradientOffset, outerGradientRadius ) + const upFillShadow = new RadialGradient( -gradientOffset, -gradientOffset, innerGradientRadius, -gradientOffset, -gradientOffset, outerGradientRadius ) .addColorStop( 0, baseTransparent ) .addColorStop( 1, baseDarker5 ); - var overFillHighlight = new RadialGradient( gradientOffset, gradientOffset, innerGradientRadius, gradientOffset, gradientOffset, outerGradientRadius ) + const overFillHighlight = new RadialGradient( gradientOffset, gradientOffset, innerGradientRadius, gradientOffset, gradientOffset, outerGradientRadius ) .addColorStop( 0, baseBrighter3 ) .addColorStop( 1, baseBrighter8 ); - var overFillShadow = new RadialGradient( -gradientOffset, -gradientOffset, innerGradientRadius, -gradientOffset, -gradientOffset, outerGradientRadius ) + const overFillShadow = new RadialGradient( -gradientOffset, -gradientOffset, innerGradientRadius, -gradientOffset, -gradientOffset, outerGradientRadius ) .addColorStop( 0, baseTransparent ) .addColorStop( 1, baseDarker5 ); - var pressedFill = new RadialGradient( -gradientOffset, -gradientOffset, 0, 0, 0, outerGradientRadius ) + const pressedFill = new RadialGradient( -gradientOffset, -gradientOffset, 0, 0, 0, outerGradientRadius ) .addColorStop( 0, baseDarker1 ) .addColorStop( 0.6, baseDarker2 ) .addColorStop( 0.8, baseColorProperty ) .addColorStop( 1, baseBrighter8 ); - var disabledFillHighlight = new RadialGradient( gradientOffset, gradientOffset, innerGradientRadius, gradientOffset, gradientOffset, outerGradientRadius ) + const disabledFillHighlight = new RadialGradient( gradientOffset, gradientOffset, innerGradientRadius, gradientOffset, gradientOffset, outerGradientRadius ) .addColorStop( 0, options.disabledBaseColor ) .addColorStop( 1, disabledBaseBrighter5 ); - var disabledFillShadow = new RadialGradient( -gradientOffset, -gradientOffset, innerGradientRadius, -gradientOffset, -gradientOffset, outerGradientRadius ) + const disabledFillShadow = new RadialGradient( -gradientOffset, -gradientOffset, innerGradientRadius, -gradientOffset, -gradientOffset, outerGradientRadius ) .addColorStop( 0, disabledBaseTransparent ) .addColorStop( 1, disabledBaseDarker5 ); - var disabledPressedFillHighlight = new RadialGradient( -gradientOffset, -gradientOffset, 0, 0, 0, outerGradientRadius ) + const disabledPressedFillHighlight = new RadialGradient( -gradientOffset, -gradientOffset, 0, 0, 0, outerGradientRadius ) .addColorStop( 0, disabledBaseDarker1 ) .addColorStop( 0.6, disabledBaseDarker2 ) .addColorStop( 0.8, options.disabledBaseColor ) .addColorStop( 1, disabledBaseBrighter8 ); - var enabledStroke = null; - var disabledStroke = null; + let enabledStroke = null; + let disabledStroke = null; if ( options.stroke === null ) { // The stroke was explicitly set to null, so the button should have no stroke. @@ -282,7 +282,7 @@ define( require => { } // Create and add the overlay that is used to add shading. - var overlayForShadowGradient = new Circle( buttonRadius, { lineWidth: options.lineWidth, pickable: false } ); + const overlayForShadowGradient = new Circle( buttonRadius, { lineWidth: options.lineWidth, pickable: false } ); button.addChild( overlayForShadowGradient ); button.cachedPaints = [ @@ -376,19 +376,19 @@ define( require => { RoundButtonView.FlatAppearanceStrategy = function( button, interactionStateProperty, baseColorProperty, options ) { // Color properties - var baseBrighter4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.4 } ); - var baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); - var disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); + const baseBrighter4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: 0.4 } ); + const baseDarker4 = new PaintColorProperty( baseColorProperty, { luminanceFactor: -0.4 } ); + const disabledBaseDarker4 = new PaintColorProperty( options.disabledBaseColor, { luminanceFactor: -0.4 } ); // various fills that are used to alter the button's appearance - var upFill = baseColorProperty; - var overFill = baseBrighter4; - var downFill = baseDarker4; - var disabledFill = options.disabledBaseColor; - var disabledPressedFillVertical = disabledFill; - - var enabledStroke = null; - var disabledStroke = null; + const upFill = baseColorProperty; + const overFill = baseBrighter4; + const downFill = baseDarker4; + const disabledFill = options.disabledBaseColor; + const disabledPressedFillVertical = disabledFill; + + let enabledStroke = null; + let disabledStroke = null; if ( options.stroke === null ) { // The stroke was explicitly set to null, so the button should have no stroke. diff --git a/js/buttons/RoundPushButton.js b/js/buttons/RoundPushButton.js index af5e8501..df193606 100644 --- a/js/buttons/RoundPushButton.js +++ b/js/buttons/RoundPushButton.js @@ -32,12 +32,12 @@ define( require => { tandem: Tandem.required }, options ); - var self = this; + const self = this; // If a listener was passed in, save it and add it after creating the button model. This is done so that // the same code path is always used for adding listener, thus guaranteeing a consistent code path if addListener is // overridden, see https://github.com/phetsims/sun/issues/284. - var listener = options.listener; + const listener = options.listener; options = _.omit( options, [ 'listener' ] ); // @public - listening only diff --git a/js/buttons/RoundStickyToggleButton.js b/js/buttons/RoundStickyToggleButton.js index 8299996d..9e78bfa1 100644 --- a/js/buttons/RoundStickyToggleButton.js +++ b/js/buttons/RoundStickyToggleButton.js @@ -36,8 +36,8 @@ define( require => { // @private (read-only) // Note it shares a tandem with this, so the emitter will be instrumented as a child of the button - var toggleButtonModel = new StickyToggleButtonModel( valueUp, valueDown, property, options ); - var stickyToggleButtonInteractionStateProperty = new StickyToggleButtonInteractionStateProperty( toggleButtonModel ); + const toggleButtonModel = new StickyToggleButtonModel( valueUp, valueDown, property, options ); + const stickyToggleButtonInteractionStateProperty = new StickyToggleButtonInteractionStateProperty( toggleButtonModel ); RoundButtonView.call( this, toggleButtonModel, stickyToggleButtonInteractionStateProperty, options ); // @private - dispose items specific to this instance diff --git a/js/buttons/RoundToggleButton.js b/js/buttons/RoundToggleButton.js index 8667d947..548b7866 100644 --- a/js/buttons/RoundToggleButton.js +++ b/js/buttons/RoundToggleButton.js @@ -36,7 +36,7 @@ define( require => { // @private (read-only) // Note it shares a tandem with this, so the emitter will be instrumented as a child of the button this.toggleButtonModel = new ToggleButtonModel( valueOff, valueOn, property, options ); - var toggleButtonInteractionStateProperty = new ToggleButtonInteractionStateProperty( this.toggleButtonModel ); + const toggleButtonInteractionStateProperty = new ToggleButtonInteractionStateProperty( this.toggleButtonModel ); RoundButtonView.call( this, this.toggleButtonModel, toggleButtonInteractionStateProperty, options ); diff --git a/js/buttons/StickyToggleButtonModel.js b/js/buttons/StickyToggleButtonModel.js index 42da3bd6..273223fc 100644 --- a/js/buttons/StickyToggleButtonModel.js +++ b/js/buttons/StickyToggleButtonModel.js @@ -28,7 +28,7 @@ define( require => { * @constructor */ function StickyToggleButtonModel( valueUp, valueDown, valueProperty, options ) { - var self = this; + const self = this; options = _.extend( { tandem: Tandem.required @@ -44,7 +44,7 @@ define( require => { phetioEventType: EventType.USER } ); - var toggleListener = function() { + const toggleListener = function() { assert && assert( self.valueProperty.value === self.valueUp || self.valueProperty.value === self.valueDown, 'unrecognized value: ' + self.valueProperty.value ); @@ -65,7 +65,7 @@ define( require => { // If the button is up and the user presses it, show it pressed and toggle the state right away. When the button is // released, pop up the button (unless it was part of the same action that pressed the button down in the first // place). - var downListener = function( down ) { + const downListener = function( down ) { if ( self.enabledProperty.get() && self.overProperty.get() ) { if ( down && valueProperty.value === valueUp ) { self.toggle(); @@ -91,13 +91,13 @@ define( require => { // if the valueProperty is set externally to user interaction, update the buttonModel // downProperty so the model stays in sync - var valuePropertyListener = function( value ) { + const valuePropertyListener = function( value ) { self.downProperty.set( value === valueDown ); }; valueProperty.link( valuePropertyListener ); // make the button ready to toggle when enabled - var enabledPropertyOnListener = function( enabled ) { + const enabledPropertyOnListener = function( enabled ) { if ( enabled ) { self.pressedWhileDownProperty.set( true ); } diff --git a/js/buttons/TextPushButton.js b/js/buttons/TextPushButton.js index 0910ee4e..a74929a5 100644 --- a/js/buttons/TextPushButton.js +++ b/js/buttons/TextPushButton.js @@ -31,7 +31,7 @@ define( require => { innerContent: text }, options ); - var textNode = new Text( text, { + const textNode = new Text( text, { font: options.font, fill: options.textFill, maxWidth: options.maxTextWidth, diff --git a/js/buttons/ToggleButtonModel.js b/js/buttons/ToggleButtonModel.js index 10fab04e..e1f7042a 100644 --- a/js/buttons/ToggleButtonModel.js +++ b/js/buttons/ToggleButtonModel.js @@ -25,7 +25,7 @@ define( require => { * @constructor */ function ToggleButtonModel( valueOff, valueOn, property, options ) { - var self = this; + const self = this; options = _.extend( { tandem: Tandem.required @@ -39,7 +39,7 @@ define( require => { ButtonModel.call( this, options ); // Behaves like a push button (with fireOnDown:false), but toggles its state when the button is released. - var downListener = function( down ) { + const downListener = function( down ) { if ( self.enabledProperty.get() && self.overProperty.get() ) { if ( !down ) { self.toggle(); @@ -55,7 +55,7 @@ define( require => { phetioEventType: EventType.USER } ); - var toggleListener = function() { + const toggleListener = function() { assert && assert( self.valueProperty.value === self.valueOff || self.valueProperty.value === self.valueOn, 'unrecognized value: ' + self.valueProperty.value ); diff --git a/js/demo/ButtonsScreenView.js b/js/demo/ButtonsScreenView.js index 62cb7b1c..b94d6582 100644 --- a/js/demo/ButtonsScreenView.js +++ b/js/demo/ButtonsScreenView.js @@ -37,8 +37,8 @@ define( require => { const VerticalAquaRadioButtonGroup = require( 'SUN/VerticalAquaRadioButtonGroup' ); // constants - var BUTTON_FONT = new Font( { size: 24 } ); - var BUTTON_CAPTION_FONT = new Font( { size: 20 } ); + const BUTTON_FONT = new Font( { size: 24 } ); + const BUTTON_CAPTION_FONT = new Font( { size: 20 } ); /** * @constructor @@ -48,14 +48,14 @@ define( require => { ScreenView.call( this ); // Message area, for outputting test messages - var messagePrefix = 'Message: '; - var messageText = new Text( messagePrefix, { + const messagePrefix = 'Message: '; + const messageText = new Text( messagePrefix, { font: new Font( { size: 20 } ), bottom: this.layoutBounds.height - 5, left: this.layoutBounds.minX + 10 } ); this.addChild( messageText ); - var message = function( text ) { + const message = function( text ) { messageText.text = messagePrefix + text; }; @@ -63,25 +63,25 @@ define( require => { // Common colors //=================================================================================== - var alignBaseColor = new Property( new Color( 'red' ) ); - var roundBaseColor = new Property( new Color( 'blue' ) ); - var radioGroupBaseColor = new Property( 'green' ); + const alignBaseColor = new Property( new Color( 'red' ) ); + const roundBaseColor = new Property( new Color( 'blue' ) ); + const radioGroupBaseColor = new Property( 'green' ); //=================================================================================== // Radio buttons //=================================================================================== - var radioButtonProperty = new Property( 'TWO' ); + const radioButtonProperty = new Property( 'TWO' ); radioButtonProperty.lazyLink( function( value ) { message( 'Radio button ' + value + ' pressed' ); } ); - var radioButtonContent = [ + const radioButtonContent = [ { value: 'ONE', node: new Text( 'ONE', { font: new Font( { size: 32 } ) } ), label: new Text( 'one' ) }, // bigger than the others { value: 'TWO', node: new Text( 'TWO', { font: BUTTON_FONT } ), label: new Text( 'two' ) }, { value: 'THREE', node: new Text( 'THREE', { font: BUTTON_FONT } ), label: new Text( 'three' ) }, { value: '4', node: new Text( '4', { font: BUTTON_FONT } ), label: new Text( 'four' ) } ]; - var radioButtonGroup = new RadioButtonGroup( radioButtonProperty, radioButtonContent, { + const radioButtonGroup = new RadioButtonGroup( radioButtonProperty, radioButtonContent, { selectedLineWidth: 4, // change these to test various orientations and alignments @@ -91,7 +91,7 @@ define( require => { baseColor: radioGroupBaseColor } ); - var radioButtonPanel = new Panel( radioButtonGroup, { + const radioButtonPanel = new Panel( radioButtonGroup, { stroke: 'black', left: this.layoutBounds.left + 15, top: this.layoutBounds.top + 15 @@ -103,12 +103,12 @@ define( require => { // Aqua Radio buttons //=================================================================================== - var firstOption = 'A'; - var verticalAquaProperty = new Property( firstOption ); + const firstOption = 'A'; + const verticalAquaProperty = new Property( firstOption ); verticalAquaProperty.lazyLink( function( value ) { message( 'Aqua Radio Button ' + value + ' pressed' ); } ); - var verticalAquaRadioButtons = new VerticalAquaRadioButtonGroup( verticalAquaProperty, [ + const verticalAquaRadioButtons = new VerticalAquaRadioButtonGroup( verticalAquaProperty, [ { value: firstOption, node: new Text( firstOption ) @@ -132,8 +132,8 @@ define( require => { // Pseudo-3D buttons A, B, C, D, E //=================================================================================== - var buttonAFireCount = 0; - var buttonA = new RectangularPushButton( { + let buttonAFireCount = 0; + const buttonA = new RectangularPushButton( { content: new Text( '--- A ---', { font: BUTTON_FONT } ), listener: function() { message( 'Button A pressed ' + ( ++buttonAFireCount ) + 'x' ); }, @@ -144,20 +144,20 @@ define( require => { mouseAreaYDilation: 5 } ); - var buttonB = new RectangularPushButton( { + const buttonB = new RectangularPushButton( { content: new Text( '--- B ---', { font: BUTTON_FONT } ), listener: function() { message( 'Button B pressed' ); }, baseColor: new Color( 250, 0, 0 ) } ); - var buttonC = new RectangularPushButton( { + const buttonC = new RectangularPushButton( { content: new Text( '--- C ---', { font: BUTTON_FONT } ), listener: function() { message( 'Button C pressed' ); }, baseColor: 'rgb( 204, 102, 204 )' } ); // Test for a button with different radii for each corner - var radiiTestButton = new RectangularPushButton( { + const radiiTestButton = new RectangularPushButton( { baseColor: 'orange', minWidth: 50, minHeight: 50, @@ -168,13 +168,13 @@ define( require => { listener: function() { message( 'Custom corner button pressed' ); } } ); - var buttonD = new RoundPushButton( { + const buttonD = new RoundPushButton( { content: new Text( '--- D ---', { font: BUTTON_FONT } ), listener: function() { message( 'Button D pressed' ); }, baseColor: roundBaseColor } ); - var buttonE = new RoundPushButton( { + const buttonE = new RoundPushButton( { content: new Text( '--- E ---', { font: BUTTON_FONT } ), listener: function() { message( 'Button E pressed' ); }, baseColor: 'yellow', @@ -186,7 +186,7 @@ define( require => { mouseAreaYShift: 10 } ); - var pseudo3DButtonsBox = new HBox( { + const pseudo3DButtonsBox = new HBox( { children: [ buttonA, buttonB, buttonC, radiiTestButton, buttonD, buttonE ], spacing: 10, left: radioButtonPanel.right + 25, @@ -198,14 +198,14 @@ define( require => { // Flat buttons labeled 1, 2, 3, 4 //=================================================================================== - var button1 = new RectangularPushButton( { + const button1 = new RectangularPushButton( { content: new Text( '-- 1 --', { font: BUTTON_FONT } ), listener: function() { message( 'Button 1 pressed' ); }, baseColor: 'rgb( 204, 102, 204 )', buttonAppearanceStrategy: RectangularButtonView.FlatAppearanceStrategy } ); - var button2 = new RectangularPushButton( { + const button2 = new RectangularPushButton( { content: new Text( '-- 2 --', { font: BUTTON_FONT } ), listener: function() { message( 'Button 2 pressed' ); }, baseColor: '#A0D022', @@ -214,20 +214,20 @@ define( require => { stroke: '#202020' } ); - var button3 = new RoundPushButton( { + const button3 = new RoundPushButton( { content: new Text( '- 3 -', { font: BUTTON_FONT } ), listener: function() { message( 'Button 3 pressed ' ); }, buttonAppearanceStrategy: RoundButtonView.FlatAppearanceStrategy } ); - var button4 = new RoundPushButton( { + const button4 = new RoundPushButton( { content: new Text( '-- 4 --', { font: BUTTON_FONT, fill: 'white' } ), listener: function() { message( 'Button 4 pressed ' ); }, baseColor: '#CC3300', buttonAppearanceStrategy: RoundButtonView.FlatAppearanceStrategy } ); - var flatButtonsBox = new HBox( { + const flatButtonsBox = new HBox( { children: [ button1, button2, button3, button4 ], spacing: 10, left: pseudo3DButtonsBox.left, @@ -239,7 +239,7 @@ define( require => { // Fire! Go! Help! buttons - these demonstrate more colors and sizes of buttons //=================================================================================== - var fireButton = new RoundPushButton( { + const fireButton = new RoundPushButton( { content: new Text( 'Fire!', { font: BUTTON_FONT } ), listener: function() { message( 'Fire button pressed' ); }, baseColor: 'orange', @@ -247,21 +247,21 @@ define( require => { lineWidth: 0.5 } ); - var goButton = new RoundPushButton( { + const goButton = new RoundPushButton( { content: new Text( 'Go!', { font: BUTTON_FONT } ), listener: function() { message( 'Go button pressed' ); }, baseColor: new Color( 0, 163, 0 ), minXPadding: 10 } ); - var helpButton = new RoundPushButton( { + const helpButton = new RoundPushButton( { content: new Text( 'Help', { font: BUTTON_FONT } ), listener: function() { message( 'Help button pressed' ); }, baseColor: new Color( 244, 154, 194 ), minXPadding: 10 } ); - var actionButtonsBox = new HBox( { + const actionButtonsBox = new HBox( { children: [ fireButton, goButton, helpButton ], spacing: 15, left: flatButtonsBox.left, @@ -273,8 +273,8 @@ define( require => { // Buttons with fire-on-hold turned on //=================================================================================== - var fireOnHeldCount = 0; - var fireQuicklyWhenHeldButton = new RectangularPushButton( { + let fireOnHeldCount = 0; + const fireQuicklyWhenHeldButton = new RectangularPushButton( { content: new Text( 'Press and hold to test (fast fire)', { font: BUTTON_CAPTION_FONT } ), listener: function() { message( 'Fast held button fired ' + ( ++fireOnHeldCount ) + 'x' ); }, baseColor: new Color( 114, 132, 62 ), @@ -283,8 +283,8 @@ define( require => { fireOnHoldInterval: 50 } ); - var fireSlowlyOnHoldCount = 0; - var fireSlowlyWhenHeldButton = new RectangularPushButton( { + let fireSlowlyOnHoldCount = 0; + const fireSlowlyWhenHeldButton = new RectangularPushButton( { content: new Text( 'Press and hold to test (slow fire)', { font: BUTTON_CAPTION_FONT } ), listener: function() { message( 'Slow held button fired ' + ( ++fireSlowlyOnHoldCount ) + 'x' ); }, baseColor: new Color( 147, 92, 120 ), @@ -294,7 +294,7 @@ define( require => { top: fireQuicklyWhenHeldButton.bottom + 10 } ); - var heldButtonsBox = new VBox( { + const heldButtonsBox = new VBox( { children: [ fireQuicklyWhenHeldButton, fireSlowlyWhenHeldButton ], spacing: 10, align: 'left', @@ -303,8 +303,8 @@ define( require => { } ); this.addChild( heldButtonsBox ); - var upperLeftAlignTextNode = new Text( 'upper left align test', { font: BUTTON_CAPTION_FONT } ); - var upperLeftContentButton = new RectangularPushButton( { + const upperLeftAlignTextNode = new Text( 'upper left align test', { font: BUTTON_CAPTION_FONT } ); + const upperLeftContentButton = new RectangularPushButton( { content: upperLeftAlignTextNode, listener: function() { message( 'Upper left alignment button fired ' ); }, baseColor: alignBaseColor, @@ -314,8 +314,8 @@ define( require => { minHeight: upperLeftAlignTextNode.height * 2 } ); - var lowerRightAlignTextNode = new Text( 'lower right align test', { font: BUTTON_CAPTION_FONT } ); - var lowerRightContentButton = new RectangularPushButton( { + const lowerRightAlignTextNode = new Text( 'lower right align test', { font: BUTTON_CAPTION_FONT } ); + const lowerRightContentButton = new RectangularPushButton( { content: lowerRightAlignTextNode, listener: function() { message( 'Lower right alignment button fired ' ); }, baseColor: alignBaseColor, @@ -326,7 +326,7 @@ define( require => { top: upperLeftContentButton.height + 10 } ); - var alignTextButtonsBox = new VBox( { + const alignTextButtonsBox = new VBox( { children: [ upperLeftContentButton, lowerRightContentButton ], spacing: 10, left: heldButtonsBox.left, @@ -340,8 +340,8 @@ define( require => { // Miscellaneous other button examples //=================================================================================== - var fireOnDownCount = 0; - var fireOnDownButton = new RectangularPushButton( { + let fireOnDownCount = 0; + const fireOnDownButton = new RectangularPushButton( { content: new Text( 'Fire on Down Button', { font: BUTTON_FONT } ), listener: function() { message( 'Fire on down button pressed ' + ( ++fireOnDownCount ) + 'x' ); }, baseColor: new Color( 255, 255, 61 ), @@ -350,25 +350,25 @@ define( require => { lineWidth: 1 } ); - var htmlButton = new HTMLPushButton( 'HTML button example', { + const htmlButton = new HTMLPushButton( 'HTML button example', { listener: function() { message( 'HTML button pressed' ); }, baseColor: new Color( 64, 225, 0 ) } ); // transparent button with something behind it // TODO: this isn't transparent when disabled. - var rectangleNode = new Rectangle( 0, 0, 25, 50, { fill: 'red' } ); - var transparentButton = new RectangularPushButton( { + const rectangleNode = new Rectangle( 0, 0, 25, 50, { fill: 'red' } ); + const transparentButton = new RectangularPushButton( { content: new Text( 'Transparent Button', { font: BUTTON_FONT } ), listener: function() { message( 'Transparent button pressed' ); }, baseColor: new Color( 255, 255, 0, 0.7 ), center: rectangleNode.center } ); - var transparentParent = new Node( { children: [ rectangleNode, transparentButton ] } ); + const transparentParent = new Node( { children: [ rectangleNode, transparentButton ] } ); - var arrowButton = new ArrowButton( 'left', function() { message( 'ArrowButton pressed' ); } ); + const arrowButton = new ArrowButton( 'left', function() { message( 'ArrowButton pressed' ); } ); - var miscButtonsBox = new VBox( { + const miscButtonsBox = new VBox( { children: [ fireOnDownButton, htmlButton, transparentParent, arrowButton ], spacing: 15, left: actionButtonsBox.left, @@ -382,19 +382,19 @@ define( require => { // Demonstrate using arbitrary values for toggle button. Wrap in extra // quotes so it is clear that it is a string in the debugging UI. - var roundToggleButtonProperty = new Property( 'off' ); + const roundToggleButtonProperty = new Property( 'off' ); roundToggleButtonProperty.lazyLink( function( value ) { message( 'Round sticky toggle button state changed to: ' + value ); } ); - var roundStickyToggleButton = new RoundStickyToggleButton( 'off', 'on', roundToggleButtonProperty, { + const roundStickyToggleButton = new RoundStickyToggleButton( 'off', 'on', roundToggleButtonProperty, { baseColor: new Color( 255, 0, 0 ) } ); - var rectangularToggleButtonProperty = new Property( false ); + const rectangularToggleButtonProperty = new Property( false ); rectangularToggleButtonProperty.lazyLink( function( value ) { message( 'Rectangular sticky toggle button state changed to: ' + value ); } ); - var booleanRectangularStickyToggleButton = new BooleanRectangularStickyToggleButton( rectangularToggleButtonProperty, { + const booleanRectangularStickyToggleButton = new BooleanRectangularStickyToggleButton( rectangularToggleButtonProperty, { baseColor: new Color( 0, 200, 200 ), centerX: roundStickyToggleButton.centerX, top: roundStickyToggleButton.bottom + 10, @@ -402,7 +402,7 @@ define( require => { minHeight: 35 } ); - var toggleButtonsBox = new VBox( { + const toggleButtonsBox = new VBox( { children: [ roundStickyToggleButton, booleanRectangularStickyToggleButton ], spacing: 15, left: miscButtonsBox.right + 25, @@ -415,18 +415,18 @@ define( require => { //=================================================================================== // round - var roundOnProperty = new Property( false ); + const roundOnProperty = new Property( false ); roundOnProperty.lazyLink( function( on ) { message( 'RoundMomentaryButton on=' + on ); } ); - var roundMomentaryButton = new RoundMomentaryButton( false, true, roundOnProperty, { + const roundMomentaryButton = new RoundMomentaryButton( false, true, roundOnProperty, { baseColor: '#D76958', left: roundStickyToggleButton.right + 10, centerY: roundStickyToggleButton.centerY } ); // rectangular - var rectangularOnProperty = new Property( false ); + const rectangularOnProperty = new Property( false ); rectangularOnProperty.lazyLink( function( on ) { message( 'RectangularMomentaryButton on=' + on ); } ); - var rectangularMomentaryButton = new RectangularMomentaryButton( false, true, rectangularOnProperty, { + const rectangularMomentaryButton = new RectangularMomentaryButton( false, true, rectangularOnProperty, { baseColor: '#724C35', minWidth: 50, minHeight: 40, @@ -434,7 +434,7 @@ define( require => { top: roundMomentaryButton.bottom + 10 } ); - var momentaryButtonsBox = new VBox( { + const momentaryButtonsBox = new VBox( { children: [ roundMomentaryButton, rectangularMomentaryButton ], spacing: 15, left: toggleButtonsBox.right + 25, @@ -448,7 +448,7 @@ define( require => { //TODO Shouldn't all of these buttons be able to observe buttonEnabledProperty? // Set up a property for testing button enable/disable. - var buttonsEnabledProperty = new Property( true ); + const buttonsEnabledProperty = new Property( true ); buttonsEnabledProperty.link( function( enabled ) { arrowButton.enabled = enabled; radioButtonGroup.enabled = enabled; @@ -477,7 +477,7 @@ define( require => { rectangularMomentaryButton.enabled = enabled; roundMomentaryButton.enabled = enabled; } ); - var disableEnableButton = new BooleanRectangularToggleButton( + const disableEnableButton = new BooleanRectangularToggleButton( new Text( 'Disable Buttons', { font: BUTTON_CAPTION_FONT } ), new Text( 'Enable Buttons', { font: BUTTON_CAPTION_FONT } ), buttonsEnabledProperty, { @@ -489,7 +489,7 @@ define( require => { this.addChild( disableEnableButton ); // Add a button to set alternative color scheme. - var changeButtonColorsButton = new RectangularPushButton( { + const changeButtonColorsButton = new RectangularPushButton( { content: new Text( 'Change Some Button Colors', { font: BUTTON_CAPTION_FONT } ), listener: function() { buttonA.baseColor = new Color( _.random( 0, 255 ), _.random( 0, 255 ), _.random( 0, 255 ) ); diff --git a/js/demo/ComponentsScreenView.js b/js/demo/ComponentsScreenView.js index 51d7ade9..789a803b 100644 --- a/js/demo/ComponentsScreenView.js +++ b/js/demo/ComponentsScreenView.js @@ -76,16 +76,16 @@ define( require => { var demoCarousel = function( layoutBounds ) { // create items - var colors = [ 'red', 'blue', 'green', 'yellow', 'pink', 'white', 'orange', 'magenta', 'purple', 'pink' ]; - var vItems = []; - var hItems = []; + const colors = [ 'red', 'blue', 'green', 'yellow', 'pink', 'white', 'orange', 'magenta', 'purple', 'pink' ]; + const vItems = []; + const 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, { + const vCarousel = new Carousel( vItems, { orientation: 'vertical', separatorsVisible: true, buttonTouchAreaXDilation: 5, @@ -95,7 +95,7 @@ define( require => { } ); // horizontal carousel - var hCarousel = new Carousel( hItems, { + const hCarousel = new Carousel( hItems, { orientation: 'horizontal', buttonTouchAreaXDilation: 15, buttonTouchAreaYDilation: 5, @@ -106,8 +106,8 @@ define( require => { } ); // button that scrolls the horizontal carousel to a specific item - var itemIndex = 4; - var hScrollToItemButton = new RectangularPushButton( { + const itemIndex = 4; + const hScrollToItemButton = new RectangularPushButton( { content: new Text( 'scroll to item ' + itemIndex, { font: new PhetFont( 20 ) } ), listener: function() { hCarousel.scrollToItem( hItems[ itemIndex ] ); @@ -115,8 +115,8 @@ define( require => { } ); // button that sets the horizontal carousel to a specific page number - var pageNumber = 0; - var hScrollToPageButton = new RectangularPushButton( { + const pageNumber = 0; + const hScrollToPageButton = new RectangularPushButton( { content: new Text( 'scroll to page ' + pageNumber, { font: new PhetFont( 20 ) } ), listener: function() { hCarousel.pageNumberProperty.set( pageNumber ); @@ -124,7 +124,7 @@ define( require => { } ); // group the buttons - var buttonGroup = new VBox( { + const buttonGroup = new VBox( { children: [ hScrollToItemButton, hScrollToPageButton ], align: 'left', spacing: 7, @@ -163,24 +163,24 @@ define( require => { // Creates a demo of ComboBox var demoComboBox = function( layoutBounds ) { - var labels = [ 'one', 'two', 'three', 'four', 'five', 'six' ]; - var items = []; + const labels = [ 'one', 'two', 'three', 'four', 'five', 'six' ]; + const items = []; labels.forEach( function( label ) { items.push( new ComboBoxItem( new Text( label, { font: new PhetFont( { size: 20 } ) } ), label ) ); } ); - var selectedItemProperty = new Property( labels[ 0 ] ); + const selectedItemProperty = new Property( labels[ 0 ] ); - var listParent = new Node(); + const listParent = new Node(); - var comboBox = new ComboBox( items, selectedItemProperty, listParent, { + const comboBox = new ComboBox( items, selectedItemProperty, listParent, { highlightFill: 'yellow', listPosition: 'above' } ); - var enabledCheckbox = new Checkbox( new Text( 'enabled', { font: new PhetFont( 20 ) } ), comboBox.enabledProperty ); + const enabledCheckbox = new Checkbox( new Text( 'enabled', { font: new PhetFont( 20 ) } ), comboBox.enabledProperty ); - var uiComponents = new VBox( { + const uiComponents = new VBox( { children: [ comboBox, enabledCheckbox ], spacing: 40, center: layoutBounds.center @@ -207,10 +207,10 @@ define( require => { */ var demoSlider = function( layoutBounds, orientation ) { - var property = new Property( 0 ); - var range = new Range( 0, 100 ); - var tickLabelOptions = { font: new PhetFont( 16 ) }; - var sliderOptions = { + const property = new Property( 0 ); + const range = new Range( 0, 100 ); + const tickLabelOptions = { font: new PhetFont( 16 ) }; + const sliderOptions = { trackSize: new Dimension2( 300, 5 ), thumbTouchAreaXDilation: 15, thumbTouchAreaYDilation: 15, @@ -220,7 +220,7 @@ define( require => { enabledProperty: new Property( true ) }; - var slider = null; + let slider = null; if ( orientation === 'horizontal' ) { slider = new HSlider( property, range, sliderOptions ); } @@ -238,67 +238,67 @@ define( require => { slider.addMinorTick( range.min + 0.75 * range.getLength() ); // show/hide major ticks - var majorTicksVisibleProperty = new Property( true ); + const majorTicksVisibleProperty = new Property( true ); majorTicksVisibleProperty.link( function( visible ) { slider.majorTicksVisible = visible; } ); - var majorTicksCheckbox = new Checkbox( new Text( 'Major ticks visible', { font: new PhetFont( 20 ) } ), + const majorTicksCheckbox = new Checkbox( new Text( 'Major ticks visible', { font: new PhetFont( 20 ) } ), majorTicksVisibleProperty, { left: slider.left, top: slider.bottom + 40 } ); // show/hide minor ticks - var minorTicksVisibleProperty = new Property( true ); + const minorTicksVisibleProperty = new Property( true ); minorTicksVisibleProperty.link( function( visible ) { slider.minorTicksVisible = visible; } ); - var minorTicksCheckbox = new Checkbox( new Text( 'Minor ticks visible', { font: new PhetFont( 20 ) } ), + const minorTicksCheckbox = new Checkbox( new Text( 'Minor ticks visible', { font: new PhetFont( 20 ) } ), minorTicksVisibleProperty, { left: slider.left, top: majorTicksCheckbox.bottom + 40 } ); // enable/disable slider - var enabledProperty = new Property( true ); + const enabledProperty = new Property( true ); enabledProperty.link( function( enabled ) { slider.enabled = enabled; } ); - var enabledCheckbox = new Checkbox( new Text( 'Enable slider', { font: new PhetFont( 20 ) } ), + const enabledCheckbox = new Checkbox( new Text( 'Enable slider', { font: new PhetFont( 20 ) } ), enabledProperty, { left: slider.left, top: minorTicksCheckbox.bottom + 40 } ); // restrict enabled range of slider - var restrictedRangeProperty = new Property( false ); - var enabledRangeProperty = new Property( new Range( 0, 100 ) ); + const restrictedRangeProperty = new Property( false ); + const enabledRangeProperty = new Property( new Range( 0, 100 ) ); restrictedRangeProperty.link( function( restrictedRange ) { enabledRangeProperty.value = restrictedRange ? new Range( 25, 75 ) : new Range( 0, 100 ); } ); enabledRangeProperty.link( function( enabledRange ) { slider.enabledRange = enabledRange; } ); - var enabledRangeCheckbox = new Checkbox( new Text( 'Enable Range [25, 75]', { font: new PhetFont( 20 ) } ), + const enabledRangeCheckbox = new Checkbox( new Text( 'Enable Range [25, 75]', { font: new PhetFont( 20 ) } ), restrictedRangeProperty, { left: slider.left, top: enabledCheckbox.bottom + 40 } ); // All of the controls related to the slider - var controls = new VBox( { + const controls = new VBox( { align: 'left', spacing: 30, children: [ majorTicksCheckbox, minorTicksCheckbox, enabledCheckbox, enabledRangeCheckbox ] } ); // Position the control based on the orientation of the slider - var layoutBoxOptions = { + const layoutBoxOptions = { spacing: 60, children: [ slider, controls ], center: layoutBounds.center }; - var layoutBox = null; + let layoutBox = null; if ( orientation === 'horizontal' ) { layoutBox = new VBox( layoutBoxOptions ); } @@ -325,20 +325,20 @@ define( require => { var demoPageControl = function( layoutBounds ) { // create items - var colors = [ 'red', 'blue', 'green', 'yellow', 'pink', 'white', 'orange', 'magenta', 'purple', 'pink' ]; - var items = []; + const colors = [ 'red', 'blue', 'green', 'yellow', 'pink', 'white', 'orange', 'magenta', 'purple', 'pink' ]; + const items = []; colors.forEach( function( color ) { items.push( new Rectangle( 0, 0, 100, 100, { fill: color, stroke: 'black' } ) ); } ); // carousel - var carousel = new Carousel( items, { + const carousel = new Carousel( items, { orientation: 'horizontal', itemsPerPage: 3 } ); // page control - var pageControl = new PageControl( carousel.numberOfPages, carousel.pageNumberProperty, { + const pageControl = new PageControl( carousel.numberOfPages, carousel.pageNumberProperty, { orientation: 'horizontal', interactive: true, dotRadius: 10, @@ -360,12 +360,12 @@ define( require => { // Creates a demo for NumberSpinner var demoNumberSpinner = function( layoutBounds ) { - var valueProperty = new Property( 0 ); - var valueRangeProperty = new Property( new Range( -5, 5 ) ); - var enabledProperty = new Property( true ); + const valueProperty = new Property( 0 ); + const valueRangeProperty = new Property( new Range( -5, 5 ) ); + const enabledProperty = new Property( true ); // options for all spinners - var spinnerOptions = { + const spinnerOptions = { enabledProperty: enabledProperty, touchAreaXDilation: 20, touchAreaYDilation: 10, @@ -378,20 +378,20 @@ define( require => { }; // Demonstrate each value of options.arrowsPosition - var spinnerLeftRight = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { + const spinnerLeftRight = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { arrowsPosition: 'leftRight', valuePattern: '{{value}} bottles of beer on the wall' } ) ); - var spinnerTopBottom = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { + const spinnerTopBottom = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { arrowsPosition: 'topBottom', arrowsScale: 0.65 } ) ); - var spinnerBothRight = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { + const spinnerBothRight = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { arrowsPosition: 'bothRight', yMargin: 10, valueAlign: 'right' } ) ); - var spinnerBothBottom = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { + const spinnerBothBottom = new NumberSpinner( valueProperty, valueRangeProperty, _.extend( {}, spinnerOptions, { arrowsPosition: 'bothBottom', backgroundFill: 'pink', backgroundStroke: 'red', @@ -402,7 +402,7 @@ define( require => { valueAlign: 'left' } ) ); - var enabledCheckbox = new Checkbox( new Text( 'enabled', { font: new PhetFont( 20 ) } ), enabledProperty ); + const enabledCheckbox = new Checkbox( new Text( 'enabled', { font: new PhetFont( 20 ) } ), enabledProperty ); return new VBox( { children: [ spinnerTopBottom, spinnerBothRight, spinnerBothBottom, spinnerLeftRight, enabledCheckbox ], @@ -413,7 +413,7 @@ define( require => { var demoAlignGroup = function( layoutBounds ) { function highlightWrap( node ) { - var rect = Rectangle.bounds( node.bounds, { fill: 'rgba(0,0,0,0.25)' } ); + const rect = Rectangle.bounds( node.bounds, { fill: 'rgba(0,0,0,0.25)' } ); node.on( 'bounds', function() { rect.setRectBounds( node.bounds ); } ); @@ -425,11 +425,11 @@ define( require => { } ); } - var iconGroup = new AlignGroup(); - var iconRow = new HBox( { + const iconGroup = new AlignGroup(); + const iconRow = new HBox( { spacing: 10, children: _.range( 1, 10 ).map( function() { - var randomRect = new Rectangle( 0, 0, phet.joist.random.nextDouble() * 60 + 10, phet.joist.random.nextDouble() * 60 + 10, { + const randomRect = new Rectangle( 0, 0, phet.joist.random.nextDouble() * 60 + 10, phet.joist.random.nextDouble() * 60 + 10, { fill: 'black' } ); timer.addListener( function() { @@ -445,13 +445,13 @@ define( require => { } ).map( highlightWrap ) } ); - var panelGroup = new AlignGroup( { matchVertical: false } ); + const panelGroup = new AlignGroup( { matchVertical: false } ); function randomText() { - var text = new Text( 'Test', { fontSize: 20 } ); + const text = new Text( 'Test', { fontSize: 20 } ); timer.addListener( function() { if ( phet.joist.random.nextDouble() < 0.03 ) { - var string = ''; + let string = ''; while ( phet.joist.random.nextDouble() < 0.94 && string.length < 20 ) { string += ( phet.joist.random.nextDouble() + '' ).slice( -1 ); } @@ -461,7 +461,7 @@ define( require => { return text; } - var panelRow = new VBox( { + const panelRow = new VBox( { spacing: 10, children: [ new Panel( new AlignBox( randomText(), { group: panelGroup } ) ), @@ -483,9 +483,9 @@ define( require => { }; var demoAccordionBox = function( layoutBounds ) { - var randomRect = new Rectangle( 0, 0, 100, 50, { fill: 'red' } ); + const randomRect = new Rectangle( 0, 0, 100, 50, { fill: 'red' } ); - var resizeButton = new RectangularPushButton( { + const resizeButton = new RectangularPushButton( { content: new Text( 'Resize', { font: new PhetFont( 20 ) } ), listener: function() { randomRect.rectWidth = 50 + phet.joist.random.nextDouble() * 150; diff --git a/js/demo/DemosScreenView.js b/js/demo/DemosScreenView.js index 00be4da2..927a67d0 100644 --- a/js/demo/DemosScreenView.js +++ b/js/demo/DemosScreenView.js @@ -52,7 +52,7 @@ define( require => { ScreenView.call( this, options ); - var layoutBounds = this.layoutBounds; + const layoutBounds = this.layoutBounds; // Sort the demos by label, so that they appear in the combo box in alphabetical order demos = _.sortBy( demos, function( demo ) { @@ -60,11 +60,11 @@ define( require => { } ); // All demos will be children of this node, to maintain rendering order with combo box list - var demosParent = new Node(); + const demosParent = new Node(); this.addChild( demosParent ); // add each demo to the combo box - var comboBoxItems = []; + const comboBoxItems = []; demos.forEach( function( demo ) { comboBoxItems.push( new ComboBoxItem( new Text( demo.label, { font: options.comboBoxItemFont } ), demo, { @@ -74,11 +74,11 @@ define( require => { } ); // Parent for the combo box popup list - var listParent = new Node(); + const listParent = new Node(); this.addChild( listParent ); // Set the initial demo - var selectedDemo = demos[ 0 ]; + let selectedDemo = demos[ 0 ]; if ( options.selectedDemoLabel ) { selectedDemo = _.find( demos, function( demo ) { return ( demo.label === options.selectedDemoLabel ); @@ -89,8 +89,8 @@ define( require => { } // Combo box for selecting which component to view - var selectedDemoProperty = new Property( selectedDemo ); - var comboBox = new ComboBox( comboBoxItems, selectedDemoProperty, listParent, { + const selectedDemoProperty = new Property( selectedDemo ); + const comboBox = new ComboBox( comboBoxItems, selectedDemoProperty, listParent, { buttonFill: 'rgb( 218, 236, 255 )', cornerRadius: options.comboBoxCornerRadius, xMargin: options.comboBoxItemXMargin, diff --git a/js/demo/DialogsScreenView.js b/js/demo/DialogsScreenView.js index 8753ddb3..7f1359de 100644 --- a/js/demo/DialogsScreenView.js +++ b/js/demo/DialogsScreenView.js @@ -20,7 +20,7 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var BUTTON_FONT = new Font( { size: 20 } ); + const BUTTON_FONT = new Font( { size: 20 } ); /** * @constructor @@ -31,9 +31,9 @@ define( require => { // dialog will be created the first time the button is pressed, lazily because Dialog // requires sim bounds during Dialog construction - var dialog = null; + let dialog = null; - var modalDialogButton = new RectangularPushButton( { + const modalDialogButton = new RectangularPushButton( { content: new Text( 'modal dialog', { font: BUTTON_FONT } ), listener: function() { if ( !dialog ) { @@ -66,15 +66,15 @@ define( require => { */ var createDialog = function( modal ) { - var resizeButton = new RectangularPushButton( { + const resizeButton = new RectangularPushButton( { content: new Text( 'Resize', { font: new Font( { size: 18 } ) } ) } ); - var minWidth = 1.5 * resizeButton.width; - var minHeight = 1.5 * resizeButton.height; + const minWidth = 1.5 * resizeButton.width; + const minHeight = 1.5 * resizeButton.height; // This rectangle represents that bounds of the Dialog's content. - var randomRect = new Rectangle( 0, 0, minWidth, minHeight, { stroke: 'red' } ); + const randomRect = new Rectangle( 0, 0, minWidth, minHeight, { stroke: 'red' } ); resizeButton.center = randomRect.center; resizeButton.addListener( function() { @@ -83,7 +83,7 @@ define( require => { resizeButton.center = randomRect.center; } ); - var contentNode = new Node( { children: [ randomRect, resizeButton ] } ); + const contentNode = new Node( { children: [ randomRect, resizeButton ] } ); return new Dialog( contentNode, { titleAlign: 'center', diff --git a/js/demo/MemoryTestsScreenView.js b/js/demo/MemoryTestsScreenView.js index fb4f7b5a..4adb55f1 100644 --- a/js/demo/MemoryTestsScreenView.js +++ b/js/demo/MemoryTestsScreenView.js @@ -19,7 +19,7 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); function ComponentHolder( createFunction ) { - var self = this; + const self = this; this.dispose = function() { self.instance.dispose(); }; @@ -28,10 +28,10 @@ define( require => { }; } - var numberProperty = new Property( 0 ); - var booleanProperty = new Property( false ); + const numberProperty = new Property( 0 ); + const booleanProperty = new Property( false ); - var components = [ + const components = [ new ComponentHolder( function() { return new HSlider( numberProperty, new Range( 0, 10 ) ); } ), @@ -55,8 +55,8 @@ define( require => { return inherit( ScreenView, MemoryTestsScreenView, { step: function() { - for ( var i = 0; i < components.length; i++ ) { - var holder = components[ i ]; + for ( let i = 0; i < components.length; i++ ) { + const holder = components[ i ]; // dispose first, then create and add at the end of the loop so components will be visible on the screen during // animation. diff --git a/js/sun-main.js b/js/sun-main.js index 48b3dc77..70eea46d 100644 --- a/js/sun-main.js +++ b/js/sun-main.js @@ -21,13 +21,13 @@ define( require => { // strings const sunTitleString = require( 'string!SUN/sun.title' ); - var simOptions = { + const simOptions = { credits: { leadDesign: 'PhET' } }; - var createScreenIcon = function( color ) { + const createScreenIcon = function( color ) { return new Rectangle( 0, 0, Screen.MINIMUM_HOME_SCREEN_ICON_SIZE.width, Screen.MINIMUM_HOME_SCREEN_ICON_SIZE.height, { fill: color } ); }; diff --git a/js/sunQueryParameters.js b/js/sunQueryParameters.js index e22460c1..2931700e 100644 --- a/js/sunQueryParameters.js +++ b/js/sunQueryParameters.js @@ -11,7 +11,7 @@ define( require => { // modules const sun = require( 'SUN/sun' ); - var sunQueryParameters = QueryStringMachine.getAll( { + const sunQueryParameters = QueryStringMachine.getAll( { // background color of the screens backgroundColor: {