hide toolbar when code is hidden and mouse is motionless for 6 seconds.

JamesLinus · Dec 30, 2012 · dc50475 · dc50475
1 parent 532c7bb
commit dc50475
Showing 1 changed file with 82 additions and 14 deletions.
diff --git a/static/index.html b/static/index.html
@@ -234,13 +234,14 @@
 				button.textContent = 'hide code';
 				button.addEventListener( 'click', function ( event ) {
 
-					if ( code.getWrapperElement().style.display !== 'none' ) {
+					if ( isCodeVisible() ) {
 
 						button.textContent = 'show code';
 						code.getWrapperElement().style.display = 'none';
 						compileButton.style.visibility = 'hidden';
 						set_save_button('hidden');
 						set_parent_button('hidden');
+						stopHideUI();
 
 					} else {
 
@@ -387,16 +388,30 @@
 					panButton.addEventListener( 'contextmenu', noContextMenu, false);
 				}
 
+				var clientXLast, clientYLast;
+
 				document.addEventListener( 'mousemove', function ( event ) {
+
+					var clientX = event.clientX;
+					var clientY = event.clientY;
+
+					if (clientXLast == clientX && clientYLast == clientY)
+						return;
+
+					clientXLast = clientX;
+					clientYLast = clientY;
+
+					stopHideUI();
+
 					var codeElement, dx, dy;
 
-					parameters.mouseX = event.clientX / window.innerWidth;
-					parameters.mouseY = 1 - event.clientY / window.innerHeight;
+					parameters.mouseX = clientX / window.innerWidth;
+					parameters.mouseY = 1 - clientY / window.innerHeight;
 
 					if (resizer.isResizing) {
 
-						resizer.currentWidth = Math.max(Math.min(event.clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);
-						resizer.currentHeight = Math.max(Math.min(event.clientY - resizer.offsetMouseY, resizer.maxHeight), resizer.minWidth);
+						resizer.currentWidth = Math.max(Math.min(clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);
+						resizer.currentHeight = Math.max(Math.min(clientY - resizer.offsetMouseY, resizer.maxHeight), resizer.minWidth);
 						codeElement = code.getWrapperElement();
 						codeElement.style.width = resizer.currentWidth + 'px';
 						codeElement.style.height = resizer.currentHeight + 'px';
@@ -405,22 +420,22 @@
 
 					} else if (surface.isPanning) {
 
-						dx = event.clientX - surface.lastX;
-						dy = event.clientY - surface.lastY;
+						dx = clientX - surface.lastX;
+						dy = clientY - surface.lastY;
 						surface.centerX -= dx * surface.width / window.innerWidth;
 						surface.centerY += dy * surface.height / window.innerHeight;
-						surface.lastX = event.clientX;
-						surface.lastY = event.clientY;
+						surface.lastX = clientX;
+						surface.lastY = clientY;
 						computeSurfaceCorners();
 						event.preventDefault();
 
 					} else if (surface.isZooming) {
 
-						dx = event.clientX - surface.lastX;
-						dy = event.clientY - surface.lastY;
+						dx = clientX - surface.lastX;
+						dy = clientY - surface.lastY;
 						surface.height *= Math.pow(0.997, dx + dy);
-						surface.lastX = event.clientX;
-						surface.lastY = event.clientY;
+						surface.lastX = clientX;
+						surface.lastY = clientY;
 						computeSurfaceCorners();
 						event.preventDefault();
 
@@ -433,8 +448,15 @@
 					panButton.style.cursor = 'move';
 				}
 
+				function mouseLeave(event) {
+					settleDown(event);
+
+					if (!isCodeVisible())
+						startHideUITimer();
+				}
+
 				document.addEventListener( 'mouseup', settleDown, false );
-				document.addEventListener( 'mouseleave', settleDown, false );
+				document.addEventListener( 'mouseleave', mouseLeave, false );
 
 				onWindowResize();
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -444,6 +466,52 @@
 
 			}
 
+			function isCodeVisible() {
+				return code && code.getWrapperElement().style.display !== 'none';
+			}
+
+			var hideUITimer;
+			var isUIHidden = false;
+
+			function startHideUITimer () {
+
+				stopHideUITimer();
+				if (!isUIHidden && !isCodeVisible())
+					hideUITimer = window.setTimeout(onHideUITimer, 1000 * 5 );
+
+				function onHideUITimer() {
+
+					stopHideUITimer();
+					if (!isUIHidden && !isCodeVisible()) {
+
+						isUIHidden = true;
+						toolbar.style.display = 'none';
+						document.body.style.cursor = 'none';
+					}
+				}
+
+				function stopHideUITimer () {
+
+					if (hideUITimer) {
+
+						window.clearTimeout(hideUITimer);
+						hideUITimer = 0;
+					}
+				}
+			}
+
+			function stopHideUI () {
+
+				if (isUIHidden) {
+
+					isUIHidden = false;
+					toolbar.style.display = '';
+					document.body.style.cursor = '';
+				}
+				startHideUITimer();
+			}
+
+
 			function computeSurfaceCorners() {
 
 				if (gl) {