Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3aa3ba0

Browse files
committed
add pybutton and pytitle
1 parentf5b168a commit3aa3ba0

File tree

5 files changed

+141
-12
lines changed

5 files changed

+141
-12
lines changed

‎pyscriptjs/examples/todo-pylist.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,27 @@
1818
</head>
1919

2020
<bodyclass="container">
21-
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
22-
<!-- <py-script src="/todo.py"> </py-script> -->
2321

24-
2522
<mainclass="max-w-xs mx-auto mt-4">
2623
<section>
2724

28-
<py-listid="mylist"></py-list>
29-
30-
<divclass="text-center w-full mb-8">
31-
<h1class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
32-
</div>
25+
<py-title>To Do List</py-title>
3326
<div>
3427
<inputid="new-task-content"class="border flex-1 mr-3 border-gray-300 p-2 rounded"type="text"py-mount>
35-
<buttonid="new-task-btn"class="p-2 text-white bg-blue-600 border border-blue-600 rounded"type="submit"pys-onClick="add_task">
36-
Add task
28+
29+
<py-buttonid="new-task-btn"label="Add Task!">
30+
def on_click(evt):
31+
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
32+
myList.add(PyItem(task, labels=['content'], state_key="done"))
33+
new_task_content.clear()
3734
</button>
3835
</div>
3936

4037
<py-listid="myList"></py-list>
38+
39+
4140
<py-replid="my-repl"auto-generate="true"></py-repl>
42-
</div>
41+
4342
</section>
4443
</main>
4544
</body>

‎pyscriptjs/src/components/pybutton.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import{BaseEvalElement}from'./base';
2+
import{addClasses,ltrim,htmlDecode}from'../utils';
3+
4+
exportclassPyButtonextendsBaseEvalElement{
5+
shadow:ShadowRoot;
6+
wrapper:HTMLElement;
7+
theme:string;
8+
widths:Array<string>;
9+
label:string;
10+
mount_name:string;
11+
constructor(){
12+
super();
13+
14+
// attach shadow so we can preserve the element original innerHtml content
15+
// this.shadow = this.attachShadow({ mode: 'open'});
16+
17+
// this.wrapper = document.createElement('slot');
18+
// this.shadow.appendChild(this.wrapper);
19+
if(this.hasAttribute('label')){
20+
this.label=this.getAttribute('label');
21+
}
22+
}
23+
24+
25+
connectedCallback(){
26+
this.code=htmlDecode(this.innerHTML);
27+
this.mount_name=this.id.split("-").join("_");
28+
this.innerHTML='';
29+
30+
letmainDiv=document.createElement('button');
31+
mainDiv.innerHTML=this.label;
32+
addClasses(mainDiv,["p-2","text-white","bg-blue-600","border","border-blue-600","rounded"]);
33+
34+
mainDiv.id=this.id;
35+
this.id=`${this.id}-container`;
36+
37+
this.appendChild(mainDiv);
38+
this.code=this.code.split("self").join(this.mount_name);
39+
letregistrationCode=`${this.mount_name} = Element("${mainDiv.id}")`;
40+
if(this.code.includes("def on_focus")){
41+
this.code=this.code.replace("def on_focus",`def on_focus_${this.mount_name}`);
42+
registrationCode+=`\n${this.mount_name}.element.onfocus = on_focus_${this.mount_name}`
43+
}
44+
45+
if(this.code.includes("def on_click")){
46+
this.code=this.code.replace("def on_click",`def on_click_${this.mount_name}`);
47+
registrationCode+=`\n${this.mount_name}.element.onclick = on_click_${this.mount_name}`
48+
}
49+
50+
// now that we appended and the element is attached, lets connect with the event handlers
51+
// defined for this widget
52+
setTimeout(()=>{
53+
this.eval(this.code).then(()=>{
54+
this.eval(registrationCode).then(()=>{
55+
console.log('registered handlers');
56+
});
57+
});
58+
},4000);
59+
60+
console.log('py-button connected');
61+
}
62+
}
63+
64+

‎pyscriptjs/src/components/pytitle.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import{BaseEvalElement}from'./base';
2+
import{addClasses,ltrim,htmlDecode}from'../utils';
3+
4+
exportclassPyTitleextendsBaseEvalElement{
5+
shadow:ShadowRoot;
6+
wrapper:HTMLElement;
7+
theme:string;
8+
widths:Array<string>;
9+
label:string;
10+
mount_name:string;
11+
constructor(){
12+
super();
13+
}
14+
15+
16+
connectedCallback(){
17+
this.label=htmlDecode(this.innerHTML);
18+
this.mount_name=this.id.split("-").join("_");
19+
this.innerHTML='';
20+
21+
letmainDiv=document.createElement('div');
22+
letdivContent=document.createElement('h1')
23+
24+
addClasses(mainDiv,["text-center","w-full","mb-8"]);
25+
addClasses(divContent,["text-3xl","font-bold","text-gray-800","uppercase","tracking-tight"]);
26+
divContent.innerHTML=this.label;
27+
28+
mainDiv.id=this.id;
29+
this.id=`${this.id}-container`;
30+
mainDiv.appendChild(divContent);
31+
this.appendChild(mainDiv);
32+
33+
console.log('py-title connected');
34+
}
35+
}
36+
37+

‎pyscriptjs/src/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import { PyScript } from "./components/pyscript";
44
import{PyRepl}from"./components/pyrepl";
55
import{PyEnv}from"./components/pyenv";
66
import{PyBox}from"./components/pybox";
7+
import{PyButton}from"./components/pybutton";
8+
import{PyTitle}from"./components/pytitle";
79
import{PyWidget}from"./components/base";
810

911
letxPyScript=customElements.define('py-script',PyScript);
1012
letxPyRepl=customElements.define('py-repl',PyRepl);
1113
letxPyEnv=customElements.define('py-env',PyEnv);
1214
letxPyBox=customElements.define('py-box',PyBox);
15+
letxPyButton=customElements.define('py-button',PyButton);
16+
letxPyTitle=customElements.define('py-title',PyTitle);
1317
letxPyWidget=customElements.define('py-register-widget',PyWidget);
1418

1519

‎pyscriptjs/src/utils.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,29 @@ const getLastPath = function (str) {
99
returnstr.split('\\').pop().split('/').pop();
1010
}
1111

12-
export{addClasses,getLastPath}
12+
functionhtmlDecode(input){
13+
vardoc=newDOMParser().parseFromString(input,"text/html");
14+
returnltrim(doc.documentElement.textContent);
15+
}
16+
17+
functionltrim(code:string):string{
18+
constlines=code.split("\n")
19+
if(lines.length==0)
20+
returncode
21+
22+
constlengths=lines
23+
.filter((line)=>line.trim().length!=0)
24+
.map((line)=>{
25+
const[prefix]=line.match(/^\s*/)
26+
returnprefix.length
27+
})
28+
29+
constk=Math.min(...lengths)
30+
31+
if(k!=0)
32+
returnlines.map((line)=>line.substring(k)).join("\n")
33+
else
34+
returncode
35+
}
36+
37+
export{addClasses,getLastPath,ltrim,htmlDecode}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp