-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (52 loc) · 2.14 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
<html>
<head>
<title>Good Knight!</title>
<script type="text/javascript" src="elm.js"></script>
</head>
<body style="margin: 0 0 0 0;">
</body>
<script type="text/javascript">
var stamperDiv = document.getElementById('main');
var myapp = Elm.GoodKnight.fullscreen();
myapp.ports.requestCharSize.subscribe(requestCharSize);
myapp.ports.requestLandscapeMousePos.subscribe(requestLandscapeMousePos);
myapp.ports.requestBoundingClientRect.subscribe(requestBoundingClientRect);
function requestCharSize(params) {
var fontFamily = params[0];
var fontSize = params[1];
// create a hidden pre node
var pre = document.createElement('pre');
var preContent = document.createTextNode('A');
var a = document.createAttribute("style");
a.value = 'position: absolute; top: -100px; font-size: ' + fontSize + 'px; font-family: ' + fontFamily + ';padding: 0px; margin: 0 0 0 0';
pre.setAttributeNode(a);
pre.appendChild(preContent);
document.body.appendChild(pre);
// mesure it
var rect = pre.getBoundingClientRect();
// and finally, destroy it
document.body.removeChild(pre);
// back to Elm
// a workaround waiting for a bug resolution (https://github.com/elm-lang/core/issues/595)
setTimeout(function () {
myapp.ports.charSizeResult.send([ rect.width, rect.height ]);
}, 0);
}
function requestLandscapeMousePos(pos) {
var landscape = document.getElementById('landscape');
if (!landscape) {
return
}
var rect = landscape.getBoundingClientRect();
// back to Elm
myapp.ports.landscapeMousePosResult.send([ pos[0] - rect.left, pos[1] - rect.top ]);
}
function requestBoundingClientRect(id) {
setTimeout(function () {
var landscape = document.getElementById('landscape');
var rect = landscape.getBoundingClientRect();
myapp.ports.boundingClientRectResult.send({id: id, rect: rect});
}, 0);
}
</script>
</html>