more modern full screen handling
This commit is contained in:
Matt Walsh
parent
51bc2c5f4a
commit
ba16c8f1f4
|
|
@ -63,11 +63,6 @@ const index = (() => {
|
|||
|
||||
$('#btnGetGps').on('click', btnGetGps_click);
|
||||
|
||||
$(window).on('resize', OnFullScreen);
|
||||
$(window).on('resize', window_resize);
|
||||
$(document).on('mousemove', document_mousemove);
|
||||
$(document).on('mousedown', document_mousemove);
|
||||
divTwc.on('mousedown', document_mousemove);
|
||||
$(document).on('keydown', document_keydown);
|
||||
document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); });
|
||||
$('.ToggleFullScreen').on('click', btnFullScreen_click);
|
||||
|
|
@ -247,130 +242,12 @@ const index = (() => {
|
|||
};
|
||||
|
||||
const FullScreenResize = () => {
|
||||
const WindowWidth = $(window).width();
|
||||
const WindowHeight = $(window).height();
|
||||
const inFullScreen = InFullScreen();
|
||||
let IFrameWidth;
|
||||
let IFrameHeight;
|
||||
let LeftWidth;
|
||||
let RightWidth;
|
||||
let TopHeight;
|
||||
let BottomHeight;
|
||||
let Offset;
|
||||
|
||||
if (inFullScreen) {
|
||||
if ((WindowWidth / WindowHeight) >= 1.583333333333333) {
|
||||
divTwcTop.hide();
|
||||
divTwcBottom.hide();
|
||||
divTwcLeft.show();
|
||||
divTwcRight.show();
|
||||
|
||||
divTwcMiddle.attr('style', 'width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
|
||||
LeftWidth = ((WindowWidth - (WindowHeight * 1.33333333333333333333)) / 2);
|
||||
if (LeftWidth < 60) {
|
||||
LeftWidth = 60;
|
||||
}
|
||||
divTwcLeft.attr('style', 'width:' + LeftWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
divTwcLeft.css('visibility', 'visible');
|
||||
|
||||
RightWidth = ((WindowWidth - (WindowHeight * 1.33333333333333333333)) / 2);
|
||||
if (RightWidth < 60) {
|
||||
RightWidth = 60;
|
||||
}
|
||||
divTwcRight.attr('style', 'width:' + RightWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
divTwcRight.css('visibility', 'visible');
|
||||
|
||||
IFrameWidth = WindowWidth - LeftWidth - RightWidth;
|
||||
$('#display').attr('style', 'width:' + IFrameWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
|
||||
} else {
|
||||
divTwcTop.show();
|
||||
divTwcBottom.show();
|
||||
divTwcLeft.hide();
|
||||
divTwcRight.hide();
|
||||
Offset = 0;
|
||||
|
||||
TopHeight = ((WindowHeight - ((WindowWidth - Offset) * 0.75)) / 2);
|
||||
if (TopHeight < 0) {
|
||||
TopHeight = 0;
|
||||
}
|
||||
divTwcTop.attr('style', 'width:100%; height:' + TopHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
|
||||
BottomHeight = ((WindowHeight - ((WindowWidth - Offset) * 0.75)) / 2);
|
||||
if (BottomHeight < 30) {
|
||||
BottomHeight = 30;
|
||||
}
|
||||
divTwcBottom.attr('style', 'width:100%; height:' + BottomHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
divTwcBottom.css('visibility', 'visible');
|
||||
|
||||
IFrameHeight = WindowHeight - TopHeight - BottomHeight;
|
||||
$('#display').attr('style', 'width:100%; height:' + IFrameHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
divTwcMiddle.attr('style', 'width:100%; height:' + IFrameHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
}
|
||||
}
|
||||
|
||||
if (!inFullScreen) {
|
||||
divTwcTop.hide();
|
||||
divTwcBottom.hide();
|
||||
divTwcLeft.hide();
|
||||
divTwcRight.hide();
|
||||
|
||||
divTwc.attr('style', '');
|
||||
divTwcMiddle.attr('style', '');
|
||||
|
||||
$(window).off('resize', FullScreenResize);
|
||||
}
|
||||
|
||||
|
||||
if (inFullScreen) {
|
||||
$('body').css('overflow', 'hidden');
|
||||
$('.ToggleFullScreen').val('Exit Full Screen');
|
||||
|
||||
if (!GetFullScreenElement()) {
|
||||
EnterFullScreen();
|
||||
}
|
||||
} else {
|
||||
$('body').css('overflow', '');
|
||||
$('.ToggleFullScreen').val('Full Screen');
|
||||
}
|
||||
|
||||
divTwcNavContainer.show();
|
||||
};
|
||||
|
||||
const _lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
|
||||
const _unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
|
||||
|
||||
const OnFullScreen = () => {
|
||||
if (InFullScreen()) {
|
||||
divTwc.attr('style', 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
|
||||
FullScreenResize();
|
||||
|
||||
$(window).on('resize', FullScreenResize);
|
||||
//FullScreenResize();
|
||||
|
||||
if (_lockOrientation) try { _lockOrientation('landscape-primary'); } catch (ex) { console.log('Unable to lock screen orientation.'); }
|
||||
} else {
|
||||
divTwc.attr('style', '');
|
||||
divTwcMiddle.attr('style', '');
|
||||
|
||||
$(window).off('resize', FullScreenResize);
|
||||
FullScreenResize();
|
||||
|
||||
if (_unlockOrientation) try { _unlockOrientation(); } catch (ex) { console.log('Unable to unlock screen orientation.'); }
|
||||
}
|
||||
};
|
||||
|
||||
const InFullScreen = () => ((_FullScreenOverride) || (GetFullScreenElement()) || (window.innerHeight === screen.height) || (window.innerHeight === (screen.height - 1)));
|
||||
|
||||
const GetFullScreenElement = () => {
|
||||
if (_FullScreenOverride) return document.body;
|
||||
return (document.fullScreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
|
||||
};
|
||||
|
||||
const btnFullScreen_click = () => {
|
||||
|
||||
if (!InFullScreen()) {
|
||||
if (!document.fullScreenElement) {
|
||||
EnterFullScreen();
|
||||
} else {
|
||||
ExitFullscreen();
|
||||
|
|
@ -388,7 +265,7 @@ const index = (() => {
|
|||
};
|
||||
|
||||
const EnterFullScreen = () => {
|
||||
const element = document.body;
|
||||
const element = document.getElementById('divTwc');
|
||||
|
||||
// Supports most browsers and their versions.
|
||||
const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
|
||||
|
|
@ -457,9 +334,6 @@ const index = (() => {
|
|||
|
||||
|
||||
const display = $('#display');
|
||||
|
||||
display.on('mousemove', document_mousemove);
|
||||
display.on('mousedown', document_mousemove);
|
||||
display.on('keydown', document_keydown);
|
||||
|
||||
const SwipeCallBack = (event, direction) => {
|
||||
|
|
@ -522,19 +396,6 @@ const index = (() => {
|
|||
return false;
|
||||
};
|
||||
|
||||
const window_resize = () => {
|
||||
const $window = $(window);
|
||||
|
||||
if ($window.height() === _WindowHeight || $window.width() === _WindowWidth) return;
|
||||
|
||||
_WindowHeight = $window.height();
|
||||
_WindowWidth = $window.width();
|
||||
|
||||
postMessage('navButton', 'reset');
|
||||
|
||||
UpdateFullScreenNavigate();
|
||||
};
|
||||
|
||||
let _NavigateFadeIntervalId = null;
|
||||
|
||||
const UpdateFullScreenNavigate = () => {
|
||||
|
|
@ -551,7 +412,7 @@ const index = (() => {
|
|||
}
|
||||
|
||||
_NavigateFadeIntervalId = window.setTimeout(() => {
|
||||
if (InFullScreen()) {
|
||||
if (document.fullScreenElement) {
|
||||
$('body').addClass('HideCursor');
|
||||
|
||||
divTwcLeft.fadeOut2();
|
||||
|
|
@ -562,16 +423,11 @@ const index = (() => {
|
|||
}, 2000);
|
||||
};
|
||||
|
||||
const document_mousemove = (e) => {
|
||||
if (InFullScreen() && (e.originalEvent.movementX === 0 && e.originalEvent.movementY === 0 && e.originalEvent.buttons === 0)) return;
|
||||
UpdateFullScreenNavigate();
|
||||
};
|
||||
|
||||
const document_keydown = (e) => {
|
||||
|
||||
const code = (e.keyCode || e.which);
|
||||
|
||||
if (InFullScreen() || document.activeElement === document.body) {
|
||||
if (document.fullScreenElement || document.activeElement === document.body) {
|
||||
switch (code) {
|
||||
case 32: // Space
|
||||
btnNavigatePlay_click();
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ class CurrentWeather extends WeatherDisplay {
|
|||
data.VisibilityUnit = ' mi.';
|
||||
data.WindSpeed = utils.units.kphToMph(data.WindSpeed);
|
||||
data.WindUnit = 'MPH';
|
||||
data.Pressure = utils.units.pascalToInHg(data.Pressure);
|
||||
data.Pressure = utils.units.pascalToInHg(data.Pressure).toFixed(2);
|
||||
data.HeatIndex = utils.units.celsiusToFahrenheit(data.HeatIndex);
|
||||
data.WindChill = utils.units.celsiusToFahrenheit(data.WindChill);
|
||||
data.WindGust = utils.units.kphToMph(data.WindGust);
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ class WeatherDisplay {
|
|||
|
||||
// create a canvas
|
||||
const canvas = document.createElement('template');
|
||||
canvas.innerHTML = `<canvas id='${elemId+'Canvas'}' width='${width}' height='${height}'/ style='display: none;'>`;
|
||||
canvas.innerHTML = `<canvas id='${elemId+'Canvas'}' width='${width}' height='${height}' style='display: none;' />`;
|
||||
|
||||
// add to the page
|
||||
const container = document.getElementById('container');
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@font-face
|
||||
@font-face
|
||||
{
|
||||
font-family: "Star4000";
|
||||
src: url('../fonts/Star4000.woff') format('woff');
|
||||
|
|
@ -54,19 +54,19 @@ input, button
|
|||
display: block;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
width: 640px;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#divTwcMiddle
|
||||
{
|
||||
display: flex;
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
#divTwcLeft
|
||||
{
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -81,9 +81,8 @@ input, button
|
|||
|
||||
#divTwcRight
|
||||
{
|
||||
visibility: hidden;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -133,11 +132,12 @@ input, button
|
|||
|
||||
#divTwcNav
|
||||
{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
width: 640px;
|
||||
max-width: 640px;
|
||||
}
|
||||
#divTwcNav > div
|
||||
{
|
||||
|
|
@ -216,9 +216,10 @@ input, button
|
|||
{
|
||||
font-family: "Star4000";
|
||||
margin: 0 0 0 0;
|
||||
overflow: hidden;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
/* overflow: hidden; */
|
||||
/* width: 100%; */
|
||||
/* height: 480px; */
|
||||
/* max-width: 640px; */
|
||||
}
|
||||
|
||||
jsgif
|
||||
|
|
@ -256,11 +257,15 @@ jsgif
|
|||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
/* max-width: 640px; */
|
||||
}
|
||||
|
||||
#container canvas {
|
||||
position: absolute;
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
.heading {
|
||||
font-weight: bold;
|
||||
|
|
@ -273,3 +278,6 @@ jsgif
|
|||
display: block;
|
||||
max-width: 300px;
|
||||
}
|
||||
#divTwcNav img {
|
||||
zoom: 200%;
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<meta name="author" content="Matt Walsh" />
|
||||
<meta name="application-name" content="WeatherStar 4000+" />
|
||||
|
||||
<meta name="viewport" content="width=660,user-scalable=no" />
|
||||
<meta name="viewport" content="width=500,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
|
|
@ -132,8 +132,6 @@
|
|||
<a id="aRefreshBottom" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a>
|
||||
</div>
|
||||
<div id="divTwcBottomRight">
|
||||
<a id="aVolumeBottom" href="#" class="ToggleVolume"><img src="images/nav/ic_volume_off_white_24dp_1x.png" title="Mute" /></a>
|
||||
<a id="aNarrationBottom" href="#" class="ToggleNarration"><img src="images/nav/ic_no_hearing_white_24dp_1x.png" title="Turn on Narration" /></a>
|
||||
<a id="aFullScreenBottom" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -173,30 +171,16 @@
|
|||
Zone Id: <span id="spanZoneId"></span><br />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="divRefresh">
|
||||
Last Update: <span id="spanLastRefresh">(None)</span><br />
|
||||
<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="divUnits">
|
||||
Units:
|
||||
<input id="radEnglish" name="radUnits" type="radio" value="ENGLISH" /><label for="radEnglish">English</label>
|
||||
<input id="radMetric" name="radUnits" type="radio" value="METRIC" /><label for="radMetric">Metric</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="divScrollText">
|
||||
<form id="frmScrollText">
|
||||
<input id="chkScrollText" name="chkScrollText" type="checkbox" /><label id="lblScrollText" for="chkScrollText">Scroll Text: </label><input id="txtScrollText" autocomplete="off" value="" /><input id="btnScrollText" type="submit" value="Set" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue