-
Notifications
You must be signed in to change notification settings - Fork 45
/
input.js
73 lines (66 loc) · 1.86 KB
/
input.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
'use strict';
(function(exports) {
var TodoInputManager = {
_input: null, // Will be an element when starting up.
drawInput(motd) {
var input = TodoInputManager._input;
// Quiz#3
var tidyUp = function() {
input.value = '';
input.disabled = false;
};
input.placeholder = motd.message;
input.addEventListener('keydown', function(event) {
TodoInputManager.onUserCreateNewTodo(event, tidyUp);
});
},
fetchData(afterFetch) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/demo-input-motd.json', true);
xhr.responseType = 'json';
xhr.onreadystatechange = function(e) {
// Watch out: we have a mysterious unknown 'this'.
if (this.readyState == 4 && this.status == 200) {
var motd = this.response;
// The flow ends here.
// Quiz#3
afterFetch(motd);
} else {
// We omit the error in this novice's example.
}
};
xhr.send();
},
// Quiz#3
saveData(todoItem, afterSave) {
console.log('saved');
// Quiz#3
afterSave();
},
// Quiz#3
onUserCreateNewTodo(event, afterCreation) {
var input = TodoInputManager._input;
if (0x0D === event.keyCode) {
var data = {
checked: false,
description: input.value
};
// To prevent user saving multiple times.
input.disabled = true;
TodoInputManager.saveData(data, afterCreation);
// To save this in local, and notify the proxy to sync
// it with the server.
window.dispatchEvent(new CustomEvent('todo-item-created',
{ detail: data }));
}
},
init() {
TodoInputManager._input = document.querySelector('#todo-input');
TodoInputManager.fetchData(function(response) {
TodoInputManager.drawInput(response);
});
}
};
// Quiz#3
exports.TodoInputManager = TodoInputManager;
})(window);