MAP-NCU2015 · CrashedBboy · Oct 12, 2015 · Oct 14, 2015 · Oct 15, 2015 · Oct 16, 2015
diff --git 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
@@ -5,6 +5,7 @@
   <title> Homework - Note List </title>
   <script defer src="list.js"></script>
   <script defer src="content.js"></script>
+	<script defer src="main.js"></script>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>

diff --git 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
@@ -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
@@ -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
@@ -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;
   });
 });