Greasemonkey Utilities

fp_cfg.js

var ConfigField = function(key, dfv, label, toNode) {
	this.key = key;
	this.dfv = dfv;
	this.label = label;
	this.toNode = toNode;
}

var Nodifiers = {
	textarea: function() {
		var node = document.createElement('textarea');
		node.getGMValue = function() {
			return node.value;
		}
		node.setGMValue = function(value) {
			node.value = value;
		}
		return node;
	},
	select: function(choices) {
		return function() {
			var node = document.createElement('select');
			
			for (var idx in choices) {
				var option = document.createElement('option');
				option.value = idx;
				option.textContent = choices[idx];
				node.appendChild(option);
			}
			
			node.getGMValue = function() {
				return node.value;
			}
			node.setGMValue = function(value) {
				node.value = value;
			}

			return node;
		}
	},
}

var FoolproofConfig = function(id, fields, css) {
	var _body = null;
	var _that = this;

	_that.fields = fields;
	_that.id = id;

	if (typeof css === 'undefined') {
		_that.css = [
			'* {',
				'border-radius: 5px;',
			'}',
			'.row.field label {',
				'font-weight: bold;',
				'display: block;',
			'}',
			'textarea {',
				'color: inherit;',
				'background: inherit;',
				'border: 1px solid;',
			'}',
			'.row.btns {',
				'display: flex;',
				'margin-top: 1em;',
				'border-top: 1px solid;',
				'border-radius: 0;',
			'}',
			'.row.btns a {',
				'flex: 1 auto;',
				'margin: 1em;',
				'padding: 1em;',
				'border: 1px solid;',
			'}',
		].join('\n')
	}
	else {
		_that.css = css;
	}

	_that.create = function() {
		if (_body !== null) {
			return _body;
		}
		_body = document.createElement('div');
		_body.id = _that.id;

		for (var field of _that.fields) {
			var row = document.createElement('div');
			row.classList.add('row');
			row.classList.add('field');

			var node = field.toNode();
			node.classList.add('value');
			node.id = field.key;

			var lbl = document.createElement('label');
			lbl.setAttribute('for', node.id);
			lbl.textContent = field.label;

			row.appendChild(lbl);
			row.appendChild(node);
			_body.appendChild(row);

			node.setGMValue(GM_getValue(field.key, field.dfv));
		}

		var btns = document.createElement('div');
		btns.classList.add('row');
		btns.classList.add('btns');

		for (cmd of ["revert", "reset", "write", "cancel"]) {
			var btn = document.createElement('a');
			btn.setAttribute('data-cmd', cmd);
			btn.textContent = cmd;
			btn.addEventListener('click', _that.post_cmd, false);
			btns.appendChild(btn);
		}

		_body.appendChild(btns);

		if (typeof _that.css === 'string') {
			_body.appendChild(createCssNode(_that.css));
		}

		return _body;
	}

	_that.post_cmd = function(event) {
		window.postMessage(event.target.dataset.cmd, "*");
	}

	_that.reset = function() {
		for (var field of _that.fields) {
			var node = _body.querySelector(['#', field.key].join(''));
			node.setGMValue(field.dfv);
		}
	}

	_that.revert = function() {
		for (var field of _that.fields) {
			var node = _body.querySelector(['#', field.key].join(''));
			node.setGMValue(GM_getValue(field.key, field.dfv));
		}
	}

	_that.write = function() {
		for (var field of _that.fields) {
			console.log('write fired successfully');
			var node = _body.querySelector(['#', field.key].join(''));
			GM_setValue(field.key, node.getGMValue());
		}
	}

	function resp_cmd(event) {
		switch(event.data) {
			case "revert":
				_that.revert();
				break;

			case "reset":
				_that.reset();
				break;

			case "write":
				_that.write();
				break;

			case "cancel":
				_that.hide();
				break;
		}
	}

	_that.setup = function () {
		window.addEventListener("message", resp_cmd, false);
	}
}

utils.js

/* source: http://www.netlobo.com/url_query_string_javascript.html */
function gup(name, ref)
{
	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
	var regexS = '[\\?&]' + name + '=([^&#]*)';
	var regex = new RegExp(regexS);
	if (typeof ref === 'undefined') {
		ref = window.location.search;
	}
	var results = regex.exec(ref);
	if (results === null) {
		return '';
	} 
	else {
		return results[1];
	}
}

function createCssNode(styles) {
	var node = document.createElement('style');
	node.setAttribute('type', 'text/css');
	node.innerHTML = styles;
	return node;
}

//-- This is a standard-ish utility function:
/* source: http://stackoverflow.com/a/6935777 */
function createJSNode (text, s_URL, funcToRun, runOnLoad) {
	var D                                   = document;
	var scriptNode                          = D.createElement ('script');
	if (runOnLoad) {
		scriptNode.addEventListener ("load", runOnLoad, false);
	}
	scriptNode.type                         = "text/javascript";
	if (text)       scriptNode.textContent  = text;
	if (s_URL)      scriptNode.src          = s_URL;
	if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

	var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
	targ.appendChild (scriptNode);
}

function xpathNode(selector, reference) {
	if (typeof reference === 'undefined') {
		reference = document.body;
	}
	
	return document.evaluate(
		selector, reference,
		null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null
	);
}

/* source: http://stackoverflow.com/a/29754070 */
function waitForElementToDisplay(selector, callback, time) {
	if (typeof time === 'undefined') {
		time = 1000;
	}
	console.log(selector, callback, time);

	var node = document.querySelector(selector);
	if (node != null) {
		callback(node);
		return;
	}
	else {
		setTimeout(function() {
			waitForElementToDisplay(selector, callback, time);
			console.log('awaiting element... '+selector);
		}, time);
	}
}