diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index 38ca506b..53099a20 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -20,13 +20,9 @@ -
-
-
-
-
-
- - + + +
+ diff --git a/pyscriptjs/examples/utils.py b/pyscriptjs/examples/utils.py new file mode 100644 index 00000000..2a48a4fe --- /dev/null +++ b/pyscriptjs/examples/utils.py @@ -0,0 +1,13 @@ +from datetime import datetime as dt + +def format_date(dt_, fmt = "%m/%d/%Y, %H:%M:%S"): + return dt_.strftime(fmt) + +def now(fmt = "%m/%d/%Y, %H:%M:%S"): + return format_date(dt.now(), fmt) + +def remove_class(element, className): + element.element.classList.remove("line-through") + +def add_class(element, className): + element.element.classList.add("line-through") \ No newline at end of file diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts new file mode 100644 index 00000000..43c18533 --- /dev/null +++ b/pyscriptjs/src/components/pybox.ts @@ -0,0 +1,69 @@ +import { addClasses } from '../utils'; + +export class PyBox extends HTMLElement { + shadow: ShadowRoot; + wrapper: HTMLElement; + theme: string; + widths: Array; + + constructor() { + super(); + + // attach shadow so we can preserve the element original innerHtml content + this.shadow = this.attachShadow({ mode: 'open'}); + + this.wrapper = document.createElement('slot'); + this.shadow.appendChild(this.wrapper); + } + + + connectedCallback() { + let mainDiv = document.createElement('div'); + addClasses(mainDiv, ["flex"]) + + // Hack: for some reason when moving children, the editor box duplicates children + // meaning that we end up with 2 editors, if there's a inside the + // so, if we have more than 2 children with the cm-editor class, we remove one of them + while (this.childNodes.length > 0) { + console.log(this.firstChild); + if ( this.firstChild.nodeName == "PY-REPL" ){ + // in this case we need to remove the child and craete a new one from scratch + let replDiv = document.createElement('div'); + // we need to put the new repl inside a div so that if the repl has auto-generate true + // it can replicate itself inside that constrained div + replDiv.appendChild(this.firstChild.cloneNode()); + mainDiv.appendChild(replDiv); + this.firstChild.remove(); + } + else{ + if ( this.firstChild.nodeName != "#text" ){ + mainDiv.appendChild(this.firstChild); + }else{ + this.firstChild.remove() + } + } + } + + // now we need to set widths + this.widths = [] + if (this.hasAttribute('widths')) { + for (let w of this.getAttribute('widths').split(";")) { + this.widths.push(`w-${w}`); + } + }else{ + for (let el of mainDiv.childNodes) { + this.widths.push(`w-1/${mainDiv.childNodes.length}`); + } + } + + for (let i in this.widths) { + // @ts-ignore + addClasses(mainDiv.childNodes[parseInt(i)], [this.widths[i]]); + } + + this.appendChild(mainDiv); + console.log('py-box connected'); + } + } + + \ No newline at end of file diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts index c0853dac..bd4f69d6 100644 --- a/pyscriptjs/src/main.ts +++ b/pyscriptjs/src/main.ts @@ -2,12 +2,14 @@ import App from "./App.svelte"; import { PyScript } from "./components/pyscript"; import { PyRepl } from "./components/pyrepl"; -import { PyEnv } from "./components/pyenv" +import { PyEnv } from "./components/pyenv"; +import { PyBox } from "./components/pybox"; let xPyScript = customElements.define('py-script', PyScript); let xPyRepl = customElements.define('py-repl', PyRepl); let xPyEnv = customElements.define('py-env', PyEnv); +let xPyBox = customElements.define('py-box', PyBox); const app = new App({