jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-03-12 07:01:10 -04:00
Code Issues Projects Releases Wiki Activity

Merge pull request #16 from anaconda/fpliger/add_pybox

Browse Source 
Add pybox
This commit is contained in:
Fabio Pliger
2022-04-13 14:55:36 -05:00
committed by GitHub
parent d2e27893de 68157dd3c2
commit 0be6667107
4 changed files with 89 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pyscriptjs/examples/repl2.html
View File

@@ -20,13 +20,9 @@
</py-env>
<body>
<div class="w-full h-full">
<div class="flex">
<div class="w-2/3"><py-repl id="my-repl" auto-generate="true" target="output"> </py-repl></div>
<div id="output" class="w-1/3"></div>
</div>
</div>
<py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" target="output"> </py-repl>
<div id="output"></div>
</py-box>
</body>
</html>

13
pyscriptjs/examples/utils.py Normal file
View File

@@ -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")

69
pyscriptjs/src/components/pybox.ts Normal file
View File

@@ -0,0 +1,69 @@
import { addClasses } from '../utils';
export class PyBox extends HTMLElement {
shadow: ShadowRoot;
wrapper: HTMLElement;
theme: string;
widths: Array<string>;
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 <py-repl> inside the <py-box>
// 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');
}
}

4
pyscriptjs/src/main.ts
View File

@@ -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({