mikeyhew/xkcd-myhobby.html

## xkcd-myhobby.html
<!DOCTYPE html>
<html>
<head>
<script>
COMIC_NUMS = ['37', '53', '60', '75', '79', '148', '168', '174', '236', '259', '287', '296', '326', '331', '389', '437', '451', '559', '590', '605', '687', '719', '733', '790', '845', '966', '1004', '1119', '1145', '1169', '1208', '1278', '1304', '1329', '1340', '1355', '1405', '1480', '1546', '1598'];
</script>
<style>
html, body, iframe {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
}
header *{
	text-align: center;
}
iframe {
	width: 100%;
}
</style>
</head>
<body>
<div id="header">
	<button disabled="disabled" data-add-value="-1">
		previous
	</button>
	<button disabled="disabled" data-add-value="+1">
		next
	</button>
</div>
<iframe src=""></iframe>
<script>
var index;
var iframeSrc;

var eventSource = document.createElement('div');
var indexChangeEvent = new Event('index:change');

function changeIndex(newIndex) {
	index = newIndex;
	eventSource.dispatchEvent(indexChangeEvent);
}
function addToIndex(value) {
	changeIndex(index + value);
}
function onButtonClick(clickEvent) {
	var addValue = Number(clickEvent.target.getAttribute('data-add-value'));
	console.log('clicked button with add-value ' + addValue);
	addToIndex(addValue);
}
function enable (el) {
	el.removeAttribute('disabled');
}
function disable (el) {
	el.setAttribute('disabled', 'disabled');
}

window.addEventListener('load', function () {
	iframe = document.querySelector('iframe');
	buttons = [].slice.call(document.querySelectorAll('button'));

	eventSource.addEventListener('index:change', function () {
		iframeSrc = 'https://xkcd.com/'+COMIC_NUMS[index]
		console.log('changing iframe source to '+ iframeSrc)
		iframe.setAttribute('src', iframeSrc);
	});

	eventSource.addEventListener('index:change', function () {
		console.log('disabling/enabling buttons');
		if (index == 0) {
			disable(buttons[0]);
		} else {
			enable(buttons[0]);
		}
		if (index >= COMIC_NUMS.length - 1) {
			disable(buttons[1]);
		} else {
			enable(buttons[1]);
		}
	});

	changeIndex(0);


	buttons.forEach(function (button) {
		button.addEventListener('click', onButtonClick);
	});

});
</script>
</body>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	COMIC_NUMS = ['37', '53', '60', '75', '79', '148', '168', '174', '236', '259', '287', '296', '326', '331', '389', '437', '451', '559', '590', '605', '687', '719', '733', '790', '845', '966', '1004', '1119', '1145', '1169', '1208', '1278', '1304', '1329', '1340', '1355', '1405', '1480', '1546', '1598'];
	</script>
	<style>
	html, body, iframe {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	body {
	}
	header *{
	text-align: center;
	}
	iframe {
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="header">
	<button disabled="disabled" data-add-value="-1">
	previous
	</button>
	<button disabled="disabled" data-add-value="+1">
	next
	</button>
	</div>
	<iframe src=""></iframe>
	<script>
	var index;
	var iframeSrc;

	var eventSource = document.createElement('div');
	var indexChangeEvent = new Event('index:change');

	function changeIndex(newIndex) {
	index = newIndex;
	eventSource.dispatchEvent(indexChangeEvent);
	}
	function addToIndex(value) {
	changeIndex(index + value);
	}
	function onButtonClick(clickEvent) {
	var addValue = Number(clickEvent.target.getAttribute('data-add-value'));
	console.log('clicked button with add-value ' + addValue);
	addToIndex(addValue);
	}
	function enable (el) {
	el.removeAttribute('disabled');
	}
	function disable (el) {
	el.setAttribute('disabled', 'disabled');
	}

	window.addEventListener('load', function () {
	iframe = document.querySelector('iframe');
	buttons = [].slice.call(document.querySelectorAll('button'));

	eventSource.addEventListener('index:change', function () {
	iframeSrc = 'https://xkcd.com/'+COMIC_NUMS[index]
	console.log('changing iframe source to '+ iframeSrc)
	iframe.setAttribute('src', iframeSrc);
	});

	eventSource.addEventListener('index:change', function () {
	console.log('disabling/enabling buttons');
	if (index == 0) {
	disable(buttons[0]);
	} else {
	enable(buttons[0]);
	}
	if (index >= COMIC_NUMS.length - 1) {
	disable(buttons[1]);
	} else {
	enable(buttons[1]);
	}
	});

	changeIndex(0);


	buttons.forEach(function (button) {
	button.addEventListener('click', onButtonClick);
	});

	});
	</script>
	</body>