Add toggle mechanism for docs.rs source sidebar

Author: GuillaumeGomez

src/web/metrics.rs

@@ -121,6 +121,7 @@ mod tests {
             ("/-/static/index.js", "static resource"),
             ("/-/static/menu.js", "static resource"),
             ("/-/static/keyboard.js", "static resource"),
+            ("/-/static/source.js", "static resource"),
             ("/-/static/opensearch.xml", "static resource"),
             ("/releases", "/releases"),
             ("/releases/feed", "static resource"),

src/web/statics.rs

@@ -228,6 +228,24 @@ mod tests {
         });
     }
 
+    #[test]
+    fn source_js() {
+        wrapper(|env| {
+            let web = env.frontend();
+
+            let resp = web.get("/-/static/source.js").send()?;
+            assert!(resp.status().is_success());
+            assert_eq!(
+                resp.headers().get("Content-Type"),
+                Some(&"application/javascript".parse().unwrap()),
+            );
+            assert!(resp.content_length().unwrap() > 10);
+            assert!(resp.text()?.contains("toggleSource"));
+
+            Ok(())
+        });
+    }
+
     #[test]
     fn static_files() {
         wrapper(|env| {

static/source.js

@@ -0,0 +1,41 @@
+(function() {
+    var oldLabel;
+
+    function showSourceFiles(button, sideMenu, sourceCode) {
+        button.title = oldLabel;
+        button.setAttribute("aria-label", button.title);
+        button.setAttribute("aria-expanded", "true");
+
+        sideMenu.classList.remove("collapsed");
+        sourceCode.classList.remove("expanded");
+    }
+
+    function hideSourceFiles(button, sideMenu, sourceCode) {
+        button.title = "Show source sidebar";
+        button.setAttribute("aria-label", button.title);
+        button.setAttribute("aria-expanded", "false");
+
+        sideMenu.classList.add("collapsed");
+        sourceCode.classList.add("expanded");
+    }
+
+    function toggleSource(button) {
+        var sideMenu = document.getElementById("side-menu");
+        var sourceCode = document.getElementById("source-code");
+
+        if (sideMenu.classList.contains("collapsed")) {
+            showSourceFiles(button, sideMenu, sourceCode);
+        } else {
+            hideSourceFiles(button, sideMenu, sourceCode);
+        }
+    }
+
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        var toggleSourceButton = document.querySelector("li.toggle-source button");
+        oldLabel = toggleSourceButton.getAttribute("aria-label");
+
+        toggleSourceButton.addEventListener("click", function() {
+            toggleSource(toggleSourceButton);
+        });
+    });
+})();

templates/crate/source.html

@@ -24,13 +24,19 @@
 {%- block body -%}
     <div class="container package-page-container">
         <div class="pure-g">
-            <div class="pure-u-1 {% if file_content %}pure-u-sm-7-24 pure-u-md-5-24{% endif %}">
+            <div id="side-menu" class="pure-u-1 {% if file_content %}pure-u-sm-7-24 pure-u-md-5-24{% endif %}">
                 <div class="pure-menu package-menu">
                     <ul class="pure-menu-list">
+                        {# If we are displaying a file, we also add a button to hide the file sidebar #}
+                        {% if file_content %}
+                            <li class="pure-menu-item toggle-source">
+                                <button aria-label="Hide source sidebar" title="Hide source sidebar" aria-expanded="true"><span class="left">{{ "chevron-left" | fas(fw=true) }}</span><span class="right">{{ "chevron-right" | fas(fw=true) }}</span> <span class="text">Hide files</span></button>
+                            </li>
+                        {% endif %}
                         {# If this isn't the root folder, show a 'back' button #}
                         {%- if show_parent_link -%}
                             <li class="pure-menu-item">
-                                <a href="../" class="pure-menu-link">{{ "folder-open" | far(fw=true) }} ..</a>
+                                <a href="../" class="pure-menu-link">{{ "folder-open" | far(fw=true) }} <span class="text">..</span></a>
                             </li>
                         {%- endif -%}
 
@@ -88,7 +94,7 @@
                                         {{ "file-archive" | far(fw=true) }}
                                     {%- endif -%}
 
-                                    {{ file.name }}
+                                    <span class="text">{{ file.name }}</span>
                                 </a>
                             </li>
                         {%- endfor -%}
@@ -98,7 +104,7 @@
 
             {# If the file has content, then display it in a codeblock #}
             {%- if file_content -%}
-                <div class="pure-u-1 pure-u-sm-17-24 pure-u-md-19-24">
+                <div id="source-code" class="pure-u-1 pure-u-sm-17-24 pure-u-md-19-24">
                     <pre><code>{{ file_content }}</code></pre>
                 </div>
             {%- endif -%}
@@ -114,4 +120,7 @@
 {%- block javascript -%}
     {# Highlight.js JavaScript #}
     {{ macros::highlight_js(languages=["rust", "ini", "markdown"]) }}
+    {% if file_content %}
+        <script nonce="{{ csp_nonce }}" type="text/javascript" src="/-/static/source.js?{{ docsrs_version() | slugify }}"></script>
+    {% endif %}
 {%- endblock javascript -%}

templates/style/base.scss

@@ -459,7 +459,7 @@ div.package-page-container {
             margin-top: 0;
         }
 
-        a.pure-menu-link {
+        .pure-menu-link {
             font-size: 14px;
             color: var(--color-standard);
             white-space: nowrap;
@@ -468,7 +468,7 @@ div.package-page-container {
             padding: 7px 8px;
         }
 
-        a.pure-menu-link:hover {
+        .pure-menu-link:hover {
             background-color: var(--color-background-code);
         }
 
@@ -780,3 +780,64 @@ h3 > code,
 h4 > code {
     display: inline-block;
 }
+
+ul.pure-menu-list {
+    li.toggle-source {
+        cursor: pointer;
+        border: 1px solid var(--color-border);
+        display: none;
+    }
+}
+
+@media screen and (min-width: 35.5em) {
+    ul.pure-menu-list {
+        li.toggle-source {
+            display: list-item;
+
+            button {
+                font-size: 14px;
+                color: var(--color-standard);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding: 7px 8px;
+                background: transparent;
+                border: 0;
+                width: 100%;
+            }
+
+            .right {
+                display: none;
+            }
+        }
+    }
+
+    #side-menu.collapsed {
+        max-width: 46px;
+
+        ul {
+            li:not(.toggle-source), .text {
+                display: none;
+            }
+            li.toggle-source {
+                .left {
+                    display: none;
+                }
+                .right {
+                    display: inline-block;
+                    margin-left: -4px;
+                }
+            }
+        }
+    }
+
+    #source-code {
+        pre {
+            margin-top: 0;
+        }
+
+        &.expanded {
+            width: calc(100% - 46px);
+        }
+    }
+}