Allow render rules to be customized using render presets
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
This commit is contained in:
parent
dde7df4604
commit
18eb1da5ba
|
|
@ -3,7 +3,105 @@
|
||||||
{{ $style := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
|
{{ $style := resources.Get "scss/bergamot.scss" | resources.ToCSS | resources.Minify }}
|
||||||
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
||||||
<script defer>
|
<script defer>
|
||||||
const renderRules =
|
const loadedWidgets = {};
|
||||||
|
const getButtons = (inputGroup) => {
|
||||||
|
return {
|
||||||
|
play: inputGroup.querySelector(".bergamot-play"),
|
||||||
|
reset: inputGroup.querySelector(".bergamot-reset"),
|
||||||
|
close: inputGroup.querySelector(".bergamot-close"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const setRunning = (inputGroup, running) => {
|
||||||
|
if (inputGroup !== null) {
|
||||||
|
const buttons = getButtons(inputGroup);
|
||||||
|
if (buttons.play) buttons.play.classList.toggle("bergamot-hidden", running);
|
||||||
|
if (buttons.reset) buttons.reset.classList.toggle("bergamot-hidden", !running);
|
||||||
|
if (buttons.close) buttons.close.classList.toggle("bergamot-hidden", !running);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The object language parsing is handling by a separate standalone Elm
|
||||||
|
// application in the ObjectLanguage module, which has two ports:
|
||||||
|
//
|
||||||
|
// * `parseString` requests a string to be parsed
|
||||||
|
// * `parsedString` returns the parsed string, or null
|
||||||
|
//
|
||||||
|
// We want there to be a single global ObjectLanguage object, but it works
|
||||||
|
// on a "subscription" model (we have to give a callback to its port).
|
||||||
|
// Configure this callback to invoke `resolve` functions from a list,
|
||||||
|
// so that callers can just get a promise. This way we aren't continuously
|
||||||
|
// registering more and more handlers for each parsed string, and we can
|
||||||
|
// use a convenient promise API.
|
||||||
|
const parsingPromiseResolvers = {};
|
||||||
|
const ensureObjectLanguage = () => {
|
||||||
|
if (!window.Bergamot.ObjectLanguage) {
|
||||||
|
window.Bergamot.ObjectLanguage = Elm.Bergamot.ObjectLanguage.init({});
|
||||||
|
window.Bergamot.ObjectLanguage.ports.parsedString.subscribe(({ string, term }) => {
|
||||||
|
if (string in parsingPromiseResolvers) {
|
||||||
|
for (const resolver of parsingPromiseResolvers[string]) {
|
||||||
|
resolver(term);
|
||||||
|
}
|
||||||
|
parsingPromiseResolvers[string] = [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return window.Bergamot.ObjectLanguage;
|
||||||
|
}
|
||||||
|
const parseString = (str) => {
|
||||||
|
if (!(str in parsingPromiseResolvers)) {
|
||||||
|
parsingPromiseResolvers[str] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise(resolve => {
|
||||||
|
parsingPromiseResolvers[str].push(resolve);
|
||||||
|
ensureObjectLanguage().ports.parseString.send(str);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.Bergamot = {};
|
||||||
|
window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderPreset, input) => {
|
||||||
|
var app = Elm.Main.init({
|
||||||
|
node: document.getElementById(nodeId),
|
||||||
|
flags: {
|
||||||
|
inputModes: {
|
||||||
|
"Languge Term": { "custom": "Language Term" },
|
||||||
|
"Query": "query"
|
||||||
|
},
|
||||||
|
renderRules: window.Bergamot.renderPresets[renderPreset],
|
||||||
|
rules, input
|
||||||
|
}
|
||||||
|
});
|
||||||
|
app.ports.convertInput.subscribe(async ({ mode, input }) => {
|
||||||
|
let query = await parseString(input);
|
||||||
|
if (query !== null) {
|
||||||
|
query = inputPrompt.replace("TERM", query);
|
||||||
|
app.ports.receiveConverted.send({ input, result: { query } });
|
||||||
|
} else {
|
||||||
|
app.ports.receiveConverted.send({ input, result: { error: "Unable to parse object language term" } });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
loadedWidgets[nodeId] = { app, parentNode: inputGroup ? inputGroup.parentElement : null };
|
||||||
|
setRunning(inputGroup, true);
|
||||||
|
};
|
||||||
|
window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
|
||||||
|
const preset = window.Bergamot.presets[presetName];
|
||||||
|
window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, preset.renderPreset, preset.query || "");
|
||||||
|
};
|
||||||
|
window.Bergamot.close = (inputGroup, nodeId) => {
|
||||||
|
if (!(nodeId in loadedWidgets)) return;
|
||||||
|
|
||||||
|
const placeholderDiv = document.createElement('div');
|
||||||
|
placeholderDiv.id = nodeId;
|
||||||
|
|
||||||
|
const widget = loadedWidgets[nodeId];
|
||||||
|
const elmRoot = widget.parentNode.querySelector(".bergamot-root");
|
||||||
|
elmRoot.replaceWith(placeholderDiv)
|
||||||
|
delete loadedWidgets[nodeId];
|
||||||
|
setRunning(inputGroup, false);
|
||||||
|
}
|
||||||
|
window.Bergamot.presets = {};
|
||||||
|
window.Bergamot.renderPresets = {};
|
||||||
|
window.Bergamot.renderPresets["default"] =
|
||||||
`
|
`
|
||||||
PrecApp @ prec(app(?l, ?r), 100, left) <-;
|
PrecApp @ prec(app(?l, ?r), 100, left) <-;
|
||||||
PrecPlus @ prec(plus(?l, ?r), 80, either) <-;
|
PrecPlus @ prec(plus(?l, ?r), 80, either) <-;
|
||||||
|
|
@ -79,101 +177,4 @@ const renderRules =
|
||||||
LatexCall @ latex(?c, ?l) <- call(?c, ?n, ?ts), nonempty(?ts), latexlist(?ts, ?lts_1), intercalate(", ", ?lts_1, ?lts_2), join(?lts_2, ?lts_3), join(["\\\\text{", ?n, "}", "(", ?lts_3, ")"], ?l);
|
LatexCall @ latex(?c, ?l) <- call(?c, ?n, ?ts), nonempty(?ts), latexlist(?ts, ?lts_1), intercalate(", ", ?lts_1, ?lts_2), join(?lts_2, ?lts_3), join(["\\\\text{", ?n, "}", "(", ?lts_3, ")"], ?l);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const loadedWidgets = {};
|
|
||||||
const getButtons = (inputGroup) => {
|
|
||||||
return {
|
|
||||||
play: inputGroup.querySelector(".bergamot-play"),
|
|
||||||
reset: inputGroup.querySelector(".bergamot-reset"),
|
|
||||||
close: inputGroup.querySelector(".bergamot-close"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const setRunning = (inputGroup, running) => {
|
|
||||||
if (inputGroup !== null) {
|
|
||||||
const buttons = getButtons(inputGroup);
|
|
||||||
if (buttons.play) buttons.play.classList.toggle("bergamot-hidden", running);
|
|
||||||
if (buttons.reset) buttons.reset.classList.toggle("bergamot-hidden", !running);
|
|
||||||
if (buttons.close) buttons.close.classList.toggle("bergamot-hidden", !running);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// The object language parsing is handling by a separate standalone Elm
|
|
||||||
// application in the ObjectLanguage module, which has two ports:
|
|
||||||
//
|
|
||||||
// * `parseString` requests a string to be parsed
|
|
||||||
// * `parsedString` returns the parsed string, or null
|
|
||||||
//
|
|
||||||
// We want there to be a single global ObjectLanguage object, but it works
|
|
||||||
// on a "subscription" model (we have to give a callback to its port).
|
|
||||||
// Configure this callback to invoke `resolve` functions from a list,
|
|
||||||
// so that callers can just get a promise. This way we aren't continuously
|
|
||||||
// registering more and more handlers for each parsed string, and we can
|
|
||||||
// use a convenient promise API.
|
|
||||||
const parsingPromiseResolvers = {};
|
|
||||||
const ensureObjectLanguage = () => {
|
|
||||||
if (!window.Bergamot.ObjectLanguage) {
|
|
||||||
window.Bergamot.ObjectLanguage = Elm.Bergamot.ObjectLanguage.init({});
|
|
||||||
window.Bergamot.ObjectLanguage.ports.parsedString.subscribe(({ string, term }) => {
|
|
||||||
if (string in parsingPromiseResolvers) {
|
|
||||||
for (const resolver of parsingPromiseResolvers[string]) {
|
|
||||||
resolver(term);
|
|
||||||
}
|
|
||||||
parsingPromiseResolvers[string] = [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return window.Bergamot.ObjectLanguage;
|
|
||||||
}
|
|
||||||
const parseString = (str) => {
|
|
||||||
if (!(str in parsingPromiseResolvers)) {
|
|
||||||
parsingPromiseResolvers[str] = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise(resolve => {
|
|
||||||
parsingPromiseResolvers[str].push(resolve);
|
|
||||||
ensureObjectLanguage().ports.parseString.send(str);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
window.Bergamot = {};
|
|
||||||
window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderRules, input) => {
|
|
||||||
var app = Elm.Main.init({
|
|
||||||
node: document.getElementById(nodeId),
|
|
||||||
flags: {
|
|
||||||
inputModes: {
|
|
||||||
"Languge Term": { "custom": "Language Term" },
|
|
||||||
"Query": "query"
|
|
||||||
},
|
|
||||||
renderRules, rules, input
|
|
||||||
}
|
|
||||||
});
|
|
||||||
app.ports.convertInput.subscribe(async ({ mode, input }) => {
|
|
||||||
let query = await parseString(input);
|
|
||||||
if (query !== null) {
|
|
||||||
query = inputPrompt.replace("TERM", query);
|
|
||||||
app.ports.receiveConverted.send({ input, result: { query } });
|
|
||||||
} else {
|
|
||||||
app.ports.receiveConverted.send({ input, result: { error: "Unable to parse object language term" } });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
loadedWidgets[nodeId] = { app, parentNode: inputGroup ? inputGroup.parentElement : null };
|
|
||||||
setRunning(inputGroup, true);
|
|
||||||
};
|
|
||||||
window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
|
|
||||||
const preset = window.Bergamot.presets[presetName];
|
|
||||||
window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, renderRules, preset.query || "");
|
|
||||||
};
|
|
||||||
window.Bergamot.close = (inputGroup, nodeId) => {
|
|
||||||
if (!(nodeId in loadedWidgets)) return;
|
|
||||||
|
|
||||||
const placeholderDiv = document.createElement('div');
|
|
||||||
placeholderDiv.id = nodeId;
|
|
||||||
|
|
||||||
const widget = loadedWidgets[nodeId];
|
|
||||||
const elmRoot = widget.parentNode.querySelector(".bergamot-root");
|
|
||||||
elmRoot.replaceWith(placeholderDiv)
|
|
||||||
delete loadedWidgets[nodeId];
|
|
||||||
setRunning(inputGroup, false);
|
|
||||||
}
|
|
||||||
window.Bergamot.presets = {};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -3,5 +3,6 @@
|
||||||
rules: '{{ .Inner }}',
|
rules: '{{ .Inner }}',
|
||||||
inputPrompt: '{{ .Get "prompt" }}',
|
inputPrompt: '{{ .Get "prompt" }}',
|
||||||
query: '{{ .Get "query" }}',
|
query: '{{ .Get "query" }}',
|
||||||
|
renderPreset: '{{ default "default" (.Get "rendering") }}'
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
3
layouts/shortcodes/bergamot_render_preset.html
Normal file
3
layouts/shortcodes/bergamot_render_preset.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script>
|
||||||
|
window.Bergamot.renderPresets['{{ .Get "name" }}'] = '{{ .Inner }}';
|
||||||
|
</script>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div id="{{ .Get "id" }}"></div>
|
<div id="{{ .Get "id" }}"></div>
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener('load', function() {
|
window.addEventListener('load', function() {
|
||||||
window.Bergamot.run(null, '{{ .Get "id" }}', '{{ .Get "prompt" }}', '{{ .Inner }}', renderRules, '{{ .Get "query" }}');
|
window.Bergamot.run(null, '{{ .Get "id" }}', '{{ .Get "prompt" }}', '{{ .Inner }}', '{{ default "default" (.Get "rendering") }}', '{{ .Get "query" }}');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user