Added fullscreen button.

This commit is contained in:
Unick Soft 2019-03-09 22:57:58 +02:00
parent fbfcdee1bd
commit 4cd806e570
5 changed files with 52 additions and 16 deletions

View File

@ -197,6 +197,11 @@
height: 100%; height: 100%;
} }
#canvasSection
{
position: relative;
}
.content { .content {
padding-bottom: 8px; padding-bottom: 8px;
} }
@ -228,6 +233,13 @@
white-space: pre; white-space: pre;
} }
#Fullscreen
{
position: absolute;
right: 0px;
z-index: 10;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
width: 7px; width: 7px;

View File

@ -66,8 +66,8 @@
.footer .footer
{ {
padding: 0px; padding: 0px;
padding-top: 18px; padding-top: 0px;
padding-bottom: 8px; padding-bottom: 0px;
color: #777; color: #777;

View File

@ -1,6 +1,7 @@
var application = new Application(document, window); var application = new Application(document, window);
var waitCounter = false; var waitCounter = false;
var fullscreen = false;
var userAction = function(str) var userAction = function(str)
{ {
if (typeof window.yaCounter25827098 !== "undefined") if (typeof window.yaCounter25827098 !== "undefined")
@ -54,14 +55,15 @@ var single = 0;
function resizeCanvas() function resizeCanvas()
{ {
var adv = document.getElementById('adv'); var adv = document.getElementById('adv');
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
canvas.width = document.getElementById('canvasSection').offsetWidth; canvas.width = document.getElementById('canvasSection').offsetWidth;
var mainContainer = document.getElementById('mainContainer');
var offset = (mainContainer.offsetTop + mainContainer.offsetHeight) - (canvas.offsetTop + canvas.offsetHeight) + ($("#footerContent").css("display") === 'block' ? 0 : 24);
//canvas.height = document.getElementById('footer').offsetTop - document.getElementById('canvasSection').offsetTop - (adv && $("#adv").css("display") === 'block' ? document.getElementById('adv').offsetHeight : 0); canvas.height = $(window).height() - document.getElementById('canvas').offsetTop - (adv && $("#adv").css("display") === 'block' ? document.getElementById('adv').offsetHeight : 0) - ($("#footer").css("display") === 'block' ? document.getElementById('footer').offsetHeight : 0) - offset;
canvas.height = $(window).height() - document.getElementById('canvas').offsetTop - (adv && $("#adv").css("display") === 'block' ? document.getElementById('adv').offsetHeight : 0) - ($("#footer").css("display") === 'block' ? document.getElementById('footer').offsetHeight : 0) - (document.documentElement.clientWidth < 650 ? 20 : 0);
application.redrawGraph(); application.redrawGraph();
} }
function touchHandler(event) function touchHandler(event)
@ -506,6 +508,27 @@ function postLoadPage()
}, 1); }, 1);
} }
document.getElementById('Fullscreen').onclick = function()
{
var idList = ["h1Header", "h1Text", "navigation", "footerContent"];
fullscreen = !fullscreen
userAction(fullscreen ? "offscreen_on" : "fullscreen_off");
for (var i = 0; i < idList.length; i++)
if (fullscreen)
document.getElementById(idList[i]).style.display = "none";
else
document.getElementById(idList[i]).style.display = "block";
document.getElementById("mainContainer").className = fullscreen ? "container-fluid page-wrap" : "container page-wrap";
document.getElementById("FullscreenIcon").className = fullscreen ? "glyphicon glyphicon-resize-small fa-fw" : "glyphicon glyphicon-resize-full fa-fw";
resizeCanvas();
}
if (document.getElementById('VoteButton') !== null) if (document.getElementById('VoteButton') !== null)
document.getElementById('VoteButton').onclick = function () document.getElementById('VoteButton').onclick = function ()
{ {

View File

@ -1,7 +1,7 @@
<head> <head>
<link rel="stylesheet" type="text/css" href="<?= Root('i/css/home.css')?>" /> <link rel="stylesheet" type="text/css" href="<?= Root('i/css/home.css')?>" />
<link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery-ui.theme.css')?>" /> <link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery-ui.theme.css')?>" />
<link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery-ui.css')?>" /> <link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery-ui.css')?>" />
<!-- <!--
<link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery-ui.structure.css')?>" /> <link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery-ui.structure.css')?>" />
@ -9,8 +9,8 @@
<link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery.feedback_me.css')?>" /> <link rel="stylesheet" type="text/css" href="<?= Root('i/css/jquery.feedback_me.css')?>" />
<script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script> <script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script> <script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
<script src="<?= Root("script/example.js?v=15")?>" ></script> <script src="<?= Root("script/example.js?v=16")?>" ></script>
</head> </head>
<!-- <!--
<div class="pull-right"> <div class="pull-right">
@ -23,9 +23,9 @@
</div> </div>
--> -->
<h1 style="display:inline;"><?= L('title_notg')?></h1> <h1 style="display:inline;" id="h1Header"><?= L('title_notg')?></h1>
<span class="hidden-xs"><?= L('text')?></span> <span class="hidden-xs" id="h1Text"><?= L('text')?></span>
<section> <section>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
@ -130,6 +130,7 @@
</section> </section>
<section id="canvasSection"> <section id="canvasSection">
<button type="button" class="btn btn-default btn-sm hidden-phone" id="Fullscreen"><span class="glyphicon glyphicon-resize-full fa-fw" id="FullscreenIcon"></span></button>
<canvas id="canvas"><?= L('browser_no_support')?></canvas> <canvas id="canvas"><?= L('browser_no_support')?></canvas>
<div id="developerTools" class="well well-sm"> <div id="developerTools" class="well well-sm">
<h4><?= L('developer_tools_title')?></h4> <span class="glyphicon glyphicon-resize-full fa-fw leftTopPosition" id="devToolsZoom"></span> <h4><?= L('developer_tools_title')?></h4> <span class="glyphicon glyphicon-resize-full fa-fw leftTopPosition" id="devToolsZoom"></span>

View File

@ -35,9 +35,9 @@
</head> </head>
<body> <body>
<div class="container page-wrap"> <div class="container page-wrap" id="mainContainer">
<!-- <div class="header"> --> <!-- <div class="header"> -->
<nav class="navbar navbar-default"> <nav class="navbar navbar-default" id="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
@ -85,7 +85,7 @@
<!-- Футер приходится обрамить в .container, потому что у него position:absolute и он занимает всю ширину игнорируя паддинги родителя --> <!-- Футер приходится обрамить в .container, потому что у него position:absolute и он занимает всю ширину игнорируя паддинги родителя -->
<footer class="footer" id="footer" > <footer class="footer" id="footer" >
<div class="container hidden-phone"> <div class="container hidden-phone" id="footerContent">
<p>© <?= L('footer_info')?> 2015 - <?= date("Y")?></p> <p>© <?= L('footer_info')?> 2015 - <?= date("Y")?></p>
</div> </div>
</footer> </footer>