Merge pull request #40 from shgysk8zer0/feature/39

Update options on input change

background.js

@@ -1,5 +1,7 @@
 const TABS = {};
 
+const defaultIcon = 'icons/subscribe-16.svg';
+
 async function clickHandler(tab) {
 	const opts = await browser.storage.local.get('openFeed');
 	if (opts.hasOwnProperty('openFeed')) {
@@ -31,7 +33,7 @@ async function updatePageAction(tab, links) {
 		const opts = await browser.storage.local.get('icon');
 		browser.pageAction.setIcon({
 			tabId: tab.id,
-			path: opts.icon || 'icons/subscribe-16.svg'
+			path: opts.icon || defaultIcon
 		});
 		browser.pageAction.show(tab.id);
 	}
@@ -71,4 +73,13 @@ async function refreshAllTabsPageAction() {
 browser.runtime.onMessage.addListener(messageHandler);
 browser.tabs.onRemoved.addListener(removeHandler);
 browser.tabs.onUpdated.addListener(scanPage);
+browser.storage.onChanged.addListener(async (opts) => {
+	if (opts.hasOwnProperty('icon') && opts.icon.newValue !== opts.icon.oldValue) {
+		const tabs = await browser.tabs.query({status: 'complete'});
+		tabs.forEach(tab => browser.pageAction.setIcon({
+			tabId: tab.id,
+			path: opts.icon.newValue || defaultIcon
+		}));
+	}
+});
 refreshAllTabsPageAction();

manifest.json

@@ -5,19 +5,19 @@
     "name": "Chris Zuber",
     "url": "https://chriszuber.com"
   },
-  "version": "0.4.1",
+  "version": "1.0.0",
   "description": "__MSG_extensionDescription__",
   "homepage_url": "https://github.com/shgysk8zer0/awesome-rss",
   "icons": {
-    "48": "icons/subscribe-16.svg"
+    "48": "icons/subscribe-64.svg"
   },
   "default_locale": "en",
   "permissions": [
     "tabs",
     "storage"
   ],
   "page_action": {
-    "default_icon": "icons/subscribe-16.svg",
+    "default_icon": "icons/subscribe-64.svg",
     "default_title": "__MSG_pageActionTooltip__",
     "browser_style": true
   },

options.html

@@ -26,7 +26,6 @@
 					<option value="window">New window</option>
 				</select>
 			</fieldset>
-			<button type="submit">Save</button>
 			<button type="reset">Reset all to defaults</button>
 			<hr />
 			<em><b>Note: </b> Any open tabs will need to be refreshed for changes to take effect</em>

options.js

@@ -1,45 +1,54 @@
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener('DOMContentLoaded', async () => {
 	function $(selector, base = document) {
-		return Array.from(base.querySelectorAll(selector));
+		return [...base.querySelectorAll(selector)];
 	}
-	browser.storage.local.get().then(opts => {
-		const inputs = $('[name]', document.forms.options);
-		Object.keys(opts).forEach(key => {
-			const input = inputs.find(el => el.name === key);
-			if (input instanceof HTMLInputElement) {
-				switch(input.type) {
+
+	const storage = browser.storage.local;
+	const opts = await storage.get();
+	const form = document.forms.options;
+	const inputs = $('[name]', form);
+
+	Object.keys(opts).forEach(key => {
+		const input = inputs.find(el => el.name === key);
+		if (input instanceof HTMLInputElement) {
+			switch(input.type) {
+			case 'checkbox':
+				input.checked = true;
+				break;
+			default:
+				input.value = opts[key];
+			}
+		} else if (input instanceof HTMLSelectElement) {
+			input.value = opts[key];
+		} else {
+			storage.remove(key);
+		}
+	});
+
+	inputs.forEach(input => {
+		input.addEventListener('change', change => {
+			if (change.target instanceof HTMLInputElement) {
+				switch (change.target.type) {
 				case 'checkbox':
-					input.checked = true;
+					opts[change.target.name] = change.target.checked;
 					break;
 				default:
-					input.value = opts[key];
+					opts[change.target.name] = change.target.value;
 				}
-			} else if (input instanceof HTMLSelectElement) {
-				input.value = opts[key];
-			} else {
-				browser.storage.local.remove(key);
+			} else if (change.target instanceof HTMLSelectElement) {
+				opts[change.target.name] = change.target.value;
 			}
+			storage.set(opts);
 		});
 	});
 
-	document.forms.options.addEventListener('submit', async (submit) => {
-		submit.preventDefault();
-		const form = new FormData(submit.target);
-		const opts = await browser.storage.local.get();
-
-		[...form.keys()].forEach(key => {
-			opts[key] = form.get(key);
-		});
-		$('input[type="checkbox"]', submit.target).forEach(input => {
-			if (! input.checked) {
-				delete opts[input.name];
-				browser.storage.local.remove(input.name);
-			}
-		});
-		browser.storage.local.set(opts);
-	});
-	$('[type="reset"]').forEach(btn => {
-		btn.addEventListener('click', () => browser.storage.local.clear());
+	form.addEventListener('submit', submit => submit.preventDefault());
+	form.addEventListener('reset', reset => {
+		if (confirm('This will clear your settings')) {
+			storage.clear();
+		} else {
+			reset.preventDefault();
+		}
 	});
-	document.forms.options.hidden = false;
+	form.hidden = false;
 }, {once: true});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "awesome-rss",
-  "version": "0.4.1",
+  "version": "1.0.0",
   "description": "Puts an RSS/Atom subscribe button back in URL bar",
   "keywords": [
     "WebExtension",