mirror of
https://expo.survex.com/repositories/troggle/.git
synced 2025-01-19 09:22:32 +00:00
167 lines
5.0 KiB
HTML
167 lines
5.0 KiB
HTML
<script src="{{ settings.MEDIA_URL }}admin/js/vendor/jquery/jquery.js" type="text/javascript"></script>
|
|
|
|
<script src={{ settings.MEDIA_URL }}codemirror/codemirror.js></script>
|
|
<script src={{ settings.MEDIA_URL }}codemirror/xml.js></script>
|
|
<script src={{ settings.MEDIA_URL }}codemirror/javascript.js></script>
|
|
<script src={{ settings.MEDIA_URL }}codemirror/css.js></script>
|
|
<script src={{ settings.MEDIA_URL }}codemirror/htmlmixed.js></script>
|
|
<link rel=stylesheet href={{ settings.MEDIA_URL }}codemirror/codemirror.css>
|
|
<link rel=stylesheet href={{ settings.MEDIA_URL }}codemirror/docs.css>
|
|
<style type=text/css>
|
|
.CodeMirror {
|
|
float: left;
|
|
width: 50%;
|
|
border: 1px solid black;
|
|
height: 80%;
|
|
}
|
|
.CodeMirror-scroll{
|
|
height: 99%
|
|
}
|
|
iframe {
|
|
width: 49%;
|
|
height: 80%;
|
|
float: left;
|
|
border: 1px solid black;
|
|
border-left: 0px;
|
|
}
|
|
body{max-width: none;
|
|
margin-left: 275px;
|
|
margin-right: 50px;
|
|
text-align: left;
|
|
}
|
|
#id_change_message{
|
|
height: 5%;
|
|
}
|
|
</style>
|
|
<style type=text/css>
|
|
html {
|
|
font-family: "Helvetica Neue", sans-serif;
|
|
width: 100%;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup-overlay {
|
|
/*Hides pop-up when there is no "active" class*/
|
|
visibility: hidden;
|
|
position: absolute;
|
|
background: #ffffff;
|
|
border: 3px solid #666666;
|
|
width: 90%;
|
|
height: 80%;
|
|
overflow: scroll;
|
|
left: 5%;
|
|
z-index: 20;
|
|
}
|
|
|
|
.popup-overlay.active {
|
|
/*displays pop-up when "active" class is present*/
|
|
visibility: visible;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup-content {
|
|
/*Hides pop-up content when there is no "active" class */
|
|
visibility: hidden;
|
|
}
|
|
|
|
.popup-content.active {
|
|
/*Shows pop-up content when "active" class is present */
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
</style>
|
|
<script>
|
|
function add_image_popup() {
|
|
$('.add-image-popup').addClass('active');
|
|
$('#image_popup_content').load("{% url 'image_selector' path %}", function() {
|
|
$('.thumbnail').click(function(){
|
|
$(".add-image-popup").removeClass("active");
|
|
addStr($( this ).attr("data-html"))
|
|
});
|
|
})
|
|
}
|
|
function new_image_popup() {
|
|
$('.add-image-popup').removeClass('active');
|
|
$('.new-image-popup').addClass('active');
|
|
$.ajax({
|
|
type : "GET",
|
|
dataType: "json",
|
|
url: "{% url 'new_image_form' path %}",
|
|
success: function(data){handle_new_image(data)}
|
|
});
|
|
}
|
|
|
|
function handle_new_image(data) {
|
|
if (data.hasOwnProperty('form')) {
|
|
$('#new_image_popup_content').html(data.form);
|
|
$('#new_image_form').on('submit', function(e){
|
|
e.preventDefault();
|
|
data = $('#new_image_form').serialize();
|
|
|
|
$.ajax({
|
|
type : "POST",
|
|
dataType: "json",
|
|
url: "{% url 'new_image_form' path %}",
|
|
data: new FormData($('#new_image_form')[0]),
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(data){
|
|
handle_new_image(data);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
else if (data.hasOwnProperty('html')) {
|
|
$('.new-image-popup').removeClass('active');
|
|
addStr(data.html);
|
|
}
|
|
else {
|
|
alert(data.error);
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
var delay;
|
|
// Initialize CodeMirror editor with a nice html5 canvas demo.
|
|
var editor = CodeMirror.fromTextArea(document.getElementById('id_html'), {
|
|
mode: 'text/html',
|
|
tabMode: 'indent',
|
|
onChange: function() {
|
|
clearTimeout(delay);
|
|
delay = setTimeout(updatePreview, 300);
|
|
}
|
|
});
|
|
|
|
function updatePreview() {
|
|
var previewFrame = document.getElementById('preview');
|
|
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
|
|
preview.open();
|
|
preview.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><link rel='stylesheet' type='text/css' href='/css/main2.css' /> <style type=text/css>body{max-width: none;margin-left: 15px;margin-right: 15px;}</style></head><body>");
|
|
preview.write(editor.getValue());
|
|
preview.write("</body></html>");
|
|
preview.close();
|
|
}
|
|
setTimeout(updatePreview, 300);
|
|
|
|
function addTag(tag, attr){
|
|
// For codemirror & center cursor
|
|
var from = editor.getCursor(true);
|
|
var to = editor.getCursor(false);
|
|
editor.replaceRange("</"+tag+">", to);
|
|
if (attr.length > 0) {attr = " " + attr;}
|
|
editor.replaceRange("<"+tag+attr+">", from);
|
|
editor.focus();
|
|
editor.setCursor({line: to.line , ch : to.ch + 2 + tag.length + attr.length });
|
|
}
|
|
|
|
function addStr(x){
|
|
var to = editor.getCursor(false);
|
|
editor.replaceRange(x, to);
|
|
editor.focus();
|
|
editor.setCursor({line: to.line , ch : to.ch + x.length });
|
|
}
|
|
</script>
|
|
|