| import Ember from 'ember'; |
| |
| export default Ember.Component.extend({ |
| repo: Ember.inject.service(), |
| tagName: 'li', |
| editing: false, |
| classNameBindings: ['todo.completed', 'editing'], |
| |
| actions: { |
| startEditing() { |
| this.get('onStartEdit')(); |
| this.set('editing', true); |
| Ember.run.scheduleOnce('afterRender', this, 'focusInput'); |
| }, |
| |
| doneEditing(todoTitle) { |
| if (!this.get('editing')) { return; } |
| if (Ember.isBlank(todoTitle)) { |
| this.send('removeTodo'); |
| } else { |
| this.set('todo.title', todoTitle.trim()); |
| this.set('editing', false); |
| this.get('onEndEdit')(); |
| } |
| }, |
| |
| handleKeydown(e) { |
| if (e.keyCode === 13) { |
| e.target.blur(); |
| } else if (e.keyCode === 27) { |
| this.set('editing', false); |
| } |
| }, |
| |
| toggleCompleted(e) { |
| let todo = this.get('todo'); |
| Ember.set(todo, 'completed', e.target.checked); |
| this.get('repo').persist(); |
| }, |
| |
| removeTodo() { |
| this.get('repo').delete(this.get('todo')); |
| } |
| }, |
| |
| focusInput() { |
| this.element.querySelector('input.edit').focus(); |
| } |
| }); |