jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 18:47:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added fullscreen support test

Browse source
This commit is contained in:
Pannek Karl 2013-12-28 20:43:45 +01:00
parent 27b2e135db
commit 12711f4ce9
4 changed files with 183 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

26
fullscreen/index.html Normal file
View file

@ -0,0 +1,26 @@
<html>
<head>
<title>FS Demo</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="screenfull.js"></script>
</head>
<body>
<div id="container">
<canvas id="canvas" width="1" height="1"></canvas>
</div>
</body>
</html>
<script type="text/javascript">
document.getElementById('canvas').onclick = function(){
console.log(screenfull.enabled)
if (screenfull.enabled) {
screenfull.toggle();
}
}
</script>

137
fullscreen/screenfull.js Normal file
View file

@ -0,0 +1,137 @@
/*global Element */
(function (window, document) {
'use strict';
var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element, // IE6 throws without typeof check
fn = (function () {
var val, valLength;
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, valLength = val.length; i < valLength; i++) {
ret[fnMap[0][i]] = val[i];
}
return ret;
}
}
return false;
})(),
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 () {},
onerror: function () {},
raw: fn
};
if (!fn) {
window.screenfull = false;
return;
}
Object.defineProperties(screenfull, {
isFullscreen: {
get: function () {
return !!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 !!document[fn.fullscreenEnabled];
}
}
});
document.addEventListener(fn.fullscreenchange, function (e) {
screenfull.onchange.call(screenfull, e);
});
document.addEventListener(fn.fullscreenerror, function (e) {
screenfull.onerror.call(screenfull, e);
});
window.screenfull = screenfull;
})(window, document);

20
fullscreen/style.css Normal file
View file

@ -0,0 +1,20 @@
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
background: #000;
}
#container {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
canvas {
background: #333;
width: 100%;
height: 100%;
}