|
15 | 15 | block-size: 100dvh; |
16 | 16 | margin: 0; |
17 | 17 | } |
| 18 | + #editor-component { |
| 19 | + flex: 1 1 auto; |
| 20 | + display: flex; |
| 21 | + min-block-size: 0; |
| 22 | + } |
| 23 | + .sample-projects-bar { |
| 24 | + flex: 0 0 auto; |
| 25 | + display: flex; |
| 26 | + align-items: center; |
| 27 | + gap: 12px; |
| 28 | + padding: 10px 12px; |
| 29 | + border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
| 30 | + background: #fff; |
| 31 | + color: #111; |
| 32 | + font-size: 14px; |
| 33 | + font-family: sans-serif; |
| 34 | + line-height: 1.4; |
| 35 | + } |
| 36 | + .sample-projects-bar a { |
| 37 | + color: #005fb8; |
| 38 | + text-decoration: underline; |
| 39 | + } |
18 | 40 | .editor-wc { |
19 | 41 | flex: 1 1 auto; |
20 | 42 | display: flex; |
|
35 | 57 | /> |
36 | 58 | </head> |
37 | 59 | <body> |
| 60 | + <div class="sample-projects-bar" id="sample-projects-bar"> |
| 61 | + <span>Load Sample Projects:</span> |
| 62 | + <a href="#" data-project="blank-html-starter">blank-html-starter</a> |
| 63 | + <a href="#" data-project="cool-html">cool-html</a> |
| 64 | + <a href="#" data-project="blank-python-starter">blank-python-starter</a> |
| 65 | + <a href="#" data-project="cool-python">cool-python</a> |
| 66 | + </div> |
| 67 | + <div id="editor-component"></div> |
38 | 68 | <p id="results"></p> |
39 | 69 | <p id="project-identifier"></p> |
| 70 | + <button id="run-button">Run code</button> |
40 | 71 | </body> |
41 | 72 |
|
| 73 | + |
42 | 74 | <script> |
43 | 75 | document.addEventListener("DOMContentLoaded", (e) => { |
44 | | - const webComp = document.createElement("editor-wc"); |
45 | 76 | const queryParams = new URLSearchParams(window.location.search); |
46 | | - |
47 | | - // sidebar |
48 | | - webComp.setAttribute("with_projectbar", "true"); |
49 | | - webComp.setAttribute("with_sidebar", "true"); |
50 | | - webComp.setAttribute( |
51 | | - "sidebar_options", |
52 | | - JSON.stringify([ |
53 | | - "instructions", |
54 | | - "file", |
55 | | - "images", |
56 | | - "download", |
57 | | - "settings", |
58 | | - "info", |
59 | | - ]) |
60 | | - ); |
61 | | - |
62 | | - // Pre-set the code attribute with an empty string. |
63 | | - webComp.setAttribute("code", ""); |
64 | | - webComp.setAttribute("class", "editor-wc"); |
65 | | - webComp.setAttribute("host_styles", JSON.stringify([])); |
66 | | - // Set any attribute you like in the query string, including class, style, hidden, script, etc. |
67 | | - queryParams.forEach((value, key) => { |
68 | | - webComp.setAttribute(key, value); |
69 | | - }); |
| 77 | + let webComp; |
70 | 78 |
|
71 | 79 | // subscribe to the 'codeChanged' custom event which is pushed by the project react component |
72 | 80 | document.addEventListener("editor-codeChanged", function (e) { |
|
76 | 84 | }); |
77 | 85 |
|
78 | 86 | document.addEventListener("editor-runCompleted", (e) => { |
79 | | - // const error = webComp.isErrorFree |
80 | 87 | console.log(e.detail); |
81 | 88 | document.getElementById("results").innerText = JSON.stringify(e.detail); |
82 | 89 | }); |
|
85 | 92 | document.getElementById("project-identifier").innerText = e.detail; |
86 | 93 | }); |
87 | 94 |
|
88 | | - const body = document.getElementsByTagName("body")[0]; |
89 | | - body.prepend(webComp); |
| 95 | + const sampleBar = document.getElementById("sample-projects-bar"); |
| 96 | + const editorContainer = document.getElementById("editor-component"); |
| 97 | + |
| 98 | + const createWebComponent = (initialProject = null) => { |
| 99 | + const newWebComp = document.createElement("editor-wc"); |
| 100 | + |
| 101 | + newWebComp.setAttribute("with_projectbar", "true"); |
| 102 | + newWebComp.setAttribute("with_sidebar", "true"); |
| 103 | + newWebComp.setAttribute( |
| 104 | + "sidebar_options", |
| 105 | + JSON.stringify([ |
| 106 | + "instructions", |
| 107 | + "file", |
| 108 | + "images", |
| 109 | + "download", |
| 110 | + "settings", |
| 111 | + "info", |
| 112 | + ]) |
| 113 | + ); |
| 114 | + |
| 115 | + newWebComp.setAttribute("code", ""); |
| 116 | + newWebComp.setAttribute("class", "editor-wc"); |
| 117 | + newWebComp.setAttribute("host_styles", JSON.stringify([])); |
| 118 | + |
| 119 | + queryParams.forEach((value, key) => { |
| 120 | + newWebComp.setAttribute(key, value); |
| 121 | + }); |
| 122 | + |
| 123 | + if (initialProject) { |
| 124 | + newWebComp.setAttribute("initial_project", initialProject); |
| 125 | + } |
| 126 | + |
| 127 | + return newWebComp; |
| 128 | + }; |
| 129 | + |
| 130 | + webComp = createWebComponent(); |
| 131 | + editorContainer.prepend(webComp); |
| 132 | + |
| 133 | + const loadSampleProjectByName = async (projectName) => { |
| 134 | + const url = new URL(`projects/${projectName}.json`, window.location.href); |
| 135 | + const res = await fetch(url, { cache: "no-store" }); |
| 136 | + const project = await res.text(); |
| 137 | + |
| 138 | + webComp.parentNode.removeChild(webComp); |
| 139 | + webComp = createWebComponent(project); |
| 140 | + editorContainer.prepend(webComp); |
| 141 | + }; |
| 142 | + |
| 143 | + sampleBar.addEventListener("click", (event) => { |
| 144 | + const link = event.target.closest("a[data-project]"); |
| 145 | + if (!link || !sampleBar.contains(link)) return; |
| 146 | + event.preventDefault(); |
| 147 | + loadSampleProjectByName(link.dataset.project); |
| 148 | + }); |
90 | 149 |
|
91 | | - const runButton = document.createElement("button"); |
92 | | - const runButtonText = document.createTextNode("Run code"); |
93 | | - runButton.appendChild(runButtonText); |
94 | | - runButton.onclick = (event) => { |
| 150 | + document.getElementById('run-button').onclick = (event) => { |
95 | 151 | webComp.rerunCode(); |
96 | 152 | }; |
97 | | - body.append(runButton); |
98 | 153 | }); |
99 | 154 | </script> |
100 | 155 | </html> |
0 commit comments