AJAX functions into an object

media/javascript/rtd.js

@@ -97,21 +97,35 @@ function guessRepo() {
 }
 
 
-// Show an animated 'loading' gif while we get the current details of the build
-// with `buildId` from the server.
-//
-// On success, hide the loading gif, populate any <span> nodes that have ids
-// matching the pattern "build-<field name in `data` object>", and if the build
-// state is "finished" clear the client-side polling interval with ID
-// `intervalId`.
-function updateBuildDetails(buildId, intervalId) {
-    $('div#build-' + buildId + ' img.build-loading').removeClass('hide');
+(function () {
+
+    // Constructor.
+    this.BuildUpdater = function(buildId) {
+        this.buildId = buildId;
+        this.buildUrl = '/api/v1/build/' + this.buildId;
+        this.buildDiv = 'div#build-' + this.buildId;
+        this.buildLoadingImg = this.buildDiv + ' img.build-loading';
+        this.intervalId = null;
+    };
+
+    BuildUpdater.prototype.stopPolling = function() {
+        $(this.buildLoadingImg).addClass('hide');
+        clearInterval(this.intervalId);
+    };
+
+    // Show an animated 'loading' gif while we get the current details of the build
+    // with `buildId` from the server.
+    //
+    // On success, hide the loading gif, populate any <span> nodes that have ids
+    // matching the pattern "build-<field name in `data` object>" and clear
+    // `this.intervalId`.
+    BuildUpdater.prototype.updateBuildDetails = function(data) {
+        var _this = this;
 
-    $.get('/api/v1/build/' + buildId, function(data) {
         for (var prop in data) {
             if (data.hasOwnProperty(prop)) {
                 var val = data[prop];
-                var el = $('div#build-' + buildId + ' span#build-' + prop);
+                var el = $(this.buildDiv + ' span#build-' + prop);
 
                 if (prop == 'success') {
                     val = val ? "Passed" : "Failed";
@@ -121,8 +135,7 @@ function updateBuildDetails(buildId, intervalId) {
                     val = val.charAt(0).toUpperCase() + val.slice(1);
                     
                     if (val == 'Finished') {
-                        $('div#build-' + buildId + ' img.build-loading').addClass('hide');
-                        clearInterval(intervalId);
+                        _this.stopPolling();
                     }
                 }
 
@@ -131,34 +144,46 @@ function updateBuildDetails(buildId, intervalId) {
                 }
             }
         }
-    });
-}
+    };
 
+    BuildUpdater.prototype.getBuildDetails = function() {
+        var _this = this;
 
-// If the the build with ID `buildId` has a state other than finished, poll the
-// server every 5 seconds for the current status. Update the details page with
-// the latest values from the server, to keep the user informed of progress.
-//
-// If we never get a 'finished' state back from the server, stop polling after
-// 10 minutes.
-function pollForBuildDetails(buildId) {
-    var stateSpan = $('div#build-' + buildId + ' span#build-state');
+        $.get(this.buildUrl, function(data) {
+            _this.updateBuildDetails(data);
+        });
+    };
 
-    // If the build is already finished, or it isn't displayed on the page,
-    // ignore it.
-    if (stateSpan.text() == 'Finished' || stateSpan.length == 0) {
-        return;
-    }
+    // If the build with ID `this.buildId` has a state other than finished, poll
+    // the server every 5 seconds for the current status. Update the details
+    // page with the latest values from the server, to keep the user informed of
+    // progress.
+    //
+    // If we never get a 'finished' state back from the server, stop polling
+    // after 10 minutes.
+    BuildUpdater.prototype.startPolling = function() {
+        var stateSpan = $(this.buildDiv + ' span#build-state');
+        var _this = this;
 
-    updateBuildDetails(buildId, intervalId);
+        // If the build is already finished, or it isn't displayed on the page,
+        // ignore it.
+        if (stateSpan.text() == 'Finished' || stateSpan.length === 0) {
+            return;
+        }
 
-    var intervalId = setInterval(function() {
-        updateBuildDetails(buildId, intervalId);
-    }, 5000);
+        $(this.buildLoadingImg).removeClass('hide');
 
-    // Stop polling after 10 minutes, in case the build never finishes.
-    setTimeout(function() {
-        updateBuildDetails(buildId, intervalId);
-    }, 600000);
-}
+        this.getBuildDetails();
+
+        var intervalId = setInterval(function () {
+            _this.getBuildDetails();
+        }, 5000);
+
+        // Stop polling after 10 minutes, in case the build never finishes.
+        setTimeout(function() {
+            _this.stopPolling();
+        }, 600000);
+    };
+
+}).call(this);
 

readthedocs/templates/builds/build_detail.html

@@ -44,7 +44,7 @@
 {{ block.super }}
   <script type="text/javascript">
     $(function() {
-      pollForBuildDetails({{ build.id }});
+        new BuildUpdater({{ build.id }}).startPolling();
     });
   </script>
 {% endblock %}

readthedocs/templates/builds/build_list.html

@@ -37,7 +37,7 @@
   <script type="text/javascript">
     $(function() {
       {% for build in active_builds %}
-        pollForBuildDetails({{ build.id }});
+        new BuildUpdater({{ build.id }}).startPolling();
       {% endfor %}
     });
   </script>