Added tabset support (#219)

* use rmarkdown::html_document and copy in tabset template code from rmarkdown * added tabset support * add comments about original tabset location
rstudio · Apr 10, 2019 · 7508f41 · 7508f41
1 parent 314c031
commit 7508f41
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/NEWS.md b/NEWS.md
@@ -1,6 +1,8 @@
 learnr 0.9.2.9000 (unreleased)
 ===========
 
+* Added tabset support. ([#219](https://github.com/rstudio/learnr/pull/219) [#213](https://github.com/rstudio/learnr/issues/213))
+
 * Fixed a spurious console warning when running exercises using Pandoc 2.0. ([#154](https://github.com/rstudio/learnr/issues/154))
 
 * Aggressively rerender prerendered tutorials in favor of a cohesive exercise environment ([#169](https://github.com/rstudio/learnr/issues/169), [#179](https://github.com/rstudio/learnr/pull/179), and [rstudio/rmarkdown#1420](https://github.com/rstudio/rmarkdown/pull/1420))

diff --git a/R/tutorial-format.R b/R/tutorial-format.R
@@ -126,7 +126,7 @@ tutorial <- function(fig_width = 6.5,
   knitr_options$opts_chunk$max.print <- 1000
 
   # create base document format using standard html_document
-  base_format <- rmarkdown::html_document_base(
+  base_format <- rmarkdown::html_document(
     smart = smart,
     theme = theme,
     lib_dir = NULL,

diff --git a/inst/rmarkdown/templates/tutorial/resources/tutorial-format.htm b/inst/rmarkdown/templates/tutorial/resources/tutorial-format.htm
@@ -46,6 +46,76 @@
 </script>
 $endif$
 
+<!-- taken from https://github.com/rstudio/rmarkdown/blob/67b7f5fc779e4cfdfd0f021d3d7745b6b6e17149/inst/rmd/h/default.html#L296-L362 -->
+<!-- tabsets -->
+
+<style type="text/css">
+.tabset-dropdown > .nav-tabs {
+  display: inline-table;
+  max-height: 500px;
+  min-height: 44px;
+  overflow-y: auto;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.tabset-dropdown > .nav-tabs > li.active:before {
+  content: "";
+  font-family: 'Glyphicons Halflings';
+  display: inline-block;
+  padding: 10px;
+  border-right: 1px solid #ddd;
+}
+
+.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
+  content: "&#xe258;";
+  border: none;
+}
+
+.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
+  content: "";
+  font-family: 'Glyphicons Halflings';
+  display: inline-block;
+  padding: 10px;
+  border-right: 1px solid #ddd;
+}
+
+.tabset-dropdown > .nav-tabs > li.active {
+  display: block;
+}
+
+.tabset-dropdown > .nav-tabs > li > a,
+.tabset-dropdown > .nav-tabs > li > a:focus,
+.tabset-dropdown > .nav-tabs > li > a:hover {
+  border: none;
+  display: inline-block;
+  border-radius: 4px;
+}
+
+.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
+  display: block;
+  float: none;
+}
+
+.tabset-dropdown > .nav-tabs > li {
+  display: none;
+}
+</style>
+
+<script>
+$$(document).ready(function () {
+  window.buildTabsets("$idprefix$TOC");
+});
+
+$$(document).ready(function () {
+  $$('.tabset-dropdown > .nav-tabs > li').click(function () {
+    $$(this).parent().toggleClass('nav-tabs-open')
+  });
+});
+</script>
+<!-- end tabsets -->
+
 $if(highlighting-css)$
 <style type="text/css">code{white-space: pre;}</style>
 <style type="text/css">