Lazily instantiate codemirror instances

By taking advantage of the fact that a user can not interact
with codemirror instance until they are in the viewport, we can be
smart and only set the codemirror editors up once a user scrolls them into view.

For small notebooks this change has a limited impact, however for large
notebooks with 100s of code cells this change results in a significant
performance boost to the application, especially in the initial time to
render metric for notebooks.

ref #1546
Fixes #178

core/bower.json

@@ -22,6 +22,7 @@
     "big.js": "~2.5.1",
     "marked": "~0.3.3",
     "acorn": "0.3.1",
-    "katex-build": "~0.3.0"
+    "katex-build": "~0.3.0",
+    "scrollin": "~0.1.4"
   }
 }

core/src/main/web/app/mainapp/components/notebook/codecell-directive.js

@@ -56,7 +56,7 @@
         $scope.isError = function() {
           //jscs:disable
           if ($scope.cellmodel === undefined || $scope.cellmodel.output === undefined || $scope.cellmodel.output.result === undefined) {
-          //jscs:enable
+            //jscs:enable
             return false;
           }
 
@@ -342,11 +342,14 @@
           }
         });
 
-        scope.cm = CodeMirror.fromTextArea(element.find('textarea')[0], codeMirrorOptions);
+        Scrollin.track(element[0], {handler: function() {
+          scope.cm = CodeMirror.fromTextArea(element.find('textarea')[0], codeMirrorOptions);
+          scope.bkNotebook.registerCM(scope.cellmodel.id, scope.cm);
+          scope.cm.on('change', changeHandler);
+        }});
 
         scope.updateUI(scope.getEvaluator());
         scope.bkNotebook.registerFocusable(scope.cellmodel.id, scope);
-        scope.bkNotebook.registerCM(scope.cellmodel.id, scope.cm);
 
         // cellmodel.body --> CodeMirror
         scope.$watch('cellmodel.input.body', function(newVal, oldVal) {
@@ -370,8 +373,6 @@
           }
         };
 
-        scope.cm.on('change', changeHandler);
-
         var inputMenuDiv = element.find('.bkcell').first();
         scope.popupMenu = function(event) {
           var menu = inputMenuDiv.find('.dropdown').first();
@@ -417,6 +418,7 @@
         });
 
         scope.$on('$destroy', function() {
+          Scrollin.untrack(element[0]);
           CodeMirror.off(window, 'resize', resizeHandler);
           CodeMirror.off('change', changeHandler);
           scope.bkNotebook.unregisterFocusable(scope.cellmodel.id);

core/src/main/web/app/template/index_template.html

@@ -86,6 +86,7 @@
   <script src="vendor/bower_components/codemirror/keymap/emacs.js"></script>
   <script src="vendor/bower_components/acorn/acorn.js"></script>
   <script src="vendor/bower_components/q/q.js"></script>
+  <script src="vendor/bower_components/scrollin/dist/index.js"></script>
   <script src="vendor/bower_components/underscore.string/lib/underscore.string.js"></script>
   <script src="vendor/angular-ui/ui-utils.min.js"></script>
   <script src="vendor/cometd/cometd.js"></script>