| 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 |