Skip to content

Commit 184c37b

Browse files
panManfredinipanManfredini
committed
fixed bug with .splice in onChange
1 parent a39b147 commit 184c37b

File tree

9 files changed

+97
-173
lines changed

9 files changed

+97
-173
lines changed

‎build/impera.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export * from './onChage.js';
1+
export * from './onChange.js';
22
export * from './stateElement.js';

‎build/onChage.js‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎build/stateElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import onChangeProxy from "./onChage.js";
1+
import onChangeProxy from "./onChange.js";
22
var _isCallback_locked = false;
33
var _under_transition = false;
44
const _transitions_callbackMap = new Map();

‎demo/Store.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,20 @@
1-
import {StateTransition, StateVariable} from '../build/impera.js'
1+
import {StateVariable} from '../build/impera.js'
2+
3+
export var todos = new StateVariable("todos",[]);
4+
5+
todos.addTransition("addTodo",(text)=>{
6+
if(typeof text === "string"){
7+
let todo = {txt : text, isComplete : false}
8+
todos.value.push(todo)
9+
}
10+
})
11+
12+
todos.addTransition("removeTodo", (index)=>{
13+
let _int = parseInt(index)
14+
todos.value.splice(_int,1)
15+
})
16+
17+
todos.addTransition("toggleTodo",(index)=>{
18+
let todo = todos.value[index]
19+
todo.isComplete = todo.isComplete ? false : true
20+
})

‎demo/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Hello Bulma!</title>
6+
<title>Todo app test</title>
77
<script type="module" src="./webComponents.js"></script>
88
</head>
99
<body>
1010
<my-container>
1111
<my-input slot="head"></my-input>
12-
<my-todo></my-todo>
1312
</my-container>
1413
</body>
1514
</html>

‎demo/webComponents.js‎

Lines changed: 72 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import {brick as html,templateme,dfn} from 'https://webcomponenthelpers.github.io/Brick/brick-element.js'
2-
2+
import {todos} from './Store.js'
3+
import {statesMixin} from '../build/impera.js'
34

45

56
async function with_bulma(){
6-
// fetching bulma - is a bit dirty, but hey is just a demo ;)
7-
let response = await fetch('https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css');
8-
let txt = await response.text();
9-
const bulma = templateme`<style>${txt}</style>`
10-
11-
7+
// fetching bulma - is a bit dirty, but hey is just a demo ;)
8+
let response = await fetch('https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css');
9+
let txt = await response.text();
10+
const bulma = templateme`<style>${txt}</style>`
11+
12+
// dummy class with state mixin
13+
class StateElement extends statesMixin([todos],HTMLElement){}
1214

13-
let mxn_input = html`
15+
let mxn_input = html`
1416
${bulma}
1517
1618
<div class="columns is-centered">
@@ -25,21 +27,64 @@ async function with_bulma(){
2527
</div>
2628
</div>
2729
</div>
28-
`;
30+
`;
2931

30-
dfn("my-input", class extends mxn_input(HTMLElement){
32+
dfn("my-input", class extends mxn_input(StateElement){
3133
constructor(){
3234
super();
3335
this.ids.btn.onclick = this.add_todos.bind(this);
36+
this.onkeydown = (function (e){ if(e.which === 13) this.add_todos()}).bind(this)
3437
}
3538
add_todos(){
36-
//this.applyTransition("addTodo",this.ids.inpt.value);
37-
console.log(this.ids.inpt.value);
39+
if(this.ids.inpt.value !== ""){
40+
this.applyTransition("addTodo",this.ids.inpt.value);
41+
this.ids.inpt.value = "";
42+
}
3843
}
39-
});
44+
});
45+
46+
47+
48+
49+
let mxn_todo = html`
50+
${bulma}
51+
<style>
52+
#status {
53+
cursor:pointer;
54+
}
55+
</style>
4056
57+
<div class="tags has-addons is-centered" style="margin-bottom:0rem">
58+
<span ${"#-status"} class="tag is-warning" onclick="this.root.toggle.bind(this.root)()">Pending</span>
59+
<span ${"#-text"} class="tag is-info">Todo text</span>
60+
<a class="tag is-delete is-light" onclick="this.root.applyTransition('removeTodo',this.root.index)"></a>
61+
</div>
62+
${"|*index|iscomplete|txt*|"}
63+
`;
64+
65+
dfn("my-todo", class extends mxn_todo(StateElement){
66+
update_txt(val){
67+
this.ids.text.innerText = val;
68+
}
69+
update_iscomplete(val){
70+
if(val === "true"){
71+
this.ids.status.innerText = "Done";
72+
this.ids.status.classList.remove("is-warning")
73+
this.ids.status.classList.add("is-success")
74+
}
75+
else {
76+
this.ids.status.innerText = "pending";
77+
this.ids.status.classList.remove("is-success")
78+
this.ids.status.classList.add("is-warning")
79+
}
80+
81+
}
82+
toggle(){
83+
this.applyTransition("toggleTodo",this.index);
84+
}
85+
});
4186

42-
let mxn_container = html`
87+
let mxn_container = html`
4388
${bulma}
4489
<style>
4590
div.box{
@@ -53,50 +98,24 @@ async function with_bulma(){
5398
<div class ="box" style="padding:3rem">
5499
<slot name="head"></slot>
55100
<div class="withmargin" >
56-
<slot></slot>
101+
<div ${"#-content"}></div>
57102
</div>
58103
</div>
59-
`;
60-
dfn("my-container", class extends mxn_container(HTMLElement){
61-
on_todos_change(val){
62-
this.innerHTML = "";
104+
`;
105+
dfn("my-container", class extends mxn_container(StateElement){
106+
on_todos_update(val){
107+
let todos_content = this.ids.content
108+
todos_content.innerHTML = "";
63109
this.todos.forEach(function(todo,index){
64110
let temp= document.createElement("my-todo");
65-
temp.ingestData(todo);
66-
/*index = index;
67-
temp.text = todo.text
68-
temp.isDone = todo.isDone;*/
69-
this.appendChild(temp);
111+
temp.index = index;
112+
temp.txt = todo.txt;
113+
temp.iscomplete = todo.isComplete;
114+
todos_content.appendChild(temp);
70115
});
71116
}
72-
});
73-
74-
let mxn_todo = html`
75-
${bulma}
76-
77-
<div class="tags has-addons is-centered" style="margin-bottom:0rem">
78-
<span ${"#-status"} class="tag is-warning" onclick="this.root.toggle.bind(this.root)()">Pending</span>
79-
<span ${"#-text"} class="tag is-info">Todo text</span>
80-
<a class="tag is-delete is-light"></a>
81-
</div>
82-
${"|*index|isDonne|text*|"}
83-
`;
84-
85-
dfn("my-todo", class extends mxn_todo(HTMLElement){
86-
update_text(val){
87-
this.ids.text.innerText = val;
88-
}
89-
update_isDonne(val){
90-
console.log("doing")
91-
//this.ids.status.innerText = (val === "true") ? "Done" : "Pending";
92-
}
93-
toggle(){
94-
//this.applyTransition("toggleTodo",this.index);
95-
console.log("done ", this.isDonne);
96-
this.isDon = "true";
97-
}
98-
});
99-
}
117+
});
100118

119+
};
101120

102-
with_bulma();
121+
with_bulma();

‎src/impera.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export * from './onChage.js'
1+
export * from './onChange.js'
22
export * from './stateElement.js'

‎src/onChage.ts‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/stateElement.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import onChangeProxy from "./onChage.js"
1+
import onChangeProxy from "./onChange.js"
22

33

44
var _isCallback_locked = false;

0 commit comments

Comments
 (0)