From 91a54442b7249568091ebbc3e38df1eaef96ed79 Mon Sep 17 00:00:00 2001 From: Mike Sawka Date: Mon, 30 Dec 2024 16:51:00 -0800 Subject: [PATCH] implement web:hidenav (#1639), and file:/// urls (#1638) (#1645) --- frontend/app/view/webview/webview.tsx | 118 +++++++++++++++----------- frontend/types/gotypes.d.ts | 1 + pkg/waveobj/metaconsts.go | 1 + pkg/waveobj/wtypemeta.go | 3 +- 4 files changed, 74 insertions(+), 49 deletions(-) diff --git a/frontend/app/view/webview/webview.tsx b/frontend/app/view/webview/webview.tsx index 138884afc..80d16bd4c 100644 --- a/frontend/app/view/webview/webview.tsx +++ b/frontend/app/view/webview/webview.tsx @@ -51,6 +51,7 @@ export class WebViewModel implements ViewModel { mediaMuted: PrimitiveAtom; modifyExternalUrl?: (url: string) => string; domReady: PrimitiveAtom; + hideNav: Atom; searchAtoms?: SearchAtoms; constructor(blockId: string, nodeModel: BlockNodeModel) { @@ -74,6 +75,7 @@ export class WebViewModel implements ViewModel { this.urlInputRef = createRef(); this.webviewRef = createRef(); this.domReady = atom(false); + this.hideNav = getBlockMetaKeyAtom(blockId, "web:hidenav"); this.mediaPlaying = atom(false); this.mediaMuted = atom(false); @@ -87,57 +89,66 @@ export class WebViewModel implements ViewModel { const mediaPlaying = get(this.mediaPlaying); const mediaMuted = get(this.mediaMuted); const url = currUrl ?? metaUrl ?? homepageUrl; - return [ - { + const rtn: HeaderElem[] = []; + if (get(this.hideNav)) { + return rtn; + } + + rtn.push({ + elemtype: "iconbutton", + icon: "chevron-left", + click: this.handleBack.bind(this), + disabled: this.shouldDisableBackButton(), + }); + rtn.push({ + elemtype: "iconbutton", + icon: "chevron-right", + click: this.handleForward.bind(this), + disabled: this.shouldDisableForwardButton(), + }); + rtn.push({ + elemtype: "iconbutton", + icon: "house", + click: this.handleHome.bind(this), + disabled: this.shouldDisableHomeButton(), + }); + const divChildren: HeaderElem[] = []; + divChildren.push({ + elemtype: "input", + value: url, + ref: this.urlInputRef, + className: "url-input", + onChange: this.handleUrlChange.bind(this), + onKeyDown: this.handleKeyDown.bind(this), + onFocus: this.handleFocus.bind(this), + onBlur: this.handleBlur.bind(this), + }); + if (mediaPlaying) { + divChildren.push({ elemtype: "iconbutton", - icon: "chevron-left", - click: this.handleBack.bind(this), - disabled: this.shouldDisableBackButton(), - }, - { - elemtype: "iconbutton", - icon: "chevron-right", - click: this.handleForward.bind(this), - disabled: this.shouldDisableForwardButton(), - }, - { - elemtype: "iconbutton", - icon: "house", - click: this.handleHome.bind(this), - disabled: this.shouldDisableHomeButton(), - }, - { - elemtype: "div", - className: clsx("block-frame-div-url", urlWrapperClassName), - onMouseOver: this.handleUrlWrapperMouseOver.bind(this), - onMouseOut: this.handleUrlWrapperMouseOut.bind(this), - children: [ - { - elemtype: "input", - value: url, - ref: this.urlInputRef, - className: "url-input", - onChange: this.handleUrlChange.bind(this), - onKeyDown: this.handleKeyDown.bind(this), - onFocus: this.handleFocus.bind(this), - onBlur: this.handleBlur.bind(this), - }, - mediaPlaying && { - elemtype: "iconbutton", - icon: mediaMuted ? "volume-slash" : "volume", - click: this.handleMuteChange.bind(this), - }, - { - elemtype: "iconbutton", - icon: refreshIcon, - click: this.handleRefresh.bind(this), - }, - ].filter((v) => v), - }, - ] as HeaderElem[]; + icon: mediaMuted ? "volume-slash" : "volume", + click: this.handleMuteChange.bind(this), + }); + } + divChildren.push({ + elemtype: "iconbutton", + icon: refreshIcon, + click: this.handleRefresh.bind(this), + }); + rtn.push({ + elemtype: "div", + className: clsx("block-frame-div-url", urlWrapperClassName), + onMouseOver: this.handleUrlWrapperMouseOver.bind(this), + onMouseOut: this.handleUrlWrapperMouseOut.bind(this), + children: divChildren, + }); + return rtn; }); this.endIconButtons = atom((get) => { + if (get(this.hideNav)) { + return null; + } const url = get(this.url); return [ { @@ -308,7 +319,7 @@ export class WebViewModel implements ViewModel { url = ""; } - if (/^(http|https):/.test(url)) { + if (/^(http|https|file):/.test(url)) { // If the URL starts with http: or https:, return it as is return url; } @@ -494,6 +505,7 @@ export class WebViewModel implements ViewModel { zoomSubMenu.push(makeZoomFactorMenuItem("175%", 1.75)); zoomSubMenu.push(makeZoomFactorMenuItem("200%", 2)); + const isNavHidden = globalStore.get(this.hideNav); return [ { label: "Set Block Homepage", @@ -506,6 +518,16 @@ export class WebViewModel implements ViewModel { { type: "separator", }, + { + label: isNavHidden ? "Un-Hide Navigation" : "Hide Navigation", + click: () => + fireAndForget(() => { + return RpcApi.SetMetaCommand(TabRpcClient, { + oref: WOS.makeORef("block", this.blockId), + meta: { "web:hidenav": !isNavHidden }, + }); + }), + }, { label: "Set Zoom Factor", submenu: zoomSubMenu, diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts index 10b0c8643..ddf73c166 100644 --- a/frontend/types/gotypes.d.ts +++ b/frontend/types/gotypes.d.ts @@ -494,6 +494,7 @@ declare global { "term:vdomtoolbarblockid"?: string; "term:transparency"?: number; "web:zoom"?: number; + "web:hidenav"?: boolean; "markdown:fontsize"?: number; "markdown:fixedfontsize"?: number; "vdom:*"?: boolean; diff --git a/pkg/waveobj/metaconsts.go b/pkg/waveobj/metaconsts.go index 6b65249b6..d1778377d 100644 --- a/pkg/waveobj/metaconsts.go +++ b/pkg/waveobj/metaconsts.go @@ -96,6 +96,7 @@ const ( MetaKey_TermTransparency = "term:transparency" MetaKey_WebZoom = "web:zoom" + MetaKey_WebHideNav = "web:hidenav" MetaKey_MarkdownFontSize = "markdown:fontsize" MetaKey_MarkdownFixedFontSize = "markdown:fixedfontsize" diff --git a/pkg/waveobj/wtypemeta.go b/pkg/waveobj/wtypemeta.go index bbf30cffb..a2c313c31 100644 --- a/pkg/waveobj/wtypemeta.go +++ b/pkg/waveobj/wtypemeta.go @@ -96,7 +96,8 @@ type MetaTSType struct { TermVDomToolbarBlockId string `json:"term:vdomtoolbarblockid,omitempty"` TermTransparency *float64 `json:"term:transparency,omitempty"` // default 0.5 - WebZoom float64 `json:"web:zoom,omitempty"` + WebZoom float64 `json:"web:zoom,omitempty"` + WebHideNav *bool `json:"web:hidenav,omitempty"` MarkdownFontSize float64 `json:"markdown:fontsize,omitempty"` MarkdownFixedFontSize float64 `json:"markdown:fixedfontsize,omitempty"`