DYEBench should use TodoMVC to test FlightJS for consistency
[WebKit-https.git] / PerformanceTests / DoYouEvenBench / resources / todomvc / dependency-examples / flight / app / js / ui / todo_list.js
1 /*global define, $ */
2 'use strict';
3
4 define([
5     'flight/lib/component',
6     'text!app/templates/todo.html',
7     '../utils'
8 ], function (defineComponent, todoTmpl, utils) {
9     function todoList() {
10         var ENTER_KEY = 13;
11         var template = utils.tmpl(todoTmpl);
12
13         this.defaultAttrs({
14             destroySelector: 'button.destroy',
15             toggleSelector: 'input.toggle',
16             labelSelector: 'label',
17             editSelector: '.edit'
18         });
19
20         this.renderAll = function (e, data) {
21             this.$node.html('');
22             data.todos.forEach(function (each) {
23                 this.render(e, { todo: each });
24             }, this);
25         };
26
27         this.render = function (e, data) {
28             if (e.type === 'dataTodoAdded' && data.filter === 'completed') {
29                 return;
30             }
31
32             this.$node.append(template(data.todo));
33         };
34
35         this.edit = function (e, data) {
36             var $todoEl = $(data.el).parents('li');
37
38             $todoEl.addClass('editing');
39             this.select('editSelector').focus();
40         };
41
42         this.requestUpdate = function (e) {
43             var $inputEl = $(e.currentTarget);
44             var $todoEl = $inputEl.parents('li');
45             var value = $inputEl.val().trim();
46             var id = $todoEl.attr('id');
47
48             if (!$todoEl.hasClass('editing')) {
49                 return;
50             }
51
52             $todoEl.removeClass('editing');
53
54             if (value) {
55                 $todoEl.find('label').html(value);
56                 this.trigger('uiUpdateRequested',  { id: id, title: value });
57             } else {
58                 this.trigger('uiRemoveRequested', { id: id });
59             }
60         };
61
62         this.requestUpdateOnEnter = function (e, data) {
63             if (e.which === ENTER_KEY) {
64                 this.requestUpdate(e, data);
65             }
66         };
67
68         this.requestRemove = function (e, data) {
69             var id = $(data.el).attr('id').split('_')[1];
70             this.trigger('uiRemoveRequested', { id: id });
71         };
72
73         this.remove = function (e, data) {
74             var $todoEl = this.$node.find('#' + data.id);
75             $todoEl.remove();
76         };
77
78         this.toggle = function (e, data) {
79             var $todoEl = $(data.el).parents('li');
80
81             $todoEl.toggleClass('completed');
82             this.trigger('uiToggleRequested', { id: $todoEl.attr('id') });
83         };
84
85         this.after('initialize', function () {
86             this.on(document, 'dataTodoAdded', this.render);
87             this.on(document, 'dataTodosLoaded', this.renderAll);
88             this.on(document, 'dataTodosFiltered', this.renderAll);
89             this.on(document, 'dataTodoToggledAll', this.renderAll);
90             this.on(document, 'dataTodoRemoved', this.remove);
91
92             this.on('click', { 'destroySelector': this.requestRemove });
93             this.on('click', { 'toggleSelector': this.toggle });
94             this.on('dblclick', { 'labelSelector': this.edit });
95
96             this.$node.on('blur', '.edit', this.requestUpdate.bind(this));
97             this.$node.on('keydown', '.edit', this.requestUpdateOnEnter.bind(this));
98
99             // these don't work
100             // this.on(this.attr.editSelector, 'blur', this.requestUpdate);
101             // this.on('blur', { 'editSelector': this.requestUpdate });
102
103             this.trigger('uiLoadRequested');
104         });
105     }
106
107     return defineComponent(todoList);
108 });