@the-grid/ed-location
Version:
Ed widget for address geocoding and map location editing
75 lines (71 loc) • 2.16 kB
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>