jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-02-13 07:01:00 -05:00
Code Issues Projects Releases Wiki Activity

Add support to py- events that map all js events available (#561)

Browse Source 
* added the  py- events throughout pyscript.ts

* Integrated the py- event throughout the examples

* Fixed spelling error
This commit is contained in:
Leonardo Pliger
2022-06-29 17:49:21 -05:00
committed by GitHub
parent 506ac2574f
commit ee9b0960f7
6 changed files with 109 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/handtrack/say_hello.html
View File

@@ -106,7 +106,7 @@ pyscript.run_until_complete(start())
</py-script>
<div class="mb10">
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" pys-onClick="toggle_video">
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video">
Toggle Video
</button>
<button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>

2
examples/mario/play_mario.html
View File

@@ -131,7 +131,7 @@ pyscript.run_until_complete(start())
<div class="mb10">
<p>Use < > to move, ↓ to crouch and x to jump. If video is enabled, say hi to jump as well! </p>
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" pys-onClick="toggle_video">
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video">
Start Video
</button>
<div id="update-note" py-mount class="updatenote mt10">loading model ..</div>

2
examples/micrograd_ai.html
View File

@@ -49,7 +49,7 @@
<div id="python-status">Python is currently starting. Please wait...</div>
</p>
<p>
<button id="run-all-button" class="btn btn-primary" type="submit" pys-onClick="run_all_micrograd_demo">Run All</button><br>
<button id="run-all-button" class="btn btn-primary" type="submit" py-onClick="run_all_micrograd_demo">Run All</button><br>
<py-script src="/micrograd_ai.py"></py-script>
<div id="micrograd-run-all-print-div"></div><br>
<div id="micrograd-run-all-fig1-div"></div>

4
examples/simple_bioinformatics_tool.html
View File

@@ -49,8 +49,8 @@
</div>
</div>
<div class="control">
<button id="run" type="button" class="button is-primary" pys-onClick="run">Run!</button>
<button id="clear" type="button" class="button is-danger" pys-onClick="clear">Clear</button>
<button id="run" type="button" class="button is-primary" py-onClick="run">Run!</button>
<button id="clear" type="button" class="button is-danger" py-onClick="clear">Clear</button>
</div>
</div>

2
examples/todo.html
View File

@@ -28,7 +28,7 @@
</div>
<div>
<input id="new-task-content" class="py-input" type="text">
<button id="new-task-btn" class="py-button" type="submit" pys-onClick="add_task">
<button id="new-task-btn" class="py-button" type="submit" py-onClick="add_task">
Add task
</button>
</div>

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

@@ -124,30 +124,119 @@ export class PyScript extends BaseEvalElement {
}
}
/** Defines all possible pys-on* and their corresponding event types */
const pysAttributeToEvent: Map<string, string> = new Map<string, string>([
/** Defines all possible py-on* and their corresponding event types */
const pyAttributeToEvent: Map<string, string> = new Map<string, string>([
// Leaving pys-onClick and pys-onKeyDown for backward compatibility
["pys-onClick", "click"],
["pys-onKeyDown", "keydown"]
]);
["pys-onKeyDown", "keydown"],
["py-onClick", "click"],
["py-onKeyDown", "keydown"],
// Window Events
["py-afterprint", "afterprint"],
["py-beforeprint", "beforeprint"],
["py-beforeunload", "beforeunload"],
["py-error", "error"],
["py-hashchange", "hashchange"],
["py-load", "load"],
["py-message", "message"],
["py-offline", "offline"],
["py-online", "online"],
["py-pagehide", "pagehide"],
["py-pageshow", "pageshow"],
["py-popstate", "popstate"],
["py-resize", "resize"],
["py-storage", "storage"],
["py-unload", "unload"],
/** Initialize all elements with pys-on* handlers attributes */
// Form Events
["py-blur", "blur"],
["py-change", "change"],
["py-contextmenu", "contextmenu"],
["py-focus", "focus"],
["py-input", "input"],
["py-invalid", "invalid"],
["py-reset", "reset"],
["py-search", "search"],
["py-select", "select"],
["py-submit", "submit"],
// Keyboard Events
["py-keydown", "keydown"],
["py-keypress", "keypress"],
["py-keyup", "keyup"],
// Mouse Events
["py-click", "click"],
["py-dblclick", "dblclick"],
["py-mousedown", "mousedown"],
["py-mousemove", "mousemove"],
["py-mouseout", "mouseout"],
["py-mouseover", "mouseover"],
["py-mouseup", "mouseup"],
["py-mousewheel", "mousewheel"],
["py-wheel", "wheel"],
// Drag Events
["py-drag", "drag"],
["py-dragend", "dragend"],
["py-dragenter", "dragenter"],
["py-dragleave", "dragleave"],
["pyon-dragover", "dragover"],
["py-dragstart", "dragstart"],
["py-drop", "drop"],
["py-scroll", "scroll"],
// Clipboard Events
["py-copy", "copy"],
["py-cut", "cut"],
["py-paste", "paste"],
// Media Events
["py-abort", "abort"],
["py-canplay", "canplay"],
["py-canplaythrough", "canplaythrough"],
["py-cuechange", "cuechange"],
["py-durationchange", "durationchange"],
["py-emptied", "emptied"],
["py-ended", "ended"],
["py-loadeddata", "loadeddata"],
["py-loadedmetadata", "loadedmetadata"],
["py-loadstart", "loadstart"],
["py-pause", "pause"],
["py-play", "play"],
["py-playing", "playing"],
["py-progress", "progress"],
["py-ratechange", "ratechange"],
["py-seeked", "seeked"],
["py-seeking", "seeking"],
["py-stalled", "stalled"],
["py-suspend", "suspend"],
["py-timeupdate", "timeupdate"],
["py-volumechange", "volumechange"],
["py-waiting", "waiting"],
// Misc Events
["py-toggle", "toggle"],
]);
/** Initialize all elements with py-on* handlers attributes */
async function initHandlers() {
console.log('Collecting nodes...');
const pyodide = await pyodideReadyPromise;
for (const pysAttribute of pysAttributeToEvent.keys()) {
await createElementsWithEventListeners(pyodide, pysAttribute);
for (const pyAttribute of pyAttributeToEvent.keys()) {
await createElementsWithEventListeners(pyodide, pyAttribute);
}
}
/** Initializes an element with the given pys-on* attribute and its handler */
async function createElementsWithEventListeners(pyodide: PyodideInterface, pysAttribute: string): Promise<void> {
const matches: NodeListOf<HTMLElement> = document.querySelectorAll(`[${pysAttribute}]`);
/** Initializes an element with the given py-on* attribute and its handler */
async function createElementsWithEventListeners(pyodide: PyodideInterface, pyAttribute: string): Promise<void> {
const matches: NodeListOf<HTMLElement> = document.querySelectorAll(`[${pyAttribute}]`);
for (const el of matches) {
if (el.id.length === 0) {
throw new TypeError(`<${el.tagName.toLowerCase()}> must have an id attribute, when using the ${pysAttribute} attribute`)
throw new TypeError(`<${el.tagName.toLowerCase()}> must have an id attribute, when using the ${pyAttribute} attribute`)
}
const handlerCode = el.getAttribute(pysAttribute);
const event = pysAttributeToEvent.get(pysAttribute);
const handlerCode = el.getAttribute(pyAttribute);
const event = pyAttributeToEvent.get(pyAttribute);
const source = `
from pyodide import create_proxy
Element("${el.id}").element.addEventListener("${event}", create_proxy(${handlerCode}))
@@ -164,7 +253,7 @@ async function createElementsWithEventListeners(pyodide: PyodideInterface, pysAt
// }).then(() => {
// console.log("resolved")
// });
// // let handlerCode = el.getAttribute('pys-onClick');
// // let handlerCode = el.getAttribute('py-onClick');
// // pyodide.runPython(handlerCode);
// }
}