-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
215 lines (180 loc) · 9.6 KB
/
index.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="underscore-umd.js"></script>
<script type="text/javascript" src="vue.global.js"></script>
<script type="text/javascript" src="rapydscript_web.js"></script>
<script src="ace.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="normalize.css">
<style>
body {
background-color: #555;
color: #fff;
}
.error_msg {
color: #faa;
font-size: 12px;
text-shadow: #500 1px 1px 1px, #200 1px 1px 5px, #000 1px 1px 10px;
}
.inpcode {
grid-area: inpcode;
border-radius: 10px;
}
.target {
grid-area: target;
border-radius: 10px;
overflow: auto;
}
.footer1 {
grid-area: footer1;
padding: 4px;
margin: 0px 0px 0px 6px;
}
.footer2 {
grid-area: footer2;
padding: 4px;
}
.container {
height: 100vh;
width: 100vw;
font-family: Arial, sans-serif;
display: grid;
}
@media (max-width: 800px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 6fr 4fr 36px;
grid-template-areas:
"target target"
"inpcode inpcode"
"footer1 footer2";
}
.inpcode {
margin: 0px 0px 0px 0px;
}
.target {
margin: 6px 0px 0px 0px;
}
}
@media (min-width: 800px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 36px;
grid-template-areas:
"inpcode target"
"footer1 footer2";
gap: 6px;
}
.inpcode {
margin: 6px 0px 0px 6px;
}
.target {
margin: 6px 6px 0px 0px;
}
}
.text-shadow {
text-shadow: #000 1px 1px 2px;
}
#reset_code {
background-color:#3D3D3D;
color: white;
height: 28px;
display: inline-block
text-decoration: none;
border-radius: 10px;
border-width: 2px;
border-type: solid;
border-color: #888 #333 #333 #888;
margin-left: 6px;
}
#reset_code:active {
border-color: #333 #888 #888 #333;
}
</style>
</head>
<body>
<div class="container">
<div class='inpcode' style='' id="inpcode"></div>
<div class='target' style='' id="target"></div>
<div class='footer1' style=''>
<input type="checkbox" id="rt_check" name="realtime">
<label class='text-shadow' style="margin-right:6px" for="realtime"> Live Execution</label>
<input type="checkbox" id="wrap_check" name="wrap_check">
<label class='text-shadow'for="wrap_check"> Wrap Text</label>
<button class='text-shadow' id='reset_code' style=''>Reset Code</button>
</div>
<div class='footer2'>
<span class='text-shadow' id="time_exec"></span>
</div>
</div>
<script type="text/rapydscript">
class InputCode:
def __init__(self):
editor = ace.edit("inpcode");
window.editor = editor
self.code_el = document.getElementById("inpcode")
self.code = editor
self.code.setTheme("ace/theme/ambiance");
self.code.session.setMode("ace/mode/python")
self.storage = localStorage
if 'rapydscript_code' not in self.storage:
self.storage.setItem('rapydscript_code', "# =======================================================================\n# =========================== START FROM HERE ===========================\ntarget = document.getElementById('target')\n# the DIV on the right side is of Id: 'target' (div#target)\ntarget.innerHTML = ''\n# The code in this editor is executed \"oninput\" (debounced 500ms)\n# so the div#target must be cleared up before next execution to prevent\n# unwanted behaviour\n#\n# The view currently appearing on the right (or top) is an app for viewing \n# the resulting javascript code that compiled from rapydscript code\n#\n# This app is created using this my rapydscript code below the line.\n# Feel free to modify or erase them to play around\n# =======================================================================\n\ntarget_styles = document.createElement('style')\ntarget.appendChild(target_styles)\ntarget_styles.innerHTML = '''div[data-v-app] {\n height: 100%;\n}\n\n.target_container {\n height: 100%;\n display: grid;\n grid-template-rows: 1fr 1fr 36px;\n grid-template-columns: 100%;\n grid-template-areas: \n \"inprs\"\n \"outjs\"\n \"exec_button\";\n}\n\n#exec_button {\n grid-area:exec_button;\n background-color:#3D3D3D;\n color: white;\n font-weight: bold;\n text-shadow: #000 1px 1px 2px;\n height: 36px;\n display: inline-block\n text-decoration: none;\n border-radius: 10px;\n border-width: 2px;\n border-type: solid;\n border-color: #888 #333 #333 #888;\n}\n\n#exec_button:hover {\n text-shadow: #f84 1px 1px 1px, #f84 2px 2px 5px, #f52 1px 1px 20px;\n}\n\n#exec_button:active {\n border-color: #333 #888 #888 #333;\n}\n'''\n\nvue_container = document.createElement('div')\ntarget.appendChild(vue_container)\n\n\ndef setup_RootComponent(props):\n code = Vue.ref('''class MyButton:\n\n def __init__(self, text, parent):\n self.text = text\n self.el = document.createElement(\"button\")\n self.el.innerHTML = \"MyButton\"\n parent.appendChild(self.el)\n self.el.onclick = bind(self.greet, self)\n\n def greet(self, ev):\n alert(self.text)\n\nmybutton = MyButton(\"Hello, Rapydscript!\", document.getElementsByClassName(\"target_container\")[0])''')\n compiled_code = Vue.ref('')\n\n def compiled():\n try:\n compiled_code.value = rapydscript.compile(this.code, {\n 'beautify': True\n })\n except as exc:\n return exc.toString()\n return compiled_code.value\n\n def execute():\n obj = { eval }\n obj.eval(compiled_code.value)\n\n return {\n 'code': code,\n 'compiled_code': compiled_code,\n 'compiled': compiled,\n 'execute': execute\n }\n\n\napp = Vue.createApp({\n \n setup: setup_RootComponent,\n\n components: {\n },\n\n template: '''\n <div class='target_container'>\n <div style='grid-area:inprs; border-radius:10px; margin-bottom:6px;' id='inprs' ref='inprs'></div>\n <div style='grid-area:outjs; border-radius:10px; margin-bottom:6px;' id='outjs'></div>\n <button id='exec_button' style=''\n @click='execute'>\n Execute</button>\n </div>\n '''\n}).mount(vue_container)\n\nwindow.app = app\n\ninprs = ace.edit('inprs')\ninprs.setTheme(\"ace/theme/ambiance\")\ninprs.session.setMode(\"ace/mode/python\")\ninprs.setValue(app.code)\ninprs.gotoLine(inprs.session.getLength())\n\noutjs = ace.edit('outjs')\noutjs.setTheme(\"ace/theme/ambiance\")\noutjs.session.setMode(\"ace/mode/javascript\")\noutjs.setValue(app.compiled())\noutjs.gotoLine(outjs.session.getLength())\n\n\ndef onInputCallback(ev):\n app.code = inprs.getValue()\n outjs.setValue(app.compiled())\n outjs.gotoLine(outjs.session.getLength())\n\ninprs.session.on('change', _.debounce(onInputCallback, 500))\n")
self.code.setValue(self.storage.getItem('rapydscript_code'))
setInterval(bind(self.save_code, self), 5000)
self.disp = document.getElementById("target")
self.rte = document.getElementById("rt_check")
self.rte.checked = True
self.wrp = document.getElementById("wrap_check")
self.time_exec = document.getElementById("time_exec")
self.code_el.onkeyup = _.debounce(bind(self.onkeyup, self), 500)
self.rte.onclick = bind(self.code_focus, self)
self.wrp.onclick = bind(self.wrap_text, self)
self.reset_button = document.getElementById('reset_code')
self.reset_button.onclick = bind(self.reset_code, self)
self.code_focus()
self.run()
def save_code(self):
self.storage.setItem('rapydscript_code', self.code.getValue())
def reset_code(self):
self.storage.removeItem('rapydscript_code')
location.reload()
def wrap_text(self, ev):
self.code.session.setUseWrapMode(not self.code.session.getUseWrapMode())
def code_focus(self, ev=None):
self.code_el.focus()
def onkeyup(self, args=None):
if not self.rte.checked:
return False
self.run()
def run(self, args=None):
t0 = new Date().getTime()
try:
output_code = rapydscript.compile(self.code.getValue(), {beautify: True})
obj = { eval }; # indirect eval
obj.eval(output_code)
except as err:
self.disp.innerHTML = "<pre class='error_msg'>" + err.toString() + "</pre>"
t1 = new Date().getTime()
self.time_exec.innerHTML = "Exec time: " + (t1 - t0) + " ms"
return
rapydscript_editor = new InputCode()
rapydscript_editor.code.gotoLine(rapydscript_editor.code.session.getLength())
window.rapydscript_editor = rapydscript_editor
</script>
<script>
var scripts = document.getElementsByTagName('script');
for (var i=0; i<scripts.length; i++) {
if (scripts[i].type === 'text/rapydscript') {
var p = document.createElement('script')
p.innerHTML = rapydscript.compile(scripts[i].innerHTML, {beautify: true});
document.body.appendChild(p);
document.body.removeChild(p);
}
}
</script>
</body>
</html>