alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

Auto-generate element ID to ensure output is rendered

Browse Source
This commit is contained in:
Philipp Rudiger
2022-04-21 20:40:24 +02:00
parent dc9e7e60cb
commit 190ae39690
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pyscriptjs/src/components/base.ts
View File

@@ -27,6 +27,12 @@ type PyodideInterface = {
registerJsModule(name: string, module: object): void
}
export function guidGenerator(): string {
var S4 = function(): string {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
export class BaseEvalElement extends HTMLElement {
shadow: ShadowRoot;
@@ -46,6 +52,8 @@ export class BaseEvalElement extends HTMLElement {
this.shadow = this.attachShadow({ mode: 'open'});
this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper);
if (!this.id)
this.id = this.constructor.name+"-"+guidGenerator()
}
addToOutput(s: string) {

5
pyscriptjs/src/components/pyscript.ts
View File

@@ -144,9 +144,8 @@ export class PyScript extends BaseEvalElement {
this.id = `pyid-${Date.now()}`
}
this.outputElement = document.createElement('div');
// this.outputElement.classList.add("output");
this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.childElementCount;
const exec_id = this.getAttribute("exec-id");
this.outputElement.id = this.id + (exec_id ? "-"+exec_id : "");
// add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement);