doc: moved version links into a dropdown

Fixes: nodejs#10726
chris--young · Jul 23, 2017 · cb4622f · cb4622f
1 parent 4d7fd63
commit cb4622f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 33 deletions.
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -81,28 +81,61 @@ em code {
 
 #gtoc {
   font-size: .8em;
+  margin-bottom: 1em;
 }
 
-#alt-docs {
-  color: #666;
-  font-size: .75em;
+#gtoc ul {
+  list-style: none;
+  margin-left: 0;
 }
 
-#alt-docs a {
-  color: #666;
+#gtoc li {
+  display: inline;
 }
 
-#alt-docs a:hover {
-  background: none;
-  text-decoration: underline;
+li.version-picker {
+  position: relative;
 }
 
-#alt-docs a:active, #alt-docs a:link {
-  background: none;
+li.version-picker:hover > ol {
+  display: block;
+}
+
+li.version-picker a span {
+  font-size: .7em;
+}
+
+ol.version-picker {
+  background: #fff;
+  border: 1px #43853d solid;
+  border-radius: 2px;
+  display: none;
+  list-style: none;
+  position: absolute;
+  right: -2px;
+  width: 101%;
+}
+
+#gtoc ol.version-picker li {
+  display: block;
+}
+
+ol.version-picker li a {
+  border-radius: 0;
+  display: block;
+  margin: 0;
+  padding: .1em;
+  padding-left: 1em;
+}
+
+ol.version-picker li:first-child a {
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 
-#alt-docs b {
-  margin-left: .5em;
+ol.version-picker li:last-child a {
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 
 .line {

diff --git a/doc/template.html b/doc/template.html
@@ -23,14 +23,23 @@
       <header>
         <h1>Node.js __VERSION__ Documentation</h1>
         <div id="gtoc">
-          <p>
-            <a href="index.html" name="toc">Index</a> |
-            <a href="all.html">View on single page</a> |
-            <a href="__FILENAME__.json">View as JSON</a>
-          </p>
+          <ul>
+            <li>
+              <a href="index.html" name="toc">Index</a> |
+            </li>
+            <li>
+              <a href="all.html">View on single page</a> |
+            </li>
+            <li>
+              <a href="__FILENAME__.json">View as JSON</a> |
+            </li>
+            <li class="version-picker">
+              <a href="#">View another version <span>&#x25bc</span></a>
+              __ALTDOCS__
+            </li>
+          </ul>
         </div>
         <hr>
-        <div id="alt-docs">__ALTDOCS__</div>
       </header>
 
       <div id="toc">

diff --git a/tools/doc/html.js b/tools/doc/html.js
@@ -54,14 +54,15 @@ const gtocPath = path.resolve(path.join(
 var gtocLoading = null;
 var gtocData = null;
 var docCreated = null;
+var nodeVersion = null;
 
 /**
  * opts: input, filename, template, nodeVersion.
  */
 function toHTML(opts, cb) {
   const template = opts.template;
-  const nodeVersion = opts.nodeVersion || process.version;
 
+  nodeVersion = opts.nodeVersion || process.version;
   docCreated = opts.input.match(DOC_CREATED_REG_EXP);
 
   if (gtocData) {
@@ -203,29 +204,38 @@ function altDocs(filename) {
   }
 
   function lte(v) {
-    if (docCreated[1] > v[0])
+    if (docCreated[1] > v.num[0])
       return false;
-    if (docCreated[1] < v[0])
+    if (docCreated[1] < v.num[0])
       return true;
-    return docCreated[2] <= v.substr(2, 2);
+    return docCreated[2] <= v.num.substr(2, 2);
   }
 
+  const versions = [
+    { num: '8.x' },
+    { num: '7.x' },
+    { num: '6.x', lts: true },
+    { num: '5.x' },
+    { num: '4.x', lts: true },
+    { num: '0.12.x' },
+    { num: '0.10.x' },
+  ];
+
   const host = 'https://nodejs.org';
-  const href = (v) => `${host}/docs/latest-v${v}/api/${filename}.html`;
-  const a = (v) => `<a href="${href(v)}">v${v}</a>`;
-  const as = (vs) => vs.filter(lte).map(a).join(' / ');
+  const href = (v) => `${host}/docs/latest-v${v.num}/api/${filename}.html`;
 
-  html += 'View another version of this page <b>Latest:</b> ' + a('8.x');
+  function li(v, i) {
+    let html = `<li><a href="${href(v)}">${v.num}`;
 
-  const lts = as(['6.x', '4.x']);
-  if (lts.length)
-    html += ' <b>LTS:</b> ' + lts;
+    if (v.lts)
+      html += ' <b>LTS</b>';
+
+    return html + '</a></li>';
+  }
 
-  const unsupported = as(['7.x', '5.x', '0.12.x', '0.10.x']);
-  if (unsupported.length)
-    html += ' <b>Unsupported:</b> ' + unsupported;
+  const lis = (vs) => vs.filter(lte).map(li).join('\n');
 
-  return html;
+  return `<ol class="version-picker">${lis(versions)}</ol>`;
 }
 
 // handle general body-text replacements