AlwaysKillSticky/options.js

/*******************************/
/* EVENT LISTENER MANIPULATION */
/*******************************/

/*	Adds an event listener to a button (or other clickable element), attaching 
	it to both "click" and "keyup" events (for use with keyboard navigation).
	Optionally also attaches the listener to the 'mousedown' event, making the 
	element activate on mouse down instead of mouse up. */
Element.prototype.addActivateEvent = function(func, includeMouseDown) {
	let ael = this.activateEventListener = (event) => { if (event.button === 0 || event.key === ' ') func(event) };
	if (includeMouseDown) this.addEventListener("mousedown", ael);
	this.addEventListener("click", ael);
	this.addEventListener("keyup", ael);
}

/*	Removes event listener from a clickable element, automatically detaching it
	from all relevant event types. */
Element.prototype.removeActivateEvent = function() {
	let ael = this.activateEventListener;
	this.removeEventListener("mousedown", ael);
	this.removeEventListener("click", ael);
	this.removeEventListener("keyup", ael);
}

/*******************/
/* EVENT LISTENERS */
/*******************/

document.querySelectorAll("button").forEach(button => {
	button.addActivateEvent((event) => {
		event.target.blur();

		if (button.classList.contains("save-button"))
			saveChanges();
		else
			resetChanges();
	});
});

document.querySelectorAll("textarea").forEach(textarea => {
	textarea.addEventListener("input", (event) => {
		setButtonsActive(true);
	});
});

document.querySelector("input[type='checkbox']").addEventListener("change", (event) => {
	modeSelectorInputReceived();
});
document.querySelectorAll(".mode-select-container span").forEach(span => {
	span.addActivateEvent((event) => {
		modeSelectorInputReceived();
	});
});
function modeSelectorInputReceived() {
	toggleModeSelectorState();
	window.currentMode = (window.currentMode == "whitelist") ? "blacklist" : "whitelist";
	setButtonsActive(true);
}

/***********/
/* HELPERS */
/***********/

function toggleModeSelectorState(newMode) {
	let container = document.querySelector(".mode-select-container");
	let checkbox = document.querySelector("input#whitelist-mode");
	newMode = newMode || (container.classList.contains("whitelist") ? "blacklist" : "whitelist");

	container.classList.toggle("whitelist", (newMode == "whitelist"));	
	checkbox.checked = (newMode == "whitelist");	
	container.querySelectorAll("span").forEach(span => {
		span.classList.toggle("disabled", false);
	});
	document.querySelector(`.${newMode}-mode-label`).classList.toggle("disabled", true);
	
	document.querySelector("div#matchingPatterns").classList.toggle("disabled", (newMode == "whitelist"));
	document.querySelector("div#matchingPatterns textarea").disabled = (newMode == "whitelist");
}

function saveChanges() {
	let matchingPatterns = document.querySelector("#matchingPatterns textarea").value;
	let exclusionPatterns = document.querySelector("#exclusionPatterns textarea").value;
	let mode = document.querySelector("input#whitelist-mode").checked ? "whitelist" : "blacklist";
	chrome.storage.sync.set({
		"matchingPatterns": matchingPatterns,
		"exclusionPatterns": exclusionPatterns,
		"mode": mode
	}, () => { setButtonsActive(false); });
}

function resetChanges() {
	chrome.storage.sync.get([ "matchingPatterns", "exclusionPatterns", "mode" ], (result) => {
		document.querySelector("#matchingPatterns textarea").value = result.matchingPatterns;
		document.querySelector("#exclusionPatterns textarea").value = result.exclusionPatterns;
		window.currentMode = result.mode || "blacklist";

		toggleModeSelectorState(window.currentMode);
		setButtonsActive(false);
	});
}

function setButtonsActive(active) {
	document.querySelectorAll("button").forEach(button => {
		button.disabled = !active;
	});
}

/******************/
/* INITIALIZATION */
/******************/

function initialize() {
	resetChanges();
	chrome.storage.sync.get("mode", (result) => {
		let divToFocus = (result.mode == "whitelist") ? "#exclusionPatterns" : "#matchingPatterns";
		document.querySelector(`${divToFocus} textarea`).focus();
	});
}
initialize();