quicknote example updated

quicknote/manifest.json

@@ -16,6 +16,10 @@
     }
   }, 
 
+  "permissions": [
+    "storage"
+  ], 
+
   "browser_action": {
     "default_icon": "icons/quicknote-32.png",
     "default_title": "Quicknote",

quicknote/popup/quicknote.css

@@ -75,12 +75,12 @@ p, input, textarea {
   padding: 2px;
 }
 
-.new-note input {
+input {
   width: 100%;
   margin-bottom: 2px;
 }
 
-.new-note textarea {
+textarea {
   width: 100%;
   margin-bottom: 4px;
   resize: none;
@@ -106,4 +106,12 @@ p, input, textarea {
 
 p {
   margin: 0;
+}
+
+.cancel {
+  float: left;
+}
+
+.update {
+  float: right;
 }

quicknote/popup/quicknote.js

@@ -1,3 +1,5 @@
+/* initialise variables */
+
 var inputTitle = document.querySelector('.new-note input');
 var inputBody = document.querySelector('.new-note textarea');
 
@@ -7,9 +9,13 @@ var noteContainer = document.querySelector('.note-container');
 var clearBtn = document.querySelector('.clear');
 var addBtn = document.querySelector('.add');
 
+/*  add event listeners to buttons */
+
 addBtn.addEventListener('click', addNote);
 clearBtn.addEventListener('click', clearAll);
 
+/* display previously-saved stored notes on startup */
+
 initialize();
 
 function initialize() {
@@ -20,6 +26,8 @@ function initialize() {
   }
 }
 
+/* Add a note to the display, and storage */
+
 function addNote() {
   var noteTitle = inputTitle.value;
   var noteBody = inputBody.value;
@@ -33,37 +41,106 @@ function addNote() {
 }
 
 function displayNote(title, body) {
+
+  /* create note display box */
   var note = document.createElement('div');
+  var noteDisplay = document.createElement('div');
   var noteH = document.createElement('h2');
   var notePara = document.createElement('p');
   var deleteBtn = document.createElement('button');
   var clearFix = document.createElement('div');
 
   note.setAttribute('class','note');
+
   noteH.textContent = title;
   notePara.textContent = body;
   deleteBtn.setAttribute('class','delete');
   deleteBtn.textContent = 'Delete note';
   clearFix.setAttribute('class','clearfix');
 
-  note.appendChild(noteH);
-  note.appendChild(notePara);
-  note.appendChild(deleteBtn);
-  note.appendChild(clearFix);
+  noteDisplay.appendChild(noteH);
+  noteDisplay.appendChild(notePara);
+  noteDisplay.appendChild(deleteBtn);
+  noteDisplay.appendChild(clearFix);
 
-  noteContainer.appendChild(note);
+  note.appendChild(noteDisplay);
+
+  /* set up listener for the delete functionality */
 
   deleteBtn.addEventListener('click',function(e){
     evtTgt = e.target;
-    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+    evtTgt.parentNode.parentNode.parentNode.removeChild(evtTgt.parentNode.parentNode);
     localStorage.removeItem(title);
   })
+
+  /* create note edit box */
+  var noteEdit = document.createElement('div');
+  var noteTitleEdit = document.createElement('input');
+  var noteBodyEdit = document.createElement('textarea');
+  var clearFix2 = document.createElement('div');
+
+  var updateBtn = document.createElement('button');
+  var cancelBtn = document.createElement('button');
+
+  updateBtn.setAttribute('class','update');
+  updateBtn.textContent = 'Update note';
+  cancelBtn.setAttribute('class','cancel');
+  cancelBtn.textContent = 'Cancel update';
+
+  noteEdit.appendChild(noteTitleEdit);
+  noteTitleEdit.value = title;
+  noteEdit.appendChild(noteBodyEdit);
+  noteBodyEdit.textContent = body;
+  noteEdit.appendChild(updateBtn);
+  noteEdit.appendChild(cancelBtn);
+
+  noteEdit.appendChild(clearFix2);
+  clearFix2.setAttribute('class','clearfix');
+
+  note.appendChild(noteEdit);
+
+  noteContainer.appendChild(note);
+  noteEdit.style.display = 'none';
+
+  /* set up listeners for the update functionality */
+
+  noteH.addEventListener('click',function(){
+    noteDisplay.style.display = 'none';
+    noteEdit.style.display = 'block';
+  })
+
+  notePara.addEventListener('click',function(){
+    noteDisplay.style.display = 'none';
+    noteEdit.style.display = 'block';
+  }) 
+
+  cancelBtn.addEventListener('click',function(){
+    noteDisplay.style.display = 'block';
+    noteEdit.style.display = 'none';
+    noteTitleEdit.value = title;
+    noteBodyEdit.value = body;
+  })
+
+  updateBtn.addEventListener('click',function(){
+    if(noteTitleEdit.value !== title || noteBodyEdit.value !== body) {
+      updateNote(title,noteTitleEdit.value,noteBodyEdit.value);
+      note.parentNode.removeChild(note);
+    } 
+  });
+}
+
+function updateNote(delNote,newTitle,newBody) {
+  storeNote(newTitle, newBody);
+  displayNote(newTitle, newBody);
+  localStorage.removeItem(delNote);
 }
 
 function storeNote(title, body) {
   localStorage.setItem(title, body);
 }
 
+/* Clear all notes from the display/storage */
+
 function clearAll() {
   while (noteContainer.firstChild) {
       noteContainer.removeChild(noteContainer.firstChild);