AlwaysKillSticky/options.js

/*******************/
/* 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();