Allow clicking on capsules

NeurodataWithoutBorders · Oct 16, 2023 · fb4738a · fb4738a
1 parent 7bf8c53
commit fb4738a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/renderer/assets/css/guided.css b/src/renderer/assets/css/guided.css
@@ -892,6 +892,7 @@ h1.guided--text-sub-step {
     border: none;
     display: inline-block;
     border-radius: 16px;
+    cursor: pointer;
 }
 
 .guided--capsule.active {

diff --git a/src/renderer/src/stories/Main.js b/src/renderer/src/stories/Main.js
@@ -104,11 +104,17 @@ export class Main extends LitElement {
             if (section) {
                 if (capsules === true || !("capsules" in page)) {
                     let pages = Object.values(section.pages);
-                    if (pages.length > 1)
-                        capsules = {
+                    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])
+                    }
                 }
 
                 if (header === true || !("header" in page) || !("sections" in page.header)) {
@@ -123,7 +129,6 @@ export class Main extends LitElement {
 
         const headerEl = header ? new GuidedHeader(header) : html`<div></div>`; // Render for grid
 
-        const capsuleEl = capsules ? new GuidedCapsules(capsules) : "";
         const footerEl = footer ? new GuidedFooter(footer) : html`<div></div>`; // Render for grid
 
         const title = header?.title ?? page.info?.title;
@@ -137,7 +142,7 @@ export class Main extends LitElement {
         return html`
             ${headerEl}
             ${capsules
-                ? html`<div style="width: 100%; text-align: center; padding-top: 15px;">${capsuleEl}</div>`
+                ? html`<div style="width: 100%; text-align: center; padding-top: 15px;">${capsules}</div>`
                 : html`<div style="height: 50px;"></div>`}
             <main id="content" class="js-content" style="overflow: hidden; display: flex;">
                 <section class="section">

diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedCapsules.js b/src/renderer/src/stories/pages/guided-mode/GuidedCapsules.js
@@ -26,15 +26,17 @@ export class GuidedCapsules extends LitElement {
         return this;
     }
 
+    onClick = () => {}
+
     render() {
         if (!this.n) return html``;
 
         return html`
-            <div class="guided--capsule-container">
+            <div class="guided--capsule-container" >
                 <div class="guided--capsule-container-branch">
                     ${Array.from(
                         { length: this.n },
-                        (_, i) => html`<div class="guided--capsule ${i === this.selected ? `active` : ""}"></div>`
+                        (_, i) => html`<div @click=${() => this.onClick(i)} class="guided--capsule ${i === this.selected ? `active` : ""}"></div>`
                     )}
                 </div>
             </div>