Skip to content

Commit

Permalink
added a true navigate back button that properly clears the content an…
Browse files Browse the repository at this point in the history 
…d is smoother expreience (#110)
  • Loading branch information
@Skarlso
Skarlso authored Oct 3, 2024
1 parent 4df1543 commit 4259e16
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 30 deletions.
4 changes: 3 additions & 1 deletion wasm/app.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ type crdView struct {
content []byte
comment bool
minimal bool

navigateBackOnClick func(ctx app.Context, _ app.Event)
}

// Version wraps a top level version resource which contains the underlying openAPIV3Schema.
Expand Down Expand Up @@ -195,7 +197,7 @@ func (h *crdView) Render() app.UI {
return wrapper.Body(
app.Script().Src("https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"),
app.Script().Src("https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"),
&header{},
&header{titleOnClick: h.navigateBackOnClick, hidden: false},
container,
)
}
Expand Down
35 changes: 27 additions & 8 deletions wasm/index.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,36 @@ type title struct {
}

func (b *title) Render() app.UI {
return app.Div().Class("title").Text("CRD Parser").OnClick(b.OnClick)
}

func (b *title) OnClick(ctx app.Context, _ app.Event) {
ctx.Reload()
return app.Div().Class("title").Text("CRD Parser")
}

// header is the site header.
type header struct {
app.Compo

titleOnClick func(ctx app.Context, _ app.Event)
hidden bool
}

type backButton struct {
app.Compo

hidden bool
onClick func(ctx app.Context, _ app.Event)
}

func (b *backButton) Render() app.UI {
return app.Ul().Body(
app.Li().Body(
app.A().Href("#").Body(
app.I().Class("fa fa-arrow-left fa-2x")),
)).Hidden(b.hidden).OnClick(b.onClick)
}

func (h *header) Render() app.UI {
return app.Header().Body(app.Nav().Body(
&title{},
&backButton{onClick: h.titleOnClick, hidden: h.hidden},
app.Ul().Body(
app.Li().Body(
app.A().Href("https://github.com/Skarlso/crd-to-sample-yaml").Target("_blank").Body(
Expand Down Expand Up @@ -200,19 +215,23 @@ func (i *index) OnMount(_ app.Context) {
i.isMounted = true
}

func (i *index) NavBackOnClick(_ app.Context, _ app.Event) {
i.content = nil
}

func (i *index) Render() app.UI {
// Prevent double rendering components.
if i.isMounted {
return app.Main().Body(app.Div().Class("container").Body(func() app.UI {
if i.err != nil {
return app.Div().Class("container").Body(&header{}, i.buildError())
return app.Div().Class("container").Body(&header{titleOnClick: i.NavBackOnClick, hidden: true}, i.buildError())
}

if i.content != nil {
return &crdView{content: i.content, comment: i.comments, minimal: i.minimal}
return &crdView{content: i.content, comment: i.comments, minimal: i.minimal, navigateBackOnClick: i.NavBackOnClick}
}

return app.Div().Class("container").Body(&header{}, &form{formHandler: i.OnClick, checkHandlerComment: i.OnCheckComment, checkHandlerMinimal: i.OnCheckMinimal})
return app.Div().Class("container").Body(&header{titleOnClick: i.NavBackOnClick, hidden: true}, &form{formHandler: i.OnClick, checkHandlerComment: i.OnCheckComment, checkHandlerMinimal: i.OnCheckMinimal})
}()))
}

Expand Down
18 changes: 9 additions & 9 deletions wasm/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@
<meta name="theme-color" content="#2d2c2c">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
<meta property="og:url" content="https://">
<meta property="og:title" content="Preview CRDs">
<meta content="Preview CRDs" property="og:title">
<meta property="og:description" content>
<meta property="og:type" content="website">
<meta property="og:image" content="https://">
<title>Preview CRDs</title>
<link href="/app.css" type="text/css" rel="preload" as="style">
<link type="text/css" rel="preload" as="style" href="/web/css/alert.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" type="text/css" rel="preload" as="style">
<link as="style" href="/web/css/alert.css" type="text/css" rel="preload">
<link as="style" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" type="text/css" rel="preload">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css" rel="preload" as="style">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/cores/halfmoon.modern.css" type="text/css" rel="preload" as="style">
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="preload" as="style">
<link rel="icon" href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg">
<link href="/web/img/logo.png" rel="apple-touch-icon">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="/web/img/logo.png">
<link href="/manifest.webmanifest" rel="manifest">
<link href="/app.css" type="text/css" rel="stylesheet">
<link href="/web/css/alert.css" type="text/css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/cores/halfmoon.modern.css" type="text/css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="/wasm_exec.js" defer></script>
<script defer src="/wasm_exec.js"></script>
<script defer src="/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
Expand Down Expand Up @@ -64,7 +64,7 @@
<main></main>
<aside id="app-wasm-loader" class="goapp-app-info">
<img id="app-wasm-loader-icon" class="goapp-logo goapp-spin" alt="wasm loader icon" src="/web/img/logo.png">
<p class="goapp-label" id="app-wasm-loader-label">0%</p>
<p id="app-wasm-loader-label" class="goapp-label">0%</p>
</aside>
</body>
</html>
24 changes: 12 additions & 12 deletions wasm/share.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
<!DOCTYPE html>
<html data-bs-core="modern" data-bs-theme="dark" lang="en">
<html lang="en" data-bs-core="modern" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="author" content="Gergely Brautigam">
<meta content name="description">
<meta name="description" content>
<meta name="theme-color" content="#2d2c2c">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
<meta property="og:url" content="https:///share">
<meta property="og:title" content="Preview CRDs">
<meta content="Preview CRDs" property="og:title">
<meta property="og:description" content>
<meta content="website" property="og:type">
<meta property="og:type" content="website">
<meta property="og:image" content="https://">
<title>Preview CRDs</title>
<link as="style" href="/app.css" type="text/css" rel="preload">
<link type="text/css" rel="preload" as="style" href="/web/css/alert.css">
<link type="text/css" rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css">
<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css">
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" type="text/css">
<link as="style" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css" rel="preload">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/cores/halfmoon.modern.css" type="text/css" rel="preload" as="style">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="preload" as="style">
<link rel="icon" href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg">
<link rel="apple-touch-icon" href="/web/img/logo.png">
<link rel="manifest" href="/manifest.webmanifest">
<link href="/app.css" type="text/css" rel="stylesheet">
<link href="/web/css/alert.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/cores/halfmoon.modern.css" type="text/css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<script defer src="/wasm_exec.js"></script>
<script defer src="/app.js"></script>
<script src="/app.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<meta charset="utf-8">
Expand Down Expand Up @@ -66,8 +66,8 @@
<h4 class="alert-heading">Oops!</h4>
url parameter has to be define in the following format: /share?url=https://example.com/crd.yaml
</div>
<aside id="app-wasm-loader" class="goapp-app-info">
<img alt="wasm loader icon" src="/web/img/logo.png" id="app-wasm-loader-icon" class="goapp-logo goapp-spin">
<aside class="goapp-app-info" id="app-wasm-loader">
<img src="/web/img/logo.png" id="app-wasm-loader-icon" class="goapp-logo goapp-spin" alt="wasm loader icon">
<p id="app-wasm-loader-label" class="goapp-label">0%</p>
</aside>
</body>
Expand Down
Binary file modified wasm/web/app.wasm
View file
Binary file not shown.

0 comments on commit 4259e16

Please sign in to comment.