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 |