-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (133 loc) · 5.4 KB
/
index.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using the PageVisibility API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Using the PageVisibility API</h1>
<p>
With all the HTML5 JavaScript poster childs like requestAnimationFrame, canvas,
FileReader and many more, the PageVisibility API is an often overlooked but
pretty useful addition to your tool belt.
</p>
<p>
Read <a href="http://coding-robin.de/2013/03/13/using-the-page-visibility-api.html">our blog post</a>
on that topic to learn more about it.
</p>
<div class="bubble">
<div id="welcome_back_message" class="hidden">
<p>
It looks like you have been away for <span id="wait_time"></span> seconds.
</p>
<p>
Did you know that:
<ul id="fact_list"></ul>
</p>
</div>
<div id="nay_no_browser_support" class="hidden">
<p>
It looks like your browser <strong>does not</strong> support the PageVisibility API.
</p>
<p>
Do you want to:
<ul>
<li>Read <a href="http://coding-robin.de/2013/03/13/using-the-page-visibility-api.html">the blog post</a> to learn about existing polyfills and browser support?</li>
<li>Know <a href="http://caniuse.com/#feat=pagevisibility">which browsers support the API?</a></li>
</ul>
</p>
</div>
<div id="yay_browser_supports_the_api" class="hidden">
<p>
It looks like your browser supports the PageVisibility API.
</p>
<p>
Now <strong>leave the tab</strong> and come back to see it in action.
</p>
</div>
</div>
<img class="clippy" src="clippy.png" title="Oh hey, it's Clippy. Did you miss him?">
<footer>
Demo by <a href="http://coding-robin.de">Coding Robin</a>, <a href="https://github.com/rmehner/page-visibility-api-demo">Code on GitHub</a>, Clippy is courtesy of <a href="http://microsoft.com">Microsoft</a>.
</footer>
<!-- this will populate a window.facts array -->
<script src="facts.js"></script>
<script>
(function() {
"use strict";
// simple utilitly functions
var show = function(id) {
document.getElementById(id).style.display = 'block';
};
var hide = function(id) {
document.getElementById(id).style.display = 'none';
};
// check for browser support and display message accordingly
var checkForBrowserSupport = function() {
var hiddenProperties = ['hidden', 'webkitHidden', 'mozHidden', 'msHidden'];
var hiddenProperty;
for (var i = 0; i < hiddenProperties.length; i++) {
hiddenProperty = hiddenProperties[i];
if (typeof document[hiddenProperty] !== 'undefined') {
show('yay_browser_supports_the_api');
return;
}
}
show('nay_no_browser_support');
};
checkForBrowserSupport();
// actual code for the Page Visibility thing, READ HERE!
var gotSomeSleepAt;
var getRandomFacts = function() {
var randomFacts = [];
for(var i = 0; i < 2; i++) {
randomFacts.push(facts[Math.floor(Math.random() * facts.length)]);
}
return randomFacts;
};
var goToSleep = function() {
hide('welcome_back_message');
hide('yay_browser_supports_the_api');
gotSomeSleepAt = Date.now();
};
var wakeUp = function() {
// we have not been asleep yet so we don't have to wake up
if (typeof gotSomeSleepAt === 'undefined') return;
document.getElementById('wait_time').textContent = (Date.now() - gotSomeSleepAt) / 1000;
document.getElementById('fact_list').innerHTML = getRandomFacts().map(function(fact) {
return '<li>' + fact + '</li>';
}).join("\n");
show('welcome_back_message');
};
var onVisibilityChange = function(onVisible, onInvisible, onPrerender) {
var bindVisibilityChange = function(eventName, propertyName) {
document.addEventListener(eventName, function(event) {
switch (document[propertyName]) {
case 'visible':
if (typeof onVisible === 'function') onVisible(event);
break;
case 'hidden':
if (typeof onInvisible === 'function') onInvisible(event);
break;
case 'prerender':
if (typeof onPrerender === 'function') onPrerender(event);
break;
}
});
};
if (typeof document.visibilityState !== 'undefined') {
bindVisibilityChange('visibilitychange', 'visibilityState');
} else if (typeof document.webkitVisibilityState !== 'undefined') {
bindVisibilityChange('webkitvisibilitychange', 'webkitVisibilityState');
} else if (typeof document.mozVisibilityState !== 'undefined') {
bindVisibilityChange('mozvisibilitychange', 'mozVisibilityState');
} else if (typeof document.msVisibilityState !== 'undefined') {
bindVisibilityChange('msvisibilitychange', 'msVisibilityState');
}
};
onVisibilityChange(wakeUp, goToSleep);
})();
</script>
</body>
</html>