| <link rel="import" href="../components/polymer/polymer.html"> |
| <link rel="import" href="td-input.html"> |
| |
| <polymer-element name="td-item" extends="li" attributes="item editing" on-blur="{{commitAction}}"> |
| <template> |
| <link rel="stylesheet" href="td-item.css"> |
| <div class="view {{ {completed: item.completed, editing: editing} | tokenList }}" hidden?="{{editing}}" on-dblclick="{{editAction}}"> |
| <input type="checkbox" class="toggle" checked="{{item.completed}}" on-click="{{itemChangeAction}}"> |
| <label>{{item.title}}</label> |
| <button class="destroy" on-click="{{destroyAction}}"></button> |
| </div> |
| <input is="td-input" id="edit" class="edit" value="{{item.title}}" hidden?="{{!editing}}" on-td-input-commit="{{commitAction}}" on-td-input-cancel="{{cancelAction}}"> |
| </template> |
| <script> |
| (function() { |
| Polymer('td-item', { |
| editing: false, |
| editAction: function() { |
| this.editing = true; |
| // schedule focus for the end of microtask, when the input will be visible |
| this.asyncMethod(function() { |
| this.$.edit.focus(); |
| }); |
| }, |
| commitAction: function() { |
| if (this.editing) { |
| this.editing = false; |
| this.item.title = this.item.title.trim(); |
| if (this.item.title === '') { |
| this.destroyAction(); |
| } |
| this.fire('td-item-changed'); |
| } |
| }, |
| cancelAction: function() { |
| this.editing = false; |
| }, |
| itemChangeAction: function() { |
| this.fire('td-item-changed'); |
| }, |
| destroyAction: function() { |
| this.fire('td-destroy-item', this.item); |
| } |
| }); |
| })(); |
| </script> |
| </polymer-element> |