-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
60 lines (48 loc) · 1.31 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import {html, render} from './node_modules/lit-html/lit-html.js';
// Simple state
let state = {
counter: 0,
classname: 'default',
items: [],
};
// Handle history by html5 history api
history.pushState(state, "index", "index.html");
// Event Callback
const clickHandler = {
// Required object function
handleEvent( e ){
// Update data model
state.counter++;
state.items.push('Number: ' + state.counter);
// History update on interaction
history.pushState(state, "index", "index.html");
if (state.counter < 10 ) {
render(pageTemplate('World', state), document.body);
}
else {
state.classname = 'highlight';
render(pageTemplate('Daniel', state), document.body);
}
}
};
// Define List
const itemList = (state) => html`
<ul>
${state.items.map((item) => html`<li>${item}</li>`)}
</ul>
`;
// Define a template
const pageTemplate = (name, state) => html`
<main>
<h2 class="${state.classname}">Hello ${name}</h2>
<button @click=${clickHandler}>${state.counter}x clicked</button>
<div>${itemList(state)}</div>
</main>
`;
// Render the template to the document
render(pageTemplate('World', state), document.body);
// History event listener
window.onpopstate = function(event) {
state = event.state;
render(pageTemplate('World', state), document.body);
};