Add gn editor settings page.

1 files changed, 100 insertions, 0 deletions

diff --git a/gn2/wqflask/templates/gn_editor_settings.html b/gn2/wqflask/templates/gn_editor_settings.html
new file mode 100644
index 00000000..466e18c3
--- /dev/null
+++ b/gn2/wqflask/templates/gn_editor_settings.html
@@ -0,0 +1,100 @@
+<section>
+  <h4><i>Select a theme</i></h4>
+  <form>
+  <div class="form-check">
+      <input class="form-check-input" type="radio" name="theme" id="twilightTheme" value="twilight" checked >
+      <label class="form-check-label" for="twilight">twilight</label>
+  </div>
+ 
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="theme" id="draculaTheme" value="dracula">
+      <label class="form-check-label" for="draculaTheme">dracula</label>
+	</div>
+        <div class="form-check">
+      <input class="form-check-input" type="radio" name="theme" id="normalTheme" value="textmate" checked >
+      <label class="form-check-label" for="normalTheme">Text</label>
+	</div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="theme" id="monokaiTheme" value="monokai" >
+      <label class="form-check-label" for="monokaiTheme">Monokai</label>
+    </div>
+        <div class="form-check">
+      <input class="form-check-input" type="radio" name="theme" id="customTheme" value="xcode">
+      <label class="form-check-label" for="customTheme">xcode</label>
+    </div>
+
+<br>
+<div class="form-group" style="padding-top:10px">
+  <h4> <i>Select Font Size</i></h4>
+  <input type="range" class="form-control-range" id="fontSizeRange" name="fontSizeRange" min="10" max="36" step="1" value="16">
+  <em><span id="fontSizeValue">16</span> px</em>
+</div>
+
+<br>
+<div>
+   <h4><i>Select Wrap Option:</i></h4>
+      <div class="form-check">
+      <input class="form-check-input" type="radio" name="wrap" id="normalTheme" value="true"  checked>
+      <label class="form-check-label" for="normalTheme">True</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="wrap" id="monokaiTheme" value="false">
+      <label class="form-check-label" for="monokaiTheme">False</label>
+    </div>
+</div>
+<div>
+   <h4><i>Cursor Styles:</i></h4>
+      <div class="form-check">
+      <input class="form-check-input" type="radio" name="cursor" id="aceCursor" value="ace" checked >
+      <label class="form-check-label" for="aceCursor">ace</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="cursor" id="slimCursor" value="slim">
+      <label class="form-check-label" for="slimCursor">slim</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="cursor" id="smoothCursor" value="smooth">
+      <label class="form-check-label" for="smoothCursor">smooth</label>
+    </div>
+      <div class="form-check">
+      <input class="form-check-input" type="radio" name="cursor" id="wideCursor" value="wide">
+      <label class="form-check-label" for="wideCursor">wide</label>
+    </div>
+</div>
+  </form>
+  <br>
+<div class="row">
+  <div class="col-sm-offset-1">
+    <button class="btn btn-primary" id="settingBtn">
+  Save Settings
+</button>
+  </div>
+</div>  
+</section>
+
+{% block js %}
+<script>
+  
+  $('#fontSizeRange').on('input', function () {
+  var fontSize = $(this).val();
+  $('#fontSizeValue').text(fontSize);
+});  
+
+  document.querySelector("#settingBtn").addEventListener("click", function () {
+ var formData = {
+    theme: `ace/theme/${$('input[name="theme"]:checked').val()}`,
+    fontSize: parseInt($("#fontSizeRange").val()),
+     wrap:$('input[name="wrap"]:checked').val()== "false" ? false : true,
+     cursorStyle: $('input[name="cursor"]:checked').val()
+     
+ }
+   htmx.find("#output").dispatchEvent(
+    new CustomEvent("updateEditor", {
+      bubbles: true,
+	detail: {action: 'didInitialize', payload: formData},
+    }),
+  );
+});
+</script>
+{% endblock %}
+