Added fullscreen button.

Reisenfag · Nov 13, 2011 · fda2679 · fda2679
1 parent 6ba95d4
commit fda2679
Showing 1 changed file with 26 additions and 16 deletions.
diff --git a/build/index.html b/build/index.html
@@ -39,14 +39,6 @@
 
 			}
 
-			#tools {
-
-				position: absolute;
-				top: 25px;
-				left: 25px;
-
-			}
-
 			button, select {
 
 				padding: 8px 12px 8px 12px;
@@ -117,8 +109,9 @@
 			// Greetings to Iq/RGBA! ;)
 
 			var quality = 2, quality_levels = [ 0.5, 1, 2, 4, 8 ];
-			var code, canvas, gl, buffer, currentProgram, compileButton,
-			vertex_position, parameters = { start_time: Date.now(), time: 0, mouseX: 0, mouseY: 0, screenWidth: 0, screenHeight: 0 };
+			var toolbar, compileButton, fullscreenButton;
+			var code, canvas, gl, buffer, currentProgram, vertex_position,
+			parameters = { start_time: Date.now(), time: 0, mouseX: 0, mouseY: 0, screenWidth: 0, screenHeight: 0 };
 
 			init();
 			animate();
@@ -197,9 +190,22 @@
 
 				//
 
-				var tools = document.createElement( 'div' );
-				tools.id = 'tools';
-				document.body.appendChild( tools );
+				toolbar = document.createElement( 'div' );
+				toolbar.style.position = 'absolute';
+				toolbar.style.top = '25px';
+				toolbar.style.left = '25px';
+				document.body.appendChild( toolbar );
+
+				fullscreenButton = document.createElement( 'button' );
+				fullscreenButton.style.position = 'absolute';
+				fullscreenButton.style.right = '0px';
+				fullscreenButton.textContent = 'fullscreen';
+				fullscreenButton.addEventListener( 'click', function ( event ) {
+
+					document.body.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
+
+				}, false );
+				toolbar.appendChild( fullscreenButton );
 
 				var button = document.createElement( 'button' );
 				button.textContent = 'hide code';
@@ -211,18 +217,20 @@
 						code.style.visibility = 'hidden';
 						select.style.visibility = 'hidden';
 						compileButton.style.visibility = 'hidden';
+						fullscreenButton.style.visibility = 'hidden';
 
 					} else {
 
 						button.textContent = 'hide code';
 						code.style.visibility = 'visible';
 						select.style.visibility = 'visible';
 						compileButton.style.visibility = 'visible';
+						fullscreenButton.style.visibility = 'visible';
 
 					}
 
 				}, false );
-				tools.appendChild( button );
+				toolbar.appendChild( button );
 
 				var select = document.createElement( 'select' );
 
@@ -242,7 +250,7 @@
 
 				}, false );
 
-				tools.appendChild( select );
+				toolbar.appendChild( select );
 
 				compileButton = document.createElement( 'button' );
 				compileButton.textContent = 'compile';
@@ -251,7 +259,7 @@
 					compile();
 
 				}, false );
-				tools.appendChild( compileButton );
+				toolbar.appendChild( compileButton );
 
 				// Initialise WebGL
 
@@ -432,6 +440,8 @@
 
 			function onWindowResize( event ) {
 
+				toolbar.style.width = window.innerWidth - 47 + 'px';
+
 				code.style.top = '75px';
 				code.style.left = '25px';
 				code.style.width = ( window.innerWidth - 75 ) + 'px';