Adapted to work on IE8 with text output

Author: benchmarko

Canvas.js

@@ -364,7 +364,7 @@ Canvas.prototype = {
 			aTextBufferRow = aTextBuffer[y];
 			if (aTextBufferRow) {
 				for (x = 0; x < aTextBufferRow.length; x += 1) {
-					sOut += this.sCpc2Unicode[aTextBufferRow[x] || 32];
+					sOut += this.sCpc2Unicode.charAt(aTextBufferRow[x] || 32); // works also on IE8, (not: this.sCpc2Unicode[...])
 				}
 			}
 			sOut += "\n";
@@ -441,7 +441,7 @@ Canvas.prototype = {
 
 	setFocusOnCanvas: function () {
 		this.cpcAreaBox.style.background = "#463c3c";
-		if (this.canvas) {
+		if (this.canvas && this.canvas.focus) {
 			this.canvas.focus();
 		}
 		this.bHasFocus = true;
@@ -501,7 +501,11 @@ Canvas.prototype = {
 		} else {
 			this.canvasClickAction2(event);
 		}
-		event.stopPropagation();
+		if (event.stopPropagation) {
+			event.stopPropagation();
+		} else {
+			// window.event.stopPropagation(); // howto on IE8?
+		}
 	},
 
 	onWindowClick: function () {

Controller.js

@@ -1761,7 +1761,11 @@ Controller.prototype = {
 	},
 
 	startScreenshot: function () {
-		var image = this.oCanvas.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you do not replace you will get a DOM 18 exception.
+		var image = "";
+
+		if (this.oCanvas.canvas.toDataURL) {
+			image = this.oCanvas.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you do not replace you will get a DOM 18 exception.
+		}
 
 		return image;
 	},
@@ -2075,15 +2079,23 @@ Controller.prototype = {
 	},
 
 	initDropZone: function () {
-		var dropZone = document.getElementById("dropZone");
+		var dropZone = document.getElementById("dropZone"),
+			canvas = this.oCanvas.canvas,
+			fileInput = document.getElementById("fileInput");
 
-		dropZone.addEventListener("dragover", this.fnHandleDragOver.bind(this), false);
-		dropZone.addEventListener("drop", this.fnHandleFileSelect.bind(this), false);
+		if (dropZone.addEventListener) {
+			dropZone.addEventListener("dragover", this.fnHandleDragOver.bind(this), false);
+			dropZone.addEventListener("drop", this.fnHandleFileSelect.bind(this), false);
+		}
 
-		this.oCanvas.canvas.addEventListener("dragover", this.fnHandleDragOver.bind(this), false);
-		this.oCanvas.canvas.addEventListener("drop", this.fnHandleFileSelect.bind(this), false);
+		if (canvas.addEventListener) {
+			canvas.addEventListener("dragover", this.fnHandleDragOver.bind(this), false);
+			canvas.addEventListener("drop", this.fnHandleFileSelect.bind(this), false);
+		}
 
-		document.getElementById("fileInput").addEventListener("change", this.fnHandleFileSelect.bind(this), false);
+		if (fileInput.addEventListener) {
+			fileInput.addEventListener("change", this.fnHandleFileSelect.bind(this), false);
+		}
 	},
 
 	fnUpdateUndoRedoButtons: function () {

Keyboard.js

@@ -209,8 +209,13 @@ Keyboard.prototype = {
 		this.bCodeStringsRemoved = false;
 
 		cpcArea = document.getElementById("cpcArea");
-		cpcArea.addEventListener("keydown", this.onCpcAreaKeydown.bind(this), false);
-		cpcArea.addEventListener("keyup", this.oncpcAreaKeyup.bind(this), false);
+		if (cpcArea.addEventListener) {
+			cpcArea.addEventListener("keydown", this.onCpcAreaKeydown.bind(this), false);
+			cpcArea.addEventListener("keyup", this.oncpcAreaKeyup.bind(this), false);
+		} else { // IE8?
+			cpcArea.attachEvent("onkeydown", this.onCpcAreaKeydown.bind(this));
+			cpcArea.attachEvent("onkeyup", this.oncpcAreaKeyup.bind(this));
+		}
 	},
 
 	reset: function () {

Polyfills.js

@@ -104,14 +104,19 @@ if (window.Element) {
 }
 
 if (window.Event) {
+	// https://stackoverflow.com/questions/17102300/prototype-event-stoppropagation-for-ie-8
 	if (!Event.prototype.preventDefault) { // IE8
 		Utils.console.debug("Polyfill: Event.prototype.preventDefault");
-		Event.prototype.preventDefault = function () {	}; // eslint-disable-line no-empty-function
+		Event.prototype.preventDefault = function () {
+			this.returnValue = false;
+		};
 	}
 
 	if (!Event.prototype.stopPropagation) { // IE8
 		Utils.console.debug("Polyfill: Event.prototype.stopPropagation");
-		Event.prototype.stopPropagation = function () {	}; // eslint-disable-line no-empty-function
+		Event.prototype.stopPropagation = function () {
+			this.cancelBubble = true;
+		};
 	}
 }
 

View.js

@@ -91,7 +91,11 @@ View.prototype = {
 				option.value = oItem.value;
 				option.text = oItem.text;
 				option.title = oItem.title;
-				select.add(option, null); // null needed for old FF 3.x
+				try {
+					select.add(option, null); // null needed for old FF 3.x
+				} catch (e) {
+					select.add(option); // null must not be used for IE8
+				}
 			} else {
 				option = select.options[i];
 				if (option.value !== oItem.value) {

VirtualKeyboard.js

@@ -618,6 +618,12 @@ VirtualKeyboard.prototype = {
 			Utils.console.log("fnAttachPointerEvents: Using", oEventNames.type, "events");
 		}
 
+		if (!area.addEventListener) { // IE8
+			area.addEventListener = function (type, listener) {
+				area.attachEvent("on" + type, listener);
+			};
+		}
+
 		if (fnDown) {
 			area.addEventListener(oEventNames.down, fnDown, false); // +clicked for pointer, touch?
 		}
@@ -816,9 +822,15 @@ VirtualKeyboard.prototype = {
 		}
 
 		if (this.sPointerOutEvent) {
-			node.addEventListener(this.sPointerOutEvent, this.fnVirtualKeyout, false);
+			if (node.addEventListener) {
+				node.addEventListener(this.sPointerOutEvent, this.fnVirtualKeyout, false);
+			} else { // IE8
+				node.attachEvent("on" + this.sPointerOutEvent, this.fnVirtualKeyout);
+			}
+		}
+		if (event.preventDefault) {
+			event.preventDefault();
 		}
-		event.preventDefault();
 		return false;
 	},
 
@@ -857,9 +869,15 @@ VirtualKeyboard.prototype = {
 		this.fnVirtualKeyboardKeyupOrKeyout(event);
 
 		if (this.sPointerOutEvent && this.fnVirtualKeyout) {
-			node.removeEventListener(this.sPointerOutEvent, this.fnVirtualKeyout); // do not need out event any more
+			if (node.removeEventListener) {
+				node.removeEventListener(this.sPointerOutEvent, this.fnVirtualKeyout); // do not need out event any more
+			} else { // IE8
+				node.detachEvent("on" + this.sPointerOutEvent, this.fnVirtualKeyout);
+			}
+		}
+		if (event.preventDefault) {
+			event.preventDefault();
 		}
-		event.preventDefault();
 		return false;
 	},
 
@@ -873,7 +891,9 @@ VirtualKeyboard.prototype = {
 		if (this.sPointerOutEvent && this.fnVirtualKeyout) {
 			node.removeEventListener(this.sPointerOutEvent, this.fnVirtualKeyout);
 		}
-		event.preventDefault();
+		if (event.preventDefault) {
+			event.preventDefault();
+		}
 		return false;
 	},
 

index.html

@@ -4,7 +4,7 @@
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="cpcbasic.css" />
-<title id="title">CPC Basic v0.10.10</title>
+<title id="title">CPC Basic v0.10.11</title>
 </head>
 
 <body id="pageBody">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpcbasic",
-  "version": "0.10.10",
+  "version": "0.10.11",
   "description": "# CPCBasic - Run CPC BASIC in a Browser",
   "main": "cpcbasic.js",
   "directories": {