-
Notifications
You must be signed in to change notification settings - Fork 4
/
screenorientation.html
131 lines (117 loc) · 3.76 KB
/
screenorientation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name='mobile-web-app-capable' content='yes'>
<title>Screen Orientation Test Page</title>
<style>
#log {
border: 1px solid black;
background: rgba(182, 182, 182, 0.5);
}
</style>
</head>
<script>
function log(str) {
document.getElementById('log').innerHTML += '<div>' + str + '</div>';
}
function isInScreenInterface(str) {
return (str in window.screen);
}
function isInOrientationInterface(str) {
return (str in window.screen.orientation);
}
function isAPIPresent() {
return isInScreenInterface('orientation') &&
isInOrientationInterface('lock') &&
isInOrientationInterface('unlock') &&
isInOrientationInterface('angle') &&
isInOrientationInterface('onchange');
}
function orientationToString() {
return screen.orientation.angle + ' ' + screen.orientation.type;
}
addEventListener('load', function() {
var hasAPI = isAPIPresent();
if (!hasAPI) {
log('Screen Orientation API not found.');
return;
}
log('Screen Orientation API found.');
log('Initial orientation: ' + orientationToString());
var buttons = document.querySelectorAll('input[type=button]');
for (var i=0; i<buttons.length; ++i) {
if (buttons[i].id == 'unlock') {
buttons[i].onclick = function() { window.screen.orientation.unlock(); }
} else {
buttons[i].onclick = function() {
}
}
}
});
if ('orientation' in window.screen) {
window.screen.orientation.onchange = function() {
log('onchange called - ' + orientationToString());
};
window.screen.orientation.addEventListener('change', function() {
log('change event - ' + orientationToString());
});
}
// DEPRECATED API
if ('orientation' in window) {
window.addEventListener('load', function() {
log('(deprecated api) window.orientation: ' + window.orientation);
});
window.addEventListener('orientationchange', function() {
log('(deprecated api) orientationchange: ' + window.orientation);
});
}
window.addEventListener('resize', function() {
log('window resized');
});
</script>
<body>
<div>mounirlamouri.github.com</div>
<label>Lock to
<select id='lock-value'>
<option label='natural' value='natural'>
<option label='portrait' value='portrait'>
<option label='portrait-primary' value='portrait-primary'>
<option label='portrait-secondary' value='portrait-secondary'>
<option label='landscape' value='landscape'>
<option label='landscape-primary' value='landscape-primary'>
<option label='landscape-secondary' value='landscape-secondary'>
<option label='any' value='any'>
</select>
</label>
<button type='button' onclick='lock();'>Go</button><br>
<input type='button' id='unlock' value='Unlock'><br>
<button type='button' onclick='toggleFullscreen();'>Toggle Fullscreen</button>
<div id='log'></div>
<a href='http://oldworld.fr/google/screenorientation-vr.html'>Try VR Demo</a>
<script>
function lock() {
screen.orientation.lock(document.getElementById('lock-value').value).then(function() {
log('Lock succeeded: ' + orientationToString());
}, function(e) {
log('Lock failed: ' + e);
});
}
function unlock() {
screen.orientation.unlock();
}
function toggleFullscreen() {
if (document.webkitFullscreenElement) {
document.webkitExitFullscreen();
} else {
document.documentElement.webkitRequestFullscreen();
}
}
// OOPI tests.
setInterval(function() {
console.log('screen.width: ' + window.screen.width);
console.log('screen.orientation.angle: ' + window.screen.orientation.angle);
}, 5000);
</script>
</body>
</html>