Skip to content
This repository was archived by the owner on May 28, 2023. It is now read-only.

Commit 6384373

Browse files
MotorTruck1221MotorTruck1221
committed
Fullscreen added
1 parent 236b16e commit 6384373

File tree

3 files changed

+133
-1
lines changed

3 files changed

+133
-1
lines changed

‎public/chrome-tabs/tabbedLogic.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
let navToggle = document.getElementById('navToggle')
12
var el = document.querySelector('.chrome-tabs')
23
var chromeTabs = new ChromeTabs()
34
let id = 0;
@@ -288,6 +289,72 @@ var el = document.querySelector('.chrome-tabs')
288289
function Backward() {
289290
document.getElementById(currentTab).contentWindow.history.back()
290291
}
292+
navToggle.addEventListener('mouseover', function () {
293+
let fullscreenBehavior = localStorage.getItem('fullscreenBehavior');
294+
if (fullscreenBehavior === 'true') {
295+
fullScreenIframe(false);
296+
} else if (fullscreenBehavior === 'false') {
297+
fullScreenIframe(false, 'content');
298+
}
299+
});
300+
function fullScreenIframe(value, fullscreenBehavior) {
301+
if (fullscreenBehavior === 'content') {
302+
if (value === true) {
303+
let iframe = document.getElementById('uv-iframe');
304+
iframe.requestFullscreen();
305+
navToggle.classList.remove('dnone');
306+
} else if (value === false) {
307+
document.exitFullscreen();
308+
navToggle.classList.add('dnone');
309+
}
310+
} else {
311+
if (value === true) {
312+
let iframe = document.getElementById(currentTab);
313+
document.getElementById('hamburger').classList.add('dnone')
314+
navToggle.classList.remove('dnone');
315+
//set to position absolute
316+
iframe.style.position = 'absolute';
317+
//set to top left corner
318+
iframe.style.top = '0';
319+
iframe.style.left = '0';
320+
//set to full width and height
321+
iframe.style.width = '100%';
322+
iframe.style.height = '100%';
323+
//set z-index to 9999
324+
iframe.style.zIndex = '9998';
325+
//add a transition
326+
iframe.style.transition = 'all 0.5s ease-in-out';
327+
} else if (value === false) {
328+
let iframe = document.getElementById(currentTab);
329+
document.getElementById('hamburger').classList.remove('dnone')
330+
navToggle.classList.add('dnone');
331+
//set styles to height: calc(100% - 4rem);width: 100%;border: none;position: fixed;top: 4rem;right: 0;left: 0;bottom: 0;border: none; background: var(--bg-color);
332+
iframe.style.height = 'calc(100% - 86px)';
333+
iframe.style.width = '100%';
334+
iframe.style.border = 'none';
335+
iframe.style.position = 'fixed';
336+
iframe.style.top = '86px';
337+
iframe.style.right = '0';
338+
iframe.style.left = '0';
339+
iframe.style.bottom = '0';
340+
iframe.style.border = 'none';
341+
iframe.style.background = 'var(--bg-color)';
342+
iframe.style.transition = 'all 0.5s ease-in-out';
343+
iframe.style.zIndex = '9999';
344+
}
345+
}
346+
}
347+
function fullscreenIframe() {
348+
let fullscreenBehavior = localStorage.getItem('fullscreenBehavior');
349+
if (fullscreenBehavior === 'true') {
350+
fullScreenIframe(true);
351+
} else if (fullscreenBehavior === 'false') {
352+
fullScreenIframe(true, 'content');
353+
} else {
354+
localStorage.setItem('fullscreenBehavior', 'true');
355+
fullScreenIframe(true);
356+
}
357+
}
291358

292359
init();
293360
initApps();

‎public/js/control.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,62 @@ function fullscreenIframe() {
7979
fullScreenIframe(true);
8080
}
8181
}
82+
function fullScreenIframe(value, fullscreenBehavior) {
83+
if (fullscreenBehavior === 'content') {
84+
if (value === true) {
85+
let iframe = document.getElementById('uv-iframe');
86+
iframe.requestFullscreen();
87+
navToggle.classList.remove('dnone');
88+
} else if (value === false) {
89+
document.exitFullscreen();
90+
navToggle.classList.add('dnone');
91+
}
92+
} else {
93+
if (value === true) {
94+
let iframe = document.getElementById('uv-iframe');
95+
navToggle.classList.remove('dnone');
96+
//set to position absolute
97+
iframe.style.position = 'absolute';
98+
//set to top left corner
99+
iframe.style.top = '0';
100+
iframe.style.left = '0';
101+
//set to full width and height
102+
iframe.style.width = '100%';
103+
iframe.style.height = '100%';
104+
//set z-index to 9999
105+
iframe.style.zIndex = '9998';
106+
//add a transition
107+
iframe.style.transition = 'all 0.5s ease-in-out';
108+
} else if (value === false) {
109+
let iframe = document.getElementById('uv-iframe');
110+
navToggle.classList.add('dnone');
111+
//set styles to height: calc(100% - 4rem);width: 100%;border: none;position: fixed;top: 4rem;right: 0;left: 0;bottom: 0;border: none; background: var(--bg-color);
112+
iframe.style.height = 'calc(100% - 4rem)';
113+
iframe.style.width = '100%';
114+
iframe.style.border = 'none';
115+
iframe.style.position = 'fixed';
116+
iframe.style.top = '4rem';
117+
iframe.style.right = '0';
118+
iframe.style.left = '0';
119+
iframe.style.bottom = '0';
120+
iframe.style.border = 'none';
121+
iframe.style.background = 'var(--bg-color)';
122+
iframe.style.transition = 'all 0.5s ease-in-out';
123+
iframe.style.zIndex = '2';
124+
}
125+
}
126+
}
127+
function fullscreenIframe() {
128+
let fullscreenBehavior = localStorage.getItem('fullscreenBehavior');
129+
if (fullscreenBehavior === 'true') {
130+
fullScreenIframe(true);
131+
} else if (fullscreenBehavior === 'false') {
132+
fullScreenIframe(true, 'content');
133+
} else {
134+
localStorage.setItem('fullscreenBehavior', 'true');
135+
fullScreenIframe(true);
136+
}
137+
}
82138
function exitIframe() {
83139
if (
84140
window.location.href === '/games' ||

‎src/pages/tabs.astro

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,11 @@ import Head from '../layouts/allpages.astro';
5151
</div>
5252
<div class="right-control">
5353
<i class="fa-solid fa-copy hover:brightness-100" onclick="popOut()"></i>
54-
<i class="fa-solid fa-expand hover:brightness-100" onclick="fullScreen()"></i>
54+
<i class="fa-solid fa-expand hover:brightness-100" onclick="fullscreenIframe()"></i>
5555
</div>
5656
</div>
5757
<div id="tabContents"></div>
58+
<div id="navToggle" class="dnone"></div>
5859
<script src="/chrome-tabs/draggabilly.pkgd.min.js" is:inline></script>
5960
<script src="/chrome-tabs/chrome-tabs.js" is:inline></script>
6061
<script src="/chrome-tabs/tabbedLogic.js" is:inline></script>
@@ -159,5 +160,13 @@ import Head from '../layouts/allpages.astro';
159160
#add-tab:hover {
160161
filter: drop-shadow(0px 0px 12px var(--text-color));
161162
}
163+
#navToggle {
164+
background: transparent;
165+
position: absolute;
166+
top: 0;
167+
width: 100%;
168+
height: 0.2rem;
169+
z-index: 999999;
170+
}
162171

163172
</style>

0 commit comments

Comments
 (0)