AlwaysKillSticky/options.js

/**********/
/* EVENTS */
/**********/

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);

		// Expand all textareas.
		document.querySelectorAll("textarea").forEach(textarea => {
			expandTextarea(textarea);
		});
	});
}

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

function expandTextarea(textarea) {
	let totalBorderHeight = 2;
	if (textarea.clientHeight == textarea.scrollHeight + totalBorderHeight) return;
	requestAnimationFrame(() => {
		textarea.style.height = 'auto';
		textarea.style.height = textarea.scrollHeight + totalBorderHeight + 'px';
	});
}

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

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

	// Listeners for Reset and Save buttons.
	document.querySelectorAll("button").forEach(button => {
		button.addActivateEvent((event) => {
			event.target.blur();

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

	// Listeners to activate Reset/Save buttons when textareas get input.
	document.querySelectorAll("textarea").forEach(textarea => {
		textarea.addEventListener("input", (event) => {
			setButtonsActive(true);
		});
	});

	// Listeners to auto-expand textareas on input.
	document.querySelectorAll("textarea").forEach(textarea => {
		textarea.addEventListener("input", (event) => {
			expandTextarea(textarea);
		});
	});

	// Listeners for mode select switch.
	document.querySelector("input[type='checkbox']").addEventListener("change", (event) => {
		modeSelectorInputReceived();
	});
	document.querySelectorAll(".mode-select-container span").forEach(span => {
		span.addActivateEvent((event) => {
			modeSelectorInputReceived();
		});
	});
}
initialize();