Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use classes instead of inline styles for hiding / showing #1681

Closed
wants to merge 8 commits into from

Conversation

mmcc
Copy link
Member

@mmcc mmcc commented Nov 20, 2014

No description provided.

@@ -845,7 +845,7 @@ vjs.Component.prototype.removeClass = function(classToRemove){
* @return {vjs.Component}
*/
vjs.Component.prototype.show = function(){
this.el_.style.display = 'block';
this.removeClass('vjs-hidden');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a subtle difference here in that something that was hidden by default could no longer be shown. I wonder if that will be an issue. The more accurate name for this new approach would be unhide.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a very good point...I think in all actuality, this would still work here (if display: none; was used for the default hide) thanks to the cascading thing since this would be the last class added. Obviously that wouldn't be the case for inline styles, but we definitely shouldn't be doing that ourselves and discouraging others anyway.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An example would be how the control bar used to be before using the state classes. By default it had 'display:none' defined in the CSS, and then show() was used to add display:block. That's the piece that wouldn't work anymore with this change. There's no internal examples of that anymore, and any external skins couldn't rely on that anymore since we're not calling show() anymore on anything, so I don't think we'll break people, but we might want to glance through the plugins and see if there's any use cases like this, where something's hidden by default.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. If it looks like we'd break other folks in plugin-land, maybe we just plan for this in for version 5 to avoid making a backwards-incompatible change?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we can do that. But I don't really don't expect to find issues in the plugins. I doubt many or any are extending Component and using the hide/show methods.

@heff
Copy link
Member

heff commented Nov 26, 2014

I'm surprised how few places we use show()/hide() internally now that we've moved a lot of things to use CSS states. Really just the tracks (being overhauled) and the menu buttons (which hide themselves if empty).

The main place this comes into play is with the player API itself. player.show(); player.hide(). I can't say how extensively these are used, but they're documented so we should assume they are. We should consider cases where vjs-hidden won't be as strong as display="none".

Any thoughts on the discussion in #1445 in relation to this? re: hiding with visibility instead of display. It doesn't have to be solved with this PR but just interested to know.

@albell
Copy link
Contributor

albell commented Dec 15, 2014

+1 on all of this. Love to see in 5.0. (But I don't much like unhide() as a name/concept.)

@mmcc mmcc closed this in a67201f Dec 22, 2014
heff pushed a commit to heff/video.js that referenced this pull request Jan 22, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants