Implement dropdown in tabsets

[rich-iannone]

This allows for a dropdown menu to take the place of a standard tabset. It is used by adding the .tabset-dropdown class to a header (# Heading {.tabset .tabset-dropdown}).

This fixes #1116 and incorporates the code provided by @stefanfritsch into default.html. This implementation, however, doesn't require an HTML include. An example .Rmd is provided here:

---
title: "tabset dropdown"
output:
  html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

# R Markdown {.tabset .tabset-dropdown}

## Tab A

This is an R Markdown document. 

## Tab B

When you click the **Knit** button a document will be generated.

## Tab C

Here is a summary table.

```{r cars}
summary(cars)
```

## Tab D

Here is a plot:

```{r pressure, echo=FALSE}
plot(pressure)
```

# Here is another section {.tabset}

## Tab A

This is content in a standard tabset.

## Tab B

This is more content in a standard tabset.

[yihui]

I feel our default HTML template is already bloated enough, so I'd like this feature to be enabled conditionally. You may consider turning the new CSS/JS code into an HTML dependency, and add the dependency dynamically if the class .tabset-dropdown is found in the HTML code (the search for the class does not have to be rigorous).

You may see how icon dependencies are added conditionally and dynamically for example:

rmarkdown/R/html_document.R

Lines 367 to 370 in e9db868

	# navbar icon dependencies
	iconDeps <- navbar_icon_dependencies(navbar)
	if (length(iconDeps) > 0)
	knitr::knit_meta_add(list(iconDeps))

[yihui]

And we should add @stefanfritsch as a contributor (ctb) in DESCRIPTION if the code was borrowed from #1116. Ideally, we need him to sign the contributor agreement since the code is not trivial, otherwise we'd better implement this independently by ourselves.

[stefanfritsch]

I'd be happy to sign the contributor agreement

[jjallaire]

@yihui I agree that the default html template is bloated, but this doesn't add a huge amount of new content (maybe 1KB?) so I don't think it warrants the effort to make it conditional (font awesome was much more heavyweight). i.e. Users who care about payload size won't be convinced they should use the format b/c documents are 1KB leaner.

[yihui]

@jjallaire I'm suggesting a separate dependency because 1) this PR adds 60 lines of code to our HTML default template that currently has 500 lines of code (i.e. increasing the number of lines by 10% for a corner feature); 2) I really hope we could factor out some of the CSS/JS code into separate HTML dependencies, too, and this could be a start. My point of view was completely from the package maintenance side (managing 10 orthogonal modules, each of 50 lines, is easier than managing a 500-line library in my eyes).

That said, I'm not totally against adding this directly and unconditionally to the template. We could factor out CSS/JS in the future when we have a chance (we probably never will, given that this is not really a critical issue).

[yihui]

@stefanfritsch Thanks! You can find the agreement at https://github.com/rstudio/rmarkdown/blob/master/CONTRIBUTING.md

[jjallaire]

@yihui I agree that this could be a good start, but I also think that the "real" solution might be as you said to refactor everything to make it more lean by default. I'd be in favor of creating an issue for this and then pursuing it soon rather than externalizing just this code ad-hoc.

[yihui]

Sounds good. Let's merge this PR when we get the signed agreement from @stefanfritsch.

[yihui]

@rich-iannone Could you replace tabs with two spaces, and consistently indent with two spaces? We also need a NEWS item. Thanks!

[jjallaire]

Agreement received from @stefanfritsch

[rich-iannone]

I can definitely reformat the CSS so that it fits in with the rest. One question: should I deactivate the RStudio setting Insert spaces for tab to get true space characters?

[yihui]

No. You should leave it checked. But this setting is only effective when you type and hit the Tab key in the editor. It does not automatically convert tabs to spaces when you copy and paste.

[rich-iannone]

Okay, turns out I have spaces but RStudio, when moving over the spaces with arrow keys, gives the impression of tabs. Will make the changes now.

[yihui]

I wouldn't notice it, either, had I not looked at the diff page here on Github (tabs look wider than four spaces). In RStudio, a tab does look like four spaces visually (two double spaces).

[rich-iannone]

@yihui could you have a quick look at the new NEWS item and see that it fits stylistically?

[yihui]

Looks good. I tested it and noticed a vertical scrollbar:

I wonder if that is expected. I hope to get rid of it if it is not too difficult.

[rich-iannone]

Let me try to get rid of that scrollbar.

[rich-iannone]

I think the hidden state for overflow-y in the tabset dropdown might be adequate here. At least in my browser tests it appeared fine.

[yihui]

Yes, it is easy to suppress a scrollbar, but I hope we can figure out the root reason why the scrollbar is there in the first place. If you just forcibly hide it, you may end up (partially) hiding content, too. I wish overflow-y: hidden could be the last resort.

[rich-iannone]

I agree. Let me do some further research/experimentation on this.

[yihui]

This article might be helpful: https://css-tricks.com/findingfixing-unintended-body-overflow/ I have used its JS code before to fix a horizontal scrollbar, and I'm not sure if the same thing can be done for vertical overflow.

[rich-iannone]

Thanks! This helps.

[yihui]

Using inline-table does make the scrollbar disappear, although I don't fully understand why (this is beyond my expertise now). There will be a minor issue only in Firefox, though:

Note that the bottom border of the tab title is missing. I'm fine with this. It is quite trivial compared to the scrollbar issue.

[rich-iannone]

I've tried to address the Firefox issue but it's not as simple as removing the white background (that element also inherits another #fff background). It appears that the background in Firefox is drawn one pixel lower.

Given we could accept this, should I this merge now?

[yihui]

Let's ship it and ignore the Firefox issue.

[jcheng5]

This (295-299) can be improved using jQuery event delegation, it's a good habit to get into:

https://learn.jquery.com/events/event-delegation/

What I'm suggesting is $(document).on("click", ".tabset-dropdown > .nav-tabs > li", ...)