beautification of editor

code/app.py

@@ -14,7 +14,7 @@ from utils.utils import *
 from utils.crypt import *
 
 
-__FLEES_VERSION__ = "20180721.0"
+__FLEES_VERSION__ = "20180721.1"
 app = Flask(__name__)
 app.config.from_object(__name__)
 # Read config from json !

code/static/css/styles.css

@@ -275,6 +275,39 @@ tr:nth-child(odd) {
 
 /* editor */
 
+#editor_container {
+  float:right;
+  padding: 12px;
+  border: 4px solid var(--border-color);
+  background-color: var(--background-dark-color);
+  line-height: 2em;
+  -webkit-border-bottom-left-radius: 15px;
+  -moz-border-radius-bottomleft: 15px;
+  border-bottom-left-radius: 15px;
+}
+
+#editor_form {
+}
+
+#editor_area {
+  width: 40vw;
+  float: left;
+}
+
+#editor_preview {
+  width: 40vw;
+  margin-left: 2vw;
+  float: left;
+  line-height: normal;
+}
+
+#editor_preview p {
+  margin-top: 0px;
+}
+
 .href_button {
    margin-left: 3em;
+   cursor: pointer;
+   text-decoration: underline;
 }
+

code/static/js/scripts.js

@@ -21,20 +21,20 @@ function index_form_submit() {
         document.getElementById("index_form_name").value;
 }
 
-
-function infoToggle() {
-    var info = document.getElementById("list_info");
-    info.style.display = info.style.display === 'block' ? 'none' : 'block';
-}
-
-
-function scriptToggle() {
-    var el = document.getElementById("list_script");
+function toggler(id) {
+	var el = document.getElementById(id);
 	if (el) {
         el.style.display = el.style.display === 'block' ? 'none' : 'block';
     }
 }
 
+function infoToggle() {
+	toggler("list_info");
+}
+function scriptToggle() {
+	toggler("list_script");
+}
+
 
 function UploadFile(file,file_no,files_total) {
     if (uploadTurn != file_no) {
@@ -151,6 +151,20 @@ function UploadURL() {
 }
 
 
+function updateEditorPreview() {
+  var input = document.getElementById("editor_area");
+  var preview = document.getElementById("editor_preview");
+  preview.innerHTML = md.render(input.value);
+}
+function previewToggle() {
+    toggler("editor_preview");
+    if (document.getElementById("editor_preview").style.display === 'block') {
+		document.getElementById("editor_area").style.width = "40vw";
+	} else {
+		document.getElementById("editor_area").style.width = "82vw";
+	}
+}
+
 function changeTitle(newTitle) {
     document.title = "Flees - " + newTitle;
 }

code/templates/editor.html

@@ -1,21 +1,34 @@
 {% extends "layout.html" %}
 {% block body %}
-<div id=index_menu>
+<script src="{{ url_for('static', filename='js/remarkable.min.js') }}"></script>
+<div id=editor_container>
   Edit text file in share: <a href="{{ url_for('list_view',name = name) }}">{{ name|safe  }}</a>
+
     <div id=editor_form>
     <form action={{ url_for('paste',name=name) }} method=post enctype=multipart/form-data>
+      <div id=editor_form_header>
         <input type=hidden name=from_gui value="true" />
-      <input id="paste_filename" type=text name=filename
+        <input id="editor_filename" type=text name=filename
                    title="File name to write. Must end in .txt to later edit."
                    value="{{ filename | safe }}" onclick="clear_text(this.id,'paste.txt')">
         <br>
-     <input type=submit value=Submit>
-     <a class="href_button" href="{{ url_for('list_view',name = name) }}">Cancel</a>
-     <br>
-     <textarea rows="25" cols="80" name="paste" id="paste_paste" autofocus>{{ content | safe }}</textarea>
-
+        <input type=submit value=Save>
+        <a class="href_button" onclick="previewToggle()" title="Toggle preview window">Preview</a>
+        <a class="href_button" href="{{ url_for('list_view',name = name) }}" title="Forget all changes">Cancel</a>
+      </div>
+      <div id=editor_floats>
+        <textarea rows="25" name="paste" id="editor_area" autofocus oninput="updateEditorPreview()">{{ content | safe }}</textarea>
+        <div id=editor_preview style="display: block;"></div>
+      </div>
     </form>
     </div>
+
 </div>
-<script type="text/javascript">changeTitle("{{ name | safe }} - Editor");</script>
+<script type="text/javascript">
+  changeTitle("{{ name | safe }} - Editor");
+  var md = new Remarkable({
+    linkify: true
+  });
+  updateEditorPreview();
+</script>
 {% endblock %}