Make each sidebar page it's own "panel", and provide shortcuts for

navigating between sidebar panels
roam-unofficial · Oct 11, 2020 · dadaa19 · dadaa19
1 parent 6f9d22c
commit dadaa19
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/src/ts/core/features/vim-mode/commands/panel-commands.ts b/src/ts/core/features/vim-mode/commands/panel-commands.ts
@@ -15,7 +15,9 @@ const closeSidebarPage = () => {
 
 export const PanelCommands = [
     // Need to wrap in function to preserve the `this` reference inside of RoamPanel
-    nmap('h', 'Select Panel Left', () => RoamPanel.previousPanel().select()),
-    nmap('l', 'Select Panel Right', () => RoamPanel.nextPanel().select()),
+    nmap('h', 'Select Main Panel', () => RoamPanel.mainPanel().select()),
+    nmap('l', 'Select Prior Sidebar Panel', () => RoamPanel.previousSidebarPanel().select()),
+    nmap('ctrl+k', 'Select Previous Panel', () => RoamPanel.previousPanel().select()),
+    nmap('ctrl+j', 'Select Next Panel', () => RoamPanel.nextPanel().select()),
     map('ctrl+w', 'Close Page in Side Bar', closeSidebarPage),
 ]
diff --git a/src/ts/core/features/vim-mode/roam/roam-event.ts b/src/ts/core/features/vim-mode/roam/roam-event.ts
@@ -23,7 +23,7 @@ export const RoamEvent = {
     // Triggers when the sidebar is shown or hidden
     onSidebarToggle(handler: (isSideBarShowing: boolean) => void): DisconnectFn {
         return onSelectorChange(Selectors.sidebar, () => {
-            const isSidebarShowing = !!document.querySelector(Selectors.sidebarContent)
+            const isSidebarShowing = !!document.querySelector(Selectors.sidebar)
             handler(isSidebarShowing)
         })
     },

diff --git a/src/ts/core/features/vim-mode/roam/roam-panel.ts b/src/ts/core/features/vim-mode/roam/roam-panel.ts
@@ -9,12 +9,16 @@ type BlockNavigationState = {
     panelOrder: PanelId[]
     panels: Map<PanelId, RoamPanel>
     focusedPanel: PanelIndex
+    lastFocusedSidebarPanel: PanelIndex
+    previouslySelectedBlocks: Set<BlockId>
 }
 
 const state: BlockNavigationState = {
     panelOrder: [],
     panels: new Map(),
     focusedPanel: 0,
+    lastFocusedSidebarPanel: 1,
+    previouslySelectedBlocks: new Set(),
 }
 
 /**
@@ -26,7 +30,7 @@ type PanelIndex = number
 type PanelElement = HTMLElement
 
 const PANEL_CSS_CLASS = 'roam-toolkit--panel'
-const PANEL_SELECTOR = `.${PANEL_CSS_CLASS}, ${Selectors.sidebarContent}`
+const PANEL_SELECTOR = `.${PANEL_CSS_CLASS}, ${Selectors.sidebarPage}`
 
 /**
  * A "Panel" is a viewport that contains blocks. For now, there is just
@@ -121,8 +125,13 @@ export class RoamPanel {
     }
 
     select() {
+        if (state.focusedPanel > 0) {
+            state.lastFocusedSidebarPanel = state.focusedPanel
+        }
         state.focusedPanel = state.panelOrder.indexOf(this.element)
-        this.element.scrollIntoView({behavior: 'smooth'})
+        this.element.scrollIntoView({
+            inline: 'end',
+        })
     }
 
     static selected(): RoamPanel {
@@ -144,6 +153,10 @@ export class RoamPanel {
         return RoamPanel.at(0)
     }
 
+    static previousSidebarPanel(): RoamPanel {
+        return RoamPanel.at(state.lastFocusedSidebarPanel)
+    }
+
     static previousPanel(): RoamPanel {
         return RoamPanel.at(state.focusedPanel - 1)
     }
@@ -161,7 +174,8 @@ export class RoamPanel {
     private static get(panelId: PanelId): RoamPanel {
         // lazily create one if doesn't already exist
         if (!state.panels.has(panelId)) {
-            state.panels.set(panelId, new RoamPanel(panelId))
+            const panel = new RoamPanel(panelId)
+            state.panels.set(panelId, panel)
         }
         return assumeExists(state.panels.get(panelId))
     }

diff --git a/src/ts/core/roam/selectors.ts b/src/ts/core/roam/selectors.ts
@@ -9,8 +9,8 @@ export const Selectors = {
     mainContent: '.roam-article',
     mainPanel: '.roam-body-main',
 
-    sidebarContent: '#roam-right-sidebar-content',
-    sidebarPage: '#right-sidebar > div',
+    sidebarContent: '.sidebar-content',
+    sidebarPage: '.sidebar-content > div',
     sidebar: '#right-sidebar',
 
     leftPanel: '.roam-sidebar-container',