diff --git a/homework/content.js b/homework/content.js
index 710be28..4666d54 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,37 +1,53 @@
'use strict';
+(function(exports){
-(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);
- }
-
- document.addEventListener('DOMContentLoaded', function(event) {
- start();
- });
-})();
+
+ /**
+ * Create a instance of contentManager.
+ *
+ * @constructor
+ */
+ var ContentManager = function() {
+ /** @private */ this._wrapper = document.querySelector('#note-content-wrapper');
+ document.addEventListener('DOMContentLoaded', this.start.bind(this));
+ }
+
+ ContentManager.prototype = {
+
+ /** Initialization */
+ start() {
+ window.addEventListener('note-open', this.updateContent.bind(this));
+ },
+
+ /** Update note wrapper's content */
+ updateContent(event) {
+ var note = event.detail;
+ this.resetWrapper();
+ this.drawNote(note);
+ },
+
+ /** Clear the note wrapper */
+ resetWrapper() {
+ this._wrapper.innerHTML = '';
+ },
+
+ /** set content on wrapper */
+ 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);
+ }
+ }
+
+ window.ContentManager = ContentManager;
+})(window);
diff --git a/homework/index.html b/homework/index.html
index e387963..f4a467e 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -5,6 +5,7 @@
Homework - Note List
+
diff --git a/homework/karma.conf.js b/homework/karma.conf.js
index f669cd0..d54986e 100644
--- a/homework/karma.conf.js
+++ b/homework/karma.conf.js
@@ -56,7 +56,7 @@ module.exports = function(config) {
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
- browsers: ['Firefox'],
+ browsers: ['FirefoxDeveloper'],
// Continuous Integration mode
diff --git a/homework/list.js b/homework/list.js
index 21eddbc..f65aa16 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,79 +1,99 @@
'use strict';
+(function(exports) {
-(function() {
+ /**
+ * Create a instance of the ListManager.
+ *
+ * @constructor
+ */
+ var ListManager = function() {
+ /** @private */ this._listNoteContent = [];
+ /** @private */ this._wrapper = document.querySelector('#note-list-wrapper');
+ document.addEventListener('DOMContentLoaded', this.start.bind(this));
+ }
- var _listNoteContent = [];
- var _wrapper = document.querySelector('#note-list-wrapper');
+ ListManager.prototype = {
- function start() {
- fetchList(function(data) {
- updateList(data);
- drawList();
- preloadFirstNote();
- });
- window.addEventListener('click', function(event) {
- onNoteOpen(event);
- });
- }
+ /** Initialize the listManager. */
+ start() {
+ this.fetchList()
+ .then(this.updateList.bind(this))
+ .then(this.drawList.bind(this))
+ .then(this.preloadFirstNote.bind(this))
+ .catch(function(error) {
+ console.error(error);
+ });
+ window.addEventListener('click', this.onNoteOpen.bind(this));
+ },
- 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 }));
- };
- }
+ /**
+ * Get List form localhost
+ *
+ * @return {Promise} A start point of the work flow.
+ */
+ fetchList(afterFetch) {
+ return new Promise(function(resolve, reject) {
+ var req = new XMLHttpRequest();
+ req.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true);
+ req.responseType = 'json';
+ req.onload = function () {
+ if (req.status === 200 )
+ resolve(req.response);
+ };
+ req.onerror = function () {
+ reject( new Error(req.statusText));
+ };
+ req.send();
+ });
+ },
- function preloadFirstNote() {
- if (_listNoteContent.length !== 0) {
- var content = _listNoteContent[0];
- window.dispatchEvent(new CustomEvent('note-open',
- { detail: content }));
- }
- }
+ /** Update the list */
+ updateList(list) {
+ this._listNoteContent = list;
+ },
- function updateList(list) {
- _listNoteContent = list;
- }
+ /** Append all list title */
+ drawList() {
+ var list = this._listNoteContent;
+ var ul = document.createElement('ul');
+ ul.id = 'note-title-list';
+ var buff = document.createDocumentFragment();
+ list.forEach(insertItem.bind(buff));
+ ul.appendChild(buff);
+ this._wrapper.appendChild(ul);
+ },
- function drawList() {
- var list = _listNoteContent;
- var ul = document.createElement('ul');
- ul.id = 'note-title-list';
- var buff = document.createDocumentFragment();
- list.forEach(function(note, i) {
- var li = document.createElement('li');
- li.dataset.noteId = i;
- li.classList.add('note-title');
- li.textContent = note.title;
- // Note: buff is captured, so we now have a
- // little closure naturally.
- buff.appendChild(li);
- });
- ul.appendChild(buff);
- _wrapper.appendChild(ul);
- }
+ /** Show first note before user do anything. */
+ preloadFirstNote() {
+ if (this._listNoteContent.length !== 0) {
+ var content = this._listNoteContent[0];
+ window.dispatchEvent(new CustomEvent('note-open',
+ { detail: content }));
+ }
+ },
- 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 ){
- // Ignore error in this case.
- }
- };
- xhr.send();
- }
+ /**
+ * Trigger 'note-open' event while note opened
+ *
+ * @this {ListManager}
+ * @param {object} event The information such as event source, which is about event.
+ */
+ onNoteOpen(event) {
+ if (event.target.classList.contains('note-title')) {
+ var id = event.target.dataset.noteId;
+ var content = this._listNoteContent[id];
+ window.dispatchEvent(new CustomEvent('note-open',
+ { detail: content }));
+ };
+ }
+ }
+ exports.ListManager = ListManager;
+})(window);
- document.addEventListener('DOMContentLoaded', function(event) {
- start();
- });
-
-})();
+function insertItem(element, index) {
+ var li = document.createElement('li');
+ li.dataset.noteId = index;
+ li.classList.add('note-title');
+ li.textContent = element.title;
+ this.appendChild(li);
+}
diff --git a/homework/main.js b/homework/main.js
new file mode 100644
index 0000000..5785fb4
--- /dev/null
+++ b/homework/main.js
@@ -0,0 +1,7 @@
+'use strict';
+document.addEventListener('DOMContentLoaded', function(event) {
+ var contentManger = new ContentManager();
+ var listManager = new ListManager();
+ contentManger.start();
+ listManager.start();
+});
diff --git a/homework/test/test-list.js b/homework/test/test-list.js
index 441fc45..5cfd8cb 100644
--- a/homework/test/test-list.js
+++ b/homework/test/test-list.js
@@ -3,6 +3,6 @@ describe('Test > ', function() {
});
it('will test some pure functions', function() {
- // Write any pure function assertion here.
+ expect(true).to.be.true;
});
});