diff --git a/compiler/src/mdast/__test__/plot-accessibility-switcher.test.ts b/compiler/src/mdast/__test__/plot-accessibility-switcher.test.ts
new file mode 100644
index 0000000..0f810c6
--- /dev/null
+++ b/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(`
+
+
+ - Visualisation
+ - Purpose
+ - Description
+
+
+
+
Why does this plot exist?
+
+
+
What is on this plot?
+
+
+ `);
+
+ 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(`
+ //
+ // `);
+
+ // expect(html).toBe(expected);
+ // });
+});
diff --git a/compiler/src/mdast/combined.ts b/compiler/src/mdast/combined.ts
index 4718be3..2175dad 100644
--- a/compiler/src/mdast/combined.ts
+++ b/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) {
diff --git a/compiler/src/mdast/plot-accessibility-switcher.ts b/compiler/src/mdast/plot-accessibility-switcher.ts
new file mode 100644
index 0000000..72f5c08
--- /dev/null
+++ b/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;
+}
diff --git a/template/src/index.ts b/template/src/index.ts
index 87b4c4a..1408727 100644
--- a/template/src/index.ts
+++ b/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'));
diff --git a/template/src/plot-accessibility-switcher/index.ts b/template/src/plot-accessibility-switcher/index.ts
new file mode 100644
index 0000000..dca347d
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/template/src/plot-accessibility-switcher/state.ts b/template/src/plot-accessibility-switcher/state.ts
new file mode 100644
index 0000000..51e84cd
--- /dev/null
+++ b/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);
diff --git a/template/src/styles/switcher.scss b/template/src/styles/switcher.scss
index 84af5b0..7451e0f 100644
--- a/template/src/styles/switcher.scss
+++ b/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;