add plot accessibility switcher (#150)

compiler/src/mdast/__test__/plot-accessibility-switcher.test.ts

@@ -0,0 +1,72 @@
+import {
+  testProcessor,
+  unindentString,
+} from '../../test-utils/test-processor';
+
+describe('plot accessibility switcher', () => {
+  it('should show the plot accessibility switcher correctly', async () => {
+    const { html } = await testProcessor(`
+      ::::plot-accessibility-switcher
+      :::visualisation
+      The visualisation
+      :::
+
+      :::purpose
+      Why does this plot exist?
+      :::
+
+      :::description
+      What is on this plot?
+      :::
+      ::::
+    `);
+
+    const expected = unindentString(`
+      <div class="plot-accessibility-switcher">
+        <ul>
+          <li data-plot-accessibility="visualisation">Visualisation</li>
+          <li data-plot-accessibility="purpose">Purpose</li>
+          <li data-plot-accessibility="description">Description</li>
+        </ul>
+        <div data-plot-accessibility="visualisation" class="plot-accessibility">
+          <p>The visualisation</p>
+        </div>
+        <div data-plot-accessibility="purpose" class="plot-accessibility">
+          <p>Why does this plot exist?</p>
+        </div>
+        <div data-plot-accessibility="description" class="plot-accessibility">
+          <p>What is on this plot?</p>
+        </div>
+      </div>
+    `);
+
+    expect(html).toBe(expected);
+  });
+
+  // it('should only show cli', async () => {
+  //   const md = `
+  //     ::::program-switcher
+  //     :::command-line
+  //     I am cli
+  //     :::
+
+  //     :::github-desktop
+  //     I am github desktop
+  //     :::
+  //     ::::
+  //   `;
+  //   const { html } = await testProcessor(md, {
+  //     envProgram: 'command-line',
+  //   });
+
+  //   const expected = unindentString(`
+  //     <div class="program-switcher">
+  //       <div data-program="command-line" class="program show">
+  //         <p>I am cli</p>
+  //       </div>
+  //     </div>
+  //   `);
+
+  //   expect(html).toBe(expected);
+  // });
+});

compiler/src/mdast/combined.ts

@@ -7,6 +7,7 @@ import { boxouts } from './boxouts';
 import { moveAnswersToEnd } from './move-answers-to-end';
 import { programSwitcher } from './program-switcher';
 import { languageSwitcher } from './language-switcher';
+import { plotAccessibilitySwitcher } from './plot-accessibility-switcher';
 
 export async function combinedMdastPhase(
   mdast: Root,
@@ -17,6 +18,7 @@ export async function combinedMdastPhase(
   const processor = unified()
     .use(programSwitcher, ctx)
     .use(languageSwitcher, ctx)
+    .use(plotAccessibilitySwitcher, ctx)
     .use(boxouts, ctx.refStore);
 
   if (targetPdf) {

compiler/src/mdast/plot-accessibility-switcher.ts

@@ -0,0 +1,72 @@
+import { Element, ElementContent } from 'hast';
+import { ContainerDirective } from 'mdast-util-directive';
+import { toHast } from 'mdast-util-to-hast';
+import { Node } from 'unist';
+import { visit } from 'unist-util-visit';
+
+import { Context } from '../context';
+
+const tabs = ['visualisation', 'purpose', 'description'];
+const titles = ['Visualisation', 'Purpose', 'Description'];
+
+export function plotAccessibilitySwitcher(ctx: Context) {
+  return (tree: Node) => {
+    visit(tree, 'containerDirective', (node: ContainerDirective) => {
+      if (node.name === 'plot-accessibility-switcher') {
+        node.data = {
+          hProperties: {
+            className: 'plot-accessibility-switcher',
+          },
+          hChildren: [processMenu(node), ...processChildren(node)],
+        };
+      }
+    });
+  };
+}
+
+function processMenu(parent: ContainerDirective): ElementContent {
+  const children = parent.children as ContainerDirective[];
+  return {
+    type: 'element',
+    tagName: 'ul',
+    properties: {},
+    children: children.map((node) => {
+      const element: ElementContent = {
+        type: 'element',
+        tagName: 'li',
+        properties: {
+          'data-plot-accessibility': node.name,
+        },
+        children: [
+          {
+            type: 'text',
+            value: titles[tabs.indexOf(node.name)],
+          },
+        ],
+      };
+      return element;
+    }),
+  };
+}
+
+function processChildren(parent: ContainerDirective): ElementContent[] {
+  const children = parent.children.map((node) => {
+    const parent = node as ContainerDirective;
+    if (tabs.includes(parent.name)) {
+      node.data = {
+        hProperties: {
+          'data-plot-accessibility': parent.name,
+          className: ['plot-accessibility'],
+        },
+      };
+    }
+    return node;
+  });
+
+  const parentHast = toHast({
+    type: 'root',
+    children,
+  }) as Element;
+
+  return parentHast.children;
+}

template/src/index.ts

@@ -5,5 +5,6 @@ import './toggle-answers';
 import './toggle-sidebar';
 import './program-switcher';
 import './language-switcher';
+import './plot-accessibility-switcher';
 
 document.documentElement.dispatchEvent(new Event('template-ready'));

template/src/plot-accessibility-switcher/index.ts

@@ -0,0 +1,42 @@
+import { saveState } from '../util';
+import { state } from './state';
+
+document.documentElement.classList.add(
+  `plot-accessibility-${state.plotAccessibility}`,
+);
+
+document
+  .querySelectorAll('.plot-accessibility-switcher > ul > li')
+  .forEach((elem) => {
+    const element = elem as HTMLElement;
+    console.log(
+      element.dataset.plotAccessibility,
+      state.plotAccessibility,
+    );
+    if (element.dataset.plotAccessibility === state.plotAccessibility) {
+      element.classList.add('active');
+    }
+    element.addEventListener('click', setProgram);
+  });
+
+document
+  .querySelectorAll('.plot-accessibility-switcher > .plot-accessibility')
+  .forEach((elem) => {
+    const element = elem as HTMLElement;
+    if (element.dataset.plotAccessibility === state.plotAccessibility) {
+      element.classList.add('show');
+    }
+  });
+
+function setProgram(e: Event) {
+  const target = e.currentTarget as HTMLElement;
+  const plotAccessibility = target.dataset.plotAccessibility as string;
+  const newClass = `plot-accessibility-${plotAccessibility}`;
+
+  if (!document.documentElement.classList.contains(newClass)) {
+    const oldClass = `plot-accessibility-${state.plotAccessibility}`;
+    document.documentElement.classList.replace(oldClass, newClass);
+    state.plotAccessibility = plotAccessibility;
+    saveState('environment', state);
+  }
+}

template/src/plot-accessibility-switcher/state.ts

@@ -0,0 +1,11 @@
+import { getSavedState } from '../util';
+
+export type State = {
+  plotAccessibility: string;
+};
+
+export const defaultState: State = Object.freeze({
+  plotAccessibility: 'visualisation',
+});
+
+export const state = getSavedState('environment', defaultState);

template/src/styles/switcher.scss

@@ -1,14 +1,24 @@
 html.program-command-line .program-switcher > .program:not([data-program="command-line"]),
 html.program-github-desktop .program-switcher > .program:not([data-program="github-desktop"]),
+
 html.language-r .language-switcher > .language:not([data-language="r"]),
-html.language-python .language-switcher > .language:not([data-language="python"]) {
+html.language-python .language-switcher > .language:not([data-language="python"]),
+
+html.plot-accessibility-visualisation .plot-accessibility-switcher > .plot-accessibility:not([data-plot-accessibility="visualisation"]),
+html.plot-accessibility-purpose .plot-accessibility-switcher > .plot-accessibility:not([data-plot-accessibility="purpose"]),
+html.plot-accessibility-description .plot-accessibility-switcher > .plot-accessibility:not([data-plot-accessibility="description"]) {
   display: none;
 }
 
 html.program-command-line .program-switcher > ul > li[data-program="command-line"],
 html.program-github-desktop .program-switcher  > ul > li[data-program="github-desktop"],
+
 html.language-r .language-switcher  > ul > li[data-language="r"],
-html.language-python .language-switcher  > ul > li[data-language="python"] {
+html.language-python .language-switcher  > ul > li[data-language="python"],
+
+html.plot-accessibility-visualisation .plot-accessibility-switcher  > ul > li[data-plot-accessibility="visualisation"],
+html.plot-accessibility-purpose .plot-accessibility-switcher  > ul > li[data-plot-accessibility="purpose"],
+html.plot-accessibility-description .plot-accessibility-switcher  > ul > li[data-plot-accessibility="description"] {
   color: var(--highlightColor);
   cursor: default;
   &:hover {
@@ -17,7 +27,8 @@ html.language-python .language-switcher  > ul > li[data-language="python"] {
 }
 
 .program-switcher,
-.language-switcher {
+.language-switcher,
+.plot-accessibility-switcher {
   position: relative;
 
   & > ul {
@@ -49,7 +60,8 @@ html.language-python .language-switcher  > ul > li[data-language="python"] {
   }
 
   & > .program,
-  & > .language {
+  & > .language,
+  & > .plot-accessibility {
     padding: 1.5rem 1rem;
     border: 3px solid var(--boxoutBg);
     border-radius: 0.6rem;