From 4696fa9dfd441a3ccae1e98fd7d11433b13ce53d Mon Sep 17 00:00:00 2001 From: Greg Weng Date: Thu, 1 Oct 2015 01:25:20 +0800 Subject: [PATCH 1/3] Update the slides link --- README.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..1d90f09 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# The slides + +[Follow this linke](https://docs.google.com/presentation/d/1ofgD63SENpiihJ_MIYyZVW2TM11Mo-qwcstDbZytqIo/edit?usp=sharing) From e9a867514ca200941110e672c0441b0284348d4a Mon Sep 17 00:00:00 2001 From: Greg Weng Date: Thu, 1 Oct 2015 09:42:09 +0800 Subject: [PATCH 2/3] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1d90f09..c170bd5 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # The slides -[Follow this linke](https://docs.google.com/presentation/d/1ofgD63SENpiihJ_MIYyZVW2TM11Mo-qwcstDbZytqIo/edit?usp=sharing) +[Follow this link](https://docs.google.com/presentation/d/1ofgD63SENpiihJ_MIYyZVW2TM11Mo-qwcstDbZytqIo/edit?usp=sharing) From efbbe42fdd6e1cc4cbf5ec51c93352768bb17986 Mon Sep 17 00:00:00 2001 From: whatword Date: Fri, 23 Oct 2015 22:53:05 +0800 Subject: [PATCH 3/3] V1 --- homework/content.js | 53 ++++++++++------- homework/index.html | 1 + homework/list.js | 113 ++++++++++++++++++++----------------- homework/main.js | 9 +++ homework/test/test-list.js | 14 +++-- 5 files changed, 115 insertions(+), 75 deletions(-) create mode 100644 homework/main.js diff --git a/homework/content.js b/homework/content.js index 710be28..9c70805 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,21 +1,18 @@ '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(exports) { - function resetWrapper() { - _wrapper.innerHTML = ''; - } +var NotecontentManager = function() { + this._wrapper = null; +} + +NotecontentManager.prototype = { + + resetWrapper() { + this._wrapper.innerHTML = ''; + }, - function drawNote(note) { + drawNote(note) { var title = note.title; var h = document.createElement('h2'); h.textContent = title; @@ -27,11 +24,27 @@ p.textContent = passage; buff.appendChild(p); }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + }, + + handleEvent(event) { + switch(event.type) { + case 'note-open': + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + break; + } + }, + + start() { + this._wrapper = document.querySelector('#note-content-wrapper'); + window.addEventListener('note-open', this); } - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); +}; + + +exports.NotecontentManager = NotecontentManager; +})(window); diff --git a/homework/index.html b/homework/index.html index e387963..f450f82 100644 --- a/homework/index.html +++ b/homework/index.html @@ -3,6 +3,7 @@ Homework - Note List + diff --git a/homework/list.js b/homework/list.js index 21eddbc..b781f57 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,44 +1,35 @@ 'use strict'; -(function() { +(function(exports) { - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); +var NoteListManager = function() { + this._listNoteContent = []; + this._wrapper = null; +}; - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); - } +NoteListManager.prototype = { - function onNoteOpen(event) { - if (event.target.classList.contains('note-title')) { - var id = event.target.dataset.noteId; - var content = _listNoteContent[id]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - }; - } + onNoteOpen(event) { + var id = event.target.dataset.noteId; + 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; - } + updateList(list) { + this._listNoteContent = list; + }, - function drawList() { - var list = _listNoteContent; + drawList() { + var list = this._listNoteContent; var ul = document.createElement('ul'); ul.id = 'note-title-list'; var buff = document.createDocumentFragment(); @@ -52,28 +43,48 @@ buff.appendChild(li); }); ul.appendChild(buff); - _wrapper.appendChild(ul); - } + this._wrapper.appendChild(ul); + }, - function 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 ){ + fetchList() { + return new Promise((function(resolve,reject) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', '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. - } - }; - xhr.send(); - } + } + }; + xhr.send(); + }).bind(this)); + }, - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); + handleEvent(event) { + switch(event.type) { + case 'click': + if(event.target.classList.contains('note-title')) { + this.onNoteOpen(event); + } + break; + } + }, + + start() { + window.addEventListener('click',this); + this._wrapper = document.querySelector('#note-list-wrapper'); + this.fetchList().then((function(data) { + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); + }).bind(this)); + } +}; -})(); +exports.NoteListManager = NoteListManager; +})(window); diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..f19f83b --- /dev/null +++ b/homework/main.js @@ -0,0 +1,9 @@ +'use strict'; + + // Kick off +document.addEventListener('DOMContentLoaded', function(event) { + var todoListManager = new NoteListManager(); + var todocontentManager = new NotecontentManager(); + todoListManager.start(); + todocontentManager.start(); +}); \ No newline at end of file diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..0435710 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,14 @@ -describe('Test > ', function() { - beforeEach(function() { - }); +describe('Test NoteListManager', function() { + var subject; + + beforeEach(function() { + subject = new NoteListManager(); + }); - it('will test some pure functions', function() { + it('It will test drawList functions', function() { // Write any pure function assertion here. + subject._wrapper = document.createElement('div'); + subject.drawList([]); + assert.isNull(subject._wrapper.querySelector('li')); }); });