Skip to content

Commit 786626a

Browse files
grantnelson-wfgrantnelson-wf
authored
Merge pull request #81 from grantnelson-wf/fixFirstHashLoad
Fix icon and fix initial loading from hash
2 parents c46b032 + cb2dc17 commit 786626a

8 files changed

Lines changed: 642 additions & 499 deletions

File tree

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<meta http-equiv="refresh" content="0;url=https://github.com/gopherjs/gopherjs">
44
</head>
55
<body>
6-
See <a href="https://github.com/gopherjs/gopherjs">GopherJS on GitHub</a>
6+
<ul>
7+
<li>See <a href="https://github.com/gopherjs/gopherjs">GopherJS on GitHub</a></li>
8+
<li>See <a href="./playground">GopherJS Playground</a></li>
9+
</ul>
710
</body>
811
</html>

‎playground/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,10 @@ Then open <http://localhost:8080?debug=true&local=true>.
4444
The `debug` query will enable debugging for react and verbose output.
4545

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

5052
There are a few ways to check changes. When working on the playground itself
5153
it may be simpliest to run `gopherjs build ./playground.go && gopherjs serve`

‎playground/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<title>GopherJS Playground</title>
66
<link rel="stylesheet" type="text/css" href="playground.css">
7-
<link rel="icon" href="/favicon-gopherjs.png" sizes="any">
7+
<link rel="icon" href="favicon-gopherjs.png" sizes="any">
88
<script type="module">
99
"use strict";
1010
import React from "https://esm.sh/react@19/?dev";

‎playground/internal/page/banner.go‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ func bannerComponent(props react.Props) *react.Element {
4444

4545
version, setVersion = react.UseState(`--`)
4646
shareHash, setShareHash = react.UseState(``)
47+
prevShareHashRef = react.UseRefWith(``)
4748
runButtonRef = react.UseRef()
4849
shareUrlRef = react.UseRef()
4950
lightTheme, setLightTheme = react.UseStateLazy(getDefaultToLightTheme)
@@ -66,7 +67,17 @@ func bannerComponent(props react.Props) *react.Element {
6667

6768
// This updates the top window's URL hash when the share hash state has changed.
6869
react.UseEffect(func() {
69-
url.SetUrlHash(shareHash)
70+
// if shareHash is empty, then either this is the initial state or
71+
// clearing out the hash because of a code change
72+
if shareHash == `` {
73+
prevHash := prevShareHashRef.Current()
74+
if prevHash != `` && url.GetUrlHash() == prevHash {
75+
url.SetUrlHash(``)
76+
}
77+
} else {
78+
url.SetUrlHash(shareHash)
79+
}
80+
prevShareHashRef.SetCurrent(shareHash)
7081
}, []any{shareHash})
7182

7283
onFormatClick := react.UseCallback(func() {
@@ -111,7 +122,7 @@ func bannerComponent(props react.Props) *react.Element {
111122
// based on the URL Hash, determine which UI elements to show.
112123
shareUrlClass := `share-url-hidden`
113124
snippetsClass := `snippets-drop-down-show`
114-
selSnippet := snippets.DefaultName
125+
selSnippet := ``
115126
shownSharedUrl := ``
116127
if len(shareHash) > 0 {
117128
if strings.HasPrefix(shareHash, `#/`) {

‎playground/internal/page/dropDown.go‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,19 @@ func dropDownComponent(props react.Props) *react.Element {
3131
onSelect.Invoke(selected)
3232
}, []any{onSelect})
3333

34-
options := make([]react.Node, len(items))
34+
options := make([]react.Node, len(items)+1)
35+
36+
// Add hidden placeholder option
37+
options[0] = react.CreateElement(`option`, react.Props{}.
38+
Set(`key`, id+`-placeholder`).
39+
Set(`value`, ``).
40+
Set(`disabled`, true).
41+
Set(`hidden`, true),
42+
`—`)
43+
3544
for i, item := range items {
3645
value := item.(string)
37-
options[i] = react.CreateElement(`option`, react.Props{}.
46+
options[i+1] = react.CreateElement(`option`, react.Props{}.
3847
Set(`key`, fmt.Sprintf("%s-%v", id, value)).
3948
Set(`value`, value),
4049
value)

‎playground/internal/page/playground.go‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ func playgroundComponent(props react.Props) *react.Element {
8383
bannerRef.Current().SetShareHash(``)
8484
o.AddError(err)
8585
} else {
86+
// If loading default (empty hash), set to #Hello for consistency
87+
if hash == `` {
88+
hash = `#` + snippets.DefaultName
89+
}
8690
bannerRef.Current().SetShareHash(hash)
8791
}
8892
// even on error, set the code so the default code is shown.

‎playground/playground.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
--color-share-url-background: #EED;
2828
--color-share-url-boarder: #CCC;
2929
--color-share-url-text: black;
30+
--color-share-url-placeholder: #888;
3031

3132
--color-code-text: black;
3233
--color-code-background: #F5ECE3;
@@ -87,6 +88,7 @@
8788
--color-share-url-background: #333;
8889
--color-share-url-boarder: #50B7E0;
8990
--color-share-url-text: #7CF;
91+
--color-share-url-placeholder: #007D9C;
9092

9193
--color-code-text: #F0F1F2;
9294
--color-code-background: #253443;
@@ -310,6 +312,10 @@ html, body {
310312
display: none;
311313
}
312314

315+
#snippets-drop-down:has(option[value=""]:checked) {
316+
color: var(--color-share-url-placeholder);
317+
}
318+
313319
/* The panel that contains everything below the banner */
314320
#code-output-box{
315321
display: flex;

0 commit comments

Comments
 (0)