-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
127 lines (107 loc) · 4.87 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// Default tab
switchTab("tab-1", "tab-current");
// Output saved notes to list tab
populateNoteList();
// Save button
document.getElementById("button-save").addEventListener("click", saveNote);
// New button
document.getElementById("button-new").addEventListener("click", newNote);
// Add tab switch functionality on tab-1 and tab-2
document.getElementById("tab-1").addEventListener("click", function(){switchTab("tab-1", "tab-current")});
document.getElementById("tab-2").addEventListener("click", function(){switchTab("tab-2", "tab-list")});
// Function to add tab switch functionality to an element (linkName)
function switchTab(linkName, tabName) {
// Add 'displaynone' to all tab-content elements
// for (var i = 0; i < document.getElementsByClassName("tab-content").length; i++) {
// document.getElementsByClassName("tab-content")[i].classList.add("displaynone");
// }
// Remove 'active' class from all tab-nav elements
for (var i = 0; i < document.getElementsByClassName("tab-nav").length; i++) {
document.getElementsByClassName("tab-nav")[i].classList.remove("active");
}
// Remove 'displaynone' class from clicked tab
// document.getElementById(tabName).classList.remove("displaynone");
// Add 'active' class back to clicked tab
document.getElementById(linkName).classList.add("active");
if (tabName == "tab-current"){
document.getElementById("content").classList.remove("minus-margin");
document.getElementById("tab-list").style.maxHeight = "224px";
}
else{
document.getElementById("content").classList.add("minus-margin");
document.getElementById("tab-list").style.maxHeight = "unset";
}
}
// Saves current note to chrome.storage
function saveNote(){
// Name input field
var name_field = document.getElementById("note-title");
// If field is blank, cancel
if(name_field.value.length < 1){
return;
}
// Create variables from the note, title and make a last modified date
var note = document.getElementById("note-content").value;
var title = document.getElementById("note-title").value.replace(/ /g,"_");
var last_modified = Date.now();
// Put variables in chrome storage (object key will be the title)
chrome.storage.sync.set({
[title] : {
"title" : title,
"note" : note,
"last_modified" : last_modified
}
});
}
// Retrieves all data from chrome.storage and outputs it to the list tab
function populateNoteList(){
// Retrieves all data from chrome.storage and puts it in items
chrome.storage.sync.get(null, function(items) {
// Loop through each item in items
for(var item in items){
// Closure for event listener in a loop
(function (item) {
// Only take items with an actual value
if (items.hasOwnProperty(item)) {
// New list element
var node = document.createElement("li");
// Add unique id and title
// node.setAttribute("id", items[item].title);
node.setAttribute("class", "clearfix");
node.innerHTML = "<div class='note-title' id='" + items[item].title + "'>" + items[item].title + "</div>" + "<button id='delete-" + items[item].title + "' class='button button-delete material'></button>";
// Add note to list
document.getElementById("notes-list").appendChild(node);
// Add event listener for when the note is clicked
document.getElementById(items[item].title).addEventListener("click", function(){showNote(items[item].title)}, false);
// Add event listener for when delete button is clicked
document.getElementById('delete-'+items[item].title).addEventListener("click", function(){deleteNote(items[item].title)}, false);
}
// End of closure
}(item));
}
})
}
// Shows a note when it is clicked
function showNote(key){
// Get the clicked note from chrome.storage
chrome.storage.sync.get(key, function(item){
// Output its value to the note-content textarea
document.getElementById("note-content").value = item[key].note;
document.getElementById("note-title").value = item[key].title;
});
// Switch to the tab with textarea
document.getElementById("tab-1").click();
}
// Clears textarea and title for new note
function newNote(){
document.getElementById("note-content").value = '';
document.getElementById("note-title").value = '';
}
// Deletes passed note
function deleteNote(noteTitle){
// Remove note from chrome.storage
chrome.storage.sync.remove(noteTitle, function(){
// Remove element from DOM
document.getElementById(noteTitle).parentElement.remove();
});
}