You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
47 lines
1.6 KiB
<link rel="import" href="../bower_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>
|
|
|