Add notification and focus options (#245)

Co-authored-by: Federico Brigante <[email protected]>
fregante · Mar 2, 2023 · 3d7dc9f · 3d7dc9f
1 parent 2180bee
commit 3d7dc9f
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@ node_modules
 yarn.lock
 distribution
 .cache
+.yarn/cache
 .parcel-cache
 LocalOverrides.xcconfig
diff --git a/source/background.js b/source/background.js
@@ -62,8 +62,8 @@ function handlePortListenerErrors(listener) {
 
 chrome.runtime.onConnect.addListener(handlePortListenerErrors(async port => {
 	console.assert(port.name === 'new-field');
-	const {serverPort} = await optionsStorage.getAll();
-	const response = await fetch(`http://localhost:${serverPort}`);
+	const options = await optionsStorage.getAll();
+	const response = await fetch(`http://localhost:${options.serverPort}`);
 	const {ProtocolVersion, WebSocketPort} = await response.json();
 	if (ProtocolVersion !== 1) {
 		throw new Error('Incompatible protocol version');

diff --git a/source/ghost-text.js b/source/ghost-text.js
@@ -1,9 +1,11 @@
 import GThumane from './humane-ghosttext.js';
 import unsafeMessenger from './unsafe-messenger.js';
+import optionsStorage from './options-storage.js';
 
 const knownElements = new Map();
 const activeFields = new Set();
 const eventOptions = {bubbles: true};
+const optionsPromise = optionsStorage.getAll();
 
 let isWaitingForActivation = false;
 const startTimeout = 15_000;
@@ -111,14 +113,17 @@ class GhostTextField {
 		this.field.dataset.gtField = 'loading';
 
 		this.port = chrome.runtime.connect({name: 'new-field'});
-		this.port.onMessage.addListener(message => {
+		this.port.onMessage.addListener(async message => {
 			if (message.message) {
 				this.receive({data: message.message});
 			} else if (message.close) {
 				this.deactivate(false);
 				updateCount();
 			} else if (message.ready) {
-				notify('log', 'Connected! You can switch to your editor');
+				const options = await optionsPromise;
+				if (options.notifyOnConnect) {
+					notify('log', 'Connected! You can switch to your editor');
+				}
 
 				this.field.addEventListener('input', this.send);
 				this.field.dataset.gtField = 'enabled';
@@ -184,7 +189,7 @@ class GhostTextField {
 		}
 	}
 
-	deactivate(wasSuccessful = true) {
+	async deactivate(wasSuccessful = true) {
 		if (this.state === 'inactive') {
 			return;
 		}
@@ -196,9 +201,12 @@ class GhostTextField {
 		this.field.removeEventListener('input', this.send);
 		this.field.dataset.gtField = '';
 
-		chrome.runtime.sendMessage({
-			code: 'focus-tab',
-		});
+		const options = await optionsPromise;
+		if (options.focusOnDisconnect) {
+			chrome.runtime.sendMessage({
+				code: 'focus-tab',
+			});
+		}
 
 		if (wasSuccessful) {
 			updateCount();
@@ -221,14 +229,17 @@ class GhostTextField {
 	}
 }
 
-function updateCount() {
+async function updateCount() {
 	chrome.runtime.sendMessage({
 		code: 'connection-count',
 		count: activeFields.size,
 	});
 
 	if (activeFields.size === 0) {
-		notify('log', 'Disconnected! \n <a href="https://github.com/fregante/GhostText/issues" target="_blank">Report issues</a>');
+		const options = await optionsPromise;
+		if (options.notifyOnConnect) {
+			notify('log', 'Disconnected! \n <a href="https://github.com/fregante/GhostText/issues" target="_blank">Report issues</a>');
+		}
 	}
 }
 

diff --git a/source/options-storage.js b/source/options-storage.js
@@ -3,6 +3,8 @@ import OptionsSync from 'webext-options-sync';
 const optionsStorage = new OptionsSync({
 	defaults: {
 		serverPort: 4001,
+		notifyOnConnect: true,
+		focusOnDisconnect: true,
 	},
 });
 

diff --git a/source/options.css b/source/options.css
@@ -0,0 +1,14 @@
+.field {
+	display: flex;
+	align-items: baseline;
+	gap: 0.7em
+}
+
+[type='checkbox'] {
+	margin: 0;
+	align-self: start;
+}
+
+#serverPort {
+	width: 7em;
+}
diff --git a/source/options.html b/source/options.html
@@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <meta charset="UTF-8" />
 <title>GhostText options</title>
-<link rel="stylesheet" href="npm:webext-base-css">
+<style>
+	@import 'npm:webext-base-css';
+	@import './options.css';
+</style>
 <form id="options-form">
-	<label>
-		Server Port
+	<p class="field">
+		<label for="serverPort">
+			Server Port
+		</label>
 		<input
 			name="serverPort"
+			id="serverPort"
 			type="number"
 			min="1"
 			max="65536"
@@ -15,10 +21,33 @@
 			value="4001"
 			required
 		/>
-	</label>
+	</p>
+	<p class="field">
+		<input
+			name="notifyOnConnect"
+			id="notifyOnConnect"
+			type="checkbox"
+			checked
+		/>
+		<label for="notifyOnConnect">
+			Display notifications when connected and disconnected
+		</label>
+	</p>
+	<p class="field">
+		<input
+			name="focusOnDisconnect"
+			id="focusOnDisconnect"
+			type="checkbox"
+			checked
+		/>
+		<label for="focusOnDisconnect">
+			Bring the focus back to the browser when disconnected. <br>
+			some OS bring the browser to the foreground, others 'flash' the browser icon in the taskbar.
+		</label>
+	</p>
 </form>
-<p>You can find information on how GhostText works and how to troubleshoot any issues on <a href="https://github.com/fregante/GhostText">its repo</a>.</p>
 <hr>
+<p>You can find information on how GhostText works and how to troubleshoot any issues on <a href="https://github.com/fregante/GhostText">its repo</a>.</p>
 <p>If you find this useful, consider supporting its development by <a href="https://github.com/sponsors/fregante">donating or sponsoring me on GitHub</a>.</p>
 <p>Made with 🍕 by <a href="https://fregante.com">fregante</a>.</p>
 <script type="module" src="options.js"></script>