<!DOCTYPE html>
<html onload="">

<head>
    <title>JavaScriptObject</title>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
        class App {
            static start() {
                window["app"] = new App();
                app.models = [];
                ONCE.eventSupport.addEventListener("newInstance", app, app.newInstance.bind(app));

                //JavaScriptObject.demo();
            }
            static init() {
                console.debug("start loading App components...");
                return "start loading App components...";
            }

            newInstance(event, thing) {
                app.models.push(thing);
            }

            onKeyup(event) {
                if (event.keyCode == 13)
                    this.evalAndAdd2page();

            }

            evalAndAdd2page() {
                const jsExpression = scriptInput.value;
                var result = eval(jsExpression);

                if (result instanceof UcpComponent) {
                    result.defaultView.append();
                    return;
                }
                if (result instanceof UcpView) {
                    result.append();
                    return;
                }
                if (result instanceof UcpModel) {
                    result.ucpComponent.defaultView.append();
                    return;
                }
                /*
                var objectComponent = new JavaScriptObject().init(result);
                */
                var objectComponent = UcpComponentSupport.getUcpComponent4Object(result);
                console.debug('evaluated ', objectComponent);
                if (objectComponent) {
                    objectComponent.itemView.append();
                    app.models.push(objectComponent);
                }
            }
        }
    </script>
    <script src="/EAMD.ucp/Components/tla/EAM/layer1/Thinglish/Once/1.0.0/src/js/Once.class.js" type="text/javascript"></script>
    <link href="/EAMD.ucp/Components/tla/EAM/layer2/JavaScriptObject/1.0.0/JavaScriptObject.component.xml" rel="ucpComponent" type="text/html">

    <style type="text/css">
        html,
        body {
            height: 100%;
        }
        
        .fullHeight,
        .fullHeight .jumbotron {
            height: 100%;
        }
    </style>
</head>

<body>
    javascript expression <input size="100" type="text" name="jsExpressionInput" id="scriptInput" onKeyup="javascript:app.onKeyup(event)">
    <a class="btn btn-default" href="javascript:app.evalAndAdd2page()">add to page</a>
</body>

</html>