1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<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 %}
|
