Skip to content

E
edx-platform
Commit b75ccbdc by ichuang
Options

address Christina's comments re js in latex2edx source-edit.html

parent b6cf206f
Showing with 136 additions and 156 deletions
cms/templates/widgets/source-edit.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<button type="reset" class="hls-compile">Save &amp; Compile to edX XML</button> <button type="reset" class="hls-compile">Save &amp; Compile to edX XML</button>
<button type="reset" class="hls-save">Save</button> <button type="reset" class="hls-save">Save</button>
<button type="reset" class="hls-refresh">Refresh</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> <span id="message"></span>
<button type="reset" class="hls-upload" style="float:right">Upload</button> <button type="reset" class="hls-upload" style="float:right">Upload</button>
</div> </div>
...@@ -28,168 +28,148 @@ ...@@ -28,168 +28,148 @@
</section> </section>
<script type="text/javascript" src="/static/js/vendor/CodeMirror/stex.js"></script> <script type="text/javascript" src="/static/js/vendor/CodeMirror/stex.js"></script>
<script type="text/javascript"> <script type = "text/javascript">
$('#hls-trig-${hlskey}').leanModal({ top:40, overlay:0.8, closeButton: ".close-button"}); 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({
$('#hls-trig-${hlskey}').click(function(){slow_refresh_hls($('#hls-modal-${hlskey}'))}) top: 40,
overlay: 0.8,
// file upload button closeButton: ".close-button"
$('#hls-modal-${hlskey}').find('.hls-upload').click(function(){ });
$('#hls-modal-${hlskey}').find('#hlsfile').trigger('click');
}); hlsmodal.data('editor', CodeMirror.fromTextArea(hlsmodal.find('.hls-data')[0], {
lineNumbers: true,
$('#hls-modal-${hlskey}').find('#hlsfile').change(function() { mode: 'stex'
console.log('handler for hlsfile input called'); }));
var file = $('#hls-modal-${hlskey}').find('#hlsfile')[0].files[0];
el = $('#hls-modal-${hlskey}'); $('#hls-trig-${hlskey}').click(function() {
console.log(file);
## this ought to be done using css instead
var reader = new FileReader(); hlsmodal.attr('style', function(i,s) { return s + ' margin-left:0px !important; left:5%' });
reader.onload = function(event) {
var contents = event.target.result; ## setup file input
process_file_contents(el, contents); ## need to insert this only after hls triggered, because otherwise it
}; ## causes other <form> elements to become multipart/form-data,
reader.readAsText(file); ## thus breaking multiple-choice input forms, for example.
}); $('#hls-finput').append('<input type="file" name="hlsfile" id="hlsfile" />');
// file upload processing var el = $('#hls-modal-${hlskey}');
function process_file_contents(el, contents){ setup_autoupload(el);
// console.log("File contents: " + contents); slow_refresh_hls(el);
editor = el.data('editor'); });
editor.setValue(contents);
console.log('doing compile and save'); // file upload button
// trigger compile & save hlsmodal.find('.hls-upload').click(function() {
el.find('.hls-compile').trigger('click'); $('#hls-modal-${hlskey}').find('#hlsfile').trigger('click');
} });
// refresh button // auto-upload after file is chosen
function setup_autoupload(el){
$('#hls-modal-${hlskey}').find('.hls-refresh').click(function(){refresh_hls($('#hls-modal-${hlskey}'))}); el.find('#hlsfile').change(function() {
var file = el.find('#hlsfile')[0].files[0];
function refresh_hls(el){
el.data('editor').refresh(); var reader = new FileReader();
// hide gray overlay reader.onload = function(event) {
$('#lean_overlay').hide(); var contents = event.target.result;
} el.data('editor').setValue(contents);
// trigger compile & save
function slow_refresh_hls(el){ el.find('.hls-compile').trigger('click');
el.delay(200).queue(function(){ };
refresh_hls(el); reader.readAsText(file);
$(this).dequeue(); });
}); }
// resize the codemirror box
h = el.height(); // refresh button
el.find('.CodeMirror-scroll').height(h-100); hlsmodal.find('.hls-refresh').click(function() {
} refresh_hls(hlsmodal);
});
// compile & save button
function refresh_hls(el) {
// $('#hls-modal-${hlskey}').find('.hls-compile').click(compile_hls_${hlskey}); el.data('editor').refresh();
$('#hls-modal-${hlskey}').find('.hls-compile').click(function(){ $('#lean_overlay').hide(); // hide gray overlay
el = $('#hls-modal-${hlskey}'); }
compile_hls(el);
}); function slow_refresh_hls(el) {
el.delay(200).queue(function() {
// connect to server using POST (requires cross-domain-access) refresh_hls(el);
$(this).dequeue();
function compile_hls(el){ });
editor = el.data('editor') // resize the codemirror box
hlsdata = editor.getValue(); var h = el.height();
// console.log('hlsdata=' + hlsdata); el.find('.CodeMirror-scroll').height(h - 100);
}
$.ajax({
url: "https://studio-input-filter.mitx.mit.edu/latex2edx?raw=1", // compile & save button
type: "POST", hlsmodal.find('.hls-compile').click(function() {
data: ""+hlsdata, var el = $('#hls-modal-${hlskey}');
crossDomain: true, compile_hls(el);
processData: false, });
success: function(data){
console.log('latex2edx success!'); // connect to server using POST (requires cross-domain-access)
console.log(data);
xml = data.xml; function compile_hls(el) {
if (xml.length==0){ var editor = el.data('editor')
alert('Conversion failed! error:'+ data.message); var hlsdata = editor.getValue();
//set_status(el, "Conversion failed - please try another file", false);
}else{ $.ajax({
//set_status(el, "Done!", true); url: "https://studio-input-filter.mitx.mit.edu/latex2edx?raw=1",
// post_images(el, location, data, file); type: "POST",
// post_source_code(el, location, file); data: "" + hlsdata,
el.closest('.component').find('.CodeMirror-wrap')[0].CodeMirror.setValue(xml); crossDomain: true,
save_hls(el); processData: false,
} success: function(data) {
}, xml = data.xml;
error: function() { if (xml.length == 0) {
alert('Error: cannot connect to word2edx server'); alert('Conversion failed! error:' + data.message);
console.log('error!'); } else {
} el.closest('.component').find('.CodeMirror-wrap')[0].CodeMirror.setValue(xml);
}); save_hls(el);
}
## 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!');
} }
}); },
// $('#hls-modal-${hlskey}').hide(); 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
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}'));
} }
} });
}
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);
}
function set_raw_edit_box(data,key){ // save button
// 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 hlsmodal.find('.hls-save').click(function() {
save_hls(hlsmodal);
});
$('#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());
function save_hls(el){ el.closest('.component').find('.save-button').click();
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 ## 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>'); $('#link-${hlskey}').html('<a class="upload-button standard" id="upload-${hlskey}">upload</a>');
$('#upload-${hlskey}').click(function(){ $('#upload-${hlskey}').click(function() {
$('#hls-modal-${hlskey}').closest('.component').find('.edit-button').trigger('click'); // open up editor window hlsmodal.closest('.component').find('.edit-button').trigger('click'); // open up editor window
$('#hls-trig-${hlskey}').trigger('click'); // open up HLS editor window $('#hls-trig-${hlskey}').trigger('click'); // open up HLS editor window
$('#hls-modal-${hlskey}').find('#hlsfile').trigger('click'); hlsmodal.find('#hlsfile').trigger('click');
}); });
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment