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

Commit76f21b4

Browse files
committed
[New] ui: event handlers
1 parente211640 commit76f21b4

File tree

2 files changed

+119
-30
lines changed

2 files changed

+119
-30
lines changed

‎examples/todo.html‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,31 +30,38 @@
3030

3131
<divid="TodoList">
3232
<ulout="items">
33-
<li>Empty</li>
33+
<liwhen="!this.length">Empty</li>
3434
</ul>
35+
<buttonon="add">Add</button>
3536
</div>
3637

3738
<scripttype="module">
3839
import$from"@./select.ui.js"
3940
constTodoItem=$.ui("#TodoItem").remove().does({
4041
label:({label})=>label,
4142
edit:{
42-
click:function(event){console.log("Edit",this,event)},
43+
click:(event,self)=>{self.update({edited:!self.data.edited})},
4344
},
4445
remove:{
45-
click:function(event){console.log("Remove",this,event)},
46+
click:(event,self,data)=>self.send("Remove",data),
4647
},
4748
})
4849
constTodoList=$.ui("#TodoList").does({
4950
items:(items)=>TodoItem.apply(items),
51+
add:(event,self,data=[])=>{
52+
self.update([...data,{label:`Todo${data.length}`}])
53+
}
54+
}).sub({
55+
Remove:(event,self)=>self.update(self.data.filter(_=>_!==event.data)),
5056
}).remove()
57+
console.log("TODOLIST",TodoList)
5158
constres=TodoList.clone()
5259
$("#Todo").append(res)
5360
//res.out.items.render([{label: "Buy cheese"}, {label: "Buy Wine"}], TodoItem)
5461
// TODO: Remove does not work
5562
//res.out.items.render([{label: "Buy cheese"}], TodoItem)
5663
//res.set([{label: "Todo 1"}])
57-
res.set([{label:"Todo 1"},{label:"Todo 2"},{label:"Todo 3"}])
64+
//res.set([{label: "Todo 1"}, {label: "Todo 2"}, {label: "Todo 3"}])
5865
//res.set([{label: "Todo 1"}])
5966
</script>
6067
</body>

‎src/js/select.ui.js‎

Lines changed: 108 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,29 @@ const type = (value) =>
1616
?Type.Dict
1717
:Type.Atom;
1818

19-
constslots=(name,scope,processor=undefined,initial={})=>
20-
$(`[${name}]`,scope).reduce((r,n)=>{
19+
constslots=(name,parent,processor=undefined,initial={})=>
20+
$(`[${name}]`,parent).reduce((r,n)=>{
2121
constk=n.getAttribute(name);
2222
// n.removeAttribute(name);
2323
if(r[k]===undefined){
2424
constv=newUISelection(n);
25+
v.parent=parent;
2526
r[k]=processor ?processor(v,n,k) :v;
2627
}else{
2728
r[k].push(n);
2829
}
2930
returnr;
3031
},initial);
3132

33+
classUIEvent{
34+
constructor(name,data,origin){
35+
this.name=name;
36+
this.data=data;
37+
this.origin=origin;
38+
this.current=undefined;
39+
}
40+
}
41+
3242
classAppliedUISelection{
3343
constructor(selection,data){
3444
this.selection=selection;
@@ -53,33 +63,117 @@ class UISelection extends Selection {
5363
node,
5464
};
5565
});
56-
57-
// Data
66+
// Parent
67+
this.parent=undefined;
68+
// Data & State
5869
this.data=undefined;
5970
this.key=undefined;
6071
this.dataType=Type.Null;
6172
this.rendered=newMap();
6273
this.condition=undefined;
63-
// Interaction/Behavior
74+
// Interaction/Behavior (passed in cloned)
6475
this.behavior=undefined;
76+
this.subs=undefined;
6577
// TODO: Initial state parsing
6678
}
6779

68-
clone(){
80+
// TODO: There's a question whether we should have Instance instead
81+
// of clone. We could certainly speed up init.
82+
clone(parent){
6983
constres=super.clone();
7084
res.behavior=this.behavior;//new Object(res.behavior);
85+
res.subs=this.subs;
86+
res.parent=parent;
87+
// We bind the event handlers
88+
for(constkinres.on){
89+
lethandlers=res.behavior[k];
90+
if(handlersinstanceofFunction){
91+
// TODO: Select the best type of event for the target
92+
handlers={click:handlers};
93+
}
94+
if(handlers){
95+
for(consteventinhandlers){
96+
consth=handlers[event];
97+
res.on[k].bind(event,(event)=>
98+
h(event,res,res.data,res.key),
99+
);
100+
}
101+
}
102+
}
71103
returnres;
72104
}
73105

74106
apply(data){
75107
returnnewAppliedUISelection(this,data);
76108
}
77109

110+
// ========================================================================
111+
// BEHAVIOUR
112+
// ========================================================================
113+
78114
does(behavior){
79115
this.behavior=Object.assign(this.behavior??{},behavior);
80116
returnthis;
81117
}
82118

119+
// ========================================================================
120+
// EVENTS
121+
// ========================================================================
122+
123+
send(event,data){
124+
returnthis.pub(event,data);
125+
}
126+
127+
pub(event,data){
128+
constres=newUIEvent(event,data,this);
129+
this.parent?.onPub(res);
130+
returnres;
131+
}
132+
133+
sub(event,handler=undefined){
134+
if(typeofevent==="string"){
135+
if(!handler){
136+
returnthis;
137+
}
138+
if(this.subs===undefined){
139+
this.subs=newMap();
140+
}
141+
if(this.subs.has(event)){
142+
this.subs.get(event).push(handler);
143+
}else{
144+
this.subs.set(event,[handler]);
145+
}
146+
}else{
147+
for(constkinevent){
148+
this.sub(k,event[k]);
149+
}
150+
}
151+
returnthis;
152+
}
153+
154+
onPub(event){
155+
event.current=this;
156+
letpropagate=true;
157+
console.log("GOT",event);
158+
if(this.subs){
159+
consthl=this.subs.get(event.name);
160+
if(hl){
161+
for(consthofhl){
162+
// We do an early exit when `false` is returned,
163+
// Or stop propagation on `null`
164+
constc=h(event,this,this.data,this.key);
165+
if(c===false){
166+
returnevent;
167+
}elseif(c===null){
168+
propagate=false;
169+
}
170+
}
171+
}
172+
}
173+
propagate&&this.parent?.onPub(event);
174+
returnevent;
175+
}
176+
83177
// ========================================================================
84178
// DATA
85179
// ========================================================================
@@ -100,21 +194,10 @@ class UISelection extends Selection {
100194

101195
// --
102196
// Creates, updates or removes a selection based on the argument
103-
doCreate(data,key=this.key){
197+
doCreate(data,key=this.key,parent=undefined){
104198
// Create a new instance of the selection
105-
constui=this.clone();
106-
// We bind the event handlers
107-
for(constkinthis.on){
108-
consthandlers=this.behavior[k];
109-
if(handlers){
110-
for(consteventinhandlers){
111-
consth=handlers[event];
112-
ui.on[k].bind(event,(event)=>{
113-
returnh.apply(ui.data??data,[event,ui,key]);
114-
});
115-
}
116-
}
117-
}
199+
constui=this.clone(parent);
200+
118201
ui.attr("data-xxx","POUET");
119202
ui.set(data,key);
120203
returnui;
@@ -213,7 +296,7 @@ class UISelection extends Selection {
213296
if(r){
214297
r.doUpdate(data);
215298
}else{
216-
r=ui.doCreate(data);
299+
r=ui.doCreate(data,null,this);
217300
this.append(r);
218301
this.rendered.set(null,r);
219302
}
@@ -226,19 +309,18 @@ class UISelection extends Selection {
226309
this.rendered.get(i).doUpdate(data[i],i);
227310
}
228311
for(leti=n;i<data.length;i++){
229-
constr=ui.doCreate(data[i],i);
312+
constr=ui.doCreate(data[i],i,this);
230313
this.append(r);
231314
this.rendered.set(i,r);
232315
}
233316
for(leti=n;i<this.data.length;i++){
234-
console.log("XXX REMOVE ITEM",i);
235317
this.rendered.get(i).doRemove();
236318
this.rendered.delete(i);
237319
}
238320
}else{
239321
this.doClear();
240322
for(leti=0;i<data.length;i++){
241-
constr=ui.doCreate(data[i],i);
323+
constr=ui.doCreate(data[i],i,this);
242324
this.append(r);
243325
this.rendered.set(i,r);
244326
}
@@ -248,7 +330,7 @@ class UISelection extends Selection {
248330
if(this.dataType===data_type){
249331
for(constkindata){
250332
if(this.data[k]===undefined){
251-
constr=ui.doCreate(data[k],k);
333+
constr=ui.doCreate(data[k],k,this);
252334
this.append(r);
253335
this.rendered.set(k,r);
254336
}else{
@@ -264,7 +346,7 @@ class UISelection extends Selection {
264346
}else{
265347
this.doClear();
266348
for(constkindata){
267-
constr=ui.doCreate(data[k],k);
349+
constr=ui.doCreate(data[k],k,this);
268350
this.append(r);
269351
this.rendered.set(k,r);
270352
}

0 commit comments

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