blob: e49c606f7dda211f3c2b623da81a0304856480dc (
plain)
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
|
import {html, render} from "lit-html";
import {createStore} from "redux";
export class AdminElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: "open"});
this.store = createStore(this.update.bind(this), {switched: false});
this.store.subscribe(this.render.bind(this));
}
static get observedAttributes() {
return ["greetee"];
}
connectedCallback () {
this.render();
}
attributeChangedCallback(name, oldValue, newValue) {
this.render();
}
onSwitchClicked(event) {
this.store.dispatch({ type: "SWITCH" });
}
update(state, action) {
console.log(`Processing action: ${JSON.stringify(action)}`);
switch (action.type) {
case "SWITCH":
state.switched = !state.switched;
break;
}
return state;
}
render() {
let state = this.store.getState();
let greetee = state.switched ? "Andreas" : this.getAttribute("greetee");
const template = html`
<p>Hello ${greetee}! <button @click=${this.onSwitchClicked.bind(this)}>Switch</button></p>
`;
render(template, this.shadowRoot);
}
}
customElements.define("mlk-admin", AdminElement);
|
