david/code-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some tests

Browse Source
This commit is contained in:
david
2023-06-01 22:02:03 +02:00
parent e3515901e4
commit 65a6312b8e
9 changed files with 153 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
codeeditor-app/elements/output-frame/output-frame.ts
+32 -7
View File
@@ -21,27 +21,45 @@ export class OutputFrame extends BaseElement {
onUpdate(): void {
}
reset(onload: ((ev: Event) => void) | null = null, resetNotificationBubbles: boolean = true) {
reset(onload: ((ev: Event) => void) | null = null, resetNotificationBubbles: boolean = true, source: string | null = null) {
if (this.CurrentIframeScriptRemoveResponseListener != null) {
this.CurrentIframeScriptRemoveResponseListener();
this.CurrentIframeScriptRemoveResponseListener = null;
}
if (this.Iframe && this.hasChild(this.Iframe)) {
this.Iframe.setAttribute("sandbox", "allow-pointer-lock allow-same-origin");
console.log("REMOVING IFRAME!");
this.removeChild(this.Iframe);
}
this.Iframe = document.createElement("iframe");
this.Iframe.setAttribute("sandbox", "allow-pointer-lock allow-same-origin allow-scripts");
this.Iframe.src = GetOutputFrameUrl();
if (onload) {
this.Iframe.onload = ((ev) => {
console.log("IFRAME LOADED");
onload(ev);
if (this.Iframe)
this.Iframe.onload = () => { };
});
}
console.log("IF SOURCE BEFORE", this.Iframe.src);
if (source != null) {
console.log("CUSOMSRC S:"+source, source);
this.Iframe.src = source;
}
else {
this.Iframe.src = GetOutputFrameUrl();
}
console.log("IF SOURCE AFTER", this.Iframe.src);
if (source !== "") {
this.appendChild(this.Iframe);
}
else {
console.log("SPPCHD");
}
if (resetNotificationBubbles) {
var bubbles = GetNotificationBubbles();
@@ -52,13 +70,18 @@ export class OutputFrame extends BaseElement {
}
setError() {
console.log("RCALLED");
this.reset(() => {
if (this.Iframe)
this.Iframe.src = GetOutputFrameUrl() + "execution-time-error.html";
});
if (this.Iframe) {
// this.Iframe.contentWindow?.location.reload();
console.log("RESET AFTER", this.Iframe.src);
}
}, true, "");//GetOutputFrameUrl("execution-time-error.html"));
}
setContent(language: string, value: string) {
console.log("setting content", language, value);
this.contents[language] = value;
this.reset(() => {
for (const lang in this.contents) {
@@ -72,7 +95,9 @@ export class OutputFrame extends BaseElement {
}
doPostMessage(language: string, value: string) {
this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.contents[language], language == 'javascript' ? (executeTimeInMs, exceedTimeInMs) => {
this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.contents[language], language == 'javascript' ?
(executeTimeInMs, exceedTimeInMs) => {
console.log("onresponse", executeTimeInMs + " " + exceedTimeInMs);
if (executeTimeInMs === -1) {
this.setError();
}
outputframe-app/app.html
+2
View File
@@ -1 +1,3 @@
<render-canvas></render-canvas>
<loading-spinner></loading-spinner>
hi
outputframe-app/boot.ts
+16 -2
View File
@@ -7,14 +7,26 @@ import { messageListener } from '../shared/message-listener';
import { postMessage, postResponseMessage } from '../shared/post-message';
import { RenderCanvas } from './elements/render-canvas/render-canvas';
import { getCenter, getHeight, getRandom, getWidth, rect, box, getRandomColor } from './injects/dom-helpers';
import { setWindowStop } from './injects/window-stop';
import { LoadingSpinner } from './elements/loading-spinner/loading-spinner';
window.customElements.define('loading-spinner', LoadingSpinner);
window.customElements.define('render-canvas', RenderCanvas);
document.body.innerHTML += bootHtml;
console.log("BOOTING");
document.body.innerHTML += bootHtml;
let consoleLimit = 10;
watchConsole((type, value) => {
postMessage(parent, type, value);
if (consoleLimit > 0) {
--consoleLimit;
postMessage(parent, type, value.toString());
}
else if (consoleLimit === 0) {
--consoleLimit;
postMessage(parent, type, "+ more");
}
});
messageListener((type, value, id) => {
if (type == "javascript") {
@@ -46,3 +58,5 @@ window.center = getCenter;
window.rand = getRandom;
//@ts-ignore
window.randomColor = getRandomColor;
setWindowStop();
outputframe-app/elements/loading-spinner/loading-spinner.less
+32
View File
@@ -0,0 +1,32 @@
loading-spinner {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
opacity: 0.3;
height: 10px;
}
loading-spinner::before {
position: absolute;
content: "";
width: 10px;
height: 100%;
top: 0;
left: 0;
animation-name: loadingAnimation;
animation-duration: 1s;
animation-iteration-count: infinite;
background-color: blue;
}
@keyframes loadingAnimation {
0% {
left: 0;
}
100% {
left: calc(100% - 10px);
}
}
outputframe-app/elements/loading-spinner/loading-spinner.ts
+7
View File
@@ -0,0 +1,7 @@
import { BaseElement } from '../../../shared/_base';
import './loading-spinner.less';
export class LoadingSpinner extends BaseElement {
onInit(): void {
}
}
outputframe-app/injects/watch-console.ts
+13 -13
View File
@@ -1,24 +1,24 @@
import { NotificationBubbles } from "../../codeeditor-app/elements/notification-bubbles/notification-bubbles";
export function watchConsole(fn: (type: 'log' | 'info' | 'warn' | 'error', value: any) => void) {
export function watchConsole(fn: (type: 'log' | 'info' | 'warn' | 'error', ...value: any[]) => void) {
// define a new console
var console: any = (function (oldCons) {
return {
log: function (text: any) {
oldCons.log(text);
fn('log', text);
log: function (...data: any[]) {
oldCons.log(...data);
fn('log', data);
},
info: function (text: any) {
oldCons.info(text);
fn('info', text);
info: function (...data: any[]) {
oldCons.info(...data);
fn('info', data);
},
warn: function (text: any) {
oldCons.warn(text);
fn('warn', text);
warn: function (...data: any[]) {
oldCons.warn(...data);
fn('warn', data);
},
error: function (text: any) {
oldCons.error(text);
fn('error', text);
error: function (...data: any[]) {
oldCons.error(...data);
fn('error', data);
}
};
}(window.console));
outputframe-app/injects/window-stop.ts
+5 -3
View File
@@ -1,4 +1,6 @@
setTimeout(() => {
export function setWindowStop() {
setTimeout(() => {
window.stop();
console.log("window stopped");
}, 4 * 1000);
//throw new Error("window stopped");
}, 4 * 1000);
}
outputframe-app/static/index.html
+30
View File
@@ -6,9 +6,39 @@
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>output</title>
<base href="/" />
<style>
body {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
text-align: center;
opacity: 0.04;
font-weight: 100;
}
small {
font-size: 0.6em;
}
@media (prefers-color-scheme: dark) {
.center {
color: white;
}
}
</style>
</head>
<body>
<div class="center">
codeeditor
</div>
<script type="text/javascript" src="/output.frame.bundle.js?v=1"></script>
</body>
shared/url-helpers.ts
+4 -3
View File
@@ -6,12 +6,13 @@ export function IsLocalhost(): boolean {
return location.href.indexOf("://localhost") != -1;
}
export function GetOutputFrameUrl(): string {
export function GetOutputFrameUrl(path: string = ""): string {
var v = "?v=" + (+new Date());
if (IsLocalhost()) {
return "http://localhost:8021/";
return "http://127.0.0.1:8021/" + path + v;
}
else {
return "https://outputframe.davidmeincke.dk/";
return "https://outputframe.davidmeincke.dk/" + path + v;
//return "https://codeeditoroutput.z16.web.core.windows.net/";
}
}