move ButtonNode enabled logic to enabledAppearanceStrategy, phetsims/…

…scenery#1112 #658
phetsims · Nov 6, 2020 · 7d5cc3e · 7d5cc3e
1 parent 4557a27
commit 7d5cc3e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git 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
@@ -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;