From bd4b44874a5fd80798158a76038a66bd8482283e Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 14:27:05 +0800 Subject: [PATCH 1/7] Update Content.js (Bind this Event) --- homework/content.js | 74 +++++++++++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 33 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..c9aa3d4 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,45 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); - - function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); - } - - function resetWrapper() { - _wrapper.innerHTML = ''; - } - - function drawNote(note) { - var title = note.title; - var h = document.createElement('h2'); - h.textContent = title; - var passages = note.passages; - var buff = document.createDocumentFragment(); - passages.forEach(function(passage) { - var p = document.createElement('p'); - p.classList.add('note-passage'); - p.textContent = passage; - buff.appendChild(p); - }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); +(function(exports) { + + var ToDoContentManager = function () { + this._wrapper = null; } + ToDoContentManager.prototype = { + start(){ + /* + *Initiate wrapper. + *To do bind(this) + */ + this._wrapper = document.querySelector('note-content-wrapper'); + window.addEventListener('note-open',(function(event){ + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); + }, + + resetWrapper() { + this._wrapper.innerHTML = ''; + }, + + drawNote(note) { + var title = note.title; + var h = document.createElement('h2'); + h.textContent = title; + var passages = note.passages; + var buff = document.createDocumentFragment(); + passages.forEach(function(passage) { + var p = document.createElement('p'); + p.classList.add('note-passage'); + p.textContent = passage; + buff.appendChild(p); + }); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + } + }; - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); + exports.ToDoContentManager = ToDoContentManager; + +})(window); From 9b7ff250b3b48e5dcf250192b9af805752cb5b94 Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 14:51:46 +0800 Subject: [PATCH 2/7] Update list.js (Bind this Event) --- homework/list.js | 90 +++++++++++++++++++++++++----------------------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/homework/list.js b/homework/list.js index 21eddbc..1550211 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,44 +1,47 @@ 'use strict'; -(function() { - - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); - - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); - } - - function onNoteOpen(event) { - if (event.target.classList.contains('note-title')) { +(function(exports) { + + var ToDoListManager = function(){ + this._listNoteContent = []; + this._wrapper = document.querySelector('#note-list-wrapper'); + }; + + ToDoListManager.prototype = { + start(){ + this.fetchList((function(data) { + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); + }).bind(this)) + window.addEventListener('click', (function(event) { + this.onNoteOpen(event); + }).bind(this)); + }, + + onNoteOpen(event){ + if (event.target.classList.contains('note-title')) { var id = event.target.dataset.noteId; - var content = _listNoteContent[id]; + var content = this._listNoteContent[id]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); - }; - } - - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; + }; + }, + + preloadFirstNote(){ + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); - } - } - - function updateList(list) { - _listNoteContent = list; - } - - function drawList() { - var list = _listNoteContent; + } + }, + + updateList(list) { + this._listNoteContent = list; + }, + + drawList() { + var list = this._listNoteContent; var ul = document.createElement('ul'); ul.id = 'note-title-list'; var buff = document.createDocumentFragment(); @@ -52,14 +55,14 @@ buff.appendChild(li); }); ul.appendChild(buff); - _wrapper.appendChild(ul); - } + this._wrapper.appendChild(ul); + }, - function fetchList(afterFetch) { + fetchList(afterFetch) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); xhr.responseType = 'json'; - xhr.onreadystatechange = function(e) { + xhr.onreadystatechange = (function(e) { // Watch out: we have a mysterious unknown 'this'. if (this.readyState === 4 && this.status === 200) { var listData = this.response; @@ -68,12 +71,11 @@ } else if (this.status !== 200 ){ // Ignore error in this case. } - }; + }).bind(this); xhr.send(); - } - - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); + } + + }; + exports.ToDoListManager = ToDoListManager; })(); From 0ac10a38f15f332cacce90fe66b7f25f446a887e Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 14:56:07 +0800 Subject: [PATCH 3/7] Create main.js --- homework/main.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 homework/main.js diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..ba6648d --- /dev/null +++ b/homework/main.js @@ -0,0 +1,8 @@ +'use strict'; + +document.addEventListener('DOMContentLoaded',function(event){ + var ToDoContentManager = new ToDoContentManager(); + var ToDoListManager = new ToDoListManager(); + ToDoContentManager.start(); + ToDoListManager.start(); +}); From 0f2bd2946e881e9c67883968852d3b3dd15481b2 Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 14:58:47 +0800 Subject: [PATCH 4/7] Update content.js --- homework/content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/content.js b/homework/content.js index c9aa3d4..0d881fd 100644 --- a/homework/content.js +++ b/homework/content.js @@ -4,7 +4,7 @@ var ToDoContentManager = function () { this._wrapper = null; - } + }; ToDoContentManager.prototype = { start(){ /* From b03a0e73d3943fe2c135149fd69815850bc8e09b Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 15:01:28 +0800 Subject: [PATCH 5/7] Update index.html --- homework/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/homework/index.html b/homework/index.html index e387963..c52a45e 100644 --- a/homework/index.html +++ b/homework/index.html @@ -4,6 +4,7 @@ Homework - Note List + From 1b88f0438076654c01b3f49161d0d22dc93075da Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 15:44:09 +0800 Subject: [PATCH 6/7] Deal with asynchronous flows with Promise --- homework/list.js | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/homework/list.js b/homework/list.js index 1550211..d710a8d 100644 --- a/homework/list.js +++ b/homework/list.js @@ -9,11 +9,12 @@ ToDoListManager.prototype = { start(){ - this.fetchList((function(data) { + this.fetchList() + .then((function(data) { this.updateList(data); this.drawList(); this.preloadFirstNote(); - }).bind(this)) + }).bind(this)); window.addEventListener('click', (function(event) { this.onNoteOpen(event); }).bind(this)); @@ -59,23 +60,26 @@ }, fetchList(afterFetch) { - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.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 listData = this.response; - // The flow ends here. - afterFetch(listData); - } else if (this.status !== 200 ){ - // Ignore error in this case. - } - }).bind(this); - xhr.send(); + return new Promise((function(resolve , reject){ + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.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 listData = this.response; + // The flow ends here. + resolve(listData); + } else if (this.status !== 200 ){ + // Ignore error in this case. + reject('Error!'); + } + }; + xhr.send(); + }).bind(this)); } }; exports.ToDoListManager = ToDoListManager; -})(); +})(window); From 53923a4526897eff9253237183e843393fadbff2 Mon Sep 17 00:00:00 2001 From: nickyeh97 Date: Thu, 29 Oct 2015 15:56:47 +0800 Subject: [PATCH 7/7] My first test case --- homework/test/test-list.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..8336fc3 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,12 @@ -describe('Test > ', function() { +describe('Test ToDoListManager ', function() { + var subject; beforeEach(function() { + subject = new ToDoListManager(); }); it('will test some pure functions', function() { - // Write any pure function assertion here. + var test = subject; + var sum = test.puerFunction(1,1); + assert.equal(sum,2,'It is equal to 2!'); }); });