mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 03:39:55 +00:00
Support full screen mode on iOS and enable "click to toggle fullscreen" in standard browsers
This commit is contained in:
Flo
parent
611bc26685
commit
09c03e8ca7
@ -1,6 +1,7 @@
|
||||
html {
|
||||
cursor: none;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
||||
17
index.html
17
index.html
@ -4,6 +4,12 @@
|
||||
<title>Magic Mirror</title>
|
||||
<meta name="google" content="notranslate" />
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
<link rel="stylesheet" type="text/css" href="fonts/roboto.css">
|
||||
@ -12,8 +18,17 @@
|
||||
<script type="text/javascript">
|
||||
var version = "#VERSION#";
|
||||
</script>
|
||||
<!-- Using https://github.com/sindresorhus/screenfull.js -->
|
||||
<script type="text/javascript" src="js/screenfull.js"></script>
|
||||
<script type="text/javascript">
|
||||
var b = document.getElementById("fullscreen");
|
||||
document.addEventListener("click", function() {
|
||||
screenfull.toggle(b);
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body id="fullscreen">
|
||||
<div class="region fullscreen below"><div class="container"></div></div>
|
||||
<div class="region top bar">
|
||||
<div class="container"></div>
|
||||
|
||||
150
js/screenfull.js
Normal file
150
js/screenfull.js
Normal file
@ -0,0 +1,150 @@
|
||||
/*!
|
||||
* screenfull
|
||||
* v3.0.2 - 2017-03-13
|
||||
* (c) Sindre Sorhus; MIT License
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var isCommonjs = typeof module !== 'undefined' && module.exports;
|
||||
var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element;
|
||||
|
||||
var fn = (function () {
|
||||
var val;
|
||||
|
||||
var fnMap = [
|
||||
[
|
||||
'requestFullscreen',
|
||||
'exitFullscreen',
|
||||
'fullscreenElement',
|
||||
'fullscreenEnabled',
|
||||
'fullscreenchange',
|
||||
'fullscreenerror'
|
||||
],
|
||||
// new WebKit
|
||||
[
|
||||
'webkitRequestFullscreen',
|
||||
'webkitExitFullscreen',
|
||||
'webkitFullscreenElement',
|
||||
'webkitFullscreenEnabled',
|
||||
'webkitfullscreenchange',
|
||||
'webkitfullscreenerror'
|
||||
|
||||
],
|
||||
// old WebKit (Safari 5.1)
|
||||
[
|
||||
'webkitRequestFullScreen',
|
||||
'webkitCancelFullScreen',
|
||||
'webkitCurrentFullScreenElement',
|
||||
'webkitCancelFullScreen',
|
||||
'webkitfullscreenchange',
|
||||
'webkitfullscreenerror'
|
||||
|
||||
],
|
||||
[
|
||||
'mozRequestFullScreen',
|
||||
'mozCancelFullScreen',
|
||||
'mozFullScreenElement',
|
||||
'mozFullScreenEnabled',
|
||||
'mozfullscreenchange',
|
||||
'mozfullscreenerror'
|
||||
],
|
||||
[
|
||||
'msRequestFullscreen',
|
||||
'msExitFullscreen',
|
||||
'msFullscreenElement',
|
||||
'msFullscreenEnabled',
|
||||
'MSFullscreenChange',
|
||||
'MSFullscreenError'
|
||||
]
|
||||
];
|
||||
|
||||
var i = 0;
|
||||
var l = fnMap.length;
|
||||
var ret = {};
|
||||
|
||||
for (; i < l; i++) {
|
||||
val = fnMap[i];
|
||||
if (val && val[1] in document) {
|
||||
for (i = 0; i < val.length; i++) {
|
||||
ret[fnMap[0][i]] = val[i];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
})();
|
||||
|
||||
var screenfull = {
|
||||
request: function (elem) {
|
||||
var request = fn.requestFullscreen;
|
||||
|
||||
elem = elem || document.documentElement;
|
||||
|
||||
// Work around Safari 5.1 bug: reports support for
|
||||
// keyboard in fullscreen even though it doesn't.
|
||||
// Browser sniffing, since the alternative with
|
||||
// setTimeout is even worse.
|
||||
if (/5\.1[.\d]* Safari/.test(navigator.userAgent)) {
|
||||
elem[request]();
|
||||
} else {
|
||||
elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT);
|
||||
}
|
||||
},
|
||||
exit: function () {
|
||||
document[fn.exitFullscreen]();
|
||||
},
|
||||
toggle: function (elem) {
|
||||
if (this.isFullscreen) {
|
||||
this.exit();
|
||||
} else {
|
||||
this.request(elem);
|
||||
}
|
||||
},
|
||||
onchange: function (callback) {
|
||||
document.addEventListener(fn.fullscreenchange, callback, false);
|
||||
},
|
||||
onerror: function (callback) {
|
||||
document.addEventListener(fn.fullscreenerror, callback, false);
|
||||
},
|
||||
raw: fn
|
||||
};
|
||||
|
||||
if (!fn) {
|
||||
if (isCommonjs) {
|
||||
module.exports = false;
|
||||
} else {
|
||||
window.screenfull = false;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Object.defineProperties(screenfull, {
|
||||
isFullscreen: {
|
||||
get: function () {
|
||||
return Boolean(document[fn.fullscreenElement]);
|
||||
}
|
||||
},
|
||||
element: {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return document[fn.fullscreenElement];
|
||||
}
|
||||
},
|
||||
enabled: {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
// Coerce to boolean in case of old WebKit
|
||||
return Boolean(document[fn.fullscreenEnabled]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (isCommonjs) {
|
||||
module.exports = screenfull;
|
||||
} else {
|
||||
window.screenfull = screenfull;
|
||||
}
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user