whatword · whatword · Sep 30, 2015 · Oct 1, 2015 · Oct 23, 2015 · Oct 23, 2015
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# The slides
+
+[Follow this link](https://docs.google.com/presentation/d/1ofgD63SENpiihJ_MIYyZVW2TM11Mo-qwcstDbZytqIo/edit?usp=sharing)
diff --git 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
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title> Homework - Note List </title>
+    <script defer src="main.js"></script>
   <script defer src="list.js"></script>
   <script defer src="content.js"></script>
   <link rel="stylesheet" type="text/css" href="main.css" />

diff --git 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
@@ -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();
+});
diff --git 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'));
   });
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# The slides

		[Follow this link](https://docs.google.com/presentation/d/1ofgD63SENpiihJ_MIYyZVW2TM11Mo-qwcstDbZytqIo/edit?usp=sharing)