{"action":"created","issue":{"url":"https://api.github.com/repos/phetsims/sun/issues/257","repository_url":"https://api.github.com/repos/phetsims/sun","labels_url":"https://api.github.com/repos/phetsims/sun/issues/257/labels{/name}","comments_url":"https://api.github.com/repos/phetsims/sun/issues/257/comments","events_url":"https://api.github.com/repos/phetsims/sun/issues/257/events","html_url":"https://github.com/phetsims/sun/issues/257","id":174569595,"number":257,"title":"how to add enabled/disabled feature to UI components?","user":{"login":"pixelzoom","id":3046552,"avatar_url":"https://avatars.githubusercontent.com/u/3046552?v=3","gravatar_id":"","url":"https://api.github.com/users/pixelzoom","html_url":"https://github.com/pixelzoom","followers_url":"https://api.github.com/users/pixelzoom/followers","following_url":"https://api.github.com/users/pixelzoom/following{/other_user}","gists_url":"https://api.github.com/users/pixelzoom/gists{/gist_id}","starred_url":"https://api.github.com/users/pixelzoom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pixelzoom/subscriptions","organizations_url":"https://api.github.com/users/pixelzoom/orgs","repos_url":"https://api.github.com/users/pixelzoom/repos","events_url":"https://api.github.com/users/pixelzoom/events{/privacy}","received_events_url":"https://api.github.com/users/pixelzoom/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"jonathanolson","id":480878,"avatar_url":"https://avatars.githubusercontent.com/u/480878?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanolson","html_url":"https://github.com/jonathanolson","followers_url":"https://api.github.com/users/jonathanolson/followers","following_url":"https://api.github.com/users/jonathanolson/following{/other_user}","gists_url":"https://api.github.com/users/jonathanolson/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanolson/subscriptions","organizations_url":"https://api.github.com/users/jonathanolson/orgs","repos_url":"https://api.github.com/users/jonathanolson/repos","events_url":"https://api.github.com/users/jonathanolson/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanolson/received_events","type":"User","site_admin":false},"assignees":[{"login":"jonathanolson","id":480878,"avatar_url":"https://avatars.githubusercontent.com/u/480878?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanolson","html_url":"https://github.com/jonathanolson","followers_url":"https://api.github.com/users/jonathanolson/followers","following_url":"https://api.github.com/users/jonathanolson/following{/other_user}","gists_url":"https://api.github.com/users/jonathanolson/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanolson/subscriptions","organizations_url":"https://api.github.com/users/jonathanolson/orgs","repos_url":"https://api.github.com/users/jonathanolson/repos","events_url":"https://api.github.com/users/jonathanolson/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanolson/received_events","type":"User","site_admin":false},{"login":"pixelzoom","id":3046552,"avatar_url":"https://avatars.githubusercontent.com/u/3046552?v=3","gravatar_id":"","url":"https://api.github.com/users/pixelzoom","html_url":"https://github.com/pixelzoom","followers_url":"https://api.github.com/users/pixelzoom/followers","following_url":"https://api.github.com/users/pixelzoom/following{/other_user}","gists_url":"https://api.github.com/users/pixelzoom/gists{/gist_id}","starred_url":"https://api.github.com/users/pixelzoom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pixelzoom/subscriptions","organizations_url":"https://api.github.com/users/pixelzoom/orgs","repos_url":"https://api.github.com/users/pixelzoom/repos","events_url":"https://api.github.com/users/pixelzoom/events{/privacy}","received_events_url":"https://api.github.com/users/pixelzoom/received_events","type":"User","site_admin":false},{"login":"jessegreenberg","id":6396244,"avatar_url":"https://avatars.githubusercontent.com/u/6396244?v=3","gravatar_id":"","url":"https://api.github.com/users/jessegreenberg","html_url":"https://github.com/jessegreenberg","followers_url":"https://api.github.com/users/jessegreenberg/followers","following_url":"https://api.github.com/users/jessegreenberg/following{/other_user}","gists_url":"https://api.github.com/users/jessegreenberg/gists{/gist_id}","starred_url":"https://api.github.com/users/jessegreenberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessegreenberg/subscriptions","organizations_url":"https://api.github.com/users/jessegreenberg/orgs","repos_url":"https://api.github.com/users/jessegreenberg/repos","events_url":"https://api.github.com/users/jessegreenberg/events{/privacy}","received_events_url":"https://api.github.com/users/jessegreenberg/received_events","type":"User","site_admin":false}],"milestone":null,"comments":25,"created_at":"2016-09-01T16:33:43Z","updated_at":"2016-09-19T15:43:07Z","closed_at":null,"body":"Developer consensus was to use this pattern for implementing enabled/disabled feature: https://github.com/phetsims/sun/issues/241#issuecomment-234031982.  But as @samreid hinted at in https://github.com/phetsims/sun/issues/241#issuecomment-234323014, adding this feature currently requires duplicate/boilerplate code.  I've recently added this feature to ComboBox and NumberControl, and thought we should discuss other methods of adding the feature.\r\n\r\nHere's the relevant code that needs to be added: \r\n\r\n```js\r\nfunction MyComponent( ..., options ) {\r\n\r\n  options = _.extend( {\r\n    enabledProperty: new Property( true ),\r\n    disabledOpacity: 0.5, // {number} opacity used to make the control look disabled\r\n  }, options );\r\n\r\n  // validate options\r\n  assert && assert( options.disabledOpacity >= 0 && options.disabledOpacity <= 1,\r\n    'invalid disabledOpacity: ' + options.disabledOpacity );\r\n\r\n  // @public\r\n  this.enabledProperty = options.enabledProperty;\r\n\r\n  // enable/disable the component\r\n  var enabledObserver = function( enabled ) {\r\n    self.pickable = enabled;\r\n    self.opacity = enabled ? 1.0 : options.disabledOpacity;\r\n  };\r\n  this.enabledProperty.link( enabledObserver );\r\n\r\n  // @private called by dispose\r\n  this.disposeMyComponent = function() {\r\n    self.enabledProperty.unlink( enabledObserver );\r\n  };\r\n}\r\n\r\nreturn inherit( Supertype, MyComponent, {\r\n\r\n  // @public\r\n  dispose: function() {\r\n    this.disposeMyComponent();\r\n  },\r\n\r\n  // @public\r\n  setEnabled: function( enabled ) { this.enabledProperty.value = enabled; },\r\n  set enabled( value ) { this.setEnabled( value ); },\r\n\r\n  // @public\r\n  getEnabled: function() { return this.enabledProperty.value; },\r\n  get enabled() { return this.getEnabled(); }\r\n} );\r\n```"},"comment":{"url":"https://api.github.com/repos/phetsims/sun/issues/comments/248030690","html_url":"https://github.com/phetsims/sun/issues/257#issuecomment-248030690","issue_url":"https://api.github.com/repos/phetsims/sun/issues/257","id":248030690,"user":{"login":"pixelzoom","id":3046552,"avatar_url":"https://avatars.githubusercontent.com/u/3046552?v=3","gravatar_id":"","url":"https://api.github.com/users/pixelzoom","html_url":"https://github.com/pixelzoom","followers_url":"https://api.github.com/users/pixelzoom/followers","following_url":"https://api.github.com/users/pixelzoom/following{/other_user}","gists_url":"https://api.github.com/users/pixelzoom/gists{/gist_id}","starred_url":"https://api.github.com/users/pixelzoom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pixelzoom/subscriptions","organizations_url":"https://api.github.com/users/pixelzoom/orgs","repos_url":"https://api.github.com/users/pixelzoom/repos","events_url":"https://api.github.com/users/pixelzoom/events{/privacy}","received_events_url":"https://api.github.com/users/pixelzoom/received_events","type":"User","site_admin":false},"created_at":"2016-09-19T15:43:07Z","updated_at":"2016-09-19T15:43:07Z","body":"Using the approach in https://github.com/phetsims/sun/issues/257#issuecomment-248027906... If we specify `updateEnabled` via options instead of override, then we'll need to do call bind to provide the correct context.  \r\n\r\nIn @samreid's example:\r\n\r\n```js\r\nfunction MyComponentX( y ) {\r\n  this.y = y;\r\n  UIComponent( {\r\n    updateEnabled: function() {\r\n      doSomethingInteresting( this.y );\r\n    }\r\n  } )\r\n}\r\n\r\nfunction UIComponent( options ) {\r\n  ...\r\n  this.updateEnabled = options.updateEnabled.bind( this );\r\n}\r\n```\r\n"}}
{"actor":{"display_login":"pixelzoom"}}