Optional logging and no more speedlimits

LukeZzzHD · Aug 16, 2019 · 2c6d23d · 2c6d23d
1 parent 4722976
commit 2c6d23d
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 28 deletions.
diff --git a/jquery.min.js b/jquery.min.js
diff --git a/manifest.json b/manifest.json
@@ -13,7 +13,7 @@
 		"48": "icon48.png",
 		"128": "icon128.png"
 	},
-	"permissions": ["activeTab", "https://ajax.googleapis.com/"],
+	"permissions": ["activeTab", "https://ajax.googleapis.com/", "storage"],
 	"background": {
 		"scripts": ["background.js"]
 	},

diff --git a/materialize.min.js b/materialize.min.js
diff --git a/popup.html b/popup.html
@@ -3,17 +3,31 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
 		<style>
 			html,
 			body {
 				width: 200px;
 				height: 200px;
 			}
+			#container {
+				width: 200px;
+				height: 200px;
+			}
+			#toggleLogging {
+				width: 160px;
+				height: 36px;
+				margin: 82px 20px;
+				user-select: none;
+			}
 		</style>
 	</head>
 	<body>
-		<div id="container">
-			<button id="toggleLogging">Logging is <span id="onoff"></span></button>
+		<div id="container" class="white">
+			<a id="toggleLogging" class="btn black white-text tooltipped hoverable center-align" data-position="top" data-tooltip="Click to toggle!">Logging is <span id="onoff"></span></a>
 		</div>
+		<script src="jquery.min.js"></script>
+		<script src="materialize.min.js"></script>
+		<script src="popup.js"></script>
 	</body>
 </html>
diff --git a/popup.js b/popup.js
@@ -1,22 +1,35 @@
-const getLoggingState = () => localStorage.getItem('logging');
-const setLoggingState = state => localStorage.setItem('logging', state);
+const getLoggingState = () => {
+	return new Promise((resolve, reject) => {
+		chrome.storage.local.get(['logging'], result => {
+			resolve(result);
+		});
+	});
+};
 
-const toggleLoggingState = () => {
-	let state = getLoggingState();
-	if (!state || state === '') {
-		setLoggingState('off');
-	} else {
-		state === 'off' ? setLoggingState('on') : setLoggingState('off');
-	}
+const setLoggingState = state => {
+	chrome.storage.local.set({ logging: state }, () => {
+		console.log(`chrome.storage API -> logging was turned ${state}`);
+	});
 };
 
-const updateSpan = () => {
-	let state = getLoggingState();
-	if (!state || state === '') {
-		setLoggingState('off');
-	}
-	document.getElementById('onoff').innerText = state;
+const toggleLoggingState = () => {
+	getLoggingState().then(result => {
+		if (result.logging === 'off') {
+			setLoggingState('on');
+		} else {
+			setLoggingState('off');
+		}
+		updateSpan();
+	});
 };
 
-document.addEventListener('DOMContentLoaded', updateSpan);
-document.getElementById('toggleLogging').addEventListener('click', toggleLoggingState);
+const updateSpan = () => getLoggingState().then(result => $('#onoff').text(result.logging));
+
+$(document).ready(function() {
+	$('#toggleLogging').click(() => {
+		toggleLoggingState();
+	});
+
+	updateSpan();
+	$('.tooltipped').tooltip();
+});
diff --git a/script.js b/script.js
diff --git a/settings.js b/settings.js