Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Making embedded iframes scriptable using the WA.room.website namespace.

Browse source
This commit is contained in:
David Négrier 2021-08-03 18:29:10 +02:00
parent 5bb29e99ba
commit 6b9b999996
14 changed files with 737 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

85
maps/tests/EmbeddedWebsite/website_in_map_script.html Normal file
View file

@ -0,0 +1,85 @@
<!doctype html>
<html lang="en">
<head>
<script>
var script = document.createElement('script');
// Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
// We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
script.setAttribute('src', document.referrer + 'iframe_api.js');
document.head.appendChild(script);
window.addEventListener('load', () => {
console.log('On load');
WA.onInit().then(() => {
console.log('After WA init');
const createButton = document.getElementById('createEmbeddedWebsite');
const deleteButton = document.getElementById('deleteEmbeddedWebsite');
const xField = document.getElementById('x');
const yField = document.getElementById('y');
const widthField = document.getElementById('width');
const heightField = document.getElementById('height');
const urlField = document.getElementById('url');
const visibleField = document.getElementById('visible');
createButton.addEventListener('click', () => {
console.log('CREATING NEW EMBEDDED IFRAME');
WA.room.website.create({
name: "test",
url: urlField.value,
position: {
x: parseInt(xField.value),
y: parseInt(yField.value),
width: parseInt(widthField.value),
height: parseInt(heightField.value),
},
visible: !!visibleField.value,
});
});
deleteButton.addEventListener('click', () => {
WA.room.website.delete("test");
});
xField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.x = parseInt(this.value);
});
yField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.y = parseInt(this.value);
});
widthField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.width = parseInt(this.value);
});
heightField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.height = parseInt(this.value);
});
urlField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.url = this.value;
});
visibleField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.visible = this.checked;
});
});
})
</script>
</head>
<body>
X: <input type="text" id="x" value="64" /><br/>
Y: <input type="text" id="y" value="64" /><br/>
width: <input type="text" id="width" value="600" /><br/>
height: <input type="text" id="height" value="400" /><br/>
URL: <input type="text" id="url" value="https://mensuel.framapad.org/p/rt6c904745-9oxm?lang=en" /><br/>
Visible: <input type="checkbox" id="visible" value=1 /><br/>
<button id="createEmbeddedWebsite">Create embedded website</button>
<button id="deleteEmbeddedWebsite">Delete embedded website</button>
</body>
</html>