feat: basic implementation for navigation among palette layers (resolves #5) #6
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /* | ||
| * Copyright 2024 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 | ||
| */ | ||
|
|
||
| .actionBranchToPaletteCell { | ||
| border: 2px solid blue; | ||
| background-color: chartreuse; | ||
| padding-inline: 0.5rem; | ||
| text-align: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* | ||
| * Copyright 2024 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 } from "@testing-library/preact"; | ||
| import "@testing-library/jest-dom"; | ||
| import { html } from "htm/preact"; | ||
|
|
||
| import { initAdaptivePaletteGlobals } from "./GlobalData"; | ||
| import { ActionBranchToPaletteCell } from "./ActionBranchToPaletteCell"; | ||
|
|
||
| describe("ActionBranchToPaletteCell render tests", () => { | ||
|
|
||
| const TEST_CELL_ID = "uuid-of-some-kind"; | ||
| const goToPaletteCell = { | ||
| options: { | ||
| "label": "Animals", | ||
| "branchTo": "Animals", | ||
| "rowStart": "100", | ||
| "rowSpan": "12", | ||
| "columnStart": "33", | ||
| "columnSpan": "11", | ||
| "bciAvId": [ 16161, "/", 9011 ] | ||
| } | ||
| }; | ||
|
|
||
| beforeAll(async () => { | ||
| await initAdaptivePaletteGlobals(); | ||
| }); | ||
|
|
||
| test("ActionBranchToPaletteCell rendering", async () => { | ||
|
|
||
| render(html` | ||
| <${ActionBranchToPaletteCell} | ||
| id="${TEST_CELL_ID}" | ||
| options=${goToPaletteCell.options} | ||
| />` | ||
| ); | ||
|
|
||
| // Check the rendered cell | ||
| const button = await screen.findByRole("button", {name: goToPaletteCell.options.label}); | ||
|
|
||
| // Check that the ActionBmwCodeCell/button is rendered and has the correct | ||
| // attributes and text. | ||
| expect(button).toBeVisible(); | ||
| expect(button).toBeValid(); | ||
| expect(button.id).toBe(TEST_CELL_ID); | ||
| expect(button.getAttribute("class")).toBe("actionBranchToPaletteCell"); | ||
| expect(button.textContent).toBe(goToPaletteCell.options.label); | ||
|
|
||
| // Check the grid cell styles. | ||
| expect(button.style["grid-column"]).toBe(`${goToPaletteCell.options.columnStart} / span ${goToPaletteCell.options.columnSpan}`); | ||
| expect(button.style["grid-row"]).toBe(`${goToPaletteCell.options.rowStart} / span ${goToPaletteCell.options.rowSpan}`); | ||
|
|
||
| // Check disabled state (should be enabled) | ||
| expect(button.getAttribute("disabled")).toBe(null); | ||
| }); | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /* | ||
| * 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 { BlissSymbolCellType } from "./index.d"; | ||
| import { adaptivePaletteGlobals, importPaletteFromJsonFile } from "./GlobalData"; | ||
| import { Palette } from "./Palette"; | ||
| import { BlissSymbol } from "./BlissSymbol"; | ||
| import { speak } from "./GlobalUtils"; | ||
| import "./ActionBranchToPaletteCell.scss"; | ||
|
|
||
| // TODO: this is identical to `ActionBmwCodeCellPropsType`. Should it be? | ||
| type ActionBranchToPalettePropsType = { | ||
|
There was a problem hiding this comment. I'm thinking if we should expand the There was a problem hiding this comment. I agree, and will start work on it next. I also noticed that we don't define the return type of many of our functions. Should we? There was a problem hiding this comment. It's a great idea to define the return type for functions. There was a problem hiding this comment. I've done them all. The one that was problematic was the return type for the I did some more debugging and it looks like, in the case of Preact, the As for the expanding the options, I'm still working on that. There was a problem hiding this comment.
For "expanding the options section", I took the full Let me know what you think. |
||
| id: string, | ||
| options: BlissSymbolCellType | ||
| }; | ||
|
|
||
| /* | ||
| * Event handler for an ActionBranchToPaletteCell button/cell that, when clicked, | ||
| * finds and renders the palette referenced by this cell. | ||
| */ | ||
| const navigateToPalette = async (event) => { | ||
| const { paletteStore, navigationStack } = adaptivePaletteGlobals; | ||
| const button = event.currentTarget; | ||
| speak(button.innerText); | ||
|
|
||
| const branchToPaletteName = button.getAttribute("data-branchto"); | ||
| const paletteDefinition = await paletteStore.getNamedPalette(branchToPaletteName, importPaletteFromJsonFile); | ||
| if (paletteDefinition) { | ||
| const mainPaletteDisplayArea = document.getElementById("mainPaletteDisplayArea"); | ||
| navigationStack.push(navigationStack.currentPalette); | ||
| render (html`<${Palette} json=${paletteDefinition}/>`, mainPaletteDisplayArea); | ||
| navigationStack.currentPalette = paletteDefinition; | ||
| } | ||
| else { | ||
| console.error(`navigateToPalette(): Unable to locate the palette definition for ${branchToPaletteName}`); | ||
| } | ||
| }; | ||
|
|
||
| export function ActionBranchToPaletteCell (props: ActionBranchToPalettePropsType) { | ||
| const { | ||
| columnStart, columnSpan, rowStart, rowSpan, branchTo, bciAvId, label | ||
| } = props.options; | ||
|
|
||
| const gridStyles = ` | ||
| grid-column: ${columnStart} / span ${columnSpan}; | ||
| grid-row: ${rowStart} / span ${rowSpan}; | ||
| `; | ||
|
|
||
| return html` | ||
| <button | ||
| id="${props.id}" class="actionBranchToPaletteCell" style="${gridStyles}" | ||
| data-branchto="${branchTo}" onClick=${navigateToPalette}> | ||
| <${BlissSymbol} bciAvId=${bciAvId} label=${label} /> | ||
| </button> | ||
| `; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /* | ||
| * Copyright 2024 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 } from "@testing-library/preact"; | ||
| import "@testing-library/jest-dom"; | ||
| import { html } from "htm/preact"; | ||
|
|
||
| import { initAdaptivePaletteGlobals } from "./GlobalData"; | ||
| import { CommandGoBackCell } from "./CommandGoBackCell"; | ||
|
|
||
| describe("ActionBmwCodeDell render tests", () => { | ||
|
There was a problem hiding this comment. Would be nice to test the click event of the go back button. Since this test involves The same idea applies in the comment above about testing the click event for There was a problem hiding this comment. As above with the |
||
|
|
||
| const TEST_CELL_ID = "uuid-of-some-kind"; | ||
| const goBackCell = { | ||
| options: { | ||
| "label": "Back Up", | ||
| "rowStart": "3", | ||
| "rowSpan": "2", | ||
| "columnStart": "2", | ||
| "columnSpan": "1", | ||
| "bciAvId": 12612 | ||
| } | ||
| }; | ||
|
|
||
| beforeAll(async () => { | ||
| await initAdaptivePaletteGlobals(); | ||
| }); | ||
|
|
||
| test("CommandGoBackCell rendering", async () => { | ||
|
|
||
| render(html` | ||
| <${CommandGoBackCell} | ||
| id="${TEST_CELL_ID}" | ||
| options=${goBackCell.options} | ||
| />` | ||
| ); | ||
|
|
||
| // Check the rendered cell | ||
| const button = await screen.findByRole("button", {name: goBackCell.options.label}); | ||
|
|
||
| // Check that the ActionBmwCodeCell/button is rendered and has the correct | ||
| // attributes and text. | ||
| expect(button).toBeVisible(); | ||
| expect(button).toBeValid(); | ||
| expect(button.id).toBe(TEST_CELL_ID); | ||
| expect(button.getAttribute("class")).toBe("btn-command"); | ||
| expect(button.textContent).toBe(goBackCell.options.label); | ||
|
|
||
| // Check the grid cell styles. | ||
| expect(button.style["grid-column"]).toBe("2 / span 1"); | ||
| expect(button.style["grid-row"]).toBe("3 / span 2"); | ||
|
|
||
| // Check disabled state (should be enabled) | ||
| expect(button.getAttribute("disabled")).toBe(null); | ||
| }); | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /* | ||
| * 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 { BlissSymbolCellType } from "./index.d"; | ||
| import { adaptivePaletteGlobals, importPaletteFromJsonFile } from "./GlobalData"; | ||
| import { Palette } from "./Palette"; | ||
| import { BlissSymbol } from "./BlissSymbol"; | ||
| import { speak } from "./GlobalUtils"; | ||
| import "./ActionBmwCodeCell.scss"; | ||
|
|
||
| // TODO: this is identical to `ActionBmwCodeCellPropsType`. Should it be? | ||
| type CommandGoBackCellPropsType = { | ||
| id: string, | ||
| options: BlissSymbolCellType | ||
| }; | ||
|
|
||
| /* | ||
| * Event handler for an CommandGoBackCellPropsType button/cell that, when clicked, | ||
| * goes back one palette. | ||
| */ | ||
| const goBackToPalette = async (event) => { | ||
| const { paletteStore, navigationStack } = adaptivePaletteGlobals; | ||
| const button = event.currentTarget; | ||
| speak(button.innerText); | ||
|
|
||
| const paletteToGoBackTo = navigationStack.peek(); | ||
| const paletteDefinition = await paletteStore.getNamedPalette(paletteToGoBackTo.name, importPaletteFromJsonFile); | ||
| if (paletteDefinition) { | ||
| navigationStack.popAndSetCurrent(paletteDefinition); | ||
| render ( | ||
| html`<${Palette} json=${paletteDefinition}/>`, | ||
| document.getElementById("mainPaletteDisplayArea") | ||
| ); | ||
| } | ||
| else { | ||
| console.error(`goBackToPalette(): Unable to locate the palette definition for ${paletteToGoBackTo}`); | ||
| } | ||
| }; | ||
|
|
||
| export function CommandGoBackCell (props: CommandGoBackCellPropsType) { | ||
|
|
||
| const { | ||
| columnStart, columnSpan, rowStart, rowSpan, bciAvId, label | ||
| } = props.options; | ||
|
|
||
| const gridStyles = ` | ||
| grid-column: ${columnStart} / span ${columnSpan}; | ||
| grid-row: ${rowStart} / span ${rowSpan}; | ||
| `; | ||
|
|
||
| return html` | ||
| <button | ||
| id="${props.id}" class="btn-command" style="${gridStyles}" | ||
| onClick=${goBackToPalette}> | ||
| <${BlissSymbol} bciAvId=${bciAvId} label=${label} /> | ||
| </button> | ||
| `; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice to also test the click event of the
ActionBranchToPaletteCellthat leads to the rendering of the palette at the next layer.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, and I decided that the best place to do that is in
Palette.integration.testsince the go-to button affects other areas of the screen and involves other objects.