simonklee/index.html

## index.html
<html>
    <head>
    <style>

        body, html, canvas {
            margin: 10px;
            padding: 0;
        }

        #text-input {
            width: 800px;
            background: #f0f0f0;
            padding: 10px;
        }

        #text-log {
            background: #f0f0f0;
            margin-top: 20px;
            padding: 10px;
            list-style: none;
        }

        #buttons {
            margin-top: 20px;
        }

        #click-test {
            margin-top: 20px;
        }

        .d1 {
            background-color: #f0f0f0;
            position:relative;
            width:150px;
            height:150px;
            text-align: center;
            cursor: pointer;
        }
        .d2 {
            background-color: #9f9f9f;
            position:absolute;
            top:25px;
            left:25px;
            width:100px;
            height:100px;
        }
        .d3 {
            background-color: #707070;
            position:absolute;
            top:25px;
            left:25px;
            width:50px;
            height:50px;
            line-height:50px;
        }
    </style>
</head>
<body>
    <div id="text-input-container">
        <div id="text-input" contentEditable="true"></div>
    </div>

    <div id="buttons">
        <button onClick="focusText(); return false;">Focus</button>
        <button onClick="toggleEvents(); return false;" id="toggle-events">Enable Events</button>
        <button onClick="toggleEventsContainer(); return false;" id="toggle-events-container">Enable Container Events</button>
    </div>

    <div id="click-test">
        <div class="d1" id="d1">1
            <div class="d2" id="d2">2
                <div class="d3" id="d3">3</div>
            </div>
        </div>
    </div>

    <ul id="text-log"></ul>

    <canvas class="emscripten" id="webgl-canvas" oncontextmenu="event.preventDefault()" height="100%" width="100%"></canvas>

    <script type="text/javascript">
        var input = document.getElementById("text-input");
        var inputContainer = document.getElementById("text-input-container");
        var isListening = !1;
        var isListeningContainer = !1;

        function receiveEventLog(ev) {
            if (ev.keyCode != 0) {
                log("event: " + ev.keyIdentifier + "(" + ev.keyCode + ") " + ev.target.id);
            } else {
                log("event: " + ev.type + " " + ev.target.id);
            }
            console.log(ev);
        }

        function receiveEventBlock(ev) {
            log("event: " + ev.keyCode + " " + ev.target.id);
            console.log(ev);
            switch(ev.type) {
            case "keydown":
                switch(ev.keyCode) {
                // left, up, right, down.
                case 37: case 38: case 39: case 40:
                    ev.stopPropagation();
                    ev.preventDefault();
                    ev.returnValue = false;
                    return false;
                }
            }
        }

        function focusText() {
            log("focusText");
            input.focus();
            return false;
        }

        function toggleEvents() {
            log("toggleEvents " + (isListening ? "off":"on"));
            var toggleButton = document.getElementById("toggle-events");

            if (!isListening) {
                input.addEventListener("keydown", receiveEventLog);
                toggleButton.innerHTML="Disable Events";
            } else {
                input.removeEventListener("keydown", receiveEventLog);
                toggleButton.innerHTML="Enable Events";
            }

            isListening = !isListening;
            input.focus();
        }

        function toggleEventsContainer() {
            log("toggleEventsContainer " + (isListeningContainer ? "off":"on"));
            var toggleButton = document.getElementById("toggle-events-container");

            if (!isListeningContainer) {
                inputContainer.addEventListener("keydown", receiveEventBlock);
                toggleButton.innerHTML="Disable Container Events";
            } else {
                inputContainer.removeEventListener("keydown", receiveEventBlock);
                toggleButton.innerHTML="Enable Container Events";
            }

            isListeningContainer = !isListeningContainer;
            input.focus();
        }

        function heighlight(ev) {
            receiveEventLog(ev);
            ev.target.style.backgroundColor='#606060';

            setTimeout(function() {
                ev.target.style.backgroundColor = '';
            }, 500);
        }

        var _log = [];
        function log(d) {
            _log.push(d);
            var ul = document.getElementById("text-log")
            var li = document.createElement("li");
            li.innerHTML = "#" + _log.length + ": " + d + " … ";
            ul.insertBefore(li, ul.firstChild);
        }

        function run() {
            log("init");
            document.getElementById("d1").addEventListener("click", heighlight);
            document.getElementById("d2").addEventListener("click", heighlight);
            document.getElementById("d3").addEventListener("click", heighlight);
        }

        window.onerror = function(msg, url, linenr) {
            log(msg);
            return false;
        }

        document.addEventListener('DOMContentLoaded', function() {
            run();
        }, false);
    </script>
</body>
<html>
	<html>
	<head>
	<style>

	body, html, canvas {
	margin: 10px;
	padding: 0;
	}

	#text-input {
	width: 800px;
	background: #f0f0f0;
	padding: 10px;
	}

	#text-log {
	background: #f0f0f0;
	margin-top: 20px;
	padding: 10px;
	list-style: none;
	}

	#buttons {
	margin-top: 20px;
	}

	#click-test {
	margin-top: 20px;
	}

	.d1 {
	background-color: #f0f0f0;
	position:relative;
	width:150px;
	height:150px;
	text-align: center;
	cursor: pointer;
	}
	.d2 {
	background-color: #9f9f9f;
	position:absolute;
	top:25px;
	left:25px;
	width:100px;
	height:100px;
	}
	.d3 {
	background-color: #707070;
	position:absolute;
	top:25px;
	left:25px;
	width:50px;
	height:50px;
	line-height:50px;
	}
	</style>
	</head>
	<body>
	<div id="text-input-container">
	<div id="text-input" contentEditable="true"></div>
	</div>

	<div id="buttons">
	<button onClick="focusText(); return false;">Focus</button>
	<button onClick="toggleEvents(); return false;" id="toggle-events">Enable Events</button>
	<button onClick="toggleEventsContainer(); return false;" id="toggle-events-container">Enable Container Events</button>
	</div>

	<div id="click-test">
	<div class="d1" id="d1">1
	<div class="d2" id="d2">2
	<div class="d3" id="d3">3</div>
	</div>
	</div>
	</div>

	<ul id="text-log"></ul>

	<canvas class="emscripten" id="webgl-canvas" oncontextmenu="event.preventDefault()" height="100%" width="100%"></canvas>

	<script type="text/javascript">
	var input = document.getElementById("text-input");
	var inputContainer = document.getElementById("text-input-container");
	var isListening = !1;
	var isListeningContainer = !1;

	function receiveEventLog(ev) {
	if (ev.keyCode != 0) {
	log("event: " + ev.keyIdentifier + "(" + ev.keyCode + ") " + ev.target.id);
	} else {
	log("event: " + ev.type + " " + ev.target.id);
	}
	console.log(ev);
	}

	function receiveEventBlock(ev) {
	log("event: " + ev.keyCode + " " + ev.target.id);
	console.log(ev);
	switch(ev.type) {
	case "keydown":
	switch(ev.keyCode) {
	// left, up, right, down.
	case 37: case 38: case 39: case 40:
	ev.stopPropagation();
	ev.preventDefault();
	ev.returnValue = false;
	return false;
	}
	}
	}

	function focusText() {
	log("focusText");
	input.focus();
	return false;
	}

	function toggleEvents() {
	log("toggleEvents " + (isListening ? "off":"on"));
	var toggleButton = document.getElementById("toggle-events");

	if (!isListening) {
	input.addEventListener("keydown", receiveEventLog);
	toggleButton.innerHTML="Disable Events";
	} else {
	input.removeEventListener("keydown", receiveEventLog);
	toggleButton.innerHTML="Enable Events";
	}

	isListening = !isListening;
	input.focus();
	}

	function toggleEventsContainer() {
	log("toggleEventsContainer " + (isListeningContainer ? "off":"on"));
	var toggleButton = document.getElementById("toggle-events-container");

	if (!isListeningContainer) {
	inputContainer.addEventListener("keydown", receiveEventBlock);
	toggleButton.innerHTML="Disable Container Events";
	} else {
	inputContainer.removeEventListener("keydown", receiveEventBlock);
	toggleButton.innerHTML="Enable Container Events";
	}

	isListeningContainer = !isListeningContainer;
	input.focus();
	}

	function heighlight(ev) {
	receiveEventLog(ev);
	ev.target.style.backgroundColor='#606060';

	setTimeout(function() {
	ev.target.style.backgroundColor = '';
	}, 500);
	}

	var _log = [];
	function log(d) {
	_log.push(d);
	var ul = document.getElementById("text-log")
	var li = document.createElement("li");
	li.innerHTML = "#" + _log.length + ": " + d + " … ";
	ul.insertBefore(li, ul.firstChild);
	}

	function run() {
	log("init");
	document.getElementById("d1").addEventListener("click", heighlight);
	document.getElementById("d2").addEventListener("click", heighlight);
	document.getElementById("d3").addEventListener("click", heighlight);
	}

	window.onerror = function(msg, url, linenr) {
	log(msg);
	return false;
	}

	document.addEventListener('DOMContentLoaded', function() {
	run();
	}, false);
	</script>
	</body>
	<html>