add more demos

This commit is contained in:
velzie 2024-10-24 15:40:38 -04:00
parent 7bea0c60af
commit 313132ca5a
No known key found for this signature in database
GPG key ID: AA51AEFB0A1F3820

View file

@ -111,7 +111,7 @@ function PlaygroundApp() {
<link rel="stylesheet" href="/style.css"></link> <link rel="stylesheet" href="/style.css"></link>
<script src="/script.js"></script> <script src="/script.js"></script>
<!-- external resources go through WISP --> <!-- external resources go through WISP (check network tab) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head> </head>
<body> <body>
@ -123,12 +123,18 @@ function PlaygroundApp() {
<button onclick="checkOrigin()">Test emulated origin</button> <button onclick="checkOrigin()">Test emulated origin</button>
<button onclick="loadResource('https://example.com/')">Load assets through sandbox</button> <button onclick="loadResource('https://example.com/')">Load assets through sandbox</button>
<br><br>
<h2>iframe test</h2>
<button onclick="loadiframe()">test iframe nesting</button>
<br>
</body> </body>
</html>`, </html>`,
language: "html", language: "html",
}); });
const js = monaco.editor.create(this.jsbox, { const js = monaco.editor.create(this.jsbox, {
value: `function checkOrigin() { value: `function checkOrigin() {
// real origin is hidden from the page
alert("origin: " + window.origin); alert("origin: " + window.origin);
} }
@ -138,16 +144,31 @@ function loadResource(url) {
fetch(url).then(r => { fetch(url).then(r => {
console.log("loaded", r); console.log("loaded", r);
}) })
}
function loadiframe() {
let frame = document.createElement("iframe");
frame.src = "https://google.com";
document.body.appendChild(frame);
}`, }`,
language: "javascript", language: "javascript",
}); });
const css = monaco.editor.create(this.cssbox, { const css = monaco.editor.create(this.cssbox, {
value: `body, html { value: `/* resources loaded by css are intercepted by service worker */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body, html {
background: #1e1e1e; background: #1e1e1e;
color: white; color: white;
width: 100%; width: 100%;
height: 100%; height: 100%;
}`, font-family: "Roboto";
}
iframe {
zoom: 0.75;
width: 50%;
height: 50%;
}
`,
language: "css", language: "css",
}); });
let oldjs; let oldjs;