From 4fd7716172f5cf4186924f1d200fbad454a1614f Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Tue, 2 Jun 2015 15:25:52 +0200 Subject: [PATCH] Done stuff with fullscreen --- controllers/prototype/views/prototype.jade | 3 +- controllers/prototype/views/tutorial.jade | 4 + js/prototype/main.js | 127 +++++++++------------ js/prototype/tutorial.js | 127 +++++++++------------ 4 files changed, 116 insertions(+), 145 deletions(-) diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade index 5f4af15..55facdd 100644 --- a/controllers/prototype/views/prototype.jade +++ b/controllers/prototype/views/prototype.jade @@ -17,7 +17,8 @@ block content block description #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#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'}) diff --git a/controllers/prototype/views/tutorial.jade b/controllers/prototype/views/tutorial.jade index 53a8272..44dda74 100644 --- a/controllers/prototype/views/tutorial.jade +++ b/controllers/prototype/views/tutorial.jade @@ -6,3 +6,7 @@ block title block configjs script RecommendedCamera = FixedCamera; script(src="/static/js/tutorial.min.js") + +block fullscreen + button#full.btn.btn-primary(style={display:"none"}) Fullscreen + diff --git a/js/prototype/main.js b/js/prototype/main.js index 70e026f..c9c02f7 100644 --- a/js/prototype/main.js +++ b/js/prototype/main.js @@ -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 var onWindowResize = (function() { @@ -17,23 +33,9 @@ var previewer; var loader; var coins = []; -var beenFullscreen = false; -var isFullscreen = false; 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(); animate(); @@ -110,62 +112,6 @@ function initListeners() { 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() { cameraSelecter.update(); @@ -248,3 +194,44 @@ function show(object) { 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(); +} + + diff --git a/js/prototype/tutorial.js b/js/prototype/tutorial.js index 8bb8881..b2bd1af 100644 --- a/js/prototype/tutorial.js +++ b/js/prototype/tutorial.js @@ -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() { // Disable scrolling @@ -15,28 +32,9 @@ var stats; var previewer; var loader; var coins = []; -var beenFullscreen = false; -var isFullscreen = false; var previousTime; 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(); animate(); @@ -119,61 +117,6 @@ function initListeners() { 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() { cameraSelecter.update(); @@ -256,3 +199,39 @@ function show(object) { 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(); +}