feat: Back/forward navigation support: view.jump() API #23

h2oai · Jul 11, 2022 · aa7ffe0 · aa7ffe0
1 parent ffb69db
commit aa7ffe0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/py/pkg/h2o_nitro/core.py b/py/pkg/h2o_nitro/core.py
@@ -645,6 +645,13 @@ def _marshal_set(
         ))))
 
 
+def _marshal_switch(method: Union[V, Callable]):
+    return _marshal(dict(
+        t=_MsgType.Switch,
+        method=_qual_name_of(method) if isinstance(method, FunctionType) else str(method),
+    ))
+
+
 class _View:
     def __init__(
             self,
@@ -794,6 +801,9 @@ def set(
             theme=theme,
         ))
 
+    def jump(self, method: Union[V, Callable]):
+        self._send(_marshal_switch(method))
+
     def __call__(
             self,
             *items: Item,
@@ -947,6 +957,9 @@ async def set(
             theme=theme,
         ))
 
+    async def jump(self, method: Union[V, Callable]):
+        await self._send(_marshal_switch(method))
+
     async def __call__(
             self,
             *items: Item,

diff --git a/web/src/client.ts b/web/src/client.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Dict, isS, newIncr, on, S, signal, U } from './core';
+import { Dict, isS, newIncr, on, S, signal, U, V } from './core';
 import { reIndex, sanitizeBox, sanitizeOptions } from './heuristics';
 import { installPlugins } from './plugin';
 import { Box, DisplayMode, Edit, EditPosition, EditType, Input, InputValue, Message, MessageType, Option, Server, ServerEvent, ServerEventT } from './protocol';
@@ -174,6 +174,9 @@ export const newClient = (server: Server) => {
     connect = () => {
       server.connect(handleEvent)
     },
+    jump = (v: V) => {
+      window.location.hash = '!' + v
+    },
     bounce = () => {
       const hashbang = getHashRPC()
       if (hashbang) {
@@ -305,6 +308,12 @@ export const newClient = (server: Server) => {
                   invalidate()
                 }
                 break
+              case MessageType.Switch:
+                {
+                  const { method } = msg
+                  client.jump(method)
+                }
+                break
               case MessageType.Set:
                 {
                   const
@@ -367,6 +376,7 @@ export const newClient = (server: Server) => {
     context,
     connect,
     bounce,
+    jump,
     stateB,
     busy: true,
   }

diff --git a/web/src/header.tsx b/web/src/header.tsx
@@ -30,10 +30,10 @@ const MenuContainer = styled.div`
   align-items: center;
 `
 
-const Menu = make(({ options }: { options: Option[] }) => {
+const Menu = make(({ client, options }: { client: Client, options: Option[] }) => {
   const
     hasMenu = options.length > 0,
-    items = options.map(o => toContextualMenuItem(o, v => window.location.hash = '!' + v)),
+    items = options.map(o => toContextualMenuItem(o, client.jump)),
     containerRef = React.createRef<HTMLDivElement>(),
     showMenuB = signal(false),
     showMenu = () => showMenuB(true),
@@ -68,9 +68,9 @@ const NavBarContainer = styled.div`
   justify-content: flex-end;
 `
 
-const NavBar = make(({ options }: { options: Option[] }) => {
+const NavBar = make(({ client, options }: { client: Client, options: Option[] }) => {
   const
-    items = options.map(o => toContextualMenuItem(o, v => window.location.hash = '!' + v)),
+    items = options.map(o => toContextualMenuItem(o, client.jump)),
     render = () => (
       <NavBarContainer>
         <CommandBar items={items} />
@@ -90,10 +90,10 @@ export const Header = make(({ client }: { client: Client }) => {
 
       return (
         <div className='header'>
-          <Menu options={menu} />
+          <Menu client={client} options={menu} />
           <div className='title'>{title}</div>
           <div className='caption'>{caption}</div>
-          <NavBar options={nav} />
+          <NavBar client={client} options={nav} />
         </div>
       )
     }