mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-21 03:05:38 -05:00
f60dd6a788
* add output div visibility rule and make sure CustomWidget is being registered * add new runAfterRuntimeInitialized method that classes can use to run code only after runtime actually initialized * replace setTimout with proper event to wait for runtime to be completed * replace setTimout on pyinpytbox with proper event to wait for runtime to be completed
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { BaseEvalElement } from './base';
|
|
import { addClasses, htmlDecode } from '../utils';
|
|
|
|
export class PyInputBox extends BaseEvalElement {
|
|
shadow: ShadowRoot;
|
|
wrapper: HTMLElement;
|
|
theme: string;
|
|
widths: Array<string>;
|
|
label: string;
|
|
mount_name: string;
|
|
constructor() {
|
|
super();
|
|
|
|
if (this.hasAttribute('label')) {
|
|
this.label = this.getAttribute('label');
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.checkId();
|
|
this.code = htmlDecode(this.innerHTML);
|
|
this.mount_name = this.id.split('-').join('_');
|
|
this.innerHTML = '';
|
|
|
|
const mainDiv = document.createElement('input');
|
|
mainDiv.type = 'text';
|
|
addClasses(mainDiv, ['border', 'flex-1', 'w-full', 'mr-3', 'border-gray-300', 'p-2', 'rounded']);
|
|
|
|
mainDiv.id = this.id;
|
|
this.id = `${this.id}-container`;
|
|
this.appendChild(mainDiv);
|
|
|
|
// now that we appended and the element is attached, lets connect with the event handlers
|
|
// defined for this widget
|
|
this.appendChild(mainDiv);
|
|
this.code = this.code.split('self').join(this.mount_name);
|
|
let registrationCode = `from pyodide import create_proxy`;
|
|
registrationCode += `\n${this.mount_name} = Element("${mainDiv.id}")`;
|
|
if (this.code.includes('def on_keypress')) {
|
|
this.code = this.code.replace('def on_keypress', `def on_keypress_${this.mount_name}`);
|
|
registrationCode += `\n${this.mount_name}.element.addEventListener('keypress', create_proxy(on_keypress_${this.mount_name}))`;
|
|
}
|
|
|
|
// TODO: For now we delay execution to allow pyodide to load but in the future this
|
|
// should really wait for it to load..
|
|
this.runAfterRuntimeInitialized(async () => {
|
|
await this.eval(this.code);
|
|
await this.eval(registrationCode);
|
|
console.log('registered handlers');
|
|
});
|
|
}
|
|
}
|