|
| 1 | +import {todos} from './Store.js' |
| 2 | +import {LitElement, css, html, unsafeCSS} from 'https://unpkg.com/lit-element?module'; |
| 3 | +import {litStatesMixin} from '../build/impera.js' |
| 4 | + |
| 5 | + |
| 6 | +async function with_bulma(){ |
| 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_lit = css`${unsafeCSS(txt)}` |
| 11 | + |
| 12 | +/** |
| 13 | + * Input field, note the mixin applied to class LitElement |
| 14 | + */ |
| 15 | +class myInput extends litStatesMixin([todos],LitElement){ |
| 16 | + static get styles() { return bulma_lit; } |
| 17 | + |
| 18 | + render(){ |
| 19 | + return html` |
| 20 | + <div class="columns is-centered"> |
| 21 | + <div class="field has-addons "> |
| 22 | + <div class="control"> |
| 23 | + <input id="inpt" class="input" type="text" placeholder="Todo Text"> |
| 24 | + </div> |
| 25 | + <div class="control"> |
| 26 | + <a class="button is-info" @click="${this.add_todos}"> Add Todo </a> |
| 27 | + </div> |
| 28 | + </div> |
| 29 | + </div> |
| 30 | + `; |
| 31 | + } |
| 32 | + |
| 33 | + constructor(){ |
| 34 | + super(); |
| 35 | + this.onkeydown = (function (e){ if(e.which === 13) this.add_todos()}).bind(this) |
| 36 | + } |
| 37 | + |
| 38 | + add_todos(){ |
| 39 | + let inpt = this.shadowRoot.querySelector("#inpt") |
| 40 | + if(inpt.value !== ""){ |
| 41 | + this.applyTransition("addTodo",inpt.value); |
| 42 | + inpt.value = ""; |
| 43 | + } |
| 44 | + } |
| 45 | +} |
| 46 | + |
| 47 | +customElements.define("my-input",myInput); |
| 48 | + |
| 49 | +/** |
| 50 | + * Todo element, this is a simple tag to change state of each single todo. |
| 51 | + * To change state we use ApplyTransition. |
| 52 | + */ |
| 53 | +class myTodo extends litStatesMixin([todos],LitElement){ |
| 54 | + static get styles() { |
| 55 | + return [bulma_lit, css`#status {cursor:pointer;}`]; |
| 56 | + } |
| 57 | + static get properties() { |
| 58 | + return { |
| 59 | + index: Number, |
| 60 | + iscomplete : Boolean, |
| 61 | + txt : String |
| 62 | + }; |
| 63 | + } |
| 64 | + render(){ |
| 65 | + return html` |
| 66 | + <div class="tags has-addons is-centered" style="margin-bottom:0rem"> |
| 67 | + <span id="status" class="tag ${this.iscomplete === "true"? 'is-success' : 'is-warning'}" @click="${this.toggle}"> |
| 68 | + ${this.iscomplete === "true" ? "Done" : "Pending"} |
| 69 | + </span> |
| 70 | + <span class="tag is-info">${this.txt}</span> |
| 71 | + <a class="tag is-delete is-light" @click="${this.remove}"></a> |
| 72 | + </div> |
| 73 | + `; |
| 74 | + } |
| 75 | + toggle(){ |
| 76 | + this.applyTransition("toggleTodo",this.index); |
| 77 | + } |
| 78 | + remove(){ |
| 79 | + this.applyTransition('removeTodo',this.index) |
| 80 | + } |
| 81 | +} |
| 82 | + |
| 83 | +customElements.define("my-todo",myTodo); |
| 84 | + |
| 85 | +/** |
| 86 | + * Container class that gets updated each time the todos State variable changes or any transition is fired. |
| 87 | + * It shows a list of todos. |
| 88 | + */ |
| 89 | +class myContainer extends litStatesMixin([todos],LitElement){ |
| 90 | + static get styles() { |
| 91 | + return [bulma_lit, css`.withmargin{margin-top:2rem;}`]; |
| 92 | + } |
| 93 | + render(){ |
| 94 | + return html` |
| 95 | + <div class="container"> |
| 96 | + <span class="subtitle is-4 has-text-info"> ImperaJs</span> <span class="subtitle is-4">Todo App</span> |
| 97 | + <div class ="box" style="padding:3rem"> |
| 98 | + <slot name="head"></slot> |
| 99 | + <div class="withmargin" > |
| 100 | + <div> ${this.todos.map((todo,index)=> html`<my-todo index="${index}" txt="${todo.txt}" iscomplete="${todo.isComplete}"></my-todo>`)}</div> |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + `; |
| 105 | + } |
| 106 | +} |
| 107 | +customElements.define("my-container",myContainer); |
| 108 | + |
| 109 | +}; |
| 110 | + |
| 111 | +with_bulma(); |
0 commit comments