Add possibility to have multiple themes

matthiaskrgr · Jan 21, 2018 · 003b2bc · 003b2bc
1 parent 3001ab1
commit 003b2bc
Show file tree

Hide file tree

Showing 6 changed files with 537 additions and 8 deletions.
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
@@ -47,8 +47,8 @@ r##"<!DOCTYPE html>
     <title>{title}</title>
 
     <link rel="stylesheet" type="text/css" href="{root_path}normalize.css">
-    <link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css">
-    <link rel="stylesheet" type="text/css" href="{root_path}main.css">
+    <link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css" id="mainThemeStyle">
+    <link rel="stylesheet" type="text/css" href="{root_path}main.css" id="themeStyle">
     {css_extension}
 
     {favicon}
@@ -70,6 +70,10 @@ r##"<!DOCTYPE html>
         {sidebar}
     </nav>
 
+    <div id="theme-picker">&#x1f58c;
+        <div id="theme-choices"></div>
+    </div>
+    <script src="{root_path}theme.js"></script>
     <nav class="sub">
         <form class="search-form js-only">
             <div class="search-container">

diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
@@ -219,6 +219,17 @@ impl Error {
     }
 }
 
+macro_rules! try_none {
+    ($e:expr, $file:expr) => ({
+        use std::io;
+        match $e {
+            Some(e) => e,
+            None => return Err(Error::new(io::Error::new(io::ErrorKind::Other, "not found"),
+                                          $file))
+        }
+    })
+}
+
 macro_rules! try_err {
     ($e:expr, $file:expr) => ({
         match $e {
@@ -859,12 +870,75 @@ fn write_shared(cx: &Context,
     // Add all the static files. These may already exist, but we just
     // overwrite them anyway to make sure that they're fresh and up-to-date.
 
-    write(cx.dst.join("main.js"),
-          include_bytes!("static/main.js"))?;
     write(cx.dst.join("rustdoc.css"),
           include_bytes!("static/rustdoc.css"))?;
-    write(cx.dst.join("main.css"),
-          include_bytes!("static/styles/main.css"))?;
+    let path = cx.shared.src_root.join("../librustdoc/html/static/themes");
+    let mut themes: Vec<String> = Vec::new();
+    for entry in try_err!(fs::read_dir(path.clone()), &path) {
+        let entry = try_err!(entry, &path);
+        let mut content = Vec::with_capacity(100000);
+
+        let mut f = try_err!(File::open(entry.path()), &entry.path());
+        try_err!(f.read_to_end(&mut content), &entry.path());
+        write(cx.dst.join(entry.file_name()), content.as_slice())?;
+        themes.push(try_none!(
+                        try_none!(entry.path().file_stem(), &entry.path()).to_str(),
+                        &entry.path()).to_owned());
+    }
+    themes.sort();
+    // To avoid theme switch latencies as much as possible, we put everything theme related
+    // at the beginning of the html files into another js file.
+    write(cx.dst.join("theme.js"), format!(
+r#"var themes = document.getElementById("theme-choices");
+var themePicker = document.getElementById("theme-picker");
+themePicker.onclick = function() {{
+    if (themes.style.display === "block") {{
+        themes.style.display = "none";
+        themePicker.style.borderBottomRightRadius = "3px";
+        themePicker.style.borderBottomLeftRadius = "3px";
+    }} else {{
+        themes.style.display = "block";
+        themePicker.style.borderBottomRightRadius = "0";
+        themePicker.style.borderBottomLeftRadius = "0";
+    }}
+}};
+var currentTheme = document.getElementById("themeStyle");
+var mainTheme = document.getElementById("mainThemeStyle");
+[{}].forEach(function(item) {{
+    var div = document.createElement('div');
+    div.innerHTML = item;
+    div.onclick = function(el) {{
+        switchTheme(currentTheme, mainTheme, item);
+    }};
+    themes.appendChild(div);
+}});
+
+function updateLocalStorage(theme) {{
+    if (typeof(Storage) !== "undefined") {{
+        localStorage.theme = theme;
+    }} else {{
+        // No Web Storage support so we do nothing
+    }}
+}}
+function switchTheme(styleElem, mainStyleElem, newTheme) {{
+    styleElem.href = mainStyleElem.href.replace("rustdoc.css", newTheme + ".css");
+    updateLocalStorage(newTheme);
+}}
+function getCurrentTheme() {{
+    if (typeof(Storage) !== "undefined" && localStorage.theme !== undefined) {{
+        return localStorage.theme;
+    }}
+    return "main";
+}}
+
+switchTheme(currentTheme, mainTheme, getCurrentTheme());
+"#, themes.iter()
+          .map(|s| format!("\"{}\"", s))
+          .collect::<Vec<String>>()
+          .join(",")).as_bytes())?;
+
+    write(cx.dst.join("main.js"), include_bytes!("static/main.js"))?;
+
     if let Some(ref css) = cx.shared.css_file_extension {
         let out = cx.dst.join("theme.css");
         try_err!(fs::copy(css, out), css);

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
@@ -122,6 +122,10 @@
             }
         }
         document.getElementsByTagName("body")[0].style.marginTop = '45px';
+        var themePicker = document.getElementById("theme-picker");
+        if (themePicker) {
+            themePicker.style.position = "fixed";
+        }
     }
 
     function hideSidebar() {
@@ -136,6 +140,10 @@
             filler.remove();
         }
         document.getElementsByTagName("body")[0].style.marginTop = '';
+        var themePicker = document.getElementById("theme-picker");
+        if (themePicker) {
+            themePicker.style.position = "absolute";
+        }
     }
 
     // used for special search precedence
@@ -1532,7 +1540,9 @@
                 ul.appendChild(li);
             }
             div.appendChild(ul);
-            sidebar.appendChild(div);
+            if (sidebar) {
+                sidebar.appendChild(div);
+            }
         }
 
         block("primitive", "Primitive Types");

diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
@@ -360,7 +360,8 @@ ul.item-list > li > .out-of-band {
 }
 
 h4 > code, h3 > code, .invisible > code {
-	position: inherit;
+	max-width: calc(100% - 41px);
+	display: block;
 }
 
 .in-band, code {
@@ -376,6 +377,7 @@ h4 > code, h3 > code, .invisible > code {
 	margin: 0px;
 	padding: 0px;
 	display: inline-block;
+	max-width: calc(100% - 43px);
 }
 
 .in-band > code {
@@ -1140,3 +1142,37 @@ kbd {
 	border-radius: 3px;
 	box-shadow: inset 0 -1px 0;
 }
+
+#theme-picker {
+	position: absolute;
+	left: 211px;
+	top: 17px;
+	padding: 4px;
+	border: 1px solid;
+	border-radius: 3px;
+	cursor: pointer;
+}
+
+#theme-choices {
+	display: none;
+	position: absolute;
+	left: -1px;
+	top: 30px;
+	border: 1px solid;
+	border-radius: 3px;
+	z-index: 1;
+}
+
+#theme-choices > div {
+	border-top: 1px solid;
+	padding: 4px;
+	text-align: center;
+}
+
+@media (max-width: 700px) {
+	#theme-picker {
+		left: 109px;
+		top: 7px;
+		z-index: 1;
+	}
+}