inclusive-design · cindyli · Dec 20, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
diff --git a/index.html b/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="color-scheme" content="light dark" />
-        <title>Adaptive Palette</title>
-    </head>
-    <body>
-        <div id="app"></div>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Adaptive Palette</title>
+  </head>
+  <body>
+    <h2>Palette Based on JSON</h1>
+    <div id="paletteCell">
+      <script type="module" src="/src/Palette.ts"></script>
+    </div>
+  </body>
 </html>
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -10,5 +10,8 @@ module.exports = {
   },
   testPathIgnorePatterns: ["/node_modules/", "<rootDir>/dist/"],
   transformIgnorePatterns: ["<rootDir>/dist/"],
-  moduleFileExtensions: ["mjs", "js", "jsx", "ts", "tsx", "json", "node"]
+  moduleFileExtensions: ["mjs", "js", "jsx", "ts", "tsx", "json", "node"],
+  moduleNameMapper: {
+     "^.+\\.(css|less|scss)$": "babel-jest"
+  }
 };
diff --git a/src/Palette.scss b/src/Palette.scss
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+.paletteContainer {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: pink;
+}
diff --git a/src/Palette.ts b/src/Palette.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render } from "preact";
+import { html } from "htm/preact";
+import { PaletteCell } from "./PaletteCell";
+import "./Palette.scss";
+
+/**
+ * Given a palette defined in a json structure, compute the number of rows
+ * and columns in that palette.
+ *
+ * @param {Object} paletteDefinition - An object that lists the positions,
+ *                 heights and widths of the cells in the palette.
+ * @return {Object} - The row and column counts: `{ numRows: ..., numColumns: ...}`.
+ */
+function countRowsColumns (paletteDefinition) {
+  let rowCount = 0;
+  let colCount = 0;
+  let rightColumn = 0;
+  let bottomRow = 0;
+  const cellIds = Object.keys(paletteDefinition.cells);
+  cellIds.forEach((id) => {
+    const cellOptions = paletteDefinition.cells[id].options;
+    rightColumn = cellOptions.columnStart + cellOptions.columnSpan;
+    if (rightColumn > colCount) {
+      colCount = rightColumn;
+    }
+    bottomRow = cellOptions.rowStart + cellOptions.rowSpan;
+    if (bottomRow > rowCount) {
+      rowCount = bottomRow;
+    }
+  });
+  return { numRows: rowCount, numColumns: colCount };
+}
+
+export function Palette (props) {
+
+  const paletteDefinition = props.json;
+  const rowsCols = countRowsColumns(paletteDefinition);
+  const cellIds = Object.keys(paletteDefinition.cells);
+
+  // Loop to create an array of renderings for each cell
+  const theCells = [];
+  cellIds.forEach((id) => {
+    const aCell = paletteDefinition.cells[id];
+    const cellOptions = aCell.options;
+    const paletteCell = html`
+      <${PaletteCell} id="${id}" labelText="${cellOptions.label}"
+        columnStart="${cellOptions.columnStart}" columnSpan="${cellOptions.columnSpan}"
+        rowStart="${cellOptions.rowStart}" rowSpan="${cellOptions.rowSpan}"
+      />`;
+    theCells.push(paletteCell);
+  });
+
+  return html`
+    <div
+      class="paletteContainer"
+      style="grid-template-columns: repeat(${rowsCols.numColumns}, auto);">
+        ${theCells}
+    </div>
+  `;
+}
+
+import bmwJson from "./keyboards/bmw_palette.json";
+render (html`<${Palette} json=${bmwJson}/>`, document.getElementById("paletteCell"));
+
diff --git a/src/PaletteCell.scss b/src/PaletteCell.scss
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+.paletteCell {
+  border: 2px solid blue;
+  background-color: gray;
+  border-radius: 5px;
+  padding: 1em;
+  font-size: 1em;
+  text-align: center;
+
+  &:hover, &:focus {
+    background-color: lightblue;
+    color: #0000aa;
+  }
+
+  & > svg {
+    display: block;
+  }
+}
+
+.disabled {
+  opacity: 0.6;
+  color: #090909;
+  cursor: not-allowed;
+}
+
diff --git a/src/PaletteCell.test.ts b/src/PaletteCell.test.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, screen, fireEvent } from "@testing-library/preact";
+import "@testing-library/jest-dom";
+import { html } from "htm/preact";
+import { PaletteCell } from "./PaletteCell";
+
+test("The PaletteCell is rendered correctly", async () => {
+  render(html`
+    <${PaletteCell}
+      id="uuid-of-some-kind"
+      labelText="Bliss Language"
+      rowStart="3"
+      rowSpan="2"
+      columnStart="2"
+      columnSpan="1"
+      style="background-color: green;"
+    />`);
+
+  let button = await screen.findByRole("button", {name: "Bliss Language"});
+  let buttonStyles = window.getComputedStyle(button);
+  console.log(`Button's background colour: ${buttonStyles.backgroundColor}`);
+
+  // Check that the PaletteCell/button is rendered and has the correct
+  // attributes and text
+  expect(button).toBeVisible();
+  expect(button).toBeValid();
+  expect(button.id).toBe("uuid-of-some-kind");
+
+  // PaletteCell.css does not specify a bacground colour.  The background will
+  // be whatever the browser default is.  For now, check that the specified
+  // colour in the test render above is correct
+  expect(button.style["background-color"]).toBe("green");
+  expect(button.style["grid-column"]).toBe("2 / span 1");
+  expect(button.style["grid-row"]).toBe("3 / span 2");
+  expect(button.textContent).toBe("Bliss Language");
+
+  // Check disabled state (should be enabled)
+  expect(button.getAttribute("disabled")).toBe(null);
+  expect(button.getAttribute("class")).not.toContain("disabled");
+
+  // Check styling due to mouse hover
+  // TODO:  get `:hover` style from PaletteCell.css?
+  fireEvent.mouseOver(button);
+
+  buttonStyles = window.getComputedStyle(button);
+  console.log(`Button's background colour: ${buttonStyles.backgroundColor}`);
+  //expect(buttonStyles.backgroundColor).toBe("#cccccc");
+  //expect(buttonStyles.color).toBe("#0000aa");
+
+  fireEvent.mouseLeave(button);
+  buttonStyles = window.getComputedStyle(button);
+  console.log(`Button's background colour: ${buttonStyles.backgroundColor}`);
+  //expect(buttonStyles.backgroundColor).not.toBe("#cccccc");
+  //expect(buttonStyles.color).not.toBe("#0000aa");
+
+  // Create a diabled button and check its disabled state.
+  render(html`
+    <${PaletteCell}
+      id="uuid-of-another-kind"
+      labelText="Disabled Cell"
+      rowStart="3"
+      rowSpan="2"
+      columnStart="2"
+      columnSpan="1"
+      class="disabled"
+    />`);
+
+  button = await screen.findByRole("button", {name: "Disabled Cell"});
+  expect(button).toBeVisible();
+  expect(button).toBeValid();
+  expect(button.id).toBe("uuid-of-another-kind");
+  expect(button.getAttribute("disabled")).toBe("");
+  expect(button.getAttribute("class")).toContain("disabled");
+});
diff --git a/src/PaletteCell.ts b/src/PaletteCell.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { html } from "htm/preact";
+import "./PaletteCell.scss";
+
+export function PaletteCell (props) {
+
+  // Basic styles are the `paletteCell` class defined in PaletteCell.css.
+  // Concatenate any additional classes provided by `props`.
+  let classes = "paletteCell";
+  if (props.class) {
+    classes = `${classes} ${props.class}`;
+  }
+  let disabled = false;
+  if (classes.indexOf("disabled") >= 0) {
+    disabled = true;
+  }
+
+  // Also concatenate local styles with given grid cell styles
+  let styles = `
+    grid-column: ${props.columnStart} / span ${props.columnSpan};
+    grid-row: ${props.rowStart} / span ${props.rowSpan};
+  `;
+  if (props.style) {
+    styles = `${styles} ${props.style}`;
+  }
+
+  return html`
+    <button id="${props.id}" class="${classes}" style="${styles}" disabled=${disabled}>
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" role="presentation">
+        <circle cx="5" cy="5" r="4" fill="transparent" stroke="black" stroke-width="1"/>
+      </svg>
+      ${props.labelText}
+    </button>
+  `;
+}
diff --git a/src/PaletteStore.test.ts b/src/PaletteStore.test.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+"use strict";
+
+import { PaletteStore } from "./PaletteStore";
+
+describe("PaletteStore module", () => {
+
+  const dummyPalette1 = { name: "dummyPalette1", palette: null };
+  const dummyPalette2 = { name: "dummyPalette2", palette: null };
+  const dummyPalette2Name = "DummyPalette2";
+
+  const paletteStore = new PaletteStore();
+
+  test("Empty PaletteStore", () => {
+    expect(paletteStore.isEmpty()).toBe(true);
+  });
+
+  test("Non-empty PaletteStore", () => {
+    paletteStore.addPalette(dummyPalette1);
+    expect(paletteStore.isEmpty()).toBe(false);
+    expect(paletteStore.numPalettes).toBe(1);
+    expect(paletteStore.paletteList).toEqual(["dummyPalette1"]);
+  });
+
+  test("Add another palette", () => {
+    paletteStore.addPalette(dummyPalette2, dummyPalette2Name);
+    expect(paletteStore.numPalettes).toBe(2);
+    expect(paletteStore.paletteList).toEqual(["dummyPalette1", dummyPalette2Name]);
+  });
+
+  test("Retrieve a palette", () => {
+    const retrievedPalette = paletteStore.getNamedPalette(dummyPalette2Name);
+    expect(retrievedPalette).toBe(dummyPalette2);
+  });
+
+  test("Delete a palette", () => {
+    const numPalettes = paletteStore.numPalettes;
+    const removedPalette = paletteStore.removePalette(dummyPalette1.name);
+    expect(removedPalette).toBe(dummyPalette1);
+    expect(paletteStore.numPalettes).toBe(numPalettes - 1);
+    expect(paletteStore.getNamedPalette(dummyPalette1.name)).toBeUndefined();
+  });
+});