-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
75 lines (71 loc) · 2.11 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>demo ed-location</title>
</head>
<body>
<h1>demo ed-location</h1>
<h2>Edit (edit.html)</h2>
<iframe id="demo" src="./edit.html" width="480" height="360"></iframe>
<button id="send">send</button>
<button id="focus">focus</button>
<h2>View (index.html)</h2>
<iframe id="view" src="./index.html" width="480" height="360"></iframe>
<h2>Block</h2>
<pre id="blocktext"></pre>
<script>
var iframe = document.getElementById('demo')
var block =
{ metadata:
{ geo: {latitude: 68.55260186877743, longitude: 22.666168212890625, zoom: 5}
, address: 'Enontekiö, Lappi, Finland'
}
, id: 'uuid-loca-tion'
, html: ''
, type: 'location'
}
function setBlock (block) {
iframe.contentWindow.postMessage(
{ topic: 'setblock'
, payload: block
}
, '*'
)
}
// Sending content to the editor
// iframe.addEventListener('load', function () {
// setBlock(block)
// })
// Receiving content from the editor
window.addEventListener('message', function (message) {
var iframe = document.getElementById('demo')
var view = document.getElementById('view')
var preview = document.getElementById('preview')
var blocktext = document.getElementById('blocktext')
switch (message.data.topic) {
case 'changed':
block = message.data.payload
if (block && block.metadata && block.metadata.isBasedOnUrl) {
var search = block.metadata.isBasedOnUrl.split('?')[1]
view.src = './index.html?' + search
}
blocktext.textContent = JSON.stringify(message.data.payload, null, 2)
break
case 'height':
iframe.height = message.data.payload
default:
break
}
})
// Focus demo
document.getElementById('focus').onclick = function () {
iframe.contentWindow.postMessage({topic: 'focus'}, '*')
}
// Send demo
document.getElementById('send').onclick = function () {
setBlock(block)
}
</script>
</body>
</html>