Supply loading_timeout attribute for jsinput tag.

(cherry picked from commit b7ee0233c9a370428d7473e8ce7c7d73fc471519)

common/lib/capa/capa/inputtypes.py

@@ -585,8 +585,10 @@ class JSInput(InputTypeBase):
                                              #   set state
             Attribute('width', "400"),       # iframe width
             Attribute('height', "300"),      # iframe height
-            Attribute('sop', None)           # SOP will be relaxed only if this
-                                             # attribute is set to false.
+            Attribute('sop', None),           # SOP will be relaxed only if this
+                                              # attribute is set to false.
+            Attribute('loading_timeout', None)  # Timeout that is used when
+                                                # loading JS application.
         ]
 
     def _extra_context(self):

common/lib/capa/capa/templates/jsinput.html

@@ -15,6 +15,9 @@
     % if sop:
     data-sop="${sop}"
     % endif
+    % if loading_timeout:
+    data-loading-timeout="${loading_timeout}"
+    % endif
     data-processed="false"
     >
 

common/static/js/capa/src/jsinput.js

@@ -32,6 +32,7 @@ var JSInput = (function ($, undefined) {
 
     /*      END     Utils                                   */
 
+    var loadingTimeout = 300;
 
     function jsinputConstructor(elem) {
         // Define an class that will be instantiated for each jsinput element
@@ -205,15 +206,26 @@ var JSInput = (function ($, undefined) {
         });
     }
 
+    function getLoadingTimeout() {
+        var allSections = $('section.jsinput'), timeout;
+        allSections.each(function(index, value) {
+            timeout = $(value).attr("data-loading-timeout");
+            if (timeout && isFinite(timeout)) {
+                loadingTimeout = Math.max(loadingTimeout, timeout);
+            }
+        });
+    }
+
     // This is ugly, but without a timeout pages with multiple/heavy jsinputs
     // don't load properly.
     // 300 ms is arbitrary but this has functioned with the only application 
     // that has ever used JSInput, jsVGL. Something more sturdy should be put in
     // place.
+    getLoadingTimeout();
     if ($.isReady) {
-        setTimeout(walkDOM, 300);
+        setTimeout(walkDOM, loadingTimeout);
     } else {
-        $(document).ready(setTimeout(walkDOM, 300));
+        $(document).ready(setTimeout(walkDOM, loadingTimeout));
     }
 
     return {

docs/en_us/developers/source/extending_platform/javascript.rst

@@ -313,3 +313,9 @@ The following table describes the attributes of the ``jsinput`` element.
      - The same-origin policy (SOP), meaning that all elements have the same
        protocol, host, and port. To bypass the SOP, set to ``true``.
      - false
+   * - loading_timeout
+     - Timeout (in ms) that lets a heavy JS application load before JSInput is
+       initialized. If multiple JSInput have the above parameter set and are
+       included in a page, the largest value will be retained.
+     - 300
+