jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-20 02:37:41 -05:00
Code Issues Projects Releases Wiki Activity

[PYS-12] Format and lint

Browse Source
This commit is contained in:
Ross Bermudez
2022-04-25 14:57:00 +02:00
parent 6f8f978ef7
commit 27deee3f86
17 changed files with 874 additions and 863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
pyscriptjs/src/components/pybox.ts
View File

@@ -5,65 +5,62 @@ export class PyBox extends HTMLElement {
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.shadow = this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper);
}
}
connectedCallback() {
let mainDiv = document.createElement('div');
addClasses(mainDiv, ["flex", "mx-8"])
// 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()
}
}
}
const mainDiv = document.createElement('div');
addClasses(mainDiv, ['flex', 'mx-8']);
// 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}`);
// 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
const 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();
}
}
}
}else{
for (let el of mainDiv.childNodes) {
this.widths.push(`w-1/${mainDiv.childNodes.length}`);
// now we need to set widths
this.widths = [];
if (this.hasAttribute('widths')) {
for (const w of this.getAttribute('widths').split(';')) {
this.widths.push(`w-${w}`);
}
} else {
for (const 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], 'mx-4']);
}
this.widths.forEach((width, index)=>{
const node: ChildNode = mainDiv.childNodes[index];
addClasses(node, [width, 'mx-4'])
this.appendChild(mainDiv);
console.log('py-box connected');
})
this.appendChild(mainDiv);
console.log('py-box connected');
}
}
}