Skip to content

Commit 09c03e8

Browse files
flo80flo80
committed
Support full screen mode on iOS and enable "click to toggle fullscreen" in standard browsers
1 parent 611bc26 commit 09c03e8

File tree

3 files changed

+167
-1
lines changed

3 files changed

+167
-1
lines changed

Diff for: ‎css/main.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
html {
22
cursor: none;
33
overflow: hidden;
4+
background: #000;
45
}
56

67
::-webkit-scrollbar {

Diff for: ‎index.html

+16-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
<title>Magic Mirror</title>
55
<meta name="google" content="notranslate" />
66
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
7+
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
10+
<meta name="format-detection" content="telephone=no">
11+
<meta name="mobile-web-app-capable" content="yes">
12+
713
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
814
<link rel="stylesheet" type="text/css" href="css/main.css">
915
<link rel="stylesheet" type="text/css" href="fonts/roboto.css">
@@ -12,8 +18,17 @@
1218
<script type="text/javascript">
1319
var version = "#VERSION#";
1420
</script>
21+
<!-- Using https://github.com/sindresorhus/screenfull.js -->
22+
<script type="text/javascript" src="js/screenfull.js"></script>
23+
<script type="text/javascript">
24+
var b = document.getElementById("fullscreen");
25+
document.addEventListener("click", function() {
26+
screenfull.toggle(b);
27+
window.dispatchEvent(new Event('resize'));
28+
});
29+
</script>
1530
</head>
16-
<body>
31+
<body id="fullscreen">
1732
<div class="region fullscreen below"><div class="container"></div></div>
1833
<div class="region top bar">
1934
<div class="container"></div>

Diff for: ‎js/screenfull.js

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
/*!
2+
* screenfull
3+
* v3.0.2 - 2017-03-13
4+
* (c) Sindre Sorhus; MIT License
5+
*/
6+
(function () {
7+
'use strict';
8+
9+
var isCommonjs = typeof module !== 'undefined' && module.exports;
10+
var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element;
11+
12+
var fn = (function () {
13+
var val;
14+
15+
var fnMap = [
16+
[
17+
'requestFullscreen',
18+
'exitFullscreen',
19+
'fullscreenElement',
20+
'fullscreenEnabled',
21+
'fullscreenchange',
22+
'fullscreenerror'
23+
],
24+
// new WebKit
25+
[
26+
'webkitRequestFullscreen',
27+
'webkitExitFullscreen',
28+
'webkitFullscreenElement',
29+
'webkitFullscreenEnabled',
30+
'webkitfullscreenchange',
31+
'webkitfullscreenerror'
32+
33+
],
34+
// old WebKit (Safari 5.1)
35+
[
36+
'webkitRequestFullScreen',
37+
'webkitCancelFullScreen',
38+
'webkitCurrentFullScreenElement',
39+
'webkitCancelFullScreen',
40+
'webkitfullscreenchange',
41+
'webkitfullscreenerror'
42+
43+
],
44+
[
45+
'mozRequestFullScreen',
46+
'mozCancelFullScreen',
47+
'mozFullScreenElement',
48+
'mozFullScreenEnabled',
49+
'mozfullscreenchange',
50+
'mozfullscreenerror'
51+
],
52+
[
53+
'msRequestFullscreen',
54+
'msExitFullscreen',
55+
'msFullscreenElement',
56+
'msFullscreenEnabled',
57+
'MSFullscreenChange',
58+
'MSFullscreenError'
59+
]
60+
];
61+
62+
var i = 0;
63+
var l = fnMap.length;
64+
var ret = {};
65+
66+
for (; i < l; i++) {
67+
val = fnMap[i];
68+
if (val && val[1] in document) {
69+
for (i = 0; i < val.length; i++) {
70+
ret[fnMap[0][i]] = val[i];
71+
}
72+
return ret;
73+
}
74+
}
75+
76+
return false;
77+
})();
78+
79+
var screenfull = {
80+
request: function (elem) {
81+
var request = fn.requestFullscreen;
82+
83+
elem = elem || document.documentElement;
84+
85+
// Work around Safari 5.1 bug: reports support for
86+
// keyboard in fullscreen even though it doesn't.
87+
// Browser sniffing, since the alternative with
88+
// setTimeout is even worse.
89+
if (/5\.1[.\d]* Safari/.test(navigator.userAgent)) {
90+
elem[request]();
91+
} else {
92+
elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT);
93+
}
94+
},
95+
exit: function () {
96+
document[fn.exitFullscreen]();
97+
},
98+
toggle: function (elem) {
99+
if (this.isFullscreen) {
100+
this.exit();
101+
} else {
102+
this.request(elem);
103+
}
104+
},
105+
onchange: function (callback) {
106+
document.addEventListener(fn.fullscreenchange, callback, false);
107+
},
108+
onerror: function (callback) {
109+
document.addEventListener(fn.fullscreenerror, callback, false);
110+
},
111+
raw: fn
112+
};
113+
114+
if (!fn) {
115+
if (isCommonjs) {
116+
module.exports = false;
117+
} else {
118+
window.screenfull = false;
119+
}
120+
121+
return;
122+
}
123+
124+
Object.defineProperties(screenfull, {
125+
isFullscreen: {
126+
get: function () {
127+
return Boolean(document[fn.fullscreenElement]);
128+
}
129+
},
130+
element: {
131+
enumerable: true,
132+
get: function () {
133+
return document[fn.fullscreenElement];
134+
}
135+
},
136+
enabled: {
137+
enumerable: true,
138+
get: function () {
139+
// Coerce to boolean in case of old WebKit
140+
return Boolean(document[fn.fullscreenEnabled]);
141+
}
142+
}
143+
});
144+
145+
if (isCommonjs) {
146+
module.exports = screenfull;
147+
} else {
148+
window.screenfull = screenfull;
149+
}
150+
})();

0 commit comments

Comments
 (0)