aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlexander_Kabui2024-08-13 12:13:28 +0300
committerBonfaceKilz2024-08-29 18:58:56 +0300
commit9d459f2ff78cdb0165427bea37803ee389659d8c (patch)
treeec3570e80be69f62b867ab18f1bf3c498d8a2b25
parenta1990202cd1692ab718e3fa4ec44455e19fc1671 (diff)
downloadgenenetwork2-9d459f2ff78cdb0165427bea37803ee389659d8c.tar.gz
Use htmx event handler.
-rw-r--r--gn2/wqflask/templates/gn_editor.html15
-rw-r--r--gn2/wqflask/templates/gn_editor_settings.html4
2 files changed, 8 insertions, 11 deletions
diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index 4d449b75..e063fdb3 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<style>
-
+
</style>
{% endblock %}
{% block search %}{% endblock %}
@@ -110,7 +110,6 @@
useSoftTabs: true, // boolean: true if we want to use spaces than tabs
tabSize: 4, // number
wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
-
indentedSoftWrap: true, // boolean
foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
mode: 'ace/mode/markdown'
@@ -119,7 +118,7 @@
let hash = {{ hash|tojson }}
let filePath = {{ file_path|tojson }}
localStorage.setItem("gn_editor_sha" ,hash)
- document.querySelector("#output").addEventListener("commitEvent", function(event){
+ htmx.on("#output", "commitEvent", function(event){
htmx.ajax("POST", "/editor/commit", {target: "#output", swap:"innerHTML",values: {'msg':event.detail.payload, 'content': editor.getValue(), "hash": localStorage.getItem("gn_editor_sha"), "file_path": filePath}})
})
@@ -134,17 +133,13 @@
htmx.find("#output").innerHTML = diffHtml
})
-
- document.querySelector("#output").addEventListener("updateEditor", function(event){
+ htmx.on("#output", "updateEditor", function(event){
editor.setOptions({
...editor_configurations,
...event.detail.payload
})
editor.renderer.updateFull();
})
- var editor = ace.edit("editor");
- editor.setOptions(editor_configurations);
- editor.container.style.resize = "horizontal";
function updatePreview(){
const {markedHighlight} = globalThis.markedHighlight;
let new_marked = new marked.Marked(
@@ -163,12 +158,14 @@
var htmlContent = new_marked.parse(markdownContent) //work on error handling for invalid markdown
previewContent.innerHTML = htmlContent;
}
+ var editor = ace.edit("editor");
+ editor.setOptions(editor_configurations);
+ editor.container.style.resize = "horizontal";
editor.getSession().on("change", function(e){
updatePreview()
})
var data = {{ content|tojson }}
editor.setValue(data, -1);
-
});
diff --git a/gn2/wqflask/templates/gn_editor_settings.html b/gn2/wqflask/templates/gn_editor_settings.html
index 62ab4f6a..a87e3dc8 100644
--- a/gn2/wqflask/templates/gn_editor_settings.html
+++ b/gn2/wqflask/templates/gn_editor_settings.html
@@ -100,7 +100,7 @@
$('#fontSizeValue').text(fontSize);
});
- document.querySelector("#settingBtn").addEventListener("click", function () {
+ htmx.on("#settingBtn", "click", function () {
var formData = {
theme: `ace/theme/${$('input[name="theme"]:checked').val()}`,
fontSize: parseInt($("#fontSizeRange").val()),
@@ -117,6 +117,6 @@
detail: {action: 'didInitialize', payload: formData},
}),
);
- });
+ })
</script>
{% endblock %}