edx-platform/cms/templates/widgets/source-edit.html

<%
  import hashlib
  hlskey = hashlib.md5(module.location.url()).hexdigest()
%>

  <section id="hls-modal-${hlskey}" class="upload-modal modal" style="width:90%!important; left:5%!important; margin-left:0px!important; height:90%; overflow:auto; background:#ECF7D3;" >
  <a href="#" class="close-button"><span class="close-icon"></span></a>
  <div id="hls-div">
    <header>
      <h2>High Level Source Editing</h2>
    </header>

    <form id="hls-form" enctype="multipart/form-data">
      <section class="source-edit">
          <textarea name="" data-metadata-name="source_code" class="source-edit-box hls-data" rows="8" cols="40">${metadata['source_code']|h}</textarea>
      </section>
      <div class="submit">
        <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-refresh">Refresh</button>
	<div style="display:none"><input type="file" name="hlsfile" id="hlsfile" /></div>
        <span id="message"></span>
        <button type="reset" class="hls-upload" style="float:right">Upload</button>
      </div>
    </form>

  </div>
  </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"});

     $('#hls-modal-${hlskey}').data('editor',CodeMirror.fromTextArea($('#hls-modal-${hlskey}').find('.hls-data')[0], {lineNumbers: true, mode: 'stex'}));

     $('#hls-trig-${hlskey}').click(function(){slow_refresh_hls($('#hls-modal-${hlskey}'))})

     // file upload button
     $('#hls-modal-${hlskey}').find('.hls-upload').click(function(){
            $('#hls-modal-${hlskey}').find('#hlsfile').trigger('click');
	    });

     $('#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);

	var reader = new FileReader();
	reader.onload = function(event) {
	    var contents = event.target.result;
	    process_file_contents(el, contents);
	};
	reader.readAsText(file);
     });

     // 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');
     }

     // refresh button

     $('#hls-modal-${hlskey}').find('.hls-refresh').click(function(){refresh_hls($('#hls-modal-${hlskey}'))});

     function refresh_hls(el){
	 el.data('editor').refresh();
	 // hide gray overlay
	 $('#lean_overlay').hide();
      }

     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);
     }

     // compile & save button

     //  $('#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)

     function compile_hls(el){	
          editor = el.data('editor')
          hlsdata = editor.getValue();
	  // console.log('hlsdata=' + hlsdata);

          $.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!');
                   }
         });
     }

     ## 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();
     }

     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 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

     $('#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();
     }

  ## 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>');
  $('#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');
   });

  </script>