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

add handlers to input box as well

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-20 16:32:11 -05:00
parent 44afda7aa8
commit ac64b2aaa3
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pyscriptjs/examples/todo-pylist.html
View File

@@ -20,7 +20,11 @@
<body> <body>
<py-title>To Do List</py-title> <py-title>To Do List</py-title>
<py-box widths="2/3;1/3"> <py-box widths="2/3;1/3">
<py-inputbox id="new-task-content"></py-inputbox> <py-inputbox id="new-task-content">
def on_keypress(e):
if (e.code == "Enter"):
add_task()
</py-inputbox>
<py-button id="new-task-btn" label="Add Task!"> <py-button id="new-task-btn" label="Add Task!">
def on_click(evt): def on_click(evt):
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() } task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
@@ -30,7 +34,6 @@
</py-box> </py-box>
<py-list id="myList"></py-list> <py-list id="myList"></py-list>
<py-repl id="my-repl" auto-generate="true"> </py-repl> <py-repl id="my-repl" auto-generate="true"> </py-repl>
</body> </body>
</html> </html>

19
pyscriptjs/src/components/pyinputbox.ts
View File

@@ -23,7 +23,7 @@ export class PyInputBox extends BaseEvalElement {
connectedCallback() { connectedCallback() {
this.label = htmlDecode(this.innerHTML); this.code = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_"); this.mount_name = this.id.split("-").join("_");
this.innerHTML = ''; this.innerHTML = '';
@@ -37,14 +37,23 @@ export class PyInputBox extends BaseEvalElement {
// now that we appended and the element is attached, lets connect with the event handlers // now that we appended and the element is attached, lets connect with the event handlers
// defined for this widget // defined for this widget
this.code = `${this.mount_name} = Element("${ mainDiv.id }")`; this.appendChild(mainDiv);
this.code = this.code.split("self").join(this.mount_name);
let registrationCode = `${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.onkeypress = on_keypress_${this.mount_name}`
}
setTimeout(() => { setTimeout(() => {
this.eval(this.code).then(() => { this.eval(this.code).then(() => {
console.log('registered handlers'); this.eval(registrationCode).then(() => {
console.log('registered handlers');
});
}); });
}, 4000); }, 4000);
console.log('py-title connected'); console.log('py-inputbox connected');
} }
} }

2
pyscriptjs/src/interpreter.ts
View File

@@ -140,7 +140,7 @@ class PyWidgetTheme:
class PyListTemplate: class PyListTemplate:
theme = PyWidgetTheme("flex flex-col-reverse mt-4") theme = PyWidgetTheme("flex flex-col-reverse mt-8 mx-4")
def __init__(self, parent): def __init__(self, parent):