24bb0f2b2a
- It shows the code like a textarea and the canvas will to the right - It will take only the amount of height required for the code - The existing LiveCodeEditor was renamed as LiveCodeEditorLarge and still used or sketches
66 lines
1.7 KiB
HTML
66 lines
1.7 KiB
HTML
|
|
{% macro LiveCodeEditorLarge(name, code) %}
|
|
<div class="livecode-editor livecode-editor-large row no-gutters" id="editor-{{name}}">
|
|
<div class="col-sm">
|
|
<div class="heading">
|
|
<button class="run">Run</button>
|
|
<h2>Editor</h2>
|
|
</div>
|
|
<textarea class="code">{{code}}</textarea>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="heading">
|
|
<h2>Output</h2>
|
|
</div>
|
|
<div class="canvas-wrapper">
|
|
<canvas class="canvas" width="300" height="300"></canvas>
|
|
<pre class="output"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro LiveCodeEditor(name, code) %}
|
|
<div class="livecode-editor canvas-editor" id="editor-{{name}}">
|
|
<div class="row">
|
|
<div class="col-md-9">
|
|
<div>
|
|
<textarea class="code">{{code}}</textarea>
|
|
<div class="livecode-controls">
|
|
<button type="button" class="run">Run</button>
|
|
<a href="javascript:;" class="reset">Reset</a>
|
|
<a href="javascript:;" class="clear">Clear</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="canvas-wrapper">
|
|
<canvas class="canvas" width="150" height="150"></canvas>
|
|
<pre class="output"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endmacro %}
|
|
|
|
|
|
|
|
{% macro LiveCodeEditorJS(name, code) %}
|
|
<script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
|
|
<script type="text/javascript">
|
|
var livecodeEditors = [];
|
|
|
|
$(function() {
|
|
$(".livecode-editor").each((i, e) => {
|
|
var editor = new LiveCodeEditor(e, {
|
|
runtime: "python-canvas",
|
|
base_url: "{{ livecode_url }}",
|
|
codemirror: true
|
|
})
|
|
livecodeEditors.push(editor);
|
|
})
|
|
})
|
|
</script>
|
|
{% endmacro %}
|