From 4cd806e5701e9989598f2a76f75c09ead9e79184 Mon Sep 17 00:00:00 2001
From: Unick Soft <admin@unick-soft.ru>
Date: Sat, 9 Mar 2019 22:57:58 +0200
Subject: [PATCH] Added fullscreen button.

---
 i/css/home.css     | 12 ++++++++++++
 i/css/main_tpl.css |  4 ++--
 script/main.js     | 35 +++++++++++++++++++++++++++++------
 tpl/home.php       | 11 ++++++-----
 tpl/main_tpl.php   |  6 +++---
 5 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/i/css/home.css b/i/css/home.css
index 545b639..de1fc9a 100755
--- a/i/css/home.css
+++ b/i/css/home.css
@@ -197,6 +197,11 @@
   height: 100%;
 }
 
+#canvasSection
+{
+    position: relative;
+}
+
 .content {
   padding-bottom: 8px;
 }
@@ -228,6 +233,13 @@
     white-space: pre;
 }
 
+#Fullscreen
+{
+    position: absolute;
+    right: 0px;
+    z-index: 10;
+}
+
 ::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 7px;
diff --git a/i/css/main_tpl.css b/i/css/main_tpl.css
index f0d8f72..763c43d 100755
--- a/i/css/main_tpl.css
+++ b/i/css/main_tpl.css
@@ -66,8 +66,8 @@
     .footer 
     {
         padding: 0px;
-        padding-top: 18px;
-        padding-bottom: 8px;
+        padding-top: 0px;
+        padding-bottom: 0px;
 
         color: #777;
         
diff --git a/script/main.js b/script/main.js
index d7be04a..dbdc52c 100644
--- a/script/main.js
+++ b/script/main.js
@@ -1,6 +1,7 @@
 var application = new Application(document, window);
 
 var waitCounter = false;
+var fullscreen  = false;
 var userAction = function(str)
 {
     if (typeof window.yaCounter25827098 !== "undefined")
@@ -54,14 +55,15 @@ var single = 0;
 
 function resizeCanvas()
 {
-        var adv = document.getElementById('adv');
-        var canvas    = document.getElementById('canvas');
-        canvas.width  = document.getElementById('canvasSection').offsetWidth;
+  var adv = document.getElementById('adv');
+  var canvas    = document.getElementById('canvas');
+  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) - (document.documentElement.clientWidth < 650 ? 20 : 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;
 
-   application.redrawGraph();
+  application.redrawGraph();
 }
 
 function touchHandler(event)
@@ -506,6 +508,27 @@ function postLoadPage()
                    }, 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)
     document.getElementById('VoteButton').onclick = function ()
     {
diff --git a/tpl/home.php b/tpl/home.php
index 07b7b35..70e8060 100755
--- a/tpl/home.php
+++ b/tpl/home.php
@@ -1,7 +1,7 @@
 
     <head>
         <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.structure.css')?>" />
@@ -9,8 +9,8 @@
         <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.feedback_me.js')?>"></script>
-        <script src="<?= Root("script/example.js?v=15")?>" ></script>
+	    <script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
+        <script src="<?= Root("script/example.js?v=16")?>" ></script>
     </head>
 <!--
 <div class="pull-right">
@@ -23,9 +23,9 @@
 </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>
 		<ul class="nav nav-pills">
@@ -130,6 +130,7 @@
     </section>
 
     <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>
     <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>
diff --git a/tpl/main_tpl.php b/tpl/main_tpl.php
index c364d74..39d8483 100755
--- a/tpl/main_tpl.php
+++ b/tpl/main_tpl.php
@@ -35,9 +35,9 @@
 
     </head>
     <body>
-        <div class="container page-wrap">
+        <div class="container page-wrap" id="mainContainer">
 <!--            <div class="header"> -->
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-default" id="navigation">
     <div class="container-fluid">
     <div class="navbar-header">
         <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 и он занимает всю ширину игнорируя паддинги родителя -->
 
         <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>
            </div>
         </footer>