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

Merge pull request #42 from anaconda/auto-id

Browse Source 
Auto-generate element ID to ensure output is rendered
This commit is contained in:
Fabio Pliger
2022-04-22 12:05:13 -05:00
committed by GitHub
parent dc9e7e60cb 1be8aa3a28
commit ea63e36ca1
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, mode } from '../stores'; import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, mode } from '../stores';
import { guidGenerator } from '../utils';
// Premise used to connect to the first available pyodide interpreter // Premise used to connect to the first available pyodide interpreter
let pyodideReadyPromise; let pyodideReadyPromise;
let environments; let environments;
@@ -27,7 +27,6 @@ type PyodideInterface = {
registerJsModule(name: string, module: object): void registerJsModule(name: string, module: object): void
} }
export class BaseEvalElement extends HTMLElement { export class BaseEvalElement extends HTMLElement {
shadow: ShadowRoot; shadow: ShadowRoot;
wrapper: HTMLElement; wrapper: HTMLElement;
@@ -46,6 +45,8 @@ export class BaseEvalElement extends HTMLElement {
this.shadow = this.attachShadow({ mode: 'open'}); this.shadow = this.attachShadow({ mode: 'open'});
this.wrapper = document.createElement('slot'); this.wrapper = document.createElement('slot');
this.shadow.appendChild(this.wrapper); this.shadow.appendChild(this.wrapper);
if (!this.id)
this.id = this.constructor.name+"-"+guidGenerator()
} }
addToOutput(s: string) { addToOutput(s: string) {

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

@@ -140,13 +140,9 @@ export class PyScript extends BaseEvalElement {
// to create a new output div to output to // to create a new output div to output to
// Let's check if we have an id first and create one if not // Let's check if we have an id first and create one if not
if (!this.id){
this.id = `pyid-${Date.now()}`
}
this.outputElement = document.createElement('div'); this.outputElement = document.createElement('div');
// this.outputElement.classList.add("output"); const exec_id = this.getAttribute("exec-id");
this.outputElement.hidden = true; this.outputElement.id = this.id + (exec_id ? "-"+exec_id : "");
this.outputElement.id = this.id + "-" + this.childElementCount;
// add the output div id if there's not output pre-defined // add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement); mainDiv.appendChild(this.outputElement);

9
pyscriptjs/src/utils.ts
View File

@@ -34,4 +34,11 @@ function ltrim(code: string): string {
return code return code
} }
export {addClasses, getLastPath, ltrim, htmlDecode} 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 {addClasses, getLastPath, ltrim, htmlDecode, guidGenerator}