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

Add per-slide body classes from data attribute #32

Merged
merged 4 commits into from
May 12, 2014
Merged

Add per-slide body classes from data attribute #32

merged 4 commits into from
May 12, 2014

Conversation

commadelimited
Copy link
Contributor

My team has been using Big for our sprint demo slidedeck for a few months now. We added a simple option to add custom body classes on a per slide basis.

Committing this back to make sure we don't lose this option when we upgrade.

@tmcw
Copy link
Owner

tmcw commented May 9, 2014

Hm, interesting. I can see the use case but am not sure that this is the right way to do it: could we instead assign a slide-1 (to slide-n) classname to the body for each slide, and then body.slide-1 div.slide1 { /* */ } would trigger custom styles?

@commadelimited
Copy link
Contributor Author

@TMWC I've done that approach before, but what ends up happening is you end up with a slew of classes that have no inherent meaning. slide-1 doesn't tell me that it relates to my CouchDB title slide.

Some of my personal use cases:

<div data-bodyclass="section">What's CouchDB?</div>
<div data-bodyclass="twitter">@commadelimited</div>
etc.

@commadelimited
Copy link
Contributor Author

I'm also using Big for a few presentations for a conference I'm speaking at next week. It's prime for that because of the auto-sizing.

@commadelimited
Copy link
Contributor Author

Related to your comment, it also makes it more difficult to rearrange slides during presentation buildout. Given that you developed this I'm sure you've spoken quite a lot. I do too and I'm rearranging slides up to the last minute before presentations.

document.body.className = e.dataset['bodyclass'];
} else {
document.body.className = '';
}
Copy link
Owner

Choose a reason for hiding this comment

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

This could possibly be golfed down a bit?

document.body.className = e.dataset.bodyclass || '';

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I actually had it smaller. Then I lost my nerve and backed it out. Wanted to make it easier for ppl reading source. But your option would be more ideal.

@@ -4,6 +4,8 @@ window.onload = function() {
function go(n) {
cur = n;
var i = 1e3, e = s[n], t;
// if the div has a bodyclass data attribute, add it to the body
document.body.className = e.dataset['bodyclass'] || '';
Copy link
Owner

Choose a reason for hiding this comment

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

Is there any reason not to say e.dataset.bodyclass here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't believe so. Let me test. Nope. Looks good.

@tmcw
Copy link
Owner

tmcw commented May 12, 2014

👍 looks good, merging!

tmcw added a commit that referenced this pull request May 12, 2014
Add per-slide body classes from data attribute
@tmcw tmcw merged commit 4b6b985 into tmcw:gh-pages May 12, 2014
@commadelimited
Copy link
Contributor Author

Nice! Thanks for working with me on this. Appreciate your time, and love the lib. It's my go-to one now.

tmcw added a commit to tmcw/biggie that referenced this pull request May 14, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants