OLD | NEW |
| (Empty) |
1 <link rel="import" href="../components/polymer/polymer.html"> | |
2 <link rel="import" href="td-input.html"> | |
3 | |
4 <polymer-element name="td-item" extends="li" attributes="item editing" on-blur="
{{commitAction}}"> | |
5 <template> | |
6 <link rel="stylesheet" href="td-item.css"> | |
7 <div class="view {{ {completed: item.completed, editing: editing
} | tokenList }}" hidden?="{{editing}}" on-dblclick="{{editAction}}"> | |
8 <input type="checkbox" class="toggle" checked="{{item.co
mpleted}}" on-click="{{itemChangeAction}}"> | |
9 <label>{{item.title}}</label> | |
10 <button class="destroy" on-click="{{destroyAction}}"></b
utton> | |
11 </div> | |
12 <input is="td-input" id="edit" class="edit" value="{{item.title}
}" hidden?="{{!editing}}" on-td-input-commit="{{commitAction}}" on-td-input-canc
el="{{cancelAction}}"> | |
13 </template> | |
14 <script> | |
15 (function() { | |
16 Polymer('td-item', { | |
17 editing: false, | |
18 editAction: function() { | |
19 this.editing = true; | |
20 // schedule focus for the end of microta
sk, when the input will be visible | |
21 this.asyncMethod(function() { | |
22 this.$.edit.focus(); | |
23 }); | |
24 }, | |
25 commitAction: function() { | |
26 if (this.editing) { | |
27 this.editing = false; | |
28 this.item.title = this.item.titl
e.trim(); | |
29 if (this.item.title === '') { | |
30 this.destroyAction(); | |
31 } | |
32 this.fire('td-item-changed'); | |
33 } | |
34 }, | |
35 cancelAction: function() { | |
36 this.editing = false; | |
37 }, | |
38 itemChangeAction: function() { | |
39 this.fire('td-item-changed'); | |
40 }, | |
41 destroyAction: function() { | |
42 this.fire('td-destroy-item', this.item); | |
43 } | |
44 }); | |
45 })(); | |
46 </script> | |
47 </polymer-element> | |
OLD | NEW |