Merge pull request #213 from bjb568/fullscreen-programs

Fullscreen bug fixes

html/dev/canvas.html

@@ -1,5 +1,5 @@
 <section id="main">
-	<h1><span id="title">$title</span> <a id="fullscreen-button" href="#fullscreen" hidden="">⤢</a> <a id="regular-layout" hidden="">⇲</a> <input type="text" id="edit-title" hidden="" value="$title" />  <small><a id="save">Save</a></small></h1>
+	<h1><span id="title">$title</span> <input type="text" id="edit-title" hidden="" value="$title" /> <a id="fullscreen-button" href="#fullscreen" hidden="">⤢</a> <a id="regular-layout" hidden="">⇲</a> <small><a id="save">Save</a></small></h1>
 	<div id="row" class="row">
 		<textarea id="code" autofocus="">$code</textarea>
 		<iframe id="output" sandbox="allow-scripts"></iframe>

http/a/main.css

@@ -54,6 +54,7 @@ body {
 .scrl { overflow: auto }
 .scrlx { overflow-x: auto }
 .scrly, #sidebar { overflow-y: auto }
+.noscrl { overflow: hidden }
 .br, .desc, aside.rit { border-radius: 4px }
 .hglt, .desc, .comment, section, article { background: rgba(255, 255, 255, .4) }
 .shglt, #content, #sidebar, #footer { background: rgba(255, 255, 255, .8) }

http/dev/canvas.js

@@ -7,6 +7,7 @@ document.body.appendChild(textarea);
 textarea.style.position = 'fixed';
 textarea.style.top = '0';
 textarea.style.zIndex = '-1';
+textarea.style.opacity = '0';
 function handleTA() {
 	if (document.activeElement == textarea || document.activeElement == document.body) {
 		textarea.focus();
@@ -54,8 +55,9 @@ Number.prototype.bound = function(l, h) {
 };
 function requestFullLayoutMode() {
 	enabledFullScreen = requestEnableFullScreen = true;
-	size();
 	document.getElementById('console').style.height = 'auto';
+	document.getElementById('console').style.maxHeight = '240px';
+	size();
 	reset(true);
 }
 function rand(x, y) {
@@ -146,18 +148,26 @@ function bg() {
 	stroke(oldStroke);
 }
 function size(x, y) {
-	if (enabledFullScreen) (x = innerWidth) && (y = innerHeight - 4);
+	if (enabledFullScreen) {
+		x = innerWidth;
+		y = innerHeight - document.getElementById('console').offsetHeight - 32;
+	}
 	canvas.width = width = x;
 	canvas.height = height = y;
 }
 function resetLog() {
 	var node = document.getElementById('console'), child;
 	while (child = node.firstChild) node.removeChild(child);
 }
+function removeLog() {
+	resetLog();
+	document.getElementById('console').hidden = true;
+}
 function print(input) {
 	var pre = document.createElement('pre');
 	pre.innerHTML = input;
 	document.getElementById('console').appendChild(pre);
+	document.getElementById('console').hidden = false;
 }
 var refresh = function() {};
 function reset(a) {

http/dev/runcanvas.js

@@ -89,26 +89,26 @@ addEventListener('DOMContentLoaded', function() {
 		document.body.classList.remove('fullscreen');
 		this.hidden = true;
 	};
+	function hashChangeFullScreenHandler() {
+		if (location.hash == '#fullscreen') {
+			output.classList.add('fullscreen');
+			document.body.classList.add('noscrl');
+			document.getElementById('close-fullscreen').hidden = false;
+			output.focus();
+		} else {
+			output.classList.remove('fullscreen');
+			document.body.classList.remove('noscrl');
+			document.getElementById('close-fullscreen').hidden = true;
+			code.focus();
+		}
+	}
 	if (fsBtn) {
 		fsBtn.onclick = function() {
 			document.getElementById('close-fullscreen').hidden = false;
 			enableFullScreen();
 		};
-		addEventListener('hashchange', function(e) {
-			if (location.hash == '#fullscreen') {
-				output.classList.add('fullscreen');
-				document.getElementById('close-fullscreen').hidden = false;
-				output.focus();
-			} else {
-				output.classList.remove('fullscreen');
-				document.getElementById('close-fullscreen').hidden = true;
-				code.focus();
-			}
-		});
-		if (location.hash == '#fullscreen') {
-			output.classList.add('fullscreen');
-			output.focus();
-		}
+		addEventListener('hashchange', hashChangeFullScreenHandler);
+		hashChangeFullScreenHandler();
 	}
 	var oldValue;
 	function handleCode(init) {