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 pybutton and pytitle

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-20 15:41:51 -05:00
parent f5b168a45e
commit 3aa3ba02be
5 changed files with 141 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,28 +18,27 @@
</head>
<body class="container">
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
<!-- <py-script src="/todo.py"> </py-script> -->
<main class="max-w-xs mx-auto mt-4">
<section>
<py-list id="mylist"></py-list>
<div class="text-center w-full mb-8">
<h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
</div>
<py-title>To Do List</py-title>
<div>
<input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text" py-mount>
<button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
Add task
<py-button id="new-task-btn" label="Add Task!">
def on_click(evt):
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
myList.add(PyItem(task, labels=['content'], state_key="done"))
new_task_content.clear()
</button>
</div>
<py-list id="myList"></py-list>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
</section>
</main>
</body>

64
pyscriptjs/src/components/pybutton.ts Normal file
View File

@@ -0,0 +1,64 @@
import { BaseEvalElement } from './base';
import { addClasses, ltrim, htmlDecode } from '../utils';
export class PyButton extends BaseEvalElement {
shadow: ShadowRoot;
wrapper: HTMLElement;
theme: string;
widths: Array<string>;
label: string;
mount_name: string;
constructor() {
super();
// attach shadow so we can preserve the element original innerHtml content
// this.shadow = this.attachShadow({ mode: 'open'});
// this.wrapper = document.createElement('slot');
// this.shadow.appendChild(this.wrapper);
if (this.hasAttribute('label')) {
this.label = this.getAttribute('label');
}
}
connectedCallback() {
this.code = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.innerHTML = '';
let mainDiv = document.createElement('button');
mainDiv.innerHTML = this.label;
addClasses(mainDiv, ["p-2", "text-white", "bg-blue-600", "border", "border-blue-600", "rounded"]);
mainDiv.id = this.id;
this.id = `${this.id}-container`;
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_focus")){
this.code = this.code.replace("def on_focus", `def on_focus_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onfocus = on_focus_${this.mount_name}`
}
if (this.code.includes("def on_click")){
this.code = this.code.replace("def on_click", `def on_click_${this.mount_name}`);
registrationCode += `\n${this.mount_name}.element.onclick = on_click_${this.mount_name}`
}
// now that we appended and the element is attached, lets connect with the event handlers
// defined for this widget
setTimeout(() => {
this.eval(this.code).then(() => {
this.eval(registrationCode).then(() => {
console.log('registered handlers');
});
});
}, 4000);
console.log('py-button connected');
}
}

37
pyscriptjs/src/components/pytitle.ts Normal file
View File

@@ -0,0 +1,37 @@
import { BaseEvalElement } from './base';
import { addClasses, ltrim, htmlDecode } from '../utils';
export class PyTitle extends BaseEvalElement {
shadow: ShadowRoot;
wrapper: HTMLElement;
theme: string;
widths: Array<string>;
label: string;
mount_name: string;
constructor() {
super();
}
connectedCallback() {
this.label = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.innerHTML = '';
let mainDiv = document.createElement('div');
let divContent = document.createElement('h1')
addClasses(mainDiv, ["text-center", "w-full", "mb-8"]);
addClasses(divContent, ["text-3xl", "font-bold", "text-gray-800", "uppercase", "tracking-tight"]);
divContent.innerHTML = this.label;
mainDiv.id = this.id;
this.id = `${this.id}-container`;
mainDiv.appendChild(divContent);
this.appendChild(mainDiv);
console.log('py-title connected');
}
}

4
pyscriptjs/src/main.ts
View File

@@ -4,12 +4,16 @@ import { PyScript } from "./components/pyscript";
import { PyRepl } from "./components/pyrepl";
import { PyEnv } from "./components/pyenv";
import { PyBox } from "./components/pybox";
import { PyButton } from "./components/pybutton";
import { PyTitle } from "./components/pytitle";
import { PyWidget } from "./components/base";
let xPyScript = customElements.define('py-script', PyScript);
let xPyRepl = customElements.define('py-repl', PyRepl);
let xPyEnv = customElements.define('py-env', PyEnv);
let xPyBox = customElements.define('py-box', PyBox);
let xPyButton = customElements.define('py-button', PyButton);
let xPyTitle = customElements.define('py-title', PyTitle);
let xPyWidget = customElements.define('py-register-widget', PyWidget);

27
pyscriptjs/src/utils.ts
View File

@@ -9,4 +9,29 @@ const getLastPath = function (str) {
return str.split('\\').pop().split('/').pop();
}
export {addClasses, getLastPath}
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return ltrim(doc.documentElement.textContent);
}
function ltrim(code: string): string {
const lines = code.split("\n")
if (lines.length == 0)
return code
const lengths = lines
.filter((line) => line.trim().length != 0)
.map((line) => {
const [prefix] = line.match(/^\s*/)
return prefix.length
})
const k = Math.min(...lengths)
if (k != 0)
return lines.map((line) => line.substring(k)).join("\n")
else
return code
}
export {addClasses, getLastPath, ltrim, htmlDecode}