Skip to content

Commit cad87e6

Browse files
fpligerfpliger
committed
fix pyscript output when nothing is specified
1 parent 4a2057b commit cad87e6

File tree

2 files changed

+14
-44
lines changed

2 files changed

+14
-44
lines changed

‎pyscriptjs/examples/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" tar
6666
<h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_blank”>TODO App</a></h2>
6767
<p>Demo showing how would a Simple TODO App would look like in PyScript</code> tag</p>
6868

69+
<h2 class="text-2xl font-bold text-blue-600"><a href="./todo-pylist.html" target=”_blank”>PyScript Native TODO App</a></h2>
70+
<p>Demo showing how would a Simple TODO App would look like only using PyScript native elements</code> tag</p>
71+
6972
<h2 class="text-2xl font-bold text-blue-600"><a href="./webgl/raycaster/index.html" target=”_blank”>Webgl Icosahedron Example</a></h2>
7073
<p>Demo showing how a Simple Webgl scene would work in PyScript</code> tag</p>
7174
</body>

‎pyscriptjs/src/components/pyscript.ts

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -121,50 +121,9 @@ export class PyScript extends BaseEvalElement {
121121
})
122122

123123
let mainDiv = document.createElement('div');
124-
addClasses(mainDiv, ["parentBox", "flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"])
124+
addClasses(mainDiv, ["parentBox", "flex", "flex-col", 'mx-8'])
125125
// add Editor to main PyScript div
126126

127-
// Butons DIV
128-
var eDiv = document.createElement('div');
129-
addClasses(eDiv, "buttons-box relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
130-
eDiv.setAttribute("role", "group");
131-
132-
// Play Button
133-
this.btnRun = document.createElement('button');
134-
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
135-
let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"];
136-
addClasses(this.btnRun, buttonClasses);
137-
addClasses(this.btnRun, ["bg-green-500"])
138-
eDiv.appendChild(this.btnRun);
139-
140-
this.btnRun.onclick = wrap(this);
141-
142-
function wrap(el: any){
143-
async function evaluatePython() {
144-
el.evaluate()
145-
}
146-
return evaluatePython;
147-
}
148-
149-
// Settings button
150-
this.btnConfig = document.createElement('button');
151-
this.btnConfig.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
152-
this.btnConfig.onclick = function toggleNavBar(evt){
153-
console.log('clicked');
154-
componentDetailsNavOpen.set(!propertiesNavOpen);
155-
156-
currentComponentDetails.set([
157-
{key: "auto-generate", value: true},
158-
{key:"output", value: "default"},
159-
{key: "source", value: "self"}
160-
])
161-
}
162-
163-
addClasses(this.btnConfig, buttonClasses);
164-
addClasses(this.btnConfig, ["bg-blue-500"])
165-
eDiv.appendChild(this.btnConfig);
166-
167-
mainDiv.appendChild(eDiv);
168127

169128
if (this.hasAttribute('output')) {
170129
this.errorElement = this.outputElement = document.getElementById(this.getAttribute('output'));
@@ -179,10 +138,15 @@ export class PyScript extends BaseEvalElement {
179138
}else{
180139
// In this case neither output or std-out have been provided so we need
181140
// to create a new output div to output to
141+
142+
// Let's check if we have an id first and create one if not
143+
if (!this.id){
144+
this.id = `pyid-${Date.now()}`
145+
}
182146
this.outputElement = document.createElement('div');
183-
this.outputElement.classList.add("output");
147+
// this.outputElement.classList.add("output");
184148
this.outputElement.hidden = true;
185-
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
149+
this.outputElement.id = this.id + "-" + this.childElementCount;
186150

187151
// add the output div id if there's not output pre-defined
188152
mainDiv.appendChild(this.outputElement);
@@ -195,9 +159,12 @@ export class PyScript extends BaseEvalElement {
195159
}
196160
}
197161

162+
console.log('MOOOOOODE', currentMode)
198163
if (currentMode=="edit"){
164+
// TODO: We need to build a plan for this
199165
this.appendChild(mainDiv);
200166
}else{
167+
this.appendChild(mainDiv);
201168
addToScriptsQueue(this);
202169
}
203170

0 commit comments

Comments
 (0)