Index: samples/third_party/todomvc_performance/js_todomvc/elements/td-item.html |
diff --git a/samples/third_party/todomvc_performance/js_todomvc/elements/td-item.html b/samples/third_party/todomvc_performance/js_todomvc/elements/td-item.html |
new file mode 100755 |
index 0000000000000000000000000000000000000000..2cc13a3dd91bc543987a2741099560c39104777f |
--- /dev/null |
+++ b/samples/third_party/todomvc_performance/js_todomvc/elements/td-item.html |
@@ -0,0 +1,47 @@ |
+<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> |