aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlexander_Kabui2024-08-08 13:46:44 +0300
committerBonfaceKilz2024-08-29 18:58:56 +0300
commit1b103db9edc287f88ae23d2b997579897c2724e7 (patch)
tree07b755fa5ec8609a3266562441769658dbdec453
parent7015579e7d10d964cee0019943a79f37877b9eee (diff)
downloadgenenetwork2-1b103db9edc287f88ae23d2b997579897c2724e7.tar.gz
Feature: Allow users custom configuration for editor.
-rw-r--r--gn2/wqflask/templates/gn_editor.html263
-rw-r--r--gn2/wqflask/views.py5
2 files changed, 135 insertions, 133 deletions
diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index c957f6aa..ab587715 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -9,46 +9,39 @@
{% block search %}{% endblock %}
{% block content %}
<section class="container-fluid">
- <header class="row">
-<nav class="navbar-inverse">
- <div class="container-fluid">
- <div class="navbar-header">
- <a class="navbar-brand" href="#"><strong>GN Editor<strong></a>
- </div>
- <div >
- <ul class="nav navbar-nav navbar-right">
- <li><a href="#">Commit</a></li>
- <li><a href="#">Refresh</a></li>
- <li><a href="#">Help</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
+ <header class="row">
+ <nav class="navbar-inverse">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <a class="navbar-brand" href="#"><strong>GN Editor<strong></a>
+ </div>
+ <div >
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Commit</a></li>
+ <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML" >Settings </a></li>
+ <li><a href="#">Help</a></li>
</ul>
- </li>
- </ul>
+ </div>
+ </div>
+ </nav>
+
+ </header>
+
+ <div>
+ <div class="row">
+ <section class="col-sm-6" id="editor" style="height:100vh">
+
+ </section>
+ <section class="col-sm-6">
+ <div class="row">
+ <section class="col-sm-10 col-sm-offset-1" id="output" style="height:100vh;overflow-y:scroll" id="swap">
+ Tristique nulla aliquet enim tortor, at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci, a scelerisque! Laoreet suspendisse interdum consectetur libero.
+ </section>
+ </div>
+
+ </section>
</div>
</div>
-</nav>
-
- </header>
-
- <div>
- <div class="row">
- <section class="col-sm-6" id="editor" style="height:100vh">
-
- </section>
- <section class="col-sm-6">
- <div class="row">
- <section class="col-sm-10 col-sm-offset-1" id="output" style="height:100vh;overflow-y:scroll">
- Tristique nulla aliquet enim tortor, at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci, a scelerisque! Laoreet suspendisse interdum consectetur libero.
- </section>
- </div>
-
- </section>
- </div>
- </div>
</section>
{% endblock %}
@@ -60,105 +53,109 @@
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script>
-
+
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- $('footer').hide()
- var editor_configurations = {
- selectionStyle: 'line',// "line"|"text"
- highlightActiveLine: true, // boolean
- highlightSelectedWord: true, // boolean
- readOnly: false, // boolean: true if read only
- cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
- mergeUndoDeltas: true, // false|true|"always"
- behavioursEnabled: true, // boolean: true if enable custom behaviours
- wrapBehavioursEnabled: true, // boolean
- autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable
- keyboardHandler: null, // function: handle custom keyboard events
-
- // renderer options
- animatedScroll: false, // boolean: true if scroll should be animated
- displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
- showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
- showPrintMargin: true, // boolean: true if show the vertical print margin
- printMarginColumn: 80, // number: number of columns for vertical print margin
- printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
- showGutter: true, // boolean: true if show line gutter
- fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
- showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
- showLineNumbers: true,
- highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
- hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
- vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
- fontSize: 16, // number | string: set the font size to this many pixels
- fontFamily: undefined, // string: set the font-family css value
- maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
- minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
- maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined.
- scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
- fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
- theme: "ace/theme/dracula", // theme string from ace/theme or custom?
-
- // mouseHandler options
- scrollSpeed: 2, // number: the scroll speed index
- dragDelay: 0, // number: the drag delay before drag starts. it's 150ms for mac by default
- dragEnabled: true, // boolean: enable dragging
- focusTimout: 0, // number: the focus delay before focus starts.
- tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
-
- // session options
- firstLineNumber: 1, // number: the line number in first line
- overwrite: false, // boolean
- newLineMode: 'auto', // "auto" | "unix" | "windows"
- useWorker: true, // boolean: true if use web worker for loading scripts
- 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'
-}
-
-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(
- markedHighlight({
- langPrefix: 'hljs language-',
- highlight(code, lang) {
- const language = hljs.getLanguage(lang) ? lang : 'plaintext';
- return hljs.highlight(code, { language }).value;
- }
- })
- );
- new_marked.use({
- pedantic: false,
- gfm: true,
- });
-
- previewContent = document.querySelector("#output");
- var markdownContent = editor.getValue();
- var htmlContent = new_marked.parse(markdownContent)
- previewContent.innerHTML = htmlContent;
- }
-
- editor.getSession().on("change", function(e){
- updatePreview()
- })
-
-
-
-
- });
-
-
-
+ document.addEventListener('DOMContentLoaded', function() {
+ $('footer').hide()
+ var editor_configurations = {
+ selectionStyle: 'line',// "line"|"text"
+ highlightActiveLine: true, // boolean
+ highlightSelectedWord: true, // boolean
+ readOnly: false, // boolean: true if read only
+ cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
+ mergeUndoDeltas: true, // false|true|"always"
+ behavioursEnabled: true, // boolean: true if enable custom behaviours
+ wrapBehavioursEnabled: true, // boolean
+ autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable
+ keyboardHandler: null, // function: handle custom keyboard events
+
+ // renderer options
+ animatedScroll: false, // boolean: true if scroll should be animated
+ displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
+ showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
+ showPrintMargin: true, // boolean: true if show the vertical print margin
+ printMarginColumn: 80, // number: number of columns for vertical print margin
+ printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
+ showGutter: true, // boolean: true if show line gutter
+ fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
+ showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
+ showLineNumbers: true,
+ highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
+ hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
+ vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
+ fontSize: 16, // number | string: set the font size to this many pixels
+ fontFamily: undefined, // string: set the font-family css value
+ maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
+ minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
+ maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined.
+ scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
+ fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
+ theme: "ace/theme/dracula", // theme string from ace/theme or custom?
+
+ // mouseHandler options
+ scrollSpeed: 2, // number: the scroll speed index
+ dragDelay: 0, // number: the drag delay before drag starts. it's 150ms for mac by default
+ dragEnabled: true, // boolean: enable dragging
+ focusTimout: 0, // number: the focus delay before focus starts.
+ tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
+
+ // session options
+ firstLineNumber: 1, // number: the line number in first line
+ overwrite: false, // boolean
+ newLineMode: 'auto', // "auto" | "unix" | "windows"
+ useWorker: true, // boolean: true if use web worker for loading scripts
+ 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'
+
+ document.querySelector("#output").addEventListener("updateEditor", function(event){
+ console.log(event.detail.payload)
+ console.log(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(
+ markedHighlight({
+ langPrefix: 'hljs language-',
+ highlight(code, lang) {
+ const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+ return hljs.highlight(code, { language }).value;
+ }}));
+ new_marked.use({
+ pedantic: false,
+ gfm: true,
+ });
+
+ previewContent = document.querySelector("#output");
+ var markdownContent = editor.getValue();
+ var htmlContent = new_marked.parse(markdownContent)
+ previewContent.innerHTML = htmlContent;
+ }
+
+ editor.getSession().on("change", function(e){
+ updatePreview()
+ })
+
+
+ });
+
+
+
</script>
{% endblock %}
-
diff --git a/gn2/wqflask/views.py b/gn2/wqflask/views.py
index 1e22544d..e08ccd8e 100644
--- a/gn2/wqflask/views.py
+++ b/gn2/wqflask/views.py
@@ -315,6 +315,11 @@ def edit_gn_file():
return render_template("gn_editor.html")
+@app.route("/editor/commit", methods=["GET"])
+def commit_page():
+ return render_template("gn_editor_settings.html")
+
+
@app.route("/gnqna/hist/", methods=["GET"])
@require_oauth2
def get_hist_titles():