moar ace refactoring action

pgbovine · pgbovine · commit fc96d125aa10 · 2014-07-04T10:15:14.000-04:00
diff --git a/v3/css/opt-frontend.css b/v3/css/opt-frontend.css
@@ -51,17 +51,12 @@ table#pyOutputPane {
   margin-right: auto;
 }
 
-#codeInputPane, #codeInputPaneAce {
+#codeInputPane {
   margin-top: 5px;
   font-size: 12pt;
   border: 1px solid #ddd;
 }
 
-#codeInputPaneAce {
-  width: 700px;
-  height: 420px;
-}
-
 button.smallBtn {
   font-size: 10pt;
   padding: 3px;
diff --git a/v3/js/opt-frontend-common.js b/v3/js/opt-frontend-common.js
@@ -67,6 +67,27 @@ var appMode = 'edit'; // 'edit' or 'display'. also support
 var pyInputCodeMirror; // CodeMirror object that contains the input code
 var pyInputAceEditor; // Ace editor object that contains the input code
 
+var useCodeMirror = true; // true -> use CodeMirror, false -> use Ace
+var useCodeMirror = false; // true -> use CodeMirror, false -> use Ace
+
+
+function initAceEditor(height) {
+  pyInputAceEditor = ace.edit('codeInputPane');
+  var s = pyInputAceEditor.getSession();
+  s.setMode("ace/mode/python");
+  // tab -> 4 spaces
+  s.setTabSize(4);
+  s.setUseSoftTabs(true);
+  // disable extraneous indicators:
+  s.setFoldStyle('manual'); // no code folding indicators
+  pyInputAceEditor.setHighlightActiveLine(false);
+  pyInputAceEditor.setShowPrintMargin(false);
+  pyInputAceEditor.setBehavioursEnabled(false);
+
+  $('#codeInputPane').css('width', '700px');
+  $('#codeInputPane').css('height', height + 'px');
+}
+
 
 // BEGIN - shared session stuff
 
@@ -529,7 +550,13 @@ function pyInputGetValue() {
 }
 
 function pyInputSetValue(dat) {
-  pyInputCodeMirror.setValue(dat.rtrim() /* kill trailing spaces */);
+  if (useCodeMirror) {
+    pyInputCodeMirror.setValue(dat.rtrim() /* kill trailing spaces */);
+  }
+  else {
+    pyInputAceEditor.setValue(dat.rtrim() /* kill trailing spaces */);
+  }
+
   $('#urlOutput,#embedCodeOutput').val('');
 
   clearFrontendError();
@@ -568,40 +595,44 @@ function genericOptFrontendReady() {
   });
 
 
-  pyInputCodeMirror = CodeMirror(document.getElementById('codeInputPane'), {
-    mode: 'python',
-    lineNumbers: true,
-    tabSize: 4,
-    indentUnit: 4,
-    // convert tab into four spaces:
-    extraKeys: {Tab: function(cm) {cm.replaceSelection("    ", "end");}}
-  });
-
-  pyInputCodeMirror.setSize(null, '420px');
-
+  if (useCodeMirror) {
+    pyInputCodeMirror = CodeMirror(document.getElementById('codeInputPane'), {
+      mode: 'python',
+      lineNumbers: true,
+      tabSize: 4,
+      indentUnit: 4,
+      // convert tab into four spaces:
+      extraKeys: {Tab: function(cm) {cm.replaceSelection("    ", "end");}}
+    });
 
-  pyInputAceEditor = ace.edit('codeInputPaneAce');
-  var s = pyInputAceEditor.getSession();
-  s.setMode("ace/mode/python");
-  // tab -> 4 spaces
-  s.setTabSize(4);
-  s.setUseSoftTabs(true);
-  // disable extraneous indicators:
-  s.setFoldStyle('manual'); // no code folding indicators
-  pyInputAceEditor.setHighlightActiveLine(false);
-  pyInputAceEditor.setShowPrintMargin(false);
-  pyInputAceEditor.setBehavioursEnabled(false);
+    pyInputCodeMirror.setSize(null, '420px');
+  }
+  else {
+    initAceEditor(420);
+  }
 
 
-  // for shared sessions
-  pyInputCodeMirror.on("change", function(cm, change) {
-    // only trigger when the user explicitly typed something
-    if (change.origin != 'setValue') {
+  if (useCodeMirror) {
+    // for shared sessions
+    pyInputCodeMirror.on("change", function(cm, change) {
+      // only trigger when the user explicitly typed something
+      if (change.origin != 'setValue') {
+        if (TogetherJS.running) {
+          TogetherJS.send({type: "codemirror-edit"});
+        }
+      }
+    });
+  }
+  else {
+    pyInputAceEditor.getSession().on("change", function(e) {
+      // unfortunately, Ace doesn't detect whether a change was caused
+      // by a setValue call
       if (TogetherJS.running) {
         TogetherJS.send({type: "codemirror-edit"});
       }
-    }
-  });
+    });
+  }
+
 
   $(pyInputScroller).scroll(function(e) {
     if (TogetherJS.running) {
@@ -807,7 +838,7 @@ function setToggleOptions(dat) {
 function getAppState() {
   assert(originFrontendJsFile); // global var defined in each frontend
 
-  var ret = {code: pyInputCodeMirror.getValue(),
+  var ret = {code: pyInputGetValue(),
              mode: appMode,
              origin: originFrontendJsFile,
              cumulative: $('#cumulativeModeSelector').val(),
@@ -964,7 +995,7 @@ function updateAppDisplay(newAppMode) {
 
 function executeCodeFromScratch() {
   // don't execute empty string:
-  if ($.trim(pyInputCodeMirror.getValue()) == '') {
+  if ($.trim(pyInputGetValue()) == '') {
     setFronendError(["Type in some Python code to visualize."]);
     return;
   }
diff --git a/v3/visualize.html b/v3/visualize.html
@@ -177,8 +177,7 @@
 <div id="pyInputPane">
 
 <div id="codeInputWarnings">Write Python code here or <a href="#" id="firstExampleDupLink">load an example</a>:</div>
-<div id="codeInputPane"></div> <!-- populate with a CodeMirror instance -->
-<div id="codeInputPaneAce"></div> <!-- populate with an Ace instance -->
+<div id="codeInputPane"></div> <!-- populate with a CodeMirror or Ace code editor instance -->
 <div id="frontendErrorOutput"></div>
 <div id="surveyPane"></div>
 
