Versions switcher

Author: slowcheetah

web/scripts/build.mjs

@@ -70,6 +70,28 @@ async function buildMenuForVersion(version) {
   }
 }
 
+async function buildVersionsMenuList(versions, currentVersion) {
+  let versionsMenuHtml = '';
+
+  versionsMenuHtml += '<div class="dropdown-block">';
+  for (const v of versions) {
+    if (v === currentVersion) {
+      versionsMenuHtml += `<a href="/${v}/docs/" class="active">${v}</a>`;
+    } else {
+      versionsMenuHtml += `<a href="/${v}/docs/">${v}</a>`;
+    }
+  }
+  versionsMenuHtml += '</div>';
+
+  return versionsMenuHtml;
+}
+
+async function buildVersionMenu(versions, currentVersion) {
+  const innerMenu = await buildVersionsMenuList(versions, currentVersion);
+
+  return `<div class="dropdown versions-menu"><a href="#" class="current">${currentVersion}</a>${innerMenu}</div>`;
+}
+
 async function build() {
   const template = await fs.readFile(templatePath, 'utf-8');
   let docsMenu = '';
@@ -100,7 +122,6 @@ async function build() {
 
   const mdFiles = await getAllMdFiles(docsDir);
   const base = branch ? `/branches/${branch}/` : '/';
-  let prevVersion = null;
   // const base = '/core-js-v4/web/dist/';
   const versions = [];
   for (const mdPath of mdFiles) {
@@ -111,20 +132,25 @@ async function build() {
       versions.push(defaultBranch);
     }
   }
+  const uniqueVersions = [...new Set(versions)];
 
+  let prevVersion = null;
+  let version = '';
+  let versionsMenu = '';
   for (const i in mdFiles) {
     const mdPath = mdFiles[i];
     const mdContent = await fs.readFile(mdPath, 'utf-8');
     const content = mdContent.toString();
     const isDocs = mdPath.indexOf('/docs') !== -1;
-    let version = '';
     let mobileDocsMenu = '';
-    if (isDocs) {
+
+    if (version !== versions[i]) {
       prevVersion = version;
       version = versions[i];
-      if (prevVersion !== version) {
-        docsMenu = await buildMenuForVersion(version);
-      }
+      docsMenu = await buildMenuForVersion(version);
+      versionsMenu = await buildVersionMenu(uniqueVersions, version);
+    }
+    if (isDocs) {
       mobileDocsMenu = docsMenu;
     }
     htmlFileName = mdPath.replace(docsDir, '').replace(/\.md$/i, '.html');
@@ -134,6 +160,8 @@ async function build() {
     let resultHtml = template.replace('{content}', `${htmlContent}`);
     resultHtml = resultHtml.replace('{docs-menu}', `${mobileDocsMenu}`);
     resultHtml = resultHtml.replace('{base}', `${base}`);
+    resultHtml = resultHtml.replace('{versions-menu}', `${versionsMenu}`);
+    resultHtml = resultHtml.replaceAll('{current-version}', version);
 
     if (branch) {
       resultHtml = resultHtml.replaceAll('{default-version}', '.');

web/src/index.html

@@ -20,6 +20,9 @@
                     <div class="mobile-docs-menu">{docs-menu}</div>
                 </div>
                 <div class="menu-item"><a href="./sandbox.html">Sandbox</a></div>
+                <div class="menu-item">
+                    {versions-menu}
+                </div>
                 <div class="socials">
                     <div class="menu-item">
                         <a href="https://github.com/zloirock/core-js/">

web/src/js/main.js

@@ -14,7 +14,9 @@ document.addEventListener('DOMContentLoaded', function(_event) {
   const menuSwitcher = document.getElementById('menu-switcher');
   const menuBackdrop = document.querySelectorAll(".menu .backdrop")[0];
   const menu = document.getElementsByClassName('menu')[0];
-  const collapsibleTrigger = document.querySelectorAll(".collapsible > a")
+  const collapsibleTrigger = document.querySelectorAll(".collapsible > a");
+  const dropdownTriggers = document.querySelectorAll(".dropdown > a");
+  const currentVersion = document.querySelector('.versions-menu a.current');
 
   function toggleMenu() {
     if (menu.classList.contains('active')) {
@@ -38,7 +40,18 @@ document.addEventListener('DOMContentLoaded', function(_event) {
       e.preventDefault();
       this.parentElement.classList.toggle('active');
     });
+  });
+
+  dropdownTriggers.forEach(el => {
+    el.addEventListener('click', function(e) {
+      e.preventDefault();
+      this.parentElement.classList.toggle('active');
+    })
   })
 
+  currentVersion.addEventListener('click', function(e) {
+    e.preventDefault();
+  });
+
   hljs.highlightAll();
 });

web/src/scss/parts/header.scss

@@ -189,5 +189,49 @@ nav {
                 padding-left: 1rem;
             }
         }
+
+        .dropdown {
+            position: relative;
+
+            & > a::after {
+                content: '';
+                display: inline-block;
+                width: 0;
+                height: 0;
+                margin: 2px 0 0 5px;
+                vertical-align: middle;
+                border: 5px solid transparent;
+                border-top: 5px solid $link-color;
+            }
+
+            .dropdown-block {
+                display: none;
+
+                a {
+                    display: block;
+                }
+            }
+            &.active {
+                .dropdown-block {
+                    display: block;
+                    position: absolute;
+                    left: 0;
+                    border: 1px solid $border-color-light;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    background-color: $background-color;
+
+                    @include media("min", "lg") {
+                        right: 0;
+                        left: auto;
+                    }
+
+                    a.active {
+                        color: $link-color-hover;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
     }
 }