95 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			95 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE HTML>
 | 
						|
<html>
 | 
						|
<head>
 | 
						|
  <meta charset="UTF-8">
 | 
						|
  <meta name="viewport" content="width=device-width, initial-scale=1" />
 | 
						|
  <title>Main</title>
 | 
						|
  <script type="module" src="https://unpkg.com/@navsnpm/katex-expression/dist/katex-expression/katex-expression.esm.js"></script>
 | 
						|
  <script nomodule="" src="https://unpkg.com/@navsnpm/katex-expression/dist/katex-expression/katex-expression.js"></script>
 | 
						|
  <style>body { padding: 0; margin: 0; }</style>
 | 
						|
  <style>
 | 
						|
textarea {
 | 
						|
    display: block;
 | 
						|
    width: 100%;
 | 
						|
    height: 10em;
 | 
						|
    resize: none;
 | 
						|
}
 | 
						|
 | 
						|
input[type="text"] {
 | 
						|
    width: 100%;
 | 
						|
}
 | 
						|
 | 
						|
.rule-list {
 | 
						|
    display: flex;
 | 
						|
    flex-direction: row;
 | 
						|
    flex-wrap: wrap;
 | 
						|
    justify-content: center;
 | 
						|
}
 | 
						|
 | 
						|
.rule-list katex-expression {
 | 
						|
    margin-left: .5em;
 | 
						|
    margin-right: .5em;
 | 
						|
    flex-grow: 1;
 | 
						|
    flex-basis: 0;
 | 
						|
}
 | 
						|
 | 
						|
.elm-root {
 | 
						|
    max-width: 800px;
 | 
						|
    margin: auto;
 | 
						|
    padding: 1em;
 | 
						|
    border: 1px solid #c3c3c3;
 | 
						|
    border-radius: 0.5em;
 | 
						|
    margin-top: 1em;
 | 
						|
}
 | 
						|
 | 
						|
.elm-root h2 {
 | 
						|
    margin-bottom: 0.5em;
 | 
						|
    font-family: sans-serif;
 | 
						|
    font-weight: normal;
 | 
						|
}
 | 
						|
  </style>
 | 
						|
</head>
 | 
						|
 | 
						|
<body>
 | 
						|
    <div id="elm"></div>
 | 
						|
    <script src="index.js"></script>
 | 
						|
    <script src="language.js"></script>
 | 
						|
    <script>
 | 
						|
        const objectLang = Elm.Bergamot.ObjectLanguage.init({});
 | 
						|
 | 
						|
        (async () => {
 | 
						|
            var rulesResponse = await fetch("./demorules.bergamot");
 | 
						|
            var rules = await rulesResponse.text();
 | 
						|
            var renderRulesResponse = await fetch("./renderrules.bergamot");
 | 
						|
            var renderRules = await renderRulesResponse.text();
 | 
						|
            console.log(rules);
 | 
						|
            var app = Elm.Main.init({
 | 
						|
                node: document.getElementById('elm'),
 | 
						|
                flags: {
 | 
						|
                    inputModes: {
 | 
						|
                        "Language Term": { "custom": "langterm" },
 | 
						|
                        "Query": "query",
 | 
						|
                    },
 | 
						|
                    inputRules: "PromptConverter @ prompt(type(empty, ?term, ?t)) <- input(?term);",
 | 
						|
                    input: "type(empty, app(abs(x, number, var(x)), lit(1)), ?tau)",
 | 
						|
                    renderRules: renderRules, rules: rules
 | 
						|
                }
 | 
						|
            });
 | 
						|
 | 
						|
            objectLang.ports.parsedString.subscribe(({ string, term }) => {
 | 
						|
                if (term !== null) {
 | 
						|
                    const query = `type(empty, ${term}, ?tau)`;
 | 
						|
                    app.ports.receiveConverted.send({ input: string, result: { query } });
 | 
						|
                } else {
 | 
						|
                    app.ports.receiveConverted.send({ input: string, result: { error: "Unable to parse object language term" } });
 | 
						|
                }
 | 
						|
            });
 | 
						|
 | 
						|
            app.ports.convertInput.subscribe(({ mode, input }) => {
 | 
						|
                objectLang.ports.parseString.send(input);
 | 
						|
            });
 | 
						|
        })();
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
</html>
 |