mozreview: add 'reviewed' buttons via events (bug 1321068) r?davidwalsh draft
authorbyron jones <glob@mozilla.com>
Wed, 30 Nov 2016 15:06:49 +0800
changeset 9996 ed4a8211fbe76a7b2d9b222b09e55beeb7abd579
parent 9993 d34b78fcca8983b4d13d4da5ce9037d9ce223f4c
push id1406
push userbjones@mozilla.com
push dateThu, 01 Dec 2016 06:55:39 +0000
reviewersdavidwalsh
bugs1321068
mozreview: add 'reviewed' buttons via events (bug 1321068) r?davidwalsh listen for the diff file loaded event to add 'reviewed' buttons to the filediff ui. this was triggered via the funcqueue, however the queue is no longer used to render file diffs. MozReview-Commit-ID: 8gcYq2ywfpo
pylib/mozreview/mozreview/static/mozreview/js/init_filediffreviewer.js
--- a/pylib/mozreview/mozreview/static/mozreview/js/init_filediffreviewer.js
+++ b/pylib/mozreview/mozreview/static/mozreview/js/init_filediffreviewer.js
@@ -43,65 +43,61 @@
                              .data('file-diff-reviewer');
   var fileDiffReviewerModels = FileDiffReviewerData.map(function(item) {
     return new RB.FileDiffReviewerModel(item);
   });
   var fileDiffReviewerCollection = new RB.FileDiffReviewerCollection(
     fileDiffReviewerModels
   );
 
-  var getButtonText = function(elem) {
-    if (elem.get('reviewed')) {
-      return 'reviewed';
-    } else {
-      return 'not reviewed';
-    }
+  var getButtonText = function(diff) {
+    return diff.get('reviewed') ? 'reviewed' : 'not reviewed';
   };
 
-  var renderDiffButton = function() {
-    $.funcQueue('diff_files').add(function() {
-      fileDiffReviewerCollection.each(function(elem) {
-        var diff_box_table = document.getElementById(
-          'file' + elem.get('file_diff_id')
-        );
+  var renderDiffButton = function(fileDiffID) {
+    var diffReviewable = fileDiffReviewerCollection.find(function(diff) {
+      return diff.get('file_diff_id') == fileDiffID &&
+        document.getElementById('file' + fileDiffID);
+      });
+    if (!diffReviewable) return;
 
-        if (diff_box_table !== null) {
-          var reviewButton = document.createElement('button');
-          reviewButton.title = 'Click here to change the review status' +
-                               ' of this file';
-          reviewButton.textContent = getButtonText(elem);
-          reviewButton.classList.add('diff-file-btn');
-          if (elem.get('reviewed')) {
-            reviewButton.classList.add('reviewed');
-          }
+    var reviewButton = document.createElement('button');
+    reviewButton.title = 'Toggle the review status of this file';
+    reviewButton.textContent = getButtonText(diffReviewable);
+    reviewButton.classList.add('diff-file-btn');
+    if (diffReviewable.get('reviewed')) {
+      reviewButton.classList.add('reviewed');
+    }
 
-          reviewButton.addEventListener('click', function(event) {
-            reviewButton.disabled = true;
-            elem.save({ reviewed: !elem.get('reviewed') },{
-              success: function() {
-                reviewButton.disabled = false;
-                reviewButton.textContent = getButtonText(elem);
-                reviewButton.classList.toggle('reviewed');
-              },
-              error: function(model, response) {
-                reviewButton.disabled = false;
-              }
-            });
-          });
-          diff_box_table.parentElement.appendChild(reviewButton);
+    reviewButton.addEventListener('click', function(event) {
+      reviewButton.disabled = true;
+      diffReviewable.save({ reviewed: !diffReviewable.get('reviewed') }, {
+        success: function() {
+          reviewButton.disabled = false;
+          reviewButton.textContent = getButtonText(diffReviewable);
+          reviewButton.classList.toggle('reviewed');
+        },
+        error: function(model, response) {
+          reviewButton.disabled = false;
         }
       });
-      $.funcQueue('diff_files').next();
     });
+    document.getElementById('file' + fileDiffID)
+      .parentElement
+      .appendChild(reviewButton);
   };
 
-  var currentRevision = page.model.get('revision');
-  if (!currentRevision.get('isInterdiff')) {
-    renderDiffButton();
+  // Listen for the diffview-loaded event, which is triggered when the
+  // diffview has completed loaded, so we can add the buttons.
+  if (!page.model.get('revision').get('isInterdiff')) {
+    $(document).on('mr:diffview-loaded', function(event, fileDiffID) {
+      renderDiffButton(fileDiffID);
+    });
   }
+
   // Listening to a route change seems to be the only way
   // to know if the user requested an interdiff or a revision
   // using the revision slider. The 'isInterdiff' property above
   // can only be used once on page load because it's not updated
   // when the user selects a different revision range using the slider.
   page.router.on('route:revision', function(revision) {
     // If the user requests an interdiff `revision` is a range of revision
     // numbers separated by a dash.