diff --git a/js/buttons/ButtonNode.js b/js/buttons/ButtonNode.js index b8fa32f7..70fc497e 100644 --- a/js/buttons/ButtonNode.js +++ b/js/buttons/ButtonNode.js @@ -77,6 +77,21 @@ class ButtonNode extends Node { // See RectangularRadioButton.ContentAppearanceStrategy for an example. contentAppearanceStrategy: null, + /** + * Alter the appearance when changing the enabled of the button. + * @param {boolean} enabled + * @param {Node} background + * @param {Node|null} content - if there is content, style can be applied to a containing Node around it. + */ + enabledAppearanceStrategy: ( enabled, background, content ) => { + background.filters = enabled ? [] : [ CONTRAST_FILTER, BRIGHTNESS_FILTER ]; + + if ( content ) { + content.filters = enabled ? [] : [ Grayscale.FULL ]; + content.opacity = enabled ? 1 : SunConstants.DISABLED_OPACITY; + } + }, + // pdom tagName: 'button', @@ -155,24 +170,8 @@ class ButtonNode extends Node { this.mutate( options ); - const defaultEnabledListener = SunConstants.getComponentEnabledListener( this ); - // No need to dispose because enabledProperty is disposed in Node - this.enabledProperty.link( enabled => { - defaultEnabledListener( enabled ); - - // additional behavior specific for buttons. - this.opacity = 1.0; - buttonBackground.filters = enabled ? [] : [ - CONTRAST_FILTER, - BRIGHTNESS_FILTER - ]; - - if ( alignBox ) { - alignBox.filters = enabled ? [] : [ Grayscale.FULL ]; - alignBox.opacity = enabled ? 1 : SunConstants.DISABLED_OPACITY; - } - } ); + this.enabledProperty.link( enabled => options.enabledAppearanceStrategy( enabled, buttonBackground, alignBox ) ); // @private - define a dispose function this.disposeButtonNode = () => { diff --git a/js/demo/ButtonsScreenView.js b/js/demo/ButtonsScreenView.js index 1790e0f3..d32329f8 100644 --- a/js/demo/ButtonsScreenView.js +++ b/js/demo/ButtonsScreenView.js @@ -340,14 +340,23 @@ class ButtonsScreenView extends ScreenView { } ); // transparent button with something behind it - const rectangleNode = new Rectangle( 0, 0, 25, 50, { fill: 'red' } ); - const transparentButton = new RectangularPushButton( { - content: new Text( 'Transparent Button', { font: BUTTON_FONT } ), - listener: () => console.log( 'transparentButton fired' ), + const rectangleNode = new Rectangle( 0, 0, 25, 100, { fill: 'red' } ); + const transparentAlphaButton = new RectangularPushButton( { + content: new Text( 'Transparent Button via alpha', { font: BUTTON_FONT } ), + listener: () => console.log( 'transparentAlphaButton fired' ), baseColor: new Color( 255, 255, 0, 0.7 ), - center: rectangleNode.center + centerX: rectangleNode.centerX, + top: rectangleNode.top + 10 } ); - const transparentParent = new Node( { children: [ rectangleNode, transparentButton ] } ); + const transparentOpacityButton = new RectangularPushButton( { + content: new Text( 'Transparent Button via opacity', { font: BUTTON_FONT } ), + listener: () => console.log( 'transparentOpacityButton fired' ), + baseColor: new Color( 255, 255, 0 ), + opacity: .6, + centerX: rectangleNode.centerX, + bottom: rectangleNode.bottom - 10 + } ); + const transparentParent = new Node( { children: [ rectangleNode, transparentAlphaButton, transparentOpacityButton ] } ); const arrowButton = new ArrowButton( 'left', () => console.log( 'arrowButton fired' ), { enabledProperty: buttonsEnabledProperty @@ -523,7 +532,8 @@ class ButtonsScreenView extends ScreenView { goButton.enabled = enabled; helpButton.enabled = enabled; fireOnDownButton.enabled = enabled; - transparentButton.enabled = enabled; + transparentAlphaButton.enabled = enabled; + transparentOpacityButton.enabled = enabled; roundStickyToggleButton.enabled = enabled; booleanRectangularStickyToggleButton.enabled = enabled; fireQuicklyWhenHeldButton.enabled = enabled;