{"action":"created","issue":{"url":"https://api.github.com/repos/emberjs/ember.js/issues/9634","labels_url":"https://api.github.com/repos/emberjs/ember.js/issues/9634/labels{/name}","comments_url":"https://api.github.com/repos/emberjs/ember.js/issues/9634/comments","events_url":"https://api.github.com/repos/emberjs/ember.js/issues/9634/events","html_url":"https://github.com/emberjs/ember.js/issues/9634","id":49280722,"number":9634,"title":"Allow using hidden for toggling visibility","user":{"login":"jamesarosen","id":2406,"avatar_url":"https://avatars.githubusercontent.com/u/2406?v=3","gravatar_id":"","url":"https://api.github.com/users/jamesarosen","html_url":"https://github.com/jamesarosen","followers_url":"https://api.github.com/users/jamesarosen/followers","following_url":"https://api.github.com/users/jamesarosen/following{/other_user}","gists_url":"https://api.github.com/users/jamesarosen/gists{/gist_id}","starred_url":"https://api.github.com/users/jamesarosen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jamesarosen/subscriptions","organizations_url":"https://api.github.com/users/jamesarosen/orgs","repos_url":"https://api.github.com/users/jamesarosen/repos","events_url":"https://api.github.com/users/jamesarosen/events{/privacy}","received_events_url":"https://api.github.com/users/jamesarosen/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/emberjs/ember.js/labels/Feature","name":"Feature","color":"009800"},{"url":"https://api.github.com/repos/emberjs/ember.js/labels/Needs%20Label%20Review","name":"Needs Label Review","color":"c7def8"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2014-11-18T19:14:50Z","updated_at":"2015-05-02T19:29:58Z","closed_at":null,"body":"Currently, `Ember.View` uses `style=\"display: none;\"` to hide elements and jQuery's `$.fn.toggle` to add and remove that style attribute value. HTML5 defines a [hidden attribute](http://davidwalsh.name/html5-hidden) that serves this purpose just as well, if not better.\r\n\r\nI'm not suggesting that Ember *switch* to `hidden` -- the browser support isn't as strong and there is still debate in the community about the attribute. Still, I'd like to be able to easily patch Ember to let me use it. Complex CSS rules -- especially animations -- are often easier to write when you don't have to override properties set in the `style` attribute.\r\n\r\nThere are two places that are tightly tied to the current implementation:\r\n\r\n 1. [`applyAttributesToBuffer `](https://github.com/emberjs/ember.js/blob/91741b4d58b2aa2781d6a7478bf38ddc3df3a8a1/packages/ember-views/lib/views/view.js#L1603-L1605)\r\n 2. [`_toggleVisibility`](https://github.com/emberjs/ember.js/blob/91741b4d58b2aa2781d6a7478bf38ddc3df3a8a1/packages/ember-views/lib/views/view.js#L1928-L1949)\r\n\r\nOne idea would be to extract two new helpers:\r\n\r\n```js\r\n_applyVisibilityToBuffer: function(buffer) {\r\n  if (get(this, 'isVisible') === false) {\r\n    buffer.style('display', 'none');\r\n  }\r\n},\r\n\r\n_toggleElementVisibility: function(isVisible) {\r\n  $el.toggle(isVisible);\r\n}\r\n```\r\n\r\nThose would be easy to monkey-patch for `hidden` support:\r\n\r\n```js\r\n_applyVisibilityToBuffer: function(buffer) {\r\n  if (get(this, 'isVisible') === false) {\r\n    buffer.attr('hidden', true);\r\n  }\r\n},\r\n\r\n_toggleElementVisibility: function(isVisible) {\r\n  $el.attr('hidden', !isVisible);\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/emberjs/ember.js/issues/comments/98390285","html_url":"https://github.com/emberjs/ember.js/issues/9634#issuecomment-98390285","issue_url":"https://api.github.com/repos/emberjs/ember.js/issues/9634","id":98390285,"user":{"login":"marcysutton","id":1045233,"avatar_url":"https://avatars.githubusercontent.com/u/1045233?v=3","gravatar_id":"","url":"https://api.github.com/users/marcysutton","html_url":"https://github.com/marcysutton","followers_url":"https://api.github.com/users/marcysutton/followers","following_url":"https://api.github.com/users/marcysutton/following{/other_user}","gists_url":"https://api.github.com/users/marcysutton/gists{/gist_id}","starred_url":"https://api.github.com/users/marcysutton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marcysutton/subscriptions","organizations_url":"https://api.github.com/users/marcysutton/orgs","repos_url":"https://api.github.com/users/marcysutton/repos","events_url":"https://api.github.com/users/marcysutton/events{/privacy}","received_events_url":"https://api.github.com/users/marcysutton/received_events","type":"User","site_admin":false},"created_at":"2015-05-02T19:29:58Z","updated_at":"2015-05-02T19:29:58Z","body":"One correction: focusable child elements inside of `aria-hidden` need `tabindex=\"-1\"` to remove them from the tab order, otherwise they show up as \"mystery controls\". That is bad. \r\n\r\nI don't see any reason not to use the HTML5 `hidden` attribute for marking things as completely hidden, but as the spec notes, it depends on CSS implementation with `display: none` to really hide something. Compound this with the fact that `display` is not an animatable property like `max-height`–it usually has to be set after a `timeout` so that transitions have time to occur. That might be a nice thing to work in, actually. "}}