diff --git a/pyscriptjs/examples/index.html b/pyscriptjs/examples/index.html index 02e4ed8..f35beaa 100644 --- a/pyscriptjs/examples/index.html +++ b/pyscriptjs/examples/index.html @@ -66,6 +66,9 @@

TODO App

Demo showing how would a Simple TODO App would look like in PyScript tag

+

PyScript Native TODO App

+

Demo showing how would a Simple TODO App would look like only using PyScript native elements tag

+

Webgl Icosahedron Example

Demo showing how a Simple Webgl scene would work in PyScript tag

diff --git a/pyscriptjs/examples/simple_script.html b/pyscriptjs/examples/simple_script.html index 33afdae..70fe945 100644 --- a/pyscriptjs/examples/simple_script.html +++ b/pyscriptjs/examples/simple_script.html @@ -13,11 +13,10 @@ -
- -from datetime import datetime -now = datetime.now() -now.strftime("%m/%d/%Y, %H:%M:%S") + + from datetime import datetime + now = datetime.now() + now.strftime("%m/%d/%Y, %H:%M:%S") diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts index b1d1f6e..f40b0be 100644 --- a/pyscriptjs/src/components/pyscript.ts +++ b/pyscriptjs/src/components/pyscript.ts @@ -121,50 +121,9 @@ export class PyScript extends BaseEvalElement { }) let mainDiv = document.createElement('div'); - addClasses(mainDiv, ["parentBox", "flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"]) + addClasses(mainDiv, ["parentBox", "flex", "flex-col", 'mx-8']) // add Editor to main PyScript div - // Butons DIV - var eDiv = document.createElement('div'); - 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(" ")) - eDiv.setAttribute("role", "group"); - - // Play Button - this.btnRun = document.createElement('button'); - this.btnRun.innerHTML = ''; - let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"]; - addClasses(this.btnRun, buttonClasses); - addClasses(this.btnRun, ["bg-green-500"]) - eDiv.appendChild(this.btnRun); - - this.btnRun.onclick = wrap(this); - - function wrap(el: any){ - async function evaluatePython() { - el.evaluate() - } - return evaluatePython; - } - - // Settings button - this.btnConfig = document.createElement('button'); - this.btnConfig.innerHTML = ''; - this.btnConfig.onclick = function toggleNavBar(evt){ - console.log('clicked'); - componentDetailsNavOpen.set(!propertiesNavOpen); - - currentComponentDetails.set([ - {key: "auto-generate", value: true}, - {key:"output", value: "default"}, - {key: "source", value: "self"} - ]) - } - - addClasses(this.btnConfig, buttonClasses); - addClasses(this.btnConfig, ["bg-blue-500"]) - eDiv.appendChild(this.btnConfig); - - mainDiv.appendChild(eDiv); if (this.hasAttribute('output')) { this.errorElement = this.outputElement = document.getElementById(this.getAttribute('output')); @@ -179,10 +138,15 @@ export class PyScript extends BaseEvalElement { }else{ // In this case neither output or std-out have been provided so we need // to create a new output div to output to + + // Let's check if we have an id first and create one if not + if (!this.id){ + this.id = `pyid-${Date.now()}` + } this.outputElement = document.createElement('div'); - this.outputElement.classList.add("output"); + // this.outputElement.classList.add("output"); this.outputElement.hidden = true; - this.outputElement.id = this.id + "-" + this.getAttribute("exec-id"); + this.outputElement.id = this.id + "-" + this.childElementCount; // add the output div id if there's not output pre-defined mainDiv.appendChild(this.outputElement); @@ -196,8 +160,10 @@ export class PyScript extends BaseEvalElement { } if (currentMode=="edit"){ + // TODO: We need to build a plan for this this.appendChild(mainDiv); }else{ + this.appendChild(mainDiv); addToScriptsQueue(this); }