Begining of fullscreen mode

This commit is contained in:
Thomas FORGIONE 2015-05-12 15:45:23 +02:00
parent e3e51a8d80
commit bc22f095ea
2 changed files with 30 additions and 22 deletions

View File

@ -1,5 +1,5 @@
body { body {
overflow-y: hidden; overflow: hidden;
} }
html, body { html, body {

View File

@ -14,6 +14,8 @@ var previewer;
var loader; var loader;
var coins; var coins;
var beenFullscreen = false;
var isFullscreen = false;
var main_section = document.getElementById('main-section'); var main_section = document.getElementById('main-section');
var offset = function() { var offset = function() {
@ -24,11 +26,14 @@ var offset = function() {
console.log(document.getElementById('main-div').offsetHeight); console.log(document.getElementById('main-div').offsetHeight);
var container_size = { var container_size = {
width: function() { return main_section.clientWidth; }, width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
height: function() { height: function() {
if (!isFullscreen)
return main_section.clientHeight return main_section.clientHeight
- document.getElementById('nav').offsetHeight - document.getElementById('nav').offsetHeight
- document.getElementById('main-div').offsetHeight; - document.getElementById('main-div').offsetHeight;
else
return screen.height;
} }
}; };
@ -138,6 +143,7 @@ function initListeners() {
} }
function fullscreen() { function fullscreen() {
isFullscreen = true;
if (!beenFullscreen) { if (!beenFullscreen) {
beenFullscreen = true; beenFullscreen = true;
@ -146,7 +152,7 @@ function fullscreen() {
container.style.position = "absolute"; container.style.position = "absolute";
container.style.cssFloat = "top-left"; container.style.cssFloat = "top-left";
container.style.top = "0px"; container.style.top = "50px";
container.style.bottom = "0px"; container.style.bottom = "0px";
container.style.left = "0px"; container.style.left = "0px";
container.style.right = "0px"; container.style.right = "0px";
@ -154,21 +160,23 @@ function fullscreen() {
container.style.height=""; container.style.height="";
container.style.overflow = "hidden"; container.style.overflow = "hidden";
canvas.style.position = "absolute"; // canvas.style.position = "absolute";
canvas.style.cssFloat = "top-left"; // canvas.style.cssFloat = "top-left";
canvas.style.top = "0px"; // canvas.style.top = "0px";
canvas.style.bottom = "0px"; // canvas.style.bottom = "0px";
canvas.style.left = "0px"; // canvas.style.left = "0px";
canvas.style.right = "0px"; // canvas.style.right = "0px";
canvas.width=window.innerWidth; // canvas.width=window.innerWidth;
canvas.height=window.innerHeight; // canvas.height=window.innerHeight;
canvas.style.overflow = "hidden"; // canvas.style.overflow = "hidden";
onWindowResize(); onWindowResize();
} }
function stopFullscreen() { function stopFullscreen() {
container.style.position = ""; isFullscreen = false;
// container.style.position = "";
container.style.cssFloat = ""; container.style.cssFloat = "";
container.style.width = container_size.width() + "px"; container.style.width = container_size.width() + "px";
container.style.height = container_size.height() + "px"; container.style.height = container_size.height() + "px";
@ -176,12 +184,12 @@ function stopFullscreen() {
// canvas.style.position = ""; // canvas.style.position = "";
// canvas.style.cssFloat = ""; // canvas.style.cssFloat = "";
canvas.style.top = ""; // canvas.style.top = "";
canvas.style.bottom = ""; // canvas.style.bottom = "";
canvas.style.left = ""; // canvas.style.left = "";
canvas.style.right = ""; // canvas.style.right = "";
canvas.width = container_size.width(); // canvas.width = container_size.width();
canvas.height = container_size.height(); // canvas.height = container_size.height();
// canvas.style.overflow = ""; // canvas.style.overflow = "";
onWindowResize(); onWindowResize();