Skip to content

Fix icon and fix initial loading from hash #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
grantnelson-wf wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix icon and fix initial loading from hash #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
<meta http-equiv="refresh" content="0;url=https://github.com/gopherjs/gopherjs">
</head>
<body>
See <a href="https://github.com/gopherjs/gopherjs">GopherJS on GitHub</a>
<ul>
<li>See <a href="https://github.com/gopherjs/gopherjs">GopherJS on GitHub</a></li>
<li>See <a href="./playground">GopherJS Playground</a></li>
</ul>
</body>
</html>
6 changes: 4 additions & 2 deletions playground/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@ Then open <http://localhost:8080?debug=true&local=true>.
The `debug` query will enable debugging for react and verbose output.

If running locally or from a fork, trying to access the remote store will
fail with a a CORS error. Use the `local` query to make the snippet store
(used when clicking "Share" or loading with a shared url) use local cache only.
fail with a a CORS error. Read how to run the snippet-store locally at
<https://github.com/gopherjs/snippet-store>. Or you can use the `local` query
to make the snippet store (used when clicking "Share" or loading with a shared url)
use local cache only.

There are a few ways to check changes. When working on the playground itself
it may be simpliest to run `gopherjs build ./playground.go && gopherjs serve`
Expand Down
2 changes: 1 addition & 1 deletion playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<title>GopherJS Playground</title>
<link rel="stylesheet" type="text/css" href="playground.css">
<link rel="icon" href="/favicon-gopherjs.png" sizes="any">
<link rel="icon" href="favicon-gopherjs.png" sizes="any">
<script type="module">
"use strict";
import React from "https://esm.sh/react@19/?dev";
Expand Down
15 changes: 13 additions & 2 deletions playground/internal/page/banner.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ func bannerComponent(props react.Props) *react.Element {

version, setVersion = react.UseState(`--`)
shareHash, setShareHash = react.UseState(``)
prevShareHashRef = react.UseRefWith(``)
runButtonRef = react.UseRef()
shareUrlRef = react.UseRef()
lightTheme, setLightTheme = react.UseStateLazy(getDefaultToLightTheme)
Expand All @@ -66,7 +67,17 @@ func bannerComponent(props react.Props) *react.Element {

// This updates the top window's URL hash when the share hash state has changed.
react.UseEffect(func() {
url.SetUrlHash(shareHash)
// if shareHash is empty, then either this is the initial state or
// clearing out the hash because of a code change
if shareHash == `` {
prevHash := prevShareHashRef.Current()
if prevHash != `` && url.GetUrlHash() == prevHash {
url.SetUrlHash(``)
}
} else {
url.SetUrlHash(shareHash)
}
prevShareHashRef.SetCurrent(shareHash)
}, []any{shareHash})

onFormatClick := react.UseCallback(func() {
Expand Down Expand Up @@ -111,7 +122,7 @@ func bannerComponent(props react.Props) *react.Element {
// based on the URL Hash, determine which UI elements to show.
shareUrlClass := `share-url-hidden`
snippetsClass := `snippets-drop-down-show`
selSnippet := snippets.DefaultName
selSnippet := ``
shownSharedUrl := ``
if len(shareHash) > 0 {
if strings.HasPrefix(shareHash, `#/`) {
Expand Down
13 changes: 11 additions & 2 deletions playground/internal/page/dropDown.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,19 @@ func dropDownComponent(props react.Props) *react.Element {
onSelect.Invoke(selected)
}, []any{onSelect})

options := make([]react.Node, len(items))
options := make([]react.Node, len(items)+1)

// Add hidden placeholder option
options[0] = react.CreateElement(`option`, react.Props{}.
Set(`key`, id+`-placeholder`).
Set(`value`, ``).
Set(`disabled`, true).
Set(`hidden`, true),
`—`)

for i, item := range items {
value := item.(string)
options[i] = react.CreateElement(`option`, react.Props{}.
options[i+1] = react.CreateElement(`option`, react.Props{}.
Set(`key`, fmt.Sprintf("%s-%v", id, value)).
Set(`value`, value),
value)
Expand Down
4 changes: 4 additions & 0 deletions playground/internal/page/playground.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ func playgroundComponent(props react.Props) *react.Element {
bannerRef.Current().SetShareHash(``)
o.AddError(err)
} else {
// If loading default (empty hash), set to #Hello for consistency
if hash == `` {
hash = `#` + snippets.DefaultName
}
bannerRef.Current().SetShareHash(hash)
}
// even on error, set the code so the default code is shown.
Expand Down
6 changes: 6 additions & 0 deletions playground/playground.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
--color-share-url-background: #EED;
--color-share-url-boarder: #CCC;
--color-share-url-text: black;
--color-share-url-placeholder: #888;

--color-code-text: black;
--color-code-background: #F5ECE3;
Expand Down Expand Up @@ -87,6 +88,7 @@
--color-share-url-background: #333;
--color-share-url-boarder: #50B7E0;
--color-share-url-text: #7CF;
--color-share-url-placeholder: #007D9C;

--color-code-text: #F0F1F2;
--color-code-background: #253443;
Expand Down Expand Up @@ -310,6 +312,10 @@ html, body {
display: none;
}

#snippets-drop-down:has(option[value=""]:checked) {
color: var(--color-share-url-placeholder);
}

/* The panel that contains everything below the banner */
#code-output-box{
display: flex;
Expand Down
Loading
Loading