-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshim.html
155 lines (147 loc) · 9.3 KB
/
shim.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>
<!-- note: your demo in this shim runs in an iframe with this content: https://gist.github.com/qfox/3cccc4f36c8319e09bb7 -->
<!--
(c) js1k.com 2017
Note: submissions belong to their respectful owner, do not copy without their consent
-->
<head>
<meta charset="utf-8">
<title>JS1k 2017 - NNNN - TITLE</title>
<meta name="author" content="YOU">
<link rel="icon" type="image/png" href="http://js1k.com/favicon.png">
<link rel="canonical" href="http://js1k.com/2017-magic/demo/NNNN">
<link rel="shortlink" href="http://js1k.com/NNNN">
<script>
// GA
</script>
<style>
/* http://qfox.nl/notes/333 */
body,html,iframe{margin:0;padding:0;border:0;width:100%;height:100%}
iframe{position:absolute;top:0;left:0;padding-top:50px;box-sizing:border-box}
header{position:relative;z-index:1;height:47px;padding-top:2px;border-bottom:1px solid #000;box-shadow:0 -10px 25px #ccc inset;background-color:#eee}
aside,div,h1,p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:16px;font-weight:inherit;line-height:22px;padding:0;margin:0;cursor:default}
aside,h1{display:inline}
a{color:#000;text-decoration:none;border-bottom:1px dashed #000}
a:hover{border-bottom:1px solid red}
a[href="0"]{text-decoration:line-through;pointer-events:none;border-bottom:0;color:#ccc}
.button{float:left;width:40px;height:40px;line-height:40px;text-align:center;padding:0;margin:2px 0 0 10px;border:1px solid #888;border-color:#ddd #888 #888 #ddd;font-family:sans-serif;font-size:30px;font-weight:700;cursor:pointer}
.button:hover{color:red;border-bottom-color:#888}
.r{margin-right:10px}
time{display:none}
</style>
</head>
<body>
<header>
<div>
<h1>
<a href="http://js1k.com/">JS1k</a>
<a href="http://js1k.com/2017-magic">2017</a>
<strong></strong> demo
—
"TITLE" by YOU
</h1>
<p>
<em>
FIRST PART OF YOUR DESC GOES HERE
</em>
</p>
<aside>
—
<%= script.length %> bytes
—
<a href="http://js1k.com/2017-magic/details/NNNN">demo details</a>
—
<a href="http://js1k.com/2017-magic/demos">list of demos</a>
—
<a href="http://js1k.com/1955" title="short link for your mobile devices" rel="nofollow">js1k.com/NNNN</a>
<time datetime="NOW" pubdate>NOW</time>
</aside>
</div>
<a href="500" class="button p">↞</a>
<a href="502" class="button n">↠</a>
</header>
<script type="shim">
// this is the SHIM (will be ran in the context of the iframe...)
// unprefix some popular vendor prefixed things (but stick to their original name)
iwin.AudioContext = iwin.AudioContext || iwin.webkitAudioContext; // ios8 unmutes audio only during the first user triggered event with sound
iwin.requestAnimationFrame = iwin.requestAnimationFrame || iwin.mozRequestAnimationFrame || iwin.webkitRequestAnimationFrame || iwin.msRequestAnimationFrame || function(f){ iwin.setTimeout(f, 1000/30); };
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (typeof OscillatorNode !== 'undefined' && OscillatorNode.prototype) {
OscillatorNode.prototype.start = OscillatorNode.prototype.start || OscillatorNode.prototype.noteOn;
OscillatorNode.prototype.stop = OscillatorNode.prototype.stop || OscillatorNode.prototype.noteOff;
}
a = canvas;
b = idoc.body;
d = idoc.document;
if (!TOKEN_WEBGL) iwin.c = canvas.getContext('2d');
else iwin.g = (function () {
iwin.onorientationchange = iwin.onresize = null;
try {
var o = { antialias: true, stencil: true };
var gl = canvas.getContext('webgl', o) || canvas.getContext('experimental-webgl', o);
// keep in scope, must not be garbage collected
iwin.__glExts =
[ 'OES_texture_float', 'OES_texture_float_linear', 'OES_standard_derivatives',
'EXT_texture_filter_anisotropic', 'MOZ_EXT_texture_filter_anisotropic', 'WEBKIT_EXT_texture_filter_anisotropic',
'WEBGL_compressed_texture_s3tc', 'MOZ_WEBGL_compressed_texture_s3tc', 'WEBKIT_WEBGL_compressed_texture_s3tc'
].map(function(ext) {
return gl.getExtension(ext);
});
} catch (e) {
idoc.body.innerHTML = 'WebGL not supported.';
iwin.a=iwin.b=iwin.c=iwin.d=null;
throw e;
}
return gl;
})();
</script>
<script>
// submission form configurables:
// enable canvas shim at all? (2d/3d). other settings are ignored if this is false.
var TOKEN_CANVAS_SHIM = <%= canvas_shim %>;
// true enables webgl shim (exposes `g`), false enables canvas shim (exposes `c`)
var TOKEN_WEBGL = <%= webgl %>;
// px, 0 means always 100%
var TOKEN_MAX_WIDTH = <%= max_width %>;
// px, 0 means always 100%
var TOKEN_MAX_HEIGHT = <%= max_height %>;
// should the size be smaller than specified if viewport is smaller?
var TOKEN_MAX_100P = <%= max_100p %>;
// only if width<100%
var TOKEN_CENTER_CANVAS = <%= center_canvas %>;
// "press" reload button on orientation change?
var TOKEN_RELOAD_ONORIENTATIONCHANGE = <%= reload_onorientationchange %>;
</script>
<script type="demo">
<%= script %>
</script>
<script>
(function(){var doc=document;var header=doc.getElementsByTagName("header")[0];var firstChild=header.firstChild;var p=doc.getElementsByClassName("p")[0];
var n=doc.getElementsByClassName("n")[0];header.insertBefore(p,firstChild);header.insertBefore(n,firstChild);header.appendChild(doc.getElementsByTagName
("p")[0])})();(function reload(fullscreen){var doc=document;var header=doc.getElementsByTagName("header")[0];var iframe=doc.createElement("iframe");doc.
body.appendChild(iframe);var iwin=iframe.contentWindow;var idoc=iframe.contentDocument;idoc.open();idoc.close();idoc.write("<!doctype html>"+'<html st'+
'yle="margin: 0; padding: 0; border: 0;'+(TOKEN_CANVAS_SHIM?' width: 100%; height: 100%;':'')+'">'+"<head>"+'<meta charset="utf-8">'+'<body style="mar'+
'gin: 0; padding: 0; border: 0;'+(TOKEN_CANVAS_SHIM?' width: 100%; height: 100%;':'')+'">'+(TOKEN_CANVAS_SHIM?'<canvas style="display: block;'+(
TOKEN_CENTER_CANVAS?" margin: auto;":"")+'"></canvas>':"")+"");if(TOKEN_CANVAS_SHIM){var canvas=idoc.getElementsByTagName("canvas")[0];var cs=canvas.style
;idoc.body.clientWidth;cs.width=(canvas.width=Math.max(Math.min(TOKEN_MAX_WIDTH||innerWidth,innerWidth),0)||0)+"px";cs.height=(canvas.height=Math.max(
Math.min(TOKEN_MAX_HEIGHT||innerHeight-50,innerHeight-50),0)||0)+"px"}if(TOKEN_RELOAD_ONORIENTATIONCHANGE)onorientationchange=reloadClick;iwin.AudioContext
=iwin.AudioContext||iwin.webkitAudioContext;iwin.requestAnimationFrame=iwin.requestAnimationFrame||iwin.mozRequestAnimationFrame||iwin.
webkitRequestAnimationFrame||iwin.msRequestAnimationFrame||function(f){iwin.setTimeout(f,1E3/30)};if(TOKEN_CANVAS_SHIM)canvas.requestPointerLock=canvas.
requestPointerLock||canvas.mozRequestPointerLock||canvas.webkitRequestPointerLock;idoc.body.requestPointerLock=idoc.body.requestPointerLock||idoc.body.
mozRequestPointerLock||idoc.body.webkitRequestPointerLock;navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.
mozGetUserMedia||navigator.msGetUserMedia;var iwo=iwin.OscillatorNode&&iwin.OscillatorNode.prototype;iwo&&(iwo.start=iwo.start||iwo.noteOn)&&(iwo.stop=iwo
.stop||iwo.noteOff);if(TOKEN_CANVAS_SHIM)iwin.a=canvas;iwin.b=idoc.body;d=idoc;if(TOKEN_CANVAS_SHIM){if(!TOKEN_WEBGL)iwin.c=canvas.getContext("2d");if(
TOKEN_WEBGL)iwin.g=function(){iwin.onorientationchange=iwin.onresize=null;try{var o={antialias:true,stencil:true};var gl=canvas.getContext("webgl",o)||
canvas.getContext("experimental-webgl",o);iwin.__glExts=["OES_texture_float","OES_texture_float_linear","OES_standard_derivatives","EXT_texture_filter_"+
"anisotropic","MOZ_EXT_texture_filter_anisotropic","WEBKIT_EXT_texture_filter_anisotropic","WEBGL_compressed_texture_s3tc","MOZ_WEBGL_compressed_textur"+
"e_s3tc","WEBKIT_WEBGL_compressed_texture_s3tc"].map(function(ext){return gl.getExtension(ext)})}catch(e){idoc.body.innerHTML="WebGL not supported.";iwin
.a=iwin.b=iwin.c=iwin.d=null;throw e;}return gl}()}var demo=idoc.createElement("script");demo.textContent=doc.querySelector('script[type="demo"]').
textContent;idoc.body.appendChild(demo);idoc.close();iframe.contentWindow.focus();var firstLine=doc.getElementsByTagName("div")[0];function reloadClick(b)
{doc.body.removeChild(iframe);r.parentElement.removeChild(r);iframe=null;r=null;idoc=null;header=null;reload(b)}window.reload=reloadClick;var r=doc.
createElement("div");r.innerHTML="↻";r.className="button r";r.title="restart just the demo (local, without remote fetch)";r.onclick=reloadClick;
header.insertBefore(r,firstLine)})();
</script>
</body>
</html>