-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
142 lines (118 loc) · 6.13 KB
/
index.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Taken from https://gist.github.com/SimonPadbury/fc55c054c0480550c3be592111778763 -->
<link rel="stylesheet" href="./styles/stickystyle.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<title>Simple Noter</title>
</head>
<body>
<!-- This is a comment -->
<h1>simple-note</h1>
<p><sub>To make notes, just type in the space below. Press Ctrl + x to save, or Ctrl + s to save on disk!</sub></p>
<p><sub>
Font is <a href="https://fonts.google.com/specimen/Indie+Flower">Indie Flower</a>, taken from <a href="https://fonts.google.com/">Google Fonts.</a>
<br>
Sticky note CSS is taken from Github user <a href="https://gist.github.com/SimonPadbury">SimonPadbury's</a> <a href="https://gist.github.com/SimonPadbury/fc55c054c0480550c3be592111778763">gist.</a>
</sub></p>
<p><sub id="autosaveMessageSub"></sub></p>
<label for="autosaveEnabledCheckbox">Enable Auto Save</label>
<input type="checkbox" id="autosaveEnabledCheckbox" name="autosaveEnabledCheckbox"/>
<br>
<br>
<br>
<div id="content"></div>
<br><br><br><br>
<br><br><br><br>
<br><br><br>
<button onclick="cleartheNotes(content)" type="button">Clear the Notes</button>
<script src="https://unpkg.com/filer/dist/filer.min.js"></script>
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
<script src="https://unpkg.com/file-saver@2.0.2/src/FileSaver.js"></script>
<script>
const fs = new Filer.FileSystem();
var nString = "Nothing is saved yet, so just type here!"; //init
var autosaveMinutes = 1;
var lastSaveTime = Date(Date.now);
var contentDiv = document.getElementById("content");
var autoSaveMessageSub = document.getElementById("autosaveMessageSub");
var autosaveEnabledCheckbox = document.getElementById("autosaveEnabledCheckbox");
var noteDiv = document.createElement("div");
noteDiv.setAttribute("contenteditable", true);
noteDiv.id = "note";
noteDiv.className = "sticky";
contentDiv.appendChild(noteDiv);
hotkeys.filter = function(event) {
var tagName = (event.target || event.srcElement).tagName;
return !(tagName.isContentEditable || tagName == "INPUT" || tagName == "SELECT" || tagName == "TEXTAREA");
}
window.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
fs.readFile("/note", 'utf8', function(err, data) {
if(err) {
console.log("Document not found/ could not be read. New file will be created upon save.");
noteDiv.setAttribute("aria-placeholder", nString);
}
if(data) {
noteDiv.textContent = data;
console.log("Document loaded.");
setInterval(autoSaveNote, autosaveMinutes * 1000);
console.log("Autosave started.");
}
});
});
hotkeys("ctrl+x,ctrl+s", function(event, handler) {
event.preventDefault();
const newNString = document.getElementById("note").textContent;
switch (handler.key) {
case "ctrl+x":
saveNote(newNString);
break;
case "ctrl+s":
saveOnDisk(newNString)
}
});
function autoSaveNote() {
const newNString = document.getElementById("note").textContent;
if (autosaveEnabledCheckbox.checked) {
// Setup user autosave message
autoSaveMessageSub.innerText = "This page automatically saves your note every " + autosaveMinutes + (autosaveMinutes > 1 ? " minutes" : " minute") + ".\nLast save at: " + lastSaveTime;
saveNote(newNString, true);
}
else {
// Setup user autosave message
autoSaveMessageSub.innerText = "This page does NOT automatically saves your note (auto save is disabled).\nLast save at: " + lastSaveTime;
}
}
function saveNote(content, hideAlert) {
fs.writeFile("/note", content, function (err) {
if (err) {
return alert("Unable to save the note: " + err);
}
else {
console.log("Document saved: " + content);
lastSaveTime = Date(Date.now);
if (!hideAlert) alert("Note saved!");
}
});
}
function saveOnDisk(content) {
if (!content) alert("Your note is empty. Type something before saving it on disk!");
else {
const fileName = prompt("Please enter the name of the file where you want to store your note", "simple-note.txt");
// If fileName is empty or the user clicks on "cancel", nothing will be done
if (fileName) {
const file = new File([content], fileName, {type: "text/plain;charset=utf-8"});
saveAs(file);
lastSaveTime = Date(Date.now);
}
}
}
function cleartheNotes(content) {
document.getElementById("note").textContent = "";
alert("Note cleared!");
}
</script>
</body>
</html>