Add linkTo util function

Formgrader could be loaded in one of two different contexts: on its own
from a notebook, or inside an iframe a lab. When navigating to a page
outside the formgrader application, this presents an issue in that these
two contexts need different navigation mechanisms.

Previously, the mechanism was decided by looking at the name of the
jupyter-server application. If it was `jupyter-notebook` (notebook<7),
use href. Otherwise, use postMessage. However, it's possible to use the
notebook interface without `jupyter-notebook`, e.g. `jupyter-server`.

Now the mechanism is decided by context clues inside the browser, i.e.
whether formgrader is inside an iframe.

This commit adds a `linkTo` function which is applied to
jQuery elements via `.map` and applies either href or postMessage nav
mechanisms based on whether the current window is the top window.

Additionally, it completely removes the `is_lab` and `is_jlab` checks
as they were relatively naive and add complexity that doesn't need
to be there.

nbgrader/server_extensions/formgrader/base.py

@@ -4,6 +4,7 @@
 
 from tornado import web
 from jupyter_server.base.handlers import JupyterHandler
+from jupyter_server.utils import url_path_join, url_is_absolute
 from ...api import Gradebook
 from ...apps.api import NbGraderAPI
 
@@ -41,7 +42,10 @@ def gradebook(self):
 
     @property
     def mathjax_url(self):
-        return self.settings['mathjax_url']
+        url = self.settings.get("mathjax_url", "")
+        if not url or url_is_absolute(url):
+            return url
+        return url_path_join(self.base_url or "/", url)
 
     @property
     def exporter(self):

nbgrader/server_extensions/formgrader/handlers.py

@@ -17,7 +17,6 @@ def get(self):
             "manage_assignments.tpl",
             url_prefix=self.url_prefix,
             base_url=self.base_url,
-            is_lab=int(self.settings['is_jlab']),
             windows=(sys.prefix == 'win32'),
             course_id=self.api.course_id,
             exchange=self.api.exchange_root,
@@ -108,10 +107,9 @@ def get(self, submission_id):
             'index': ix,
             'total': len(indices),
             'base_url': self.base_url,
-            'my_mathjax_url': self.mathjax_url if self.settings['is_jlab'] else self.base_url + '/' + self.mathjax_url,
+            'my_mathjax_url': self.mathjax_url,
             'student': student_id,
             'last_name': submission.student.last_name,
-            'last_name': submission.student.last_name,
             'first_name': submission.student.first_name,
             'notebook_path': self.url_prefix + '/' + relative_path
         }

nbgrader/server_extensions/formgrader/static/js/manage_assignments.js

@@ -34,7 +34,6 @@ var AssignmentUI = Backbone.View.extend({
         this.listenTo(this.model, "request", this.animateSaving);
         this.listenTo(this.model, "sync", this.closeModal);
 
-        this.is_lab = options.is_lab || false;
         this.render();
     },
 
@@ -97,22 +96,14 @@ var AssignmentUI = Backbone.View.extend({
 
     render: function () {
         this.clear();
-        var this_assignment = this;
+
         // assignment name
         var name = this.model.get("name")
         this.$name.attr("data-order", name);
 
-        /* Append link with :
-         *     - href if this is a Notebook<7 environment
-         *     - click listener to send message to iframe parent if this is Jupyter Lab environment
-         */
         this.$name.append($("<a/>")
             .text(name)
-            .attr("target", self.is_lab ? undefined : "_blank")
-            .attr("href", self.is_lab ? undefined : base_url + "/tree/" + url_prefix + "/" + this.model.get("source_path"))
-            .click(self.is_lab ? function(){
-                window.parent.postMessage(jlab_go_to_path(url_prefix + "/" + this_assignment.model.get("source_path")), '*');
-            } : undefined)
+            .map(linkTo("directory", url_prefix + "/" + this.model.get("source_path")))
         );
 
         // duedate
@@ -154,16 +145,8 @@ var AssignmentUI = Backbone.View.extend({
         // preview student version
         var release_path = this.model.get("release_path");
         if (release_path) {
-            /* Append link with :
-             *     - href if this is a Notebook<7 environment
-             *     - click listener to send message to iframe parent if this is Jupyter Lab environment
-             */
             this.$preview.append($("<a/>")
-                .attr("target", self.is_lab ? undefined : "_blank")
-                .attr("href", self.is_lab ? undefined : base_url + "/tree/" + url_prefix + "/" + release_path)
-                .click(self.is_lab ? function(){
-                        window.parent.postMessage(jlab_go_to_path(url_prefix + "/" + release_path), '*');
-                    } : undefined)
+                .map(linkTo("directory", url_prefix + "/" + release_path))
                 .append($("<span/>")
                     .addClass("glyphicon glyphicon-search")
                     .attr("aria-hidden", "true")));
@@ -215,20 +198,20 @@ var AssignmentUI = Backbone.View.extend({
         // generate feedback
         if (num_submissions > 0) {
             this.$generate_feedback.append($("<a/>")
-		.attr("href", "#")
+                .attr("href", "#")
                 .click(_.bind(this.generate_feedback, this))
-		.append($("<span/>")
-		   .addClass("glyphicon glyphicon-comment")
+                .append($("<span/>")
+                    .addClass("glyphicon glyphicon-comment")
                    .attr("aria-hidden", "true")));
         }
 
         //  feedback
         if (num_submissions > 0) {
             this.$release_feedback.append($("<a/>")
-		.attr("href", "#")
+                .attr("href", "#")
                 .click(_.bind(this.release_feedback, this))
-		.append($("<span/>")
-		   .addClass("glyphicon glyphicon-envelope")
+                .append($("<span/>")
+                    .addClass("glyphicon glyphicon-envelope")
                    .attr("aria-hidden", "true")));
         }
 
@@ -579,7 +562,7 @@ var createAssignmentModal = function () {
     modal = createModal("add-assignment-modal", "Add New Assignment", body, footer);
 };
 
-var loadAssignments = function (is_lab=false) {
+var loadAssignments = function () {
     var tbl = $("#main-table");
 
     models = new Assignments();
@@ -592,7 +575,6 @@ var loadAssignments = function (is_lab=false) {
                 var view = new AssignmentUI({
                     "model": model,
                     "el": insertRow(tbl),
-                    "is_lab": is_lab
                 });
                 views.push(view);
             });
@@ -605,8 +587,6 @@ var loadAssignments = function (is_lab=false) {
 var models = undefined;
 var views = [];
 
-var is_lab = is_lab || false;
-
 $(window).on('load', function () {
-    loadAssignments(is_lab);
+    loadAssignments();
 });

nbgrader/server_extensions/formgrader/static/js/utils.js

@@ -87,3 +87,44 @@ var insertDataTable = function (tbl) {
         }]
     });
 };
+
+var linkTo = function (type, path) {
+    /*
+     * Connect a link in the appropriate manner for the context.
+     * - If we're in the outermost frame, assume notebook and use an href.
+     * - If we're in an iframe, assume lab and send a message.
+     */
+    if (window === window.top) {
+        var prefix = {
+            notebook: "/notebooks/",
+            file: "/edit/",
+            directory: "/tree/"
+        }[type];
+
+        return (_, el) => {
+            return $(el)
+                .attr("href", prefix + path)
+                .attr("target", "_blank")[0];
+        };
+    } else {
+        var command = {
+            notebook: "docmanager:open",
+            file: "docmanager:open",
+            directory: "filebrowser:go-to-path",
+        }[type];
+
+        return (_, el) => {
+            return $(el)
+                .attr("href", "#")
+                .click(() => {
+                    window.parent.postMessage(
+                        JSON.stringify({
+                            "command": command,
+                            "arguments": {"path": path}
+                        }),
+                        "*"
+                    );
+                })[0];
+        }
+    }
+}

nbgrader/server_extensions/formgrader/templates/base.tpl

@@ -10,7 +10,6 @@
   <script src="{{ base_url }}/formgrader/static/components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
   <script src="{{ base_url }}/formgrader/static/js/backbone_xsrf.js"></script>
   <script src="{{ base_url }}/formgrader/static/js/utils.js"></script>
-  <script src="{{ base_url }}/formgrader/static/js/jupyterlab_utils.js"></script>
 
   <link rel="stylesheet" href="{{ base_url }}/formgrader/static/components/bootstrap/css/bootstrap.min.css" />
   <link rel="stylesheet" href="{{ base_url }}/formgrader/static/components/datatables.net-bs/css/dataTables.bootstrap.min.css">

nbgrader/server_extensions/formgrader/templates/formgrade/formgrade_macros.html.j2

@@ -20,6 +20,7 @@ var base_url = "{{ resources.base_url }}/formgrader";
 <script src="{{ resources.base_url }}/formgrader/static/js/formgrade_keyboardmanager.js"></script>
 <script src="{{ resources.base_url }}/formgrader/static/js/formgrade_models.js"></script>
 <script src="{{ resources.base_url }}/formgrader/static/js/formgrade.js"></script>
+<script src="{{ resources.base_url }}/formgrader/static/js/utils.js"></script>
 <script type="text/javascript">
 function toggle_name(on) {
   $(".name-shown").tooltip('hide');
@@ -33,12 +34,11 @@ function toggle_name(on) {
   }
 }
 
-function jlab_open_notebook(notebook_path) {
-  return JSON.stringify({
-    "command": "docmanager:open",
-    "arguments": {"path": notebook_path}
+$(document).ready(function() {
+  $("[data-link]").each(function() {
+    $(this).map(linkTo("notebook", $(this).data("link"))).removeAttr("data-link");
   });
-}
+});
 </script>
 
 <link rel="stylesheet" href="{{ resources.base_url }}/formgrader/static/components/bootstrap/css/bootstrap.min.css" />
@@ -64,20 +64,12 @@ function jlab_open_notebook(notebook_path) {
             <li><a href="{{ resources.base_url }}/formgrader/gradebook/{{ resources.assignment_id }}/{{ resources.notebook_id }}">{{ resources.notebook_id }}</a></li>
             <li class="active live-notebook">
               <a class="name-hidden" data-toggle="tooltip" data-placement="bottom" title="Open live notebook"
-                {%- if is_lab -%}
-                onclick='window.parent.postMessage(jlab_open_notebook("{{ resources.notebook_path }}"), "*");'
-                {%- else -%}
-                target="_blank" href="{{ resources.base_url }}/notebooks/{{ resources.notebook_path }}"
-                {%- endif -%}
+                data-link="{{ resources.notebook_path }}"
               >
                 Submission #{{ resources.index + 1 }}
               </a>
               <a class="name-shown" data-toggle="tooltip" data-placement="bottom" title="Open live notebook"
-                {%- if is_lab -%}
-                onclick='window.parent.postMessage(jlab_open_notebook("{{ resources.notebook_path }}"), "*"); '
-                {%- else -%}
-                target="_blank" href="{{ resources.base_url }}/notebooks/{{ resources.notebook_path }}"
-                {%- endif -%}
+                data-link="{{ resources.notebook_path }}"
               >
                 {%- if resources.last_name and resources.first_name -%}
                 {{ resources.last_name }}, {{ resources.first_name }}
@@ -107,4 +99,4 @@ function jlab_open_notebook(notebook_path) {
   $('span.glyphicon.name-hidden').tooltip({title: "Show student name", placement: "bottom", trigger: "hover"});
   $('span.glyphicon.name-shown').tooltip({title: "Hide student name", placement: "bottom", trigger: "hover"});
   </script>
-{% endmacro %}
+{% endmacro %}

nbgrader/server_extensions/formgrader/templates/manage_assignments.tpl

@@ -3,7 +3,6 @@
 {%- block head -%}
 <script>
 var url_prefix = "{{ url_prefix }}";
-var is_lab = {% if is_lab %}true{% else %}false{% endif %};
 </script>
 
 <script src="{{ base_url }}/formgrader/static/js/manage_assignments.js"></script>