[Doc site]: Add tab switcher shortcode (#4861)

Ekwuno · lauragift21 · Cherry · web-flow · commit 686cf1c1e7b3 · 2022-07-27T16:49:53.000+01:00
* Create shortcode for code switcher with initial slides

* add tab switcher

* update code sample

* update components

* update components and fix scrolling issue

* update tabs component to remove SVG

* update tags

* Update static/style.css

Co-authored-by: Gift Egwuenu &lt;laurandidi21@gmail.com&gt;

* fix hover issue

* update

* format tabs component

* Fix responsiveness for tab labels

* fix  tab-label-wrapper hover effect

* Call tabs higher up

* Remove unnecessary overflow on code

* add on load

* update tab code

* rename tabs wrapper

* Fix extra padding under tabs-wrapper

* add active tab styling

* add active tab for dark mood

* update lightmood colour

* add upstream changes

* add upstream changes

* add svgs to tab labels

* fix svg width

* remove rounded corners code block

* remove padding bottom from codeblock

* fix hover color in light mood

* add defult block with no js

* switch default value to

* remove outline from tab-headers

* remove padding in media query

* add responsiveness for smaller screens.

* make svg clickable

* add titles to SVG

* remove shortcode from tutorial

* Apply suggestions from code review

Co-authored-by: James Ross &lt;james@jross.me&gt;

Co-authored-by: Gift Egwuenu &lt;laurandidi21@gmail.com&gt;
Co-authored-by: James Ross &lt;james@jross.me&gt;
diff --git a/assets/events.ts b/assets/events.ts
@@ -8,24 +8,26 @@ function $clickaway(ev: MouseEvent) {
 }
 
 export function $focus(elem: HTMLElement, bool: boolean) {
-  elem.toggleAttribute('is-focus-visible', bool);
+  elem.toggleAttribute("is-focus-visible", bool);
   if (bool) elem.focus();
 
   // if is topbar search input
   if (SEARCH_ID && SEARCH_ID.test(elem.id)) {
     SEARCH_INPUT = elem;
 
-    elem.parentElement.parentElement.toggleAttribute('is-focused', bool);
-    elem.setAttribute('aria-expanded', '' + bool);
+    elem.parentElement.parentElement.toggleAttribute("is-focused", bool);
+    elem.setAttribute("aria-expanded", "" + bool);
 
-    if (bool) addEventListener('click', $clickaway);
-    else removeEventListener('click', $clickaway);
+    if (bool) addEventListener("click", $clickaway);
+    else removeEventListener("click", $clickaway);
   }
 }
 
 export function $tabbable(links: NodeListOf<Element>, bool: boolean) {
   for (let i = 0; i < links.length; i++) {
-    bool ? links[i].removeAttribute('tabindex') : links[i].setAttribute('tabindex', '-1');
+    bool
+      ? links[i].removeAttribute("tabindex")
+      : links[i].setAttribute("tabindex", "-1");
   }
 }
 
@@ -34,38 +36,43 @@ export function $tabbable(links: NodeListOf<Element>, bool: boolean) {
 export function load() {
   let hash = location.hash.substring(1);
   let item = hash && document.getElementById(hash);
-  let timer = item && setInterval(() => {
-    if (document.readyState !== 'complete') return;
-    clearInterval(timer);
-    setTimeout(() => {
-      item.scrollIntoView({ behavior: 'smooth'});
-    }, 250);
-  }, 10);
+  let timer =
+    item &&
+    setInterval(() => {
+      if (document.readyState !== "complete") return;
+      clearInterval(timer);
+      setTimeout(() => {
+        item.scrollIntoView({ behavior: "smooth" });
+      }, 250);
+    }, 10);
 }
 
 // mobile sidebar toggle
 export function mobile() {
   let root = document.documentElement;
-  let btn = document.querySelector('.DocsMobileTitleHeader--sidebar-toggle-button');
+  let btn = document.querySelector(
+    ".DocsMobileTitleHeader--sidebar-toggle-button"
+  );
   if (btn)
-    btn.addEventListener('click', () => {
-      root.toggleAttribute('is-mobile-sidebar-open');
+    btn.addEventListener("click", () => {
+      root.toggleAttribute("is-mobile-sidebar-open");
     });
 
   // clicking on mobile search icon
   let input: HTMLInputElement =
-    document.querySelector('#DocsSearch--input') || document.querySelector('#SiteSearch--input');
+    document.querySelector("#DocsSearch--input") ||
+    document.querySelector("#SiteSearch--input");
 
   // register init handler
   if (input)
-    input.addEventListener('click', () => {
+    input.addEventListener("click", () => {
       $focus(input, true);
     });
 }
 
 function $copy(ev: MouseEvent) {
-  let btn = (ev.target as HTMLElement).closest('button');
-  let txt = btn.getAttribute('data-clipboard');
+  let btn = (ev.target as HTMLElement).closest("button");
+  let txt = btn.getAttribute("data-clipboard");
   if (txt) {
     try {
       navigator.clipboard.writeText(txt);
@@ -76,32 +83,79 @@ function $copy(ev: MouseEvent) {
 }
 
 export function copy() {
-  let btns = document.querySelectorAll('button[data-clipboard]');
-  for (let i = 0; i < btns.length; i++) btns[i].addEventListener('click', $copy);
+  let btns = document.querySelectorAll("button[data-clipboard]");
+  for (let i = 0; i < btns.length; i++)
+    btns[i].addEventListener("click", $copy);
 }
 
 // add focus attribute to activeElement if keyboard trigger
 export function focus() {
   let isTAB = false;
-  addEventListener('keydown', ev => {
+  addEventListener("keydown", (ev) => {
     isTAB = ev.which === 9;
   });
 
-  addEventListener('focusin', ev => {
+  addEventListener("focusin", (ev) => {
     if (isTAB) $focus(ev.target as HTMLElement, true);
   });
 
-  addEventListener('focusout', ev => {
+  addEventListener("focusout", (ev) => {
     $focus(ev.target as HTMLElement, false);
   });
 }
 
+function $tab(ev: MouseEvent) {
+  ev.preventDefault();
+
+  let tabs = document.querySelectorAll(".tab");
+
+  for (let i = 0; i < tabs.length; i++) {
+    (tabs[i] as HTMLElement).style.display = "none";
+  }
+
+  let target = ev.target;
+  let link = (target as HTMLElement).getAttribute("data-link");
+
+  document.getElementById(link).style.display = "block";
+}
+
+export function tabs() {
+  // Find all tab wrappers
+  let wrappers = document.querySelectorAll(".tabs-wrapper");
+
+  addEventListener("load", () => {
+    for (let i = 0; i < wrappers.length; i++) {
+      const labels = wrappers[i].querySelectorAll(".tab-label");
+      const tabs = wrappers[i].querySelectorAll(".tab");
+
+      if (tabs.length > 0) {
+        // Set the first tab in a group to display
+        (tabs[0] as HTMLElement).style.display = "block";
+        for (let i = 0; i < labels.length; i++)
+          labels[i].addEventListener("click", $tab);
+      }
+    }
+  });
+}
+
+export function activeTab() {
+  var header = document.getElementById("tab-active");
+  var tabs = header.getElementsByClassName("tab-label");
+  for (var i = 0; i < tabs.length; i++) {
+    (tabs[i] as HTMLElement).addEventListener("click", function name() {
+      let current = document.getElementsByClassName("active");
+      current[0].className = current[0].className.replace(" active", "");
+      this.className += " active";
+    });
+  }
+}
+
 export function dropdowns() {
-  let attr = 'data-expanded';
+  let attr = "data-expanded";
 
-  document.querySelectorAll('.Dropdown').forEach(div => {
-    let btn = div.querySelector('button');
-    let links = div.querySelectorAll<HTMLAnchorElement>('li>a');
+  document.querySelectorAll(".Dropdown").forEach((div) => {
+    let btn = div.querySelector("button");
+    let links = div.querySelectorAll<HTMLAnchorElement>("li>a");
     let focused = 0; // index
 
     if (btn && links.length > 0) {
@@ -125,37 +179,37 @@ export function dropdowns() {
         $focus(links[focused], true);
       };
 
-      let close: EventListener = ev => {
+      let close: EventListener = (ev) => {
         ev.stopPropagation();
-        removeEventListener('click', close);
+        removeEventListener("click", close);
 
         // tab-inactive sublinks
         $tabbable(links, false);
 
-        div.setAttribute(attr, 'false');
-        btn.setAttribute(attr, 'false');
+        div.setAttribute(attr, "false");
+        btn.setAttribute(attr, "false");
 
-        div.removeEventListener('keydown', arrows);
+        div.removeEventListener("keydown", arrows);
       };
 
-      let open: EventListener = ev => {
+      let open: EventListener = (ev) => {
         ev.stopPropagation();
-        addEventListener('click', close);
+        addEventListener("click", close);
 
         // tab-friendly sublinks
         $tabbable(links, true);
 
-        div.setAttribute(attr, 'true');
-        btn.setAttribute(attr, 'true');
+        div.setAttribute(attr, "true");
+        btn.setAttribute(attr, "true");
 
         // focus the first link
         $focus(links[(focused = 0)], true);
 
-        div.addEventListener('keydown', arrows);
+        div.addEventListener("keydown", arrows);
       };
 
-      btn.addEventListener('click', ev => {
-        if (div.getAttribute(attr) === 'true') {
+      btn.addEventListener("click", (ev) => {
+        if (div.getAttribute(attr) === "true") {
           close(ev);
         } else {
           open(ev);
diff --git a/assets/main.ts b/assets/main.ts
@@ -1,7 +1,7 @@
-import * as events from './events';
-import * as contents from './contents';
-import * as timeago from './timeago';
-import * as navs from './navlinks';
+import * as events from "./events";
+import * as contents from "./contents";
+import * as timeago from "./timeago";
+import * as navs from "./navlinks";
 
 declare global {
   interface Window {
@@ -14,12 +14,12 @@ declare global {
 (function () {
   navs.init();
   timeago.init();
-
   events.load();
   events.focus();
   events.mobile();
   events.dropdowns();
   events.copy();
-
+  events.activeTab();
   contents.toc();
+  events.tabs();
 })();
diff --git a/content/pages/tutorials/forms/index.md b/content/pages/tutorials/forms/index.md
@@ -195,7 +195,6 @@ Technically, only the `<form>` and its child elements are necessary. The `<head>
 The HTML page is also completely unstyled at this point, relying on the browsers' default UI and color palettes. Styling the page is entirely optional and not necessary for the form to function. If you would like to attach a CSS stylesheet, you may [add a `<link>` element](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started#adding_css_to_our_document). Refer to the finished tutorial's [source code](https://github.com/cloudflare/submit.pages.dev/blob/8c0594f48681935c268987f2f08bcf3726a74c57/public/index.html#L11) for an example or any inspiration – the only requirement is that your CSS stylesheet also resides within the `public` directory.
 
 {{</Aside>}}
-
 ### Worker
 
 The HTML form is complete and ready for deployment. When the user submits this form, all data will be sent in a `POST` request to the `/api/submit` URL. This is due to the form's `method` and `action` attributes. However, there is currently no request handler at the `/api/submit` address. You will now create it.
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
@@ -0,0 +1,9 @@
+{{- $label := replace (.Get "label") "/" "-"}} 
+{{- $default := .Get "default"
+-}}
+
+{{ if eq $default "true"}}
+<div class="tab tab-default" id="tab-js-sw">{{ $.Inner | markdownify }}</div>
+{{ else }}
+<div class="tab" id="tab-{{$label}}">{{ $.Inner | markdownify }}</div>
+{{ end }}
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
@@ -0,0 +1,61 @@
+ {{- $text := .Get "labels" -}} {{- $labels := split $text " | " -}}
+
+<div class="tabs-wrapper">
+  <nav role="navigation" class="tabs">
+    <ul id="tab-active">
+      {{ range $idx, $txt := $labels }} {{- $link := replace $txt "/" "-"}}
+      <li class="tab-label-wrapper " >
+        {{ if or (eq $link "js-sw") }}
+        <a class="tab-label active" href="#" data-link="tab-{{$link}}">
+          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"
+            xmlns="http://www.w3.org/2000/svg" data-link="tab-{{$link}}">
+            <title>JavaScript</title>
+            <path
+              d="M32 32v448h448V32zm240 348c0 43.61-25.76 64.87-63.05 64.87-33.68 0-53.23-17.44-63.15-38.49l34.28-20.75c6.61 11.73 11.63 21.65 26.06 21.65 12 0 21.86-5.41 21.86-26.46V240h44zm99.35 63.87c-39.09 0-64.35-17.64-76.68-42L329 382c9 14.74 20.75 24.56 41.5 24.56 17.44 0 27.57-7.72 27.57-19.75 0-14.43-10.43-19.54-29.68-28l-10.52-4.52c-30.38-12.92-50.52-29.16-50.52-63.45 0-31.57 24.05-54.63 61.64-54.63 26.77 0 46 8.32 59.85 32.68L396 290c-7.22-12.93-15-18-27.06-18-12.33 0-20.15 7.82-20.15 18 0 12.63 7.82 17.74 25.86 25.56l10.52 4.51c35.79 15.34 55.94 31 55.94 66.16.01 37.9-29.76 57.64-69.76 57.64z" data-link="tab-{{$link}}">
+            </path>
+          </svg> Service Workers</a
+        >
+
+        {{ else if (eq $link "ts-sw") }}
+        <a class="tab-label" href="#" data-link="tab-{{$link}}">
+          <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em"
+            xmlns="http://www.w3.org/2000/svg" data-link="tab-{{$link}}">
+            <title>TypeScript</title>
+            <path
+              d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" data-link="tab-{{$link}}">
+            </path>
+            
+          </svg>Service Workers</a
+        >
+
+        {{ end }} {{ if or (eq $link "js-esm") }}
+        <a class="tab-label " href="#" data-link="tab-{{$link}}">
+          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"
+            xmlns="http://www.w3.org/2000/svg" data-link="tab-{{$link}}">
+            <title>JavaScript</title>
+            <path
+              d="M32 32v448h448V32zm240 348c0 43.61-25.76 64.87-63.05 64.87-33.68 0-53.23-17.44-63.15-38.49l34.28-20.75c6.61 11.73 11.63 21.65 26.06 21.65 12 0 21.86-5.41 21.86-26.46V240h44zm99.35 63.87c-39.09 0-64.35-17.64-76.68-42L329 382c9 14.74 20.75 24.56 41.5 24.56 17.44 0 27.57-7.72 27.57-19.75 0-14.43-10.43-19.54-29.68-28l-10.52-4.52c-30.38-12.92-50.52-29.16-50.52-63.45 0-31.57 24.05-54.63 61.64-54.63 26.77 0 46 8.32 59.85 32.68L396 290c-7.22-12.93-15-18-27.06-18-12.33 0-20.15 7.82-20.15 18 0 12.63 7.82 17.74 25.86 25.56l10.52 4.51c35.79 15.34 55.94 31 55.94 66.16.01 37.9-29.76 57.64-69.76 57.64z" data-link="tab-{{$link}}">
+            </path>
+            
+          </svg> ES Modules</a
+        >
+
+        {{ else if (eq $link "ts-esm") }}
+        <a class="tab-label" href="#" data-link="tab-{{$link}}">
+          <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em"
+            xmlns="http://www.w3.org/2000/svg" data-link="tab-{{$link}}">
+          <title>TypeScript</title>
+            <path
+              d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" data-link="tab-{{$link}}">
+            </path>
+          </svg>ES Modules</a
+        >
+
+        {{ end }}
+      </li>
+      {{ end }}
+    </ul>
+  </nav>
+
+  {{ .Inner }}
+</div>
diff --git a/static/javascript.svg b/static/javascript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M25.7 30q-.75 0-1.225-.475Q24 29.05 24 28.3V26h2.4v1.6h5.2v-2.65h-5.9q-.7 0-1.2-.5t-.5-1.2V19.7q0-.75.475-1.225Q24.95 18 25.7 18h6.6q.75 0 1.225.475Q34 18.95 34 19.7V22h-2.4v-1.6h-5.2v2.65h5.9q.7 0 1.2.5t.5 1.2v3.55q0 .75-.475 1.225Q33.05 30 32.3 30Zm-12 0q-.75 0-1.225-.475Q12 29.05 12 28.3V25h2.4v2.6h4.2V18H21v10.3q0 .75-.475 1.225Q20.05 30 19.3 30Z"/></svg>
diff --git a/static/style.css b/static/style.css
