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
110 lines
3.4 KiB
HTML
110 lines
3.4 KiB
HTML
{% extends "templates/base.html" %}
|
|
{% from "www/macros/livecode.html" import LiveCodeEditorLarge, LiveCodeEditorJS with context %}
|
|
|
|
{% block title %}{{sketch.title}}{% endblock %}
|
|
{% block head_include %}
|
|
<meta name="description" content="Sketch {{sketch.title}}" />
|
|
<meta name="keywords" content="sketch {{sketch.title}}" />
|
|
<style>
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
|
|
<link rel="stylesheet" href="/assets/css/lms.css">
|
|
|
|
<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
|
|
<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
|
|
<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>
|
|
|
|
<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
|
|
<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="top-section" style="padding: 1rem 0rem;">
|
|
<div class='container pb-5'>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item" aria-current="page"><a href="/sketches">Sketches</a></li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="sketch-header">
|
|
{% if editable %}
|
|
<input type="button" class="pull-right" id="sketch-save" value="Save"/>
|
|
<h1 class="sketch-title">
|
|
<input type="text" name="title" id="sketch-title" value="{{ sketch.title }}" />
|
|
</h1>
|
|
{% else %}
|
|
<h1 class="sketch-title">{{sketch.title}}</h1>
|
|
{% endif %}
|
|
<div class="sketch-owner-wrapper">By <span class="sketch-owner">{{sketch.get_owner_name()}}</span></div>
|
|
</div>
|
|
|
|
{% if sketch.is_new() and not editable %}
|
|
<div class="alert alert-warning">
|
|
Please login to save this sketch.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="sketch-editor">
|
|
{{LiveCodeEditorLarge(sketch.name, sketch.code) }}
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
{{ super() }}
|
|
{{ LiveCodeEditorJS() }}
|
|
|
|
<script type="text/javascript">
|
|
var sketch_name = {{ sketch.name | tojson }};
|
|
|
|
function saveSketch() {
|
|
var title = $("#sketch-title").val()
|
|
var code = livecodeEditors[0].codemirror.doc.getValue()
|
|
frappe.call('community.lms.doctype.lms_sketch.lms_sketch.save_sketch', {
|
|
name: sketch_name,
|
|
title: title,
|
|
code: code
|
|
})
|
|
.then(r => {
|
|
var msg = r.message;
|
|
if (!msg.ok) {
|
|
var error = msg.error || "Save failed."
|
|
frappe.msgprint({
|
|
"title": "Error",
|
|
"indicator": "red",
|
|
"message": error
|
|
});
|
|
}
|
|
else if (msg.status == "created") {
|
|
var path = "/sketches/sketch?sketch=" + msg.name;
|
|
var url = window.location.protocol + "//" + window.location.host + path
|
|
window.history.pushState({path: url}, '', url);
|
|
sketch_name = name;
|
|
|
|
frappe.msgprint({
|
|
"title": "Notification",
|
|
"indicator": "green",
|
|
"message": "New sketch has been saved!"
|
|
});
|
|
}
|
|
else if (msg.status == "updated") {
|
|
frappe.msgprint({
|
|
"title": "Notification",
|
|
"indicator": "green",
|
|
"message": "The sketch has been saved!"
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
$(function() {
|
|
$("#sketch-save").click(function() {
|
|
saveSketch();
|
|
});
|
|
})
|
|
</script>
|
|
{%- endblock %}
|
|
|