demos/weekli.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>weekli-domvm</title>

	<script src="../dist/nano/domvm.nano.js"></script>

	<script>
		var el = domvm.defineElement,
			tx = domvm.defineText,
			cm = domvm.defineComment,
			vw = domvm.defineView,
			iv = domvm.injectView,
			ie = domvm.injectElement;

		//	el = (tag, arg1, arg2) => domvm.defineElement(tag, arg1, arg2, domvm.FIXED_BODY);
	</script>

	<style>
		html {
			box-sizing: border-box;
		}

		*,
		*:before,
		*:after {
			box-sizing: inherit;
		}

		body {
			font-size: 18pt;
		}

		.sel {
			background: yellow;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
		}

		.hour {
			text-align: left;
		}

		td,
		th {
			padding: 5px;
			cursor: pointer;
			border: 1px solid black;

			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
	</style>
</head>
<body>
	<p>A fast, 100-LOC partial implementation of <a href="http://collnwalkr.github.io/weekli/" target="_blank">weekli</a> in domvm</p>

	<ul>
		<li>Click cells to toggle</li>
		<li>Click col/row headers to toggle</li>
		<li>Click and drag cells to "paint"</li>
	</ul>

	<script>
		function CalendarView(vm) {
			var selected = {};

			// fixed settings
			var days = ["Monday","Tuesday","Wednesday","Thursday","Friday"];
			var hours = [7,8,9,10,11];

			// helpers
			function hourRange(from) {
				return from + ":00 - " + (from + 1) + ":00";
			}

			function anyHourSelected(day) {
				for (var key in selected) {
					if (selected[key] && +key[0] == day)
						return true;
				}
				return false;
			}

			function anyDaySelected(hour) {
				for (var key in selected) {
					if (selected[key] && +key.split(":")[1] == hour)
						return true;
				}
				return false;
			}

			// internal api
			function toggleDay(i) {
				var val = !anyHourSelected(i);
				hours.forEach(function(hour) {
					setDayHour(i, hour, val);
				});
			}

			function toggleHour(hour) {
				var val = !anyDaySelected(hour);
				days.forEach(function(day, i) {
					setDayHour(i, hour, val);
				});
			}

			function setDayHour(i, hour, val) {
				var key = i + ":" + hour;
				selected[key] = val == null ? !selected[key] : val;
				markMode = +selected[key];
				vm.redraw();						// can micro-optim this via vm.patch, with a bit more effort, meh :\
			}

			// let's expose the api :)
			vm.api = {
				toggleDay: toggleDay,
				toggleHour: toggleHour,
				setDayHour: setDayHour,
			};

			// delegated handlers for template
			var setSelected = false;
			var mouseIsDown = false;

			var onMousedown = {
				"*":		function(e, node) { mouseIsDown = true; },
				".day":		function(e, node) { toggleDay(node.data); },
				".hour":	function(e, node) { toggleHour(node.data); },
				".dayhour":	function(e, node) { setDayHour.apply(null, node.data); setSelected = node.attrs.class.indexOf("sel") == -1; },
			};

			var onMouseup = {
				"*":		function(e, node) { mouseIsDown = false; },
			};

			var onMouseover = {
				".dayhour":	function(e, node) { mouseIsDown && setDayHour.apply(null, node.data.concat(setSelected)); }
			};

			// template
			return function() {
				return el("table", {onmousedown: onMousedown, onmouseup: onMouseup, onmouseover: onMouseover}, [
					el("tr", [
						el("th"),
						days.map(function(day, i) {
							return el("th.day", {_data: i}, day);
						})
					]),
					hours.map(function(hour) {
						return el("tr", [
							el("th.hour", {_data: hour}, hourRange(hour)),
							days.map(function(day, i) {
								var key = i + ":" + hour;
								return el("td.dayhour", {class: selected[key] ? "sel" : null, _data: [i, hour]});
							})
						]);
					})
				]);
			};
		}

		var calView = domvm.createView(CalendarView).mount(document.body);
/*
		function randInt(min,max) {
			return Math.floor(Math.random()*(max-min+1)+min);
		}

		var count = 4;
		var it = setInterval(function() {
			calView.api.setDayHour(randInt(0, 4), randInt(7, 11));
			!count-- && clearInterval(it);
		}, 250);
*/
	</script>
</body>
</html>