diff options
Diffstat (limited to 'gn2/wqflask/templates/gn_editor_settings.html')
| -rw-r--r-- | gn2/wqflask/templates/gn_editor_settings.html | 195 |
1 files changed, 195 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..1e2cae10 --- /dev/null +++ b/gn2/wqflask/templates/gn_editor_settings.html @@ -0,0 +1,195 @@ +<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> + <h4> + <i>Choose KeyBoard Binding:</i> + </h4> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="keyboard" + id="default" + value="default" + checked> + <label class="form-check-label" for="default">Default</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="keyboard" + id="vscode" + value="vscode"> + <label class="form-check-label" for="vscode">Vscode</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="keyboard" + id="emacs" + value="emacs"> + <label class="form-check-label" for="emacs">Emacs</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="keyboard" + id="vim" + value="vim"> + <label class="form-check-label" for="vim">Vim</label> + </div> + <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); + }); + + htmx.on("#settingBtn", "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(), + keyboardHandler:($('input[name="keyboard"]:checked').val() == "default"? + null: `ace/keyboard/${$('input[name="keyboard"]:checked').val()}` + ) + + } + htmx.find("#output").dispatchEvent( + new CustomEvent("updateEditor", { + bubbles: true, + detail: {action: 'didInitialize', payload: formData}, + }), + ); + }) + </script> +{% endblock %} |