-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathplayer.html
60 lines (52 loc) · 1.76 KB
/
player.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RPG Ambience Player</title>
<link rel="stylesheet" href="css/ambience.css">
<link rel="icon" type="image/png" href="images/icon.png">
<script>
window.opener.addEventListener('unload', function() {
// It seems that this is run even if "window" has been closed, so check for existence first.
// This isn't a real problem, but it logs an unnecessary error message.
if ( window ) {
window.close();
}
});
window.addEventListener('load', function() {
var stageNode = document.querySelector('.stage');
var cursorTimer;
var hideDelay = 1000;
var previousX;
var previousY;
stageNode.addEventListener('mousemove', showCursorTemporarily);
stageNode.addEventListener('mouseover', showCursorTemporarily);
stageNode.addEventListener('mouseout', showCursor);
function showCursorTemporarily(event) {
// Setting the cursor style seems to trigger a mousemove event, so we have to make sure that the mouse has really moved or we will be stuck in an infinite loop.
var mouseHasMoved = event.screenX !== previousX || event.screenY !== previousY;
if ( mouseHasMoved ) {
showCursor();
cursorTimer = window.setTimeout(hideCursor, hideDelay);
}
previousX = event.screenX;
previousY = event.screenY;
}
function showCursor() {
// Prevent any old timeouts from coming into effect.
window.clearTimeout(cursorTimer);
stageNode.style.cursor = 'auto';
}
function hideCursor() {
stageNode.style.cursor = 'none';
}
});
</script>
</head>
<body>
<div class="stage">
<div class="layer background"></div>
<div class="layer foreground"></div>
</div>
</body>
</html>