alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

replace text with gears and play icons. Also add potential new py-reple tag and possible attributes

Browse Source
This commit is contained in:
Fabio Pliger
2022-03-08 11:36:13 -06:00
parent 50b632555c
commit 5831f9a99f
2 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pyscriptjs/src/Main.svelte
View File

@@ -18,11 +18,11 @@
<!-- Replace with your content --> <!-- Replace with your content -->
<div class="px-4 py-6 sm:px-0"> <div class="px-4 py-6 sm:px-0">
<div id="dashboard" class="border-4 border-dashed border-gray-200 rounded-lg h-96"> <div id="dashboard" class="border-4 border-dashed border-gray-200 rounded-lg h-96">
<py-script> <py-repl>
sum([1, 2, 3, 4, 5]) <py-script auto-generate target="page:mydiv" source='./mycode.py'>
</py-script> sum([1, 2, 3, 4, 5])
</py-script>
</py-repl>
</div> </div>
</div> </div>

52
pyscriptjs/src/components/pyscript.ts
View File

@@ -49,11 +49,7 @@ export class PyScript extends HTMLElement {
// add an extra div where we can attach the codemirror editor // add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div'); this.editorNode = document.createElement('div');
this.shadow.appendChild(this.wrapper); this.shadow.appendChild(this.wrapper);
// this.shadow.appendChild(this.editorNode);
// this.code = this.wrapper.innerHTML;
console.log("Woooohooo");
} }
connectedCallback() { connectedCallback() {
@@ -94,28 +90,14 @@ export class PyScript extends HTMLElement {
addClasses(eDiv, "flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" ")) addClasses(eDiv, "flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
eDiv.setAttribute("role", "group"); eDiv.setAttribute("role", "group");
// RUN BUTTON // Play Button
this.btnRun = document.createElement('button'); this.btnRun = document.createElement('button');
this.btnRun.innerHTML = "run"; 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>';
let buttonClasses = ["mr-2", "block", "py-2", "px-8", "rounded-full"]; let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"];
addClasses(this.btnRun, buttonClasses); addClasses(this.btnRun, buttonClasses);
addClasses(this.btnRun, ["text-green-100", "bg-green-500"]) addClasses(this.btnRun, ["bg-green-500"])
eDiv.appendChild(this.btnRun); eDiv.appendChild(this.btnRun);
this.btnConfig = document.createElement('button');
this.btnConfig.innerHTML = "config";
addClasses(this.btnConfig, buttonClasses);
addClasses(this.btnConfig, ["text-blue-100", "bg-blue-500"])
eDiv.appendChild(this.btnConfig);
this.editorOut = document.createElement('div');
this.editorOut.classList.add("output");
this.editorOut.hidden = true;
mainDiv.appendChild(eDiv);
mainDiv.appendChild(this.editorOut);
this.appendChild(mainDiv);
this.btnRun.onclick = wrap(this); this.btnRun.onclick = wrap(this);
function wrap(el: any){ function wrap(el: any){
@@ -125,7 +107,23 @@ export class PyScript extends HTMLElement {
return evaluatePython; return evaluatePython;
} }
// Settings button
this.btnConfig = document.createElement('button');
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>';
addClasses(this.btnConfig, buttonClasses);
addClasses(this.btnConfig, ["bg-blue-500"])
eDiv.appendChild(this.btnConfig);
// Editor Div
this.editorOut = document.createElement('div');
this.editorOut.classList.add("output");
this.editorOut.hidden = true;
mainDiv.appendChild(eDiv);
mainDiv.appendChild(this.editorOut);
this.appendChild(mainDiv);
console.log('connected'); console.log('connected');
} }
@@ -146,8 +144,12 @@ export class PyScript extends HTMLElement {
this.addToOutput(output); this.addToOutput(output);
} }
// debugger if (this.hasAttribute('auto-generate') && this.parentElement.lastChild === this) {
} catch (err) { const newPyscript = document.createElement("py-script");
newPyscript.setAttribute('auto-generate', null);
this.parentElement.appendChild(newPyscript);
}
} catch (err) {
this.addToOutput(err); this.addToOutput(err);
} }
} }