diff --git a/.DS_Store b/.DS_Store index 7c4e5d1..792bf5a 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/quicknote/manifest.json b/quicknote/manifest.json index 2e53151..214732b 100644 --- a/quicknote/manifest.json +++ b/quicknote/manifest.json @@ -16,6 +16,10 @@ } }, + "permissions": [ + "storage" + ], + "browser_action": { "default_icon": "icons/quicknote-32.png", "default_title": "Quicknote", diff --git a/quicknote/popup/quicknote.css b/quicknote/popup/quicknote.css index 7aad2a1..d18e8a8 100644 --- a/quicknote/popup/quicknote.css +++ b/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; } \ No newline at end of file diff --git a/quicknote/popup/quicknote.js b/quicknote/popup/quicknote.js index 6848e16..a6902b8 100644 --- a/quicknote/popup/quicknote.js +++ b/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);