address Christina's comments re js in latex2edx source-edit.html
This commit is contained in:
ichuang
@@ -18,7 +18,7 @@
|
||||
<button type="reset" class="hls-compile">Save & Compile to edX XML</button>
|
||||
<button type="reset" class="hls-save">Save</button>
|
||||
<button type="reset" class="hls-refresh">Refresh</button>
|
||||
<div style="display:none"><input type="file" name="hlsfile" id="hlsfile" /></div>
|
||||
<div style="display:none" id="hls-finput"></div>
|
||||
<span id="message"></span>
|
||||
<button type="reset" class="hls-upload" style="float:right">Upload</button>
|
||||
</div>
|
||||
@@ -28,168 +28,148 @@
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="/static/js/vendor/CodeMirror/stex.js"></script>
|
||||
<script type="text/javascript">
|
||||
$('#hls-trig-${hlskey}').leanModal({ top:40, overlay:0.8, closeButton: ".close-button"});
|
||||
<script type = "text/javascript">
|
||||
hlstrig = $('#hls-trig-${hlskey}');
|
||||
hlsmodal = $('#hls-modal-${hlskey}');
|
||||
|
||||
$('#hls-modal-${hlskey}').data('editor',CodeMirror.fromTextArea($('#hls-modal-${hlskey}').find('.hls-data')[0], {lineNumbers: true, mode: 'stex'}));
|
||||
hlstrig.leanModal({
|
||||
top: 40,
|
||||
overlay: 0.8,
|
||||
closeButton: ".close-button"
|
||||
});
|
||||
|
||||
$('#hls-trig-${hlskey}').click(function(){slow_refresh_hls($('#hls-modal-${hlskey}'))})
|
||||
hlsmodal.data('editor', CodeMirror.fromTextArea(hlsmodal.find('.hls-data')[0], {
|
||||
lineNumbers: true,
|
||||
mode: 'stex'
|
||||
}));
|
||||
|
||||
// file upload button
|
||||
$('#hls-modal-${hlskey}').find('.hls-upload').click(function(){
|
||||
$('#hls-modal-${hlskey}').find('#hlsfile').trigger('click');
|
||||
});
|
||||
$('#hls-trig-${hlskey}').click(function() {
|
||||
|
||||
$('#hls-modal-${hlskey}').find('#hlsfile').change(function() {
|
||||
console.log('handler for hlsfile input called');
|
||||
var file = $('#hls-modal-${hlskey}').find('#hlsfile')[0].files[0];
|
||||
el = $('#hls-modal-${hlskey}');
|
||||
console.log(file);
|
||||
## this ought to be done using css instead
|
||||
hlsmodal.attr('style', function(i,s) { return s + ' margin-left:0px !important; left:5%' });
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(event) {
|
||||
var contents = event.target.result;
|
||||
process_file_contents(el, contents);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
## setup file input
|
||||
## need to insert this only after hls triggered, because otherwise it
|
||||
## causes other <form> elements to become multipart/form-data,
|
||||
## thus breaking multiple-choice input forms, for example.
|
||||
$('#hls-finput').append('<input type="file" name="hlsfile" id="hlsfile" />');
|
||||
|
||||
// file upload processing
|
||||
function process_file_contents(el, contents){
|
||||
// console.log("File contents: " + contents);
|
||||
editor = el.data('editor');
|
||||
editor.setValue(contents);
|
||||
console.log('doing compile and save');
|
||||
// trigger compile & save
|
||||
el.find('.hls-compile').trigger('click');
|
||||
}
|
||||
var el = $('#hls-modal-${hlskey}');
|
||||
setup_autoupload(el);
|
||||
slow_refresh_hls(el);
|
||||
});
|
||||
|
||||
// refresh button
|
||||
// file upload button
|
||||
hlsmodal.find('.hls-upload').click(function() {
|
||||
$('#hls-modal-${hlskey}').find('#hlsfile').trigger('click');
|
||||
});
|
||||
|
||||
$('#hls-modal-${hlskey}').find('.hls-refresh').click(function(){refresh_hls($('#hls-modal-${hlskey}'))});
|
||||
// auto-upload after file is chosen
|
||||
function setup_autoupload(el){
|
||||
el.find('#hlsfile').change(function() {
|
||||
var file = el.find('#hlsfile')[0].files[0];
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(event) {
|
||||
var contents = event.target.result;
|
||||
el.data('editor').setValue(contents);
|
||||
// trigger compile & save
|
||||
el.find('.hls-compile').trigger('click');
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
}
|
||||
|
||||
function refresh_hls(el){
|
||||
el.data('editor').refresh();
|
||||
// hide gray overlay
|
||||
$('#lean_overlay').hide();
|
||||
}
|
||||
// refresh button
|
||||
hlsmodal.find('.hls-refresh').click(function() {
|
||||
refresh_hls(hlsmodal);
|
||||
});
|
||||
|
||||
function slow_refresh_hls(el){
|
||||
el.delay(200).queue(function(){
|
||||
refresh_hls(el);
|
||||
$(this).dequeue();
|
||||
});
|
||||
// resize the codemirror box
|
||||
h = el.height();
|
||||
el.find('.CodeMirror-scroll').height(h-100);
|
||||
}
|
||||
function refresh_hls(el) {
|
||||
el.data('editor').refresh();
|
||||
$('#lean_overlay').hide(); // hide gray overlay
|
||||
}
|
||||
|
||||
// compile & save button
|
||||
function slow_refresh_hls(el) {
|
||||
el.delay(200).queue(function() {
|
||||
refresh_hls(el);
|
||||
$(this).dequeue();
|
||||
});
|
||||
// resize the codemirror box
|
||||
var h = el.height();
|
||||
el.find('.CodeMirror-scroll').height(h - 100);
|
||||
}
|
||||
|
||||
// $('#hls-modal-${hlskey}').find('.hls-compile').click(compile_hls_${hlskey});
|
||||
$('#hls-modal-${hlskey}').find('.hls-compile').click(function(){
|
||||
el = $('#hls-modal-${hlskey}');
|
||||
compile_hls(el);
|
||||
});
|
||||
|
||||
// connect to server using POST (requires cross-domain-access)
|
||||
// compile & save button
|
||||
hlsmodal.find('.hls-compile').click(function() {
|
||||
var el = $('#hls-modal-${hlskey}');
|
||||
compile_hls(el);
|
||||
});
|
||||
|
||||
function compile_hls(el){
|
||||
editor = el.data('editor')
|
||||
hlsdata = editor.getValue();
|
||||
// console.log('hlsdata=' + hlsdata);
|
||||
// connect to server using POST (requires cross-domain-access)
|
||||
|
||||
$.ajax({
|
||||
url: "https://studio-input-filter.mitx.mit.edu/latex2edx?raw=1",
|
||||
type: "POST",
|
||||
data: ""+hlsdata,
|
||||
crossDomain: true,
|
||||
processData: false,
|
||||
success: function(data){
|
||||
console.log('latex2edx success!');
|
||||
console.log(data);
|
||||
xml = data.xml;
|
||||
if (xml.length==0){
|
||||
alert('Conversion failed! error:'+ data.message);
|
||||
//set_status(el, "Conversion failed - please try another file", false);
|
||||
}else{
|
||||
//set_status(el, "Done!", true);
|
||||
// post_images(el, location, data, file);
|
||||
// post_source_code(el, location, file);
|
||||
el.closest('.component').find('.CodeMirror-wrap')[0].CodeMirror.setValue(xml);
|
||||
save_hls(el);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
alert('Error: cannot connect to word2edx server');
|
||||
console.log('error!');
|
||||
}
|
||||
});
|
||||
}
|
||||
function compile_hls(el) {
|
||||
var editor = el.data('editor')
|
||||
var hlsdata = editor.getValue();
|
||||
|
||||
## this version uses JSONP and GET, which limits file sizes
|
||||
function old_compile_hls_${hlskey}(){
|
||||
|
||||
editor = $('#hls-modal-${hlskey}').data('editor')
|
||||
var myquery = { latexin: editor.getValue() };
|
||||
|
||||
$.ajax({
|
||||
url: '${metadata.get('source_processor_url','https://studio-input-filter.mitx.mit.edu/latex2edx')}',
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
data: escape(JSON.stringify(myquery)),
|
||||
crossDomain: true,
|
||||
dataType: 'jsonp',
|
||||
jsonpCallback: 'process_return_${hlskey}',
|
||||
beforeSend: function (xhr) { xhr.setRequestHeader ("Authorization", "Basic eHFhOmFnYXJ3YWw="); },
|
||||
timeout : 7000,
|
||||
success: function(result) {
|
||||
console.log(result);
|
||||
},
|
||||
error: function() {
|
||||
alert('Error: cannot connect to latex2edx server');
|
||||
console.log('error!');
|
||||
$.ajax({
|
||||
url: "https://studio-input-filter.mitx.mit.edu/latex2edx?raw=1",
|
||||
type: "POST",
|
||||
data: "" + hlsdata,
|
||||
crossDomain: true,
|
||||
processData: false,
|
||||
success: function(data) {
|
||||
xml = data.xml;
|
||||
if (xml.length == 0) {
|
||||
alert('Conversion failed! error:' + data.message);
|
||||
} else {
|
||||
el.closest('.component').find('.CodeMirror-wrap')[0].CodeMirror.setValue(xml);
|
||||
save_hls(el);
|
||||
}
|
||||
});
|
||||
// $('#hls-modal-${hlskey}').hide();
|
||||
}
|
||||
|
||||
function process_return_${hlskey}(datadict){
|
||||
// datadict is json of array with "xml" and "message"
|
||||
// if "xml" value is '' then the conversion failed
|
||||
xml = datadict.xml;
|
||||
console.log('xml:');
|
||||
console.log(xml);
|
||||
if (xml.length==0){
|
||||
alert('Conversion failed! error:'+ datadict.message);
|
||||
}else{
|
||||
set_raw_edit_box(xml,'${hlskey}');
|
||||
save_hls($('#hls-modal-${hlskey}'));
|
||||
},
|
||||
error: function() {
|
||||
alert('Error: cannot connect to latex2edx server');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function process_return_${hlskey}(datadict) {
|
||||
// datadict is json of array with "xml" and "message"
|
||||
// if "xml" value is '' then the conversion failed
|
||||
var xml = datadict.xml;
|
||||
if (xml.length == 0) {
|
||||
alert('Conversion failed! error:' + datadict.message);
|
||||
} else {
|
||||
set_raw_edit_box(xml, '${hlskey}');
|
||||
save_hls($('#hls-modal-${hlskey}'));
|
||||
}
|
||||
}
|
||||
|
||||
function set_raw_edit_box(data,key){
|
||||
// get the codemirror editor for the raw-edit-box
|
||||
// it's a CodeMirror-wrap class element
|
||||
$('#hls-modal-'+key).closest('.component').find('.CodeMirror-wrap')[0].CodeMirror.setValue(data);
|
||||
}
|
||||
|
||||
// save button
|
||||
function set_raw_edit_box(data, key) {
|
||||
// get the codemirror editor for the raw-edit-box
|
||||
// it's a CodeMirror-wrap class element
|
||||
$('#hls-modal-' + key).closest('.component').find('.CodeMirror-wrap')[0].CodeMirror.setValue(data);
|
||||
}
|
||||
|
||||
$('#hls-modal-${hlskey}').find('.hls-save').click(function(){save_hls($('#hls-modal-${hlskey}'))});
|
||||
|
||||
function save_hls(el){
|
||||
el.find('.hls-data').val(el.data('editor').getValue());
|
||||
el.closest('.component').find('.save-button').click();
|
||||
}
|
||||
// save button
|
||||
|
||||
hlsmodal.find('.hls-save').click(function() {
|
||||
save_hls(hlsmodal);
|
||||
});
|
||||
|
||||
function save_hls(el) {
|
||||
el.find('.hls-data').val(el.data('editor').getValue());
|
||||
el.closest('.component').find('.save-button').click();
|
||||
}
|
||||
|
||||
## add upload and download links / buttons to component edit box
|
||||
$('#hls-modal-${hlskey}').closest('.component').find('.component-actions').append('<div id="link-${hlskey}" style="float:right;"></div>');
|
||||
hlsmodal.closest('.component').find('.component-actions').append('<div id="link-${hlskey}" style="float:right;"></div>');
|
||||
$('#link-${hlskey}').html('<a class="upload-button standard" id="upload-${hlskey}">upload</a>');
|
||||
$('#upload-${hlskey}').click(function(){
|
||||
$('#hls-modal-${hlskey}').closest('.component').find('.edit-button').trigger('click'); // open up editor window
|
||||
$('#hls-trig-${hlskey}').trigger('click'); // open up HLS editor window
|
||||
$('#hls-modal-${hlskey}').find('#hlsfile').trigger('click');
|
||||
});
|
||||
$('#upload-${hlskey}').click(function() {
|
||||
hlsmodal.closest('.component').find('.edit-button').trigger('click'); // open up editor window
|
||||
$('#hls-trig-${hlskey}').trigger('click'); // open up HLS editor window
|
||||
hlsmodal.find('#hlsfile').trigger('click');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user