Skip to content

Commit 874347f

Browse files
semanticdatasemanticdata
authored
formatting
1 parent 04c928d commit 874347f

File tree

12 files changed

+309
-198
lines changed

12 files changed

+309
-198
lines changed

‎README.md

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h1><img src="src/icons/icon64.png" height="28px" width="28px" /> Notekeeper</h1>
1+
<h1><img src="./src/icons/icon64.png" height="28px" width="28px" /> Notekeeper</h1>
22

33
![Mozilla Add-on](https://img.shields.io/amo/v/newtab-notes@semanticdata) ![Add-on rating](https://img.shields.io/amo/rating/newtab-notes@semanticdata) ![Add-on downloads](https://img.shields.io/amo/dw/newtab-notes@semanticdata) ![Add-on users](https://img.shields.io/amo/users/newtab-notes@semanticdata) ![License](https://img.shields.io/github/license/semanticdata/firefox-new-tab-notes)
44

@@ -9,19 +9,18 @@ Notekeeper is a Firefox extension that transforms the new tab into a minimalist,
99

1010
## ✨ Features
1111

12-
- Auto-saves content after every keystroke.
13-
- Integrated with Firefox Sync. Access your notes across browser instances.
14-
- Integrated with [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Access your notes while working offline, and sync them across browser instances with [Firefox Sync](https://www.mozilla.org/en-US/firefox/features/sync/), or [Chrome Sync](https://support.google.com/chrome/answer/185277).
15-
- New Dark/Light themes. (includes toggle button)
12+
- ✅ Auto-saves content after every keystroke.
13+
- ✅ Integrated with Firefox Sync. Access your notes across browser instances.
14+
- ✅ Integrated with [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Access your notes while working offline, and sync them across browser instances with [Firefox Sync](https://www.mozilla.org/en-US/firefox/features/sync/), or [Chrome Sync](https://support.google.com/chrome/answer/185277).
15+
- ✅ Dark/Light themes. (includes toggle button)
1616

17-
## 🖼 Screenshot
18-
19-
![screenshot](screenshot.png)
17+
| ![screenshot](./screenshot.png) |
18+
| :---: |
2019

2120
## 💜 Acknowledgments
2221

23-
This extension is based on [Tab Notes](https://github.com/nsht/tab_notes). It hadn't received updates in over 4 years when forked.
22+
This extension is based on [Tab Notes](https://github.com/nsht/tab_notes). It hadn't received updates in over 4 years when originally forked.
2423

2524
## © License
2625

27-
Source code in this repository is available under the [MIT License](LICENSE).
26+
Source code in this repository is available under the [MIT License](./LICENSE).

‎demo/index.html

Lines changed: 35 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,42 @@
11
<!DOCTYPE html>
22

33
<html lang="en" data-theme="light">
4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Notekeeper's Demo</title>
8-
<meta name="description" content="Notekeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
9-
<link
10-
rel="icon"
11-
type="image/png"
12-
sizes="64x64"
13-
href="../src/icons/icon64.png" />
14-
<link rel="stylesheet" href="../src/styles.css" />
15-
</head>
164

17-
<body>
18-
<header>
19-
<h1 class="nav-title">
20-
<img
21-
src="../src/icons/icon64.png"
22-
alt="icon"
23-
height="32px"
24-
width="32px" />
25-
Notekeeper
26-
</h1>
27-
<button
28-
type="button"
29-
data-theme-toggle
30-
aria-label="Change to light theme">
31-
Change to light theme
32-
</button>
33-
</header>
5+
<head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Notekeeper's Demo</title>
9+
<meta name="description"
10+
content="Notekeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
11+
<link rel="icon" type="image/png" sizes="64x64" href="../src/icons/icon64.png" />
12+
<link rel="stylesheet" href="../src/styles.css" />
13+
</head>
3414

35-
<main>
36-
<textarea
37-
class="textarea"
38-
id="notes"
39-
rows="20"
40-
placeholder="Write something..."></textarea>
41-
</main>
15+
<body>
16+
<header>
17+
<h1 class="nav-title">
18+
<img src="../src/icons/icon64.png" alt="icon" height="32px" width="32px" />
19+
Notekeeper
20+
</h1>
21+
<button type="button" data-theme-toggle aria-label="Change to light theme">
22+
Change to light theme
23+
</button>
24+
</header>
4225

43-
<footer>
44-
<p>
45-
Made with
46-
<a
47-
class="heart"
48-
href="https://github.com/semanticdata/notekeeper"
49-
>❤</a
50-
>
51-
in Minneapolis.
52-
</p>
53-
</footer>
26+
<main>
27+
<textarea class="textarea" id="notes" rows="20" placeholder="Write something..."></textarea>
28+
</main>
5429

55-
<script type="text/javascript" src="../src/js/tabnotes.js"></script>
56-
<script type="text/javascript" src="../src/js/toggle.js"></script>
57-
<script type="text/javascript" src="notepad.js"></script>
58-
</body>
59-
</html>
30+
<footer>
31+
<p>
32+
Made with
33+
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
34+
in Minneapolis.
35+
</p>
36+
</footer>
37+
38+
<script type="text/javascript" src="tabnotes.js"></script>
39+
<script type="text/javascript" src="toggle.js"></script>
40+
</body>
41+
42+
</html>

‎demo/tabnotes.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
var timeoutId
2+
const notes = document.getElementById('notes')
3+
document.addEventListener('keyup', logKey)
4+
5+
const browser_type = getBrowser()
6+
if (browser_type === 'Chrome') {
7+
var browser_obj = chrome
8+
} else {
9+
var browser_obj = browser
10+
}
11+
12+
browser_obj.tabs.onActivated.addListener(tabOpen)
13+
browser_obj.windows.onFocusChanged.addListener(tabOpen)
14+
15+
function logKey(e) {
16+
clearTimeout(timeoutId)
17+
timeoutId = setTimeout(function () {
18+
saveToDB()
19+
}, 10)
20+
}
21+
22+
function getBrowser() {
23+
if (typeof chrome !== 'undefined') {
24+
if (typeof browser !== 'undefined') {
25+
return 'Firefox'
26+
} else {
27+
return 'Chrome'
28+
}
29+
} else {
30+
return 'Edge'
31+
}
32+
}
33+
34+
function saveToDB() {
35+
data = {
36+
tab_note: document.querySelector('#notes').value
37+
}
38+
if (browser_type === 'Chrome') {
39+
chrome.storage.sync.set(data, function () { })
40+
} else {
41+
browser_obj.storage.sync.set(data)
42+
}
43+
}
44+
45+
function tabOpen(tab) {
46+
if (browser_type === 'Chrome') {
47+
chrome.storage.sync.get(['tab_note'], function (result) {
48+
if (typeof result.tab_note !== 'undefined') {
49+
document.querySelector('#notes').value = result.tab_note
50+
}
51+
})
52+
} else {
53+
browser_obj.storage.sync.get(['tab_note']).then((result) => {
54+
if (typeof result.tab_note !== 'undefined') {
55+
document.querySelector('#notes').value = result.tab_note
56+
}
57+
})
58+
}
59+
}
60+
61+
window.addEventListener('load', () => {
62+
tabOpen()
63+
})

‎demo/toggle.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* * Function to calculate current theme setting.
2+
* Look for a local storage value.
3+
* Fall back to system setting.
4+
* Fall back to light mode. */
5+
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
6+
if (localStorageTheme !== null) {
7+
return localStorageTheme
8+
}
9+
10+
if (systemSettingDark.matches) {
11+
return 'dark'
12+
}
13+
14+
return 'light'
15+
}
16+
17+
/* Function to update the button text and aria-label. */
18+
function updateButton({ buttonEl, isDark }) {
19+
// const newCta = isDark ? "Change to light theme" : "Change to dark theme";
20+
const newCta = isDark ? '🌗' : '🌓'
21+
// use an aria-label if you are omitting text on the button
22+
// and using a sun/moon icon, for example
23+
buttonEl.setAttribute('aria-label', newCta)
24+
buttonEl.innerText = newCta
25+
}
26+
27+
/* Utility function to update the theme setting on the html tag */
28+
function updateThemeOnHtmlEl({ theme }) {
29+
document.querySelector('html').setAttribute('data-theme', theme)
30+
}
31+
32+
/* On page load: */
33+
/* 1. Grab what we need from the DOM and system settings on page load */
34+
const button = document.querySelector('[data-theme-toggle]')
35+
const localStorageTheme = localStorage.getItem('theme')
36+
const systemSettingDark = window.matchMedia('(prefers-color-scheme: dark)')
37+
38+
/* 2. Work out the current site settings */
39+
let currentThemeSetting = calculateSettingAsThemeString({
40+
localStorageTheme,
41+
systemSettingDark
42+
})
43+
44+
/* 3. Update the theme setting and button text accoridng to current settings */
45+
updateButton({ buttonEl: button, isDark: currentThemeSetting === 'dark' })
46+
updateThemeOnHtmlEl({ theme: currentThemeSetting })
47+
48+
/* 4. Add an event listener to toggle the theme */
49+
button.addEventListener('click', (event) => {
50+
const newTheme = currentThemeSetting === 'dark' ? 'light' : 'dark'
51+
52+
localStorage.setItem('theme', newTheme)
53+
updateButton({ buttonEl: button, isDark: newTheme === 'dark' })
54+
updateThemeOnHtmlEl({ theme: newTheme })
55+
56+
currentThemeSetting = newTheme
57+
})

‎manifest.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"manifest_version": 2,
33
"name": "Notekeeper",
4-
"version": "1.2.4",
4+
"version": "1.2.5",
55
"description": "Notekeeper transforms your new tab into a minimalist, auto-saving text editor.",
66
"browser_specific_settings": {
77
"gecko": {
@@ -13,7 +13,9 @@
1313
"icons": {
1414
"64": "src/icons/icon64.png"
1515
},
16-
"permissions": ["storage"],
16+
"permissions": [
17+
"storage"
18+
],
1719
"chrome_url_overrides": {
1820
"newtab": "src/newtab.html"
1921
},
@@ -24,7 +26,9 @@
2426
}
2527
},
2628
"background": {
27-
"scripts": ["src/background.js"]
29+
"scripts": [
30+
"src/background.js"
31+
]
2832
},
2933
"options_ui": {
3034
"page": "src/options/options.html",
@@ -45,4 +49,4 @@
4549
"description": "Toggle Notekeeper in the sidebar."
4650
}
4751
}
48-
}
52+
}

‎src/js/tabnotes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function saveToDB() {
3636
tab_note: document.querySelector('#notes').value
3737
}
3838
if (browser_type === 'Chrome') {
39-
chrome.storage.sync.set(data, function () {})
39+
chrome.storage.sync.set(data, function () { })
4040
} else {
4141
browser_obj.storage.sync.set(data)
4242
}

‎src/js/toggle.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Look for a local storage value.
33
* Fall back to system setting.
44
* Fall back to light mode. */
5-
function calculateSettingAsThemeString({localStorageTheme, systemSettingDark}) {
5+
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
66
if (localStorageTheme !== null) {
77
return localStorageTheme
88
}
@@ -15,7 +15,7 @@ function calculateSettingAsThemeString({localStorageTheme, systemSettingDark}) {
1515
}
1616

1717
/* Function to update the button text and aria-label. */
18-
function updateButton({buttonEl, isDark}) {
18+
function updateButton({ buttonEl, isDark }) {
1919
// const newCta = isDark ? "Change to light theme" : "Change to dark theme";
2020
const newCta = isDark ? '🌗' : '🌓'
2121
// use an aria-label if you are omitting text on the button
@@ -25,7 +25,7 @@ function updateButton({buttonEl, isDark}) {
2525
}
2626

2727
/* Utility function to update the theme setting on the html tag */
28-
function updateThemeOnHtmlEl({theme}) {
28+
function updateThemeOnHtmlEl({ theme }) {
2929
document.querySelector('html').setAttribute('data-theme', theme)
3030
}
3131

@@ -42,16 +42,16 @@ let currentThemeSetting = calculateSettingAsThemeString({
4242
})
4343

4444
/* 3. Update the theme setting and button text accoridng to current settings */
45-
updateButton({buttonEl: button, isDark: currentThemeSetting === 'dark'})
46-
updateThemeOnHtmlEl({theme: currentThemeSetting})
45+
updateButton({ buttonEl: button, isDark: currentThemeSetting === 'dark' })
46+
updateThemeOnHtmlEl({ theme: currentThemeSetting })
4747

4848
/* 4. Add an event listener to toggle the theme */
4949
button.addEventListener('click', (event) => {
5050
const newTheme = currentThemeSetting === 'dark' ? 'light' : 'dark'
5151

5252
localStorage.setItem('theme', newTheme)
53-
updateButton({buttonEl: button, isDark: newTheme === 'dark'})
54-
updateThemeOnHtmlEl({theme: newTheme})
53+
updateButton({ buttonEl: button, isDark: newTheme === 'dark' })
54+
updateThemeOnHtmlEl({ theme: newTheme })
5555

5656
currentThemeSetting = newTheme
5757
})

0 commit comments

Comments
 (0)