Done stuff with fullscreen
This commit is contained in:
		
							parent
							
								
									edb55e125c
								
							
						
					
					
						commit
						4fd7716172
					
				| @ -17,7 +17,8 @@ block content | |||||||
|         block description |         block description | ||||||
|         #alert-placeholder |         #alert-placeholder | ||||||
| 
 | 
 | ||||||
|         button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen |         block fullscreen | ||||||
|  |             button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen | ||||||
|         button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera |         button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera | ||||||
| 
 | 
 | ||||||
|         button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'}) |         button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'}) | ||||||
|  | |||||||
| @ -6,3 +6,7 @@ block title | |||||||
| block configjs | block configjs | ||||||
|     script RecommendedCamera = FixedCamera; |     script RecommendedCamera = FixedCamera; | ||||||
|     script(src="/static/js/tutorial.min.js") |     script(src="/static/js/tutorial.min.js") | ||||||
|  | 
 | ||||||
|  | block fullscreen | ||||||
|  |     button#full.btn.btn-primary(style={display:"none"}) Fullscreen | ||||||
|  | 
 | ||||||
|  | |||||||
							
								
								
									
										127
									
								
								js/prototype/main.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										127
									
								
								js/prototype/main.js
									
									
									
									
										vendored
									
									
								
							| @ -1,3 +1,19 @@ | |||||||
|  | var isFullscreen = false; | ||||||
|  | var beenFullscreen = false; | ||||||
|  | 
 | ||||||
|  | var main_section = document.getElementById('main-section'); | ||||||
|  | var container_size = { | ||||||
|  |     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;}, | ||||||
|  |     height: function() { | ||||||
|  |         if (!isFullscreen) | ||||||
|  |             return main_section.clientHeight | ||||||
|  |                 - document.getElementById('nav').offsetHeight | ||||||
|  |                 - document.getElementById('main-div').offsetHeight; | ||||||
|  |         else | ||||||
|  |             return screen.height; | ||||||
|  |     } | ||||||
|  | }; | ||||||
|  | 
 | ||||||
| // Let's be sure we avoid using global variables
 | // Let's be sure we avoid using global variables
 | ||||||
| var onWindowResize = (function() { | var onWindowResize = (function() { | ||||||
| 
 | 
 | ||||||
| @ -17,23 +33,9 @@ var previewer; | |||||||
| 
 | 
 | ||||||
| var loader; | var loader; | ||||||
| var coins = []; | var coins = []; | ||||||
| var beenFullscreen = false; |  | ||||||
| var isFullscreen = false; |  | ||||||
| var previousTime; | var previousTime; | ||||||
| 
 | 
 | ||||||
| var main_section = document.getElementById('main-section'); |  | ||||||
| 
 | 
 | ||||||
| var container_size = { |  | ||||||
|     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;}, |  | ||||||
|     height: function() { |  | ||||||
|         if (!isFullscreen) |  | ||||||
|             return main_section.clientHeight |  | ||||||
|                 - document.getElementById('nav').offsetHeight |  | ||||||
|                 - document.getElementById('main-div').offsetHeight; |  | ||||||
|         else |  | ||||||
|             return screen.height; |  | ||||||
|     } |  | ||||||
| }; |  | ||||||
| 
 | 
 | ||||||
| init(); | init(); | ||||||
| animate(); | animate(); | ||||||
| @ -110,62 +112,6 @@ function initListeners() { | |||||||
|     cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); |     cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function fullscreen() { |  | ||||||
|     isFullscreen = true; |  | ||||||
| 
 |  | ||||||
|     if (!beenFullscreen) { |  | ||||||
|         beenFullscreen = true; |  | ||||||
|         alert('To quit fullscren mode, type ESC key'); |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     container.style.position = "absolute"; |  | ||||||
|     container.style.cssFloat = "top-left"; |  | ||||||
|     container.style.top = "50px"; |  | ||||||
|     container.style.bottom = "0px"; |  | ||||||
|     container.style.left = "0px"; |  | ||||||
|     container.style.right = "0px"; |  | ||||||
|     container.style.width=""; |  | ||||||
|     container.style.height=""; |  | ||||||
|     container.style.overflow = "hidden"; |  | ||||||
| 
 |  | ||||||
|     // canvas.style.position = "absolute";
 |  | ||||||
|     // canvas.style.cssFloat = "top-left";
 |  | ||||||
|     // canvas.style.top = "0px";
 |  | ||||||
|     // canvas.style.bottom = "0px";
 |  | ||||||
|     // canvas.style.left = "0px";
 |  | ||||||
|     // canvas.style.right = "0px";
 |  | ||||||
|     // canvas.width=window.innerWidth;
 |  | ||||||
|     // canvas.height=window.innerHeight;
 |  | ||||||
|     // canvas.style.overflow = "hidden";
 |  | ||||||
| 
 |  | ||||||
|     onWindowResize(); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function stopFullscreen() { |  | ||||||
|     isFullscreen = false; |  | ||||||
| 
 |  | ||||||
|     container.style.position = ""; |  | ||||||
|     container.style.cssFloat = ""; |  | ||||||
|     container.style.top = ""; |  | ||||||
|     container.style.bottom = ""; |  | ||||||
|     container.style.left = ""; |  | ||||||
|     container.style.right = ""; |  | ||||||
|     container.style.width = container_size.width() + "px"; |  | ||||||
|     container.style.height = container_size.height() + "px"; |  | ||||||
| 
 |  | ||||||
|     // canvas.style.position = "";
 |  | ||||||
|     // canvas.style.cssFloat = "";
 |  | ||||||
|     // canvas.style.top = "";
 |  | ||||||
|     // canvas.style.bottom = "";
 |  | ||||||
|     // canvas.style.left = "";
 |  | ||||||
|     // canvas.style.right = "";
 |  | ||||||
|     // canvas.width = container_size.width();
 |  | ||||||
|     // canvas.height = container_size.height();
 |  | ||||||
|     // canvas.style.overflow = "";
 |  | ||||||
| 
 |  | ||||||
|     onWindowResize(); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function render() { | function render() { | ||||||
|     cameraSelecter.update(); |     cameraSelecter.update(); | ||||||
| 
 | 
 | ||||||
| @ -248,3 +194,44 @@ function show(object) { | |||||||
| return onWindowResize; | return onWindowResize; | ||||||
| 
 | 
 | ||||||
| })(); | })(); | ||||||
|  | 
 | ||||||
|  | function fullscreen() { | ||||||
|  |     var container = document.getElementById('container'); | ||||||
|  |     isFullscreen = true; | ||||||
|  | 
 | ||||||
|  |     if (!beenFullscreen) { | ||||||
|  |         beenFullscreen = true; | ||||||
|  |         alert('To quit fullscren mode, type ESC key'); | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     container.style.position = "absolute"; | ||||||
|  |     container.style.cssFloat = "top-left"; | ||||||
|  |     container.style.top = "50px"; | ||||||
|  |     container.style.bottom = "0px"; | ||||||
|  |     container.style.left = "0px"; | ||||||
|  |     container.style.right = "0px"; | ||||||
|  |     container.style.width=""; | ||||||
|  |     container.style.height=""; | ||||||
|  |     container.style.overflow = "hidden"; | ||||||
|  | 
 | ||||||
|  |     onWindowResize(); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function stopFullscreen() { | ||||||
|  |     isFullscreen = false; | ||||||
|  | 
 | ||||||
|  |     var container = document.getElementById('container'); | ||||||
|  | 
 | ||||||
|  |     container.style.position = ""; | ||||||
|  |     container.style.cssFloat = ""; | ||||||
|  |     container.style.top = ""; | ||||||
|  |     container.style.bottom = ""; | ||||||
|  |     container.style.left = ""; | ||||||
|  |     container.style.right = ""; | ||||||
|  |     container.style.width = container_size.width() + "px"; | ||||||
|  |     container.style.height = container_size.height() + "px"; | ||||||
|  | 
 | ||||||
|  |     onWindowResize(); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | |||||||
							
								
								
									
										127
									
								
								js/prototype/tutorial.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										127
									
								
								js/prototype/tutorial.js
									
									
									
									
										vendored
									
									
								
							| @ -1,3 +1,20 @@ | |||||||
|  | var beenFullscreen = false; | ||||||
|  | var isFullscreen = false; | ||||||
|  | 
 | ||||||
|  | var main_section = document.getElementById('main-section'); | ||||||
|  | 
 | ||||||
|  | var container_size = { | ||||||
|  |     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;}, | ||||||
|  |     height: function() { | ||||||
|  |         if (!isFullscreen) | ||||||
|  |             return main_section.clientHeight | ||||||
|  |                 - document.getElementById('nav').offsetHeight | ||||||
|  |                 - document.getElementById('main-div').offsetHeight; | ||||||
|  |         else | ||||||
|  |             return screen.height; | ||||||
|  |     } | ||||||
|  | }; | ||||||
|  | 
 | ||||||
| var onWindowResize = (function() { | var onWindowResize = (function() { | ||||||
| 
 | 
 | ||||||
| // Disable scrolling
 | // Disable scrolling
 | ||||||
| @ -15,28 +32,9 @@ var stats; | |||||||
| var previewer; | var previewer; | ||||||
| var loader; | var loader; | ||||||
| var coins = []; | var coins = []; | ||||||
| var beenFullscreen = false; |  | ||||||
| var isFullscreen = false; |  | ||||||
| var previousTime; | var previousTime; | ||||||
| var tutorial; | var tutorial; | ||||||
| 
 | 
 | ||||||
| var main_section = document.getElementById('main-section'); |  | ||||||
| 
 |  | ||||||
| console.log(document.getElementById('main-div').offsetHeight); |  | ||||||
| var container_size = { |  | ||||||
|     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;}, |  | ||||||
|     height: function() { |  | ||||||
|         if (!isFullscreen) |  | ||||||
|             return main_section.clientHeight |  | ||||||
|                 - document.getElementById('nav').offsetHeight |  | ||||||
|                 - document.getElementById('main-div').offsetHeight; |  | ||||||
|         else |  | ||||||
|             return screen.height; |  | ||||||
|     } |  | ||||||
| }; |  | ||||||
| 
 |  | ||||||
| console.log(container_size.width(), container_size.height()); |  | ||||||
| 
 |  | ||||||
| init(); | init(); | ||||||
| animate(); | animate(); | ||||||
| 
 | 
 | ||||||
| @ -119,61 +117,6 @@ function initListeners() { | |||||||
|     cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); |     cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function fullscreen() { |  | ||||||
|     isFullscreen = true; |  | ||||||
| 
 |  | ||||||
|     if (!beenFullscreen) { |  | ||||||
|         beenFullscreen = true; |  | ||||||
|         alert('To quit fullscren mode, type ESC key'); |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     container.style.position = "absolute"; |  | ||||||
|     container.style.cssFloat = "top-left"; |  | ||||||
|     container.style.top = "50px"; |  | ||||||
|     container.style.bottom = "0px"; |  | ||||||
|     container.style.left = "0px"; |  | ||||||
|     container.style.right = "0px"; |  | ||||||
|     container.style.width=""; |  | ||||||
|     container.style.height=""; |  | ||||||
|     container.style.overflow = "hidden"; |  | ||||||
| 
 |  | ||||||
|     // canvas.style.position = "absolute";
 |  | ||||||
|     // canvas.style.cssFloat = "top-left";
 |  | ||||||
|     // canvas.style.top = "0px";
 |  | ||||||
|     // canvas.style.bottom = "0px";
 |  | ||||||
|     // canvas.style.left = "0px";
 |  | ||||||
|     // canvas.style.right = "0px";
 |  | ||||||
|     // canvas.width=window.innerWidth;
 |  | ||||||
|     // canvas.height=window.innerHeight;
 |  | ||||||
|     // canvas.style.overflow = "hidden";
 |  | ||||||
| 
 |  | ||||||
|     onWindowResize(); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function stopFullscreen() { |  | ||||||
|     isFullscreen = false; |  | ||||||
| 
 |  | ||||||
|     container.style.position = ""; |  | ||||||
|     container.style.cssFloat = ""; |  | ||||||
|     container.style.top = ""; |  | ||||||
|     container.style.bottom = ""; |  | ||||||
|     container.style.left = ""; |  | ||||||
|     container.style.right = ""; |  | ||||||
|     container.style.width = container_size.width() + "px"; |  | ||||||
|     container.style.height = container_size.height() + "px"; |  | ||||||
| 
 |  | ||||||
|     // canvas.style.position = "";
 |  | ||||||
|     // canvas.style.cssFloat = "";
 |  | ||||||
|     // canvas.style.top = "";
 |  | ||||||
|     // canvas.style.bottom = "";
 |  | ||||||
|     // canvas.style.left = "";
 |  | ||||||
|     // canvas.style.right = "";
 |  | ||||||
|     // canvas.width = container_size.width();
 |  | ||||||
|     // canvas.height = container_size.height();
 |  | ||||||
|     // canvas.style.overflow = "";
 |  | ||||||
| 
 |  | ||||||
|     onWindowResize(); |  | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| function render() { | function render() { | ||||||
|     cameraSelecter.update(); |     cameraSelecter.update(); | ||||||
| @ -256,3 +199,39 @@ function show(object) { | |||||||
| return onWindowResize; | return onWindowResize; | ||||||
| 
 | 
 | ||||||
| })(); | })(); | ||||||
|  | 
 | ||||||
|  | function fullscreen() { | ||||||
|  |     isFullscreen = true; | ||||||
|  | 
 | ||||||
|  |     if (!beenFullscreen) { | ||||||
|  |         beenFullscreen = true; | ||||||
|  |         alert('To quit fullscren mode, type ESC key'); | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     container.style.position = "absolute"; | ||||||
|  |     container.style.cssFloat = "top-left"; | ||||||
|  |     container.style.top = "50px"; | ||||||
|  |     container.style.bottom = "0px"; | ||||||
|  |     container.style.left = "0px"; | ||||||
|  |     container.style.right = "0px"; | ||||||
|  |     container.style.width=""; | ||||||
|  |     container.style.height=""; | ||||||
|  |     container.style.overflow = "hidden"; | ||||||
|  | 
 | ||||||
|  |     onWindowResize(); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function stopFullscreen() { | ||||||
|  |     isFullscreen = false; | ||||||
|  | 
 | ||||||
|  |     container.style.position = ""; | ||||||
|  |     container.style.cssFloat = ""; | ||||||
|  |     container.style.top = ""; | ||||||
|  |     container.style.bottom = ""; | ||||||
|  |     container.style.left = ""; | ||||||
|  |     container.style.right = ""; | ||||||
|  |     container.style.width = container_size.width() + "px"; | ||||||
|  |     container.style.height = container_size.height() + "px"; | ||||||
|  | 
 | ||||||
|  |     onWindowResize(); | ||||||
|  | } | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user