10000 make pybox with accepting widths attribute to customize box children … · rmyers/pyscript@2059df3 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2059df3

Browse files
fpligerfpliger
committed
make pybox with accepting widths attribute to customize box children ration on the page
1 parent fca0ce4 commit 2059df3

File tree

1 file changed

+41
-37
lines changed

1 file changed

+41
-37
lines changed

‎pyscriptjs/src/components/pybox.ts

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,5 @@
11
import { addClasses } from '../utils';
22

3-
// Premise used to connect to the first available pyodide interpreter
4-
// let pyodideReadyPromise;
5-
// let environments;
6-
// let currentMode;
7-
8-
// pyodideLoaded.subscribe(value => {
9-
// pyodideReadyPromise = value;
10-
// });
11-
// loadedEnvironments.subscribe(value => {
12-
// environments = value;
13-
// });
14-
15-
// let propertiesNavOpen;
16-
// componentDetailsNavOpen.subscribe(value => {
17-
// propertiesNavOpen = value;
18-
// });
19-
20-
// mode.subscribe(value => {
21-
// currentMode = value;
22-
// });
23-
24-
253
export class PyBox extends HTMLElement {
264
shadow: ShadowRoot;
275
wrapper: HTMLElement;
@@ -41,27 +19,53 @@ export class PyBox extends HTMLElement {
4119

4220

4321
connectedCallback() {
44-
this.innerHTML = '';
45-
4622
let mainDiv = document.createElement('div');
4723
addClasses(mainDiv, ["flex"])
48-
// add Editor to main PyScript div
49-
debugger
50-
// mainDiv.appendChild(eDiv);
51-
// mainDiv.appendChild(this.editorNode);
52-
53-
if (!this.id){
54-
console.log("WARNING: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won't work otherwise!")
24+
// mainDiv.append(...this.childNodes);
25+
26+
// Ugly hack: for some reason when moving children, the editor box duplicates children
27+
// meaning that we end up with 2 editors, if there's a <py-repl> inside the <py-box>
28+
// so, if we have more than 2 children with the cm-editor class, we remove one of them
29+
30+
while (this.childNodes.length > 0) {
31+
console.log(this.firstChild);
32+
if ( this.firstChild.nodeName == "PY-REPL" ){
33+
// in this case we need to remove the child and craete a new one from scratch
34+
let replDiv = document.createElement('div');
35+
// we need to put the new repl inside a div so that if the repl has auto-generate true
36+
// it can replicate itself inside that constrained div
37+
replDiv.appendChild(this.firstChild.cloneNode());
38+
mainDiv.appendChild(replDiv);
39+
this.firstChild.remove();
40+
}
41+
else{
42+
if ( this.firstChild.nodeName != "#text" ){
43+
mainDiv.appendChild(this.firstChild);
44+
}else{
45+
this.firstChild.remove()
46+
}
47+
}
5548
}
5649

57-
if (!this.hasAttribute('widths')) {
58-
this.setAttribute("exec-id", "1");
50+
// now we need to set widths
51+
this.widths = []
52+
if (this.hasAttribute('widths')) {
53+
for (let w of this.getAttribute('widths').split(";")) {
54+
this.widths.push(`w-${w}`);
55+
}
56+
}else{
57+
for (let el of mainDiv.childNodes) {
58+
this.widths.push(`w-1/${mainDiv.childNodes.length}`);
59+
}
5960
}
6061

61-
62-
this.appendChild(mainDiv);
63-
64-
console.log('connected');
62+
for (let i in this.widths) {
63+
// @ts-ignore
64+
addClasses(mainDiv.childNodes[parseInt(i)], [this.widths[i]]);
65+
}
66+
67+
this.appendChild(mainDiv);
68+
console.log('py-box connected');
6569
}
6670
}
6771

0 commit comments

Comments
 (0)
0