From b75ccbdcce2af0969239f32f1e432b5dc536f9fa Mon Sep 17 00:00:00 2001
From: ichuang <ichuang@mit.edu>
Date: Thu, 28 Feb 2013 04:18:16 +0000
Subject: [PATCH] address Christina's comments re js in latex2edx
 source-edit.html

---
 cms/templates/widgets/source-edit.html | 262 ++++++++++++-------------
 1 file changed, 121 insertions(+), 141 deletions(-)

diff --git a/cms/templates/widgets/source-edit.html b/cms/templates/widgets/source-edit.html
index d3afbdf040..c7460c9cf7 100644
--- a/cms/templates/widgets/source-edit.html
+++ b/cms/templates/widgets/source-edit.html
@@ -18,7 +18,7 @@
         <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>
+	<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>