diff options
Diffstat (limited to 'gn2/wqflask/templates/gn_editor.html')
| -rw-r--r-- | gn2/wqflask/templates/gn_editor.html | 238 |
1 files changed, 238 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html new file mode 100644 index 00000000..e5c649d1 --- /dev/null +++ b/gn2/wqflask/templates/gn_editor.html @@ -0,0 +1,238 @@ +{% extends "base.html" %} +{% block title %}Genenetwork Files Editor{% endblock %} +{% block css %} + <style> + #diffBtn { + cursor:pointer + } + </style> + <link rel="stylesheet" + type="text/css" + href="{{ url_for('css', filename='diff2html/diff2html.min.css') }}" /> + <link rel="stylesheet" + type="text/css" + href="{{ url_for('css', filename='highlight/default.min.css') }}" /> +{% endblock %} +{% block search %}{% endblock %} +{% block content %} + <section class="container-fluid"> + <header class="row"> + <nav class="navbar" style="background-color:#ccc"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="#"><strong>GN Editor</strong></a> + </div> + <div style="padding-right:3.6rem"> + <ul class="nav navbar-nav navbar-right"> + <li> + <a href="#" + hx-get="/editor/commit" + hx-target="#output" + hx-trigger="click" + hx-swap="innerHTML">Commit</a> + </li> + <li> + <a hx-trigger="click" id="diffBtn" hx-swap="innerHTML">Diff</a> + </li> + <li> + <a href="#" + hx-get="/editor/settings" + hx-target="#output" + hx-trigger="click" + hx-swap="innerHTML">Settings</a> + </li> + </ul> + </div> + </div> + </nav> + </header> + <div> + <div class="row" id="gn-editor"> + <section class="col-sm-6" id="editor" style="height:100vh"> + <textarea name="ckcontent" id="ckcontent" style='display:none'> + </textarea> + </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; + padding-top:2.5rem" + id="swap"> + </section> + </div> + </section> + </div> + </div> + </section> +{% endblock %} +{% block js %} + <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" + type="text/javascript"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='diff2html/diff2html.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='htmx.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='jsdiff/diff.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='ace/ace.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='marked/marked.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='marked/marked-highlight.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='highlight/highlight.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='ckeditor/ckeditor.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, + + // 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/textmate", // theme string from ace/theme or custom? + scrollSpeed: 2, // number: the scroll speed index + dragDelay: 0, + 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' + + } + let hash = {{ hash|tojson }} + let filePath = {{ file_path|tojson }} + let fileExt = (filePath.substring(filePath.lastIndexOf('.')+1, filePath.length) || "md").toLowerCase(); + let data = {{ content|tojson }} + + localStorage.setItem("gn_editor_sha" ,hash) + 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}}) + }) + + htmx.on("#output", "diffEvent", function(event){ + var fileName = "{{ file_path }}" + var diffContent = Diff.createTwoFilesPatch(fileName,fileName, data, editor.getValue()) + var diffHtml = Diff2Html.html(diffContent, { + drawFileList: true, + matching: 'lines', + outputFormat: 'line-by-line', + }); + htmx.find("#output").innerHTML = diffHtml + }) + + htmx.on("#output", "updateEditor", function(event){ + if (fileExt != 'rtf'){ + editor.setOptions({ + ...editor_configurations, + ...event.detail.payload + }) + editor.renderer.updateFull(); + } + + }) + + htmx.on("#diffBtn","click",function(event){ + //dispatch your event here + console.log("Clicked diff btn here") + htmx.find("#output").dispatchEvent( + new CustomEvent("diffEvent", { + bubbles: true, + detail: {}, + }), + ); + }) + 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) //work on error handling for invalid markdown + previewContent.innerHTML = htmlContent; + } + + if (fileExt == "rtf"){ + var editor = CKEDITOR.replace('ckcontent', { + height: '100vh', + }); + editor.setData(data) + editor.getValue = editor.getData + } + else { + var editor = ace.edit("editor"); + editor.setOptions(editor_configurations); + editor.container.style.resize = "horizontal"; + editor.getSession().on("change", function(e){ + updatePreview() + }) + editor.setValue(data, -1); + } + + }); + + + </script> +{% endblock %} |