CanvasBlocker/options/optionsGui.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
(function(){
	"use strict";

	var scope;
	if ((typeof exports) !== "undefined"){
		scope = exports;
	}
	else {
		scope = require.register("./optionsGui", {});
	}
	
	const extension = require("../lib/extension");
	const logging = require("../lib/logging");

	function createDescription(setting){
		var c = document.createElement("div");
		c.className = "content";

		var title = document.createElement("span");
		title.className = "title";
		title.textContent = extension.getTranslation(setting.name + "_title");
		c.appendChild(title);

		var descriptionText = extension.getTranslation(setting.name + "_description");
		if (setting.urlSpecific){
			const urlSpecificDescription = extension.getTranslation(setting.name + "_urlSpecific");
			if (urlSpecificDescription){
				descriptionText += (descriptionText? "\n\n": "") + urlSpecificDescription;
			}
		}
		if (descriptionText){
			var info = document.createElement("div");
			info.className = "info";
			c.appendChild(info);

			var description = document.createElement("div");
			description.className = "description";
			description.textContent = descriptionText;
			info.appendChild(description);
		}
		return c;
	}

	function createSelect(setting){
		var select = document.createElement("select");
		select.dataset.type = typeof setting.defaultValue;
		setting.options.forEach(function(value){
			var option = document.createElement("option");
			if (typeof value === typeof setting.defaultValue){
				option.value = value;
				if (setting.defaultValue === value){
					option.selected = true;
				}
				option.text = extension.getTranslation(setting.name + "_options." + value) || value;
			}
			else {
				option.disabled = true;
				option.text = "\u2500".repeat(20);
			}
			select.appendChild(option);
		});
		return select;
	}
	
	var inputTypes = {
		number: {
			input: function(value){
				const input = document.createElement("input");
				input.type = "number";
				input.value = value;
				return input;
			},
			updateCallback: function(input, value){
				input.value = value;
				return input.value;
			},
			getValue: function(input){
				return parseFloat(input.value);
			}
		},
		string: {
			input: function(value, setting){
				let input;
				if (setting && setting.display && setting.display.multiline){
					input = document.createElement("textarea");
					input.rows = 1;
				}
				else {
					input = document.createElement("input");
					input.type = "text";
				}
				input.value = value;
				return input;
			},
			updateCallback: function(input, value){
				input.value = value;
				return input.value;
			},
			getValue: function(input){
				return input.value;
			}
		},
		boolean: {
			input: function(value){
				const input = document.createElement("input");
				input.type = "checkbox";
				input.checked = value;
				input.style.display = "inline-block";
				return input;
			},
			updateCallback: function(input, value){
				input.checked = value;
				return input.checked;
			},
			getValue: function(input){
				return input.checked;
			}
		},
		object: false
	};

	function createInput(setting, url = ""){
		var type = inputTypes[typeof setting.defaultValue];
		var input;
		if (setting.options){
			input = createSelect(setting);
		}
		else {
			if (type){
				input = type.input(setting.defaultValue, setting);
			}
		}
		if (type){
			setting.on(function(){type.updateCallback(input, setting.get(url));}, url);
			input.addEventListener("change", function(){
				var value = type.getValue(input);
				if (setting.set(value, url)){
					logging.message("changed setting", setting.name, ":", value);
				}
				else {
					type.updateCallback(input, setting.get(url));
					logging.message("setting", setting.name, "was not changed");
				}
			});
		}
		else if (setting.keys){
			input = document.createElement("table");
			let inSection = false;
			setting.keys.forEach(function(key){
				if (setting.display.displayedSection){
					if (typeof key === "object"){
						if (key.level === 1){
							inSection = key.name === setting.display.displayedSection;
							return;
						}
					}
					if (!inSection){
						return;
					}
				}
				let row = document.createElement("tr");
				if (typeof key === "object"){
					let cell = document.createElement("td");
					cell.colSpan = 2;
					let h = document.createElement("h" + (2 + (key.level || 1)));
					h.textContent = key.message? extension.getTranslation(key.message): key.name;
					cell.appendChild(h);
					row.appendChild(cell);
					input.appendChild(row);
					return;
				}
				
				let nameCell = document.createElement("td");
				nameCell.textContent = key;
				row.appendChild(nameCell);
				
				let keyType = inputTypes[typeof setting.defaultKeyValue];
				let keyInput = keyType.input(setting.defaultKeyValue);
				
				let inputCell = document.createElement("td");
				inputCell.appendChild(keyInput);
				row.appendChild(inputCell);
				
				setting.on(function(){
					var container = setting.get(url);
					keyType.updateCallback(
						keyInput,
						container && container.hasOwnProperty(key)?
							container[key]:
							setting.defaultKeyValue,
						url
					);
				});
				keyInput.addEventListener("change", function(){
					var value = keyType.getValue(keyInput);
					var container = setting.get(url);
					if (!container){
						container = setting.defaultValue;
					}
					container[key] = value;
					if (setting.set(container, url)){
						logging.message("changed setting", setting.name, "(", key, "):", value);
					}
					else {
						container = setting.get(url);
						keyType.updateCallback(
							keyInput,
							container && container.hasOwnProperty(key)?
								container[key]:
								setting.defaultKeyValue,
							url
						);
						logging.message("setting", setting.name, "(", key, ") was not changed");
					}
				});
				input.appendChild(row);
			});
		}
		
		if (setting.urlSpecific && url === ""){
			let container = document.createElement("div");
			container.className = "urlValues " + (setting.getExpand()? "expanded": "collapsed");
			container.appendChild(input);
			var collapser = document.createElement("button");
			collapser.classList.add("collapser");
			container.appendChild(collapser);
			collapser.addEventListener("click", function(){
				setting.setExpand(!setting.getExpand());
			});
			setting.onExpandChange(function(value){
				container.classList[value? "remove": "add"]("collapsed");
				container.classList[value? "add": "remove"]("expanded");
			});
			let urlTable = document.createElement("table");
			let caption = document.createElement("caption");
			caption.textContent = extension.getTranslation(setting.urlContainer.name + "_title");
			urlTable.appendChild(caption);
			let body = document.createElement("tbody");
			urlTable.appendChild(body);
			let foot = document.createElement("tfoot");
			let footRow = document.createElement("tr");
			let footCell = document.createElement("td");
			footCell.colSpan = 3;
			let newInput = document.createElement("input");
			newInput.className = "inputURL";
			newInput.title = extension.getTranslation("inputURL");
			const addURLSetting = function(){
				var url = newInput.value.trim();
				if (url){
					setting.set(setting.get(url), url);
					newInput.value = "";
					newInput.focus();
				}
			};
			newInput.addEventListener("keypress", function(event){
				if ([10, 13].indexOf(event.keyCode) !== -1){
					addURLSetting();
				}
			});
			footCell.appendChild(newInput);
			let footPlus = document.createElement("button");
			footPlus.classList.add("add");
			footPlus.textContent = "+";
			footPlus.addEventListener("click", addURLSetting);
			footCell.appendChild(footPlus);
			footRow.appendChild(footCell);
			foot.appendChild(footRow);
			urlTable.appendChild(foot);
			container.appendChild(urlTable);

			setting.urlContainer.on(function({newValue}){
				body.innerHTML = "";
				newValue.forEach(function(entry){
					let row = document.createElement("tr");
					let urlCell = document.createElement("td");
					urlCell.classList.add("url");
					urlCell.addEventListener("click", function(){
						var input = document.createElement("input");
						input.classList.add("urlInput");
						input.style.width = urlCell.clientWidth + "px";
						input.style.height = urlCell.clientHeight + "px";
						urlCell.innerHTML = "";
						urlCell.appendChild(input);
						input.title = extension.getTranslation("inputURL");
						input.value = entry.url;
						input.focus();
						input.addEventListener("blur", function(){
							var url = input.value.trim();
							if (url){
								entry.url = url;
								setting.urlContainer.refresh();
							}
							urlCell.removeChild(input);
							urlCell.textContent = entry.url;
						});
					});
					urlCell.textContent = entry.url;
					row.appendChild(urlCell);
					let input = createInput(setting, entry.url);
					type.updateCallback(input, setting.get(entry.url));
					if (!entry.hasOwnProperty(setting.name)){
						input.classList.add("notSpecifiedForUrl");
					}
					let inputCell = document.createElement("td");
					inputCell.appendChild(input);
					row.appendChild(inputCell);
					let clearCell = document.createElement("td");
					let clearButton = document.createElement("button");
					clearButton.className = "reset";
					clearButton.textContent = "\xD7";
					clearButton.addEventListener("click", function(){
						setting.reset(entry.url);
					});
					clearCell.appendChild(clearButton);
					row.appendChild(clearCell);
					body.appendChild(row);
				});
			});
			return container;
		}
		return input || document.createElement("span");
	}

	function createButton(setting){
		var button = document.createElement("button");
		button.textContent = extension.getTranslation(setting.name + "_label");
		button.addEventListener("click", setting.action);
		return button;
	}

	function createInteraction(setting){
		var c = document.createElement("div");
		c.className = "content";

		var interaction;
		if (setting.action){
			interaction = createButton(setting);
		}
		else if (setting.actions){
			interaction = document.createElement("span");
			setting.actions.forEach(function(action){
				var button = createButton(action);
				interaction.appendChild(button);
			});
		}
		else if (setting.inputs){
			interaction = document.createElement("span");
			setting.inputs.forEach(function(inputSetting){
				var input = createInput(inputSetting);
				input.classList.add("multiple" + setting.inputs.length);
				interaction.appendChild(input);
			});
		}
		else {
			interaction = createInput(setting);
		}

		interaction.classList.add("setting");
		interaction.dataset.storageName = setting.name;
		interaction.dataset.storageType = typeof setting.defaultValue;

		c.appendChild(interaction);
		return c;
	}
	
	function createHide(setting){
		var label = document.createElement("label");
		label.className = "content hideContent";
		label.title = extension.getTranslation("hideSetting");
		var input = document.createElement("input");
		input.type = "checkbox";
		input.className = "hide";
		input.checked = setting.getHide();
		input.addEventListener("change", function(){
			setting.setHide(this.checked);
		});
		setting.onHideChange(function(value){
			input.checked = value;
		});
		
		label.appendChild(input);
		var display = document.createElement("span");
		display.className = "display";
		label.appendChild(display);
		return label;
	}
	
	function createSettingRow(setting){
		var tr = document.createElement("tr");
		tr.className = "settingRow";
		
		var hide = document.createElement("td");
		hide.className = "hideColumn";
		hide.appendChild(createHide(setting));
		tr.appendChild(hide);

		var left = document.createElement("td");
		left.appendChild(createDescription(setting));
		tr.appendChild(left);

		var right = document.createElement("td");
		right.appendChild(createInteraction(setting));
		tr.appendChild(right);

		return tr;
	}

	scope.createSettingRow = createSettingRow;
	
	function createThead(displayHidden, restContent){
		const tHead = document.createElement("thead");
		const searchRow = document.createElement("tr");
		const hideHeadCell = document.createElement("td");
		hideHeadCell.className = "hideColumn";
		searchRow.appendChild(hideHeadCell);
		
		const restHeadCell = document.createElement("td");
		restHeadCell.colSpan = 2;
		if (restContent){
			restHeadCell.appendChild(restContent);
		}
		searchRow.appendChild(restHeadCell);
		tHead.appendChild(searchRow);
		
		const displayHiddenRow = document.createElement("tr");
		displayHiddenRow.className = "settingRow displayHiddenRow";
		displayHiddenRow.appendChild(hideHeadCell.cloneNode());
		const displayHiddenDescription = document.createElement("td");
		displayHiddenDescription.appendChild(createDescription(displayHidden));
		displayHiddenRow.appendChild(displayHiddenDescription);

		var displayHiddenInteraction = document.createElement("td");
		displayHiddenInteraction.appendChild(createInteraction(displayHidden));
		displayHiddenRow.appendChild(displayHiddenInteraction);
		tHead.appendChild(displayHiddenRow);
		return tHead;
	}
	
	scope.createThead = createThead;
}());