diff --git a/src/renderer/src/stories/Main.js b/src/renderer/src/stories/Main.js index 28e6b9c6e..7ad3d4968 100644 --- a/src/renderer/src/stories/Main.js +++ b/src/renderer/src/stories/Main.js @@ -104,16 +104,15 @@ export class Main extends LitElement { if (section) { if (capsules === true || !("capsules" in page)) { let pages = Object.values(section.pages); - const pageIds = Object.keys(section.pages) + const pageIds = Object.keys(section.pages); if (pages.length > 1) { const capsulesProps = { n: pages.length, selected: pages.map((o) => o.pageLabel).indexOf(page.info.label), }; - - capsules = new GuidedCapsules(capsulesProps) - capsules.onClick = (i) => this.toRender.page.to(pageIds[i]) + capsules = new GuidedCapsules(capsulesProps); + capsules.onClick = (i) => this.toRender.page.to(pageIds[i]); } } diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedCapsules.js b/src/renderer/src/stories/pages/guided-mode/GuidedCapsules.js index ad9da9225..c28be5f82 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedCapsules.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedCapsules.js @@ -26,17 +26,21 @@ export class GuidedCapsules extends LitElement { return this; } - onClick = () => {} + onClick = () => {}; render() { if (!this.n) return html``; return html` -
+
${Array.from( { length: this.n }, - (_, i) => html`
this.onClick(i)} class="guided--capsule ${i === this.selected ? `active` : ""}">
` + (_, i) => + html`
this.onClick(i)} + class="guided--capsule ${i === this.selected ? `active` : ""}" + >
` )}