Skip to content

Commit 8446706

Browse files
semanticdatasemanticdata
committed
extract references
1 parent 003999d commit 8446706

12 files changed

Lines changed: 483 additions & 0 deletions

File tree

src/icons/icon32.png renamed to references/icons/icon32.png

File renamed without changes.

src/icons/icon48.png renamed to references/icons/icon48.png

File renamed without changes.

src/icons/icon96.png renamed to references/icons/icon96.png

File renamed without changes.

src/js/tabnotes.js renamed to references/js/tabnotes.js

File renamed without changes.

src/js/theme-init.js renamed to references/js/theme-init.js

File renamed without changes.

src/js/toggle.js renamed to references/js/toggle.js

File renamed without changes.

‎references/oldtab.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en" data-theme="light">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>NoteKeeper</title>
8+
<meta name="description"
9+
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
10+
<link rel="icon" type="image/png" sizes="48x48" href="icons/icon48.png" />
11+
<!-- Prevent flash of incorrect theme -->
12+
<script type="text/javascript" src="js/theme-init.js"></script>
13+
<link rel="stylesheet" href="styles.css" />
14+
</head>
15+
16+
<body>
17+
<header>
18+
<h1 class="nav-title">
19+
<img src="icons/icon32.png" alt="icon" height="32px" width="32px" />
20+
NoteKeeper
21+
</h1>
22+
<button type="button" data-theme-toggle aria-label="Change to light theme">
23+
Theme Toggle
24+
</button>
25+
</header>
26+
27+
<main>
28+
<textarea class="textarea" id="notes" rows="20" placeholder="Write something..."></textarea>
29+
</main>
30+
31+
<footer>
32+
<p>
33+
Made with
34+
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
35+
in Minneapolis.
36+
</p>
37+
</footer>
38+
39+
<script type="text/javascript" src="js/tabnotes.js"></script>
40+
<script type="text/javascript" src="js/toggle.js"></script>
41+
</body>
42+
43+
</html>

‎references/options/options.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
:root {
2+
--input-bg: #f8f9fa;
3+
--input-border: #dee2e6;
4+
--button-primary: #7048e8;
5+
--button-hover: #845ef7;
6+
--selection-bg: #7048e8;
7+
--selection-color: #ffffff;
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
text-align: center;
13+
}
14+
15+
body {
16+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
17+
line-height: 1.6;
18+
max-width: 600px;
19+
margin: 0 auto;
20+
padding: 1rem;
21+
}
22+
23+
::selection {
24+
background: rebeccapurple;
25+
color: #ffffff;
26+
}
27+
28+
h1 {
29+
margin-bottom: 2rem;
30+
text-align: center;
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
gap: 0.75rem;
35+
}
36+
37+
form {
38+
margin-bottom: 1.5rem;
39+
}
40+
41+
label {
42+
display: block;
43+
font-weight: 500;
44+
}
45+
46+
button {
47+
padding: 0.75rem 1.5rem;
48+
border: none;
49+
border-radius: 6px;
50+
background: var(--button-primary);
51+
color: white;
52+
font-size: 1rem;
53+
font-weight: 500;
54+
cursor: pointer;
55+
transition: background-color 0.3s ease;
56+
margin-right: 0.5rem;
57+
}
58+
59+
button:hover {
60+
background: var(--button-hover);
61+
}
62+
63+
button#reset {
64+
background: transparent;
65+
border: 1px solid var(--button-primary);
66+
color: var(--button-primary);
67+
}
68+
69+
button#reset:hover {
70+
background: var(--input-bg);
71+
}
72+
73+
input {
74+
width: 100%;
75+
padding: 0.75rem;
76+
border: 1px solid var(--input-border);
77+
border-radius: 6px;
78+
background: var(--input-bg);
79+
margin-bottom: 1rem;
80+
font-size: 1rem;
81+
}
82+
83+
input,
84+
button {
85+
border-radius: 5px !important;
86+
}
87+
88+
footer {
89+
margin-top: 3rem;
90+
text-align: center;
91+
font-size: 0.875rem;
92+
opacity: 0.8;
93+
}
94+
95+
footer p a {
96+
text-decoration: none;
97+
}
98+
99+
footer p a:hover {
100+
color: red;
101+
}
102+
103+
#status {
104+
margin-top: 1rem;
105+
}

‎references/options/options.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Notekeeper's Options</title>
8+
<meta name="description"
9+
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
10+
<link rel="icon" type="image/png" sizes="48x48" href="../icons/icon48.png" />
11+
<link rel="stylesheet" href="options.css" />
12+
</head>
13+
14+
<body>
15+
<header>
16+
<h1 class="nav-title">
17+
<img src="../icons/icon32.png" alt="icon" height="32px" width="32px" />
18+
NoteKeeper
19+
</h1>
20+
</header>
21+
22+
<main>
23+
<form>
24+
<label for="shortcut">Keyboard Shortcut</label>
25+
<br />
26+
<input class="input is-small is-dark" type="text" id="shortcut" />
27+
</form>
28+
<button id="update">Update</button>
29+
<button id="reset">Reset</button>
30+
<div id="status"></div>
31+
</main>
32+
33+
<footer>
34+
<p>
35+
Made with
36+
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
37+
in Minneapolis.
38+
</p>
39+
</footer>
40+
41+
<script src="options.js"></script>
42+
</body>
43+
44+
</html>

‎references/options/options.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const sidebarToggle = "_execute_sidebar_action";
2+
3+
// Update UI and set value of textbox
4+
async function updateUI() {
5+
try {
6+
const commands = await browser.commands.getAll();
7+
for (const command of commands) {
8+
if (command.name === sidebarToggle) {
9+
document.querySelector("#shortcut").value = command.shortcut;
10+
}
11+
}
12+
} catch (error) {
13+
console.error("Error updating UI:", error);
14+
}
15+
}
16+
17+
// Update shortcut to value of textbox
18+
async function updateShortcut() {
19+
try {
20+
await browser.commands.update({
21+
name: sidebarToggle,
22+
shortcut: document.querySelector("#shortcut").value,
23+
});
24+
// Provide visual feedback
25+
const statusElement = document.querySelector("#status");
26+
if (statusElement) {
27+
statusElement.textContent = "Shortcut updated successfully!";
28+
setTimeout(() => {
29+
statusElement.textContent = "";
30+
}, 2000);
31+
}
32+
} catch (error) {
33+
console.error("Error updating shortcut:", error);
34+
// Show error message
35+
const statusElement = document.querySelector("#status");
36+
if (statusElement) {
37+
statusElement.textContent = "Error updating shortcut. Please try again.";
38+
setTimeout(() => {
39+
statusElement.textContent = "";
40+
}, 2000);
41+
}
42+
}
43+
}
44+
45+
// Reset shortcut and update textbox
46+
async function resetShortcut() {
47+
try {
48+
await browser.commands.reset(sidebarToggle);
49+
await updateUI();
50+
// Provide visual feedback
51+
const statusElement = document.querySelector("#status");
52+
if (statusElement) {
53+
statusElement.textContent = "Shortcut reset successfully!";
54+
setTimeout(() => {
55+
statusElement.textContent = "";
56+
}, 2000);
57+
}
58+
} catch (error) {
59+
console.error("Error resetting shortcut:", error);
60+
}
61+
}
62+
63+
// Initialize event listeners
64+
function initEventListeners() {
65+
document.querySelector("#update").addEventListener("click", updateShortcut);
66+
document.querySelector("#reset").addEventListener("click", resetShortcut);
67+
}
68+
69+
// Update UI and set up event listeners on page load
70+
document.addEventListener("DOMContentLoaded", () => {
71+
updateUI();
72+
initEventListeners();
73+
});

0 commit comments

Comments
 (0)