OLD | NEW |
1 var MAX_SWAP_IMG_SIZE = 400; | 1 var MAX_SWAP_IMG_SIZE = 400; |
2 | 2 |
3 angular.module('diff_viewer', []). | 3 angular.module('diff_viewer', []). |
4 config(['$routeProvider', function($routeProvider) { | 4 config(['$routeProvider', function($routeProvider) { |
5 // Show the list of differences by default | 5 // Show the list of differences by default |
6 $routeProvider. | 6 $routeProvider. |
7 otherwise({ templateUrl: '/diff_list.html', controller: DiffListController})
; | 7 otherwise({ templateUrl: '/diff_list.html', controller: DiffListController})
; |
8 }]). | 8 }]). |
9 directive('swapImg', function() { | 9 directive('swapImg', function() { |
10 // Custom directive for showing an image that gets swapped my mouseover. | 10 // Custom directive for showing an image that gets swapped my mouseover. |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
69 scope.side = "right"; | 69 scope.side = "right"; |
70 } else { | 70 } else { |
71 scope.side = "left"; | 71 scope.side = "left"; |
72 } | 72 } |
73 scope.render(); | 73 scope.render(); |
74 }; | 74 }; |
75 } | 75 } |
76 }; | 76 }; |
77 }); | 77 }); |
78 | 78 |
79 function DiffListController($scope, $http, $timeout) { | 79 function DiffListController($scope, $http, $location, $timeout, $parse) { |
| 80 // Detect if we are running the web server version of the viewer. If so, we
set a flag and |
| 81 // enable some extra functionality of the website for rebaselining. |
| 82 $scope.isDynamic = ($location.protocol() == "http" || $location.protocol() =
= "https"); |
| 83 |
80 // Label each kind of differ for the sort buttons. | 84 // Label each kind of differ for the sort buttons. |
81 $scope.differs = [ | 85 $scope.differs = [ |
82 { | 86 { |
83 "title": "Different Pixels" | 87 "title": "Different Pixels" |
84 }, | 88 }, |
85 { | 89 { |
86 "title": "Perceptual Difference" | 90 "title": "Perceptual Difference" |
87 } | 91 } |
88 ]; | 92 ]; |
89 | 93 |
90 // Puts the records within AngularJS scope | 94 // Puts the records within AngularJS scope |
91 $scope.records = SkPDiffRecords.records; | 95 $scope.records = SkPDiffRecords.records; |
92 | 96 |
| 97 // Keep track of the index of the last record to change so that shift clicki
ng knows what range |
| 98 // of records to apply the action to. |
| 99 $scope.lastSelectedIndex = undefined; |
| 100 |
93 // Indicates which diff metric is used for sorting | 101 // Indicates which diff metric is used for sorting |
94 $scope.sortIndex = 1; | 102 $scope.sortIndex = 1; |
95 | 103 |
96 // Called by the sort buttons to adjust the metric used for sorting | 104 // Called by the sort buttons to adjust the metric used for sorting |
97 $scope.setSortIndex = function(idx) { | 105 $scope.setSortIndex = function(idx) { |
98 $scope.sortIndex = idx; | 106 $scope.sortIndex = idx; |
| 107 |
| 108 // Because the index of things has most likely changed, the ranges of sh
ift clicking no |
| 109 // longer make sense from the user's point of view. We reset it to avoid
confusion. |
| 110 $scope.lastSelectedIndex = undefined; |
99 }; | 111 }; |
100 | 112 |
101 // A predicate for pulling out the number used for sorting | 113 // A predicate for pulling out the number used for sorting |
102 $scope.sortingDiffer = function(record) { | 114 $scope.sortingDiffer = function(record) { |
103 return record.diffs[$scope.sortIndex].result; | 115 return record.diffs[$scope.sortIndex].result; |
104 }; | 116 }; |
105 | 117 |
106 // Flash status indicators on the rows, and then remove them so the style ca
n potentially be | 118 // Flash status indicator on the page, and then remove it so the style can p
otentially be |
107 // reapplied later. | 119 // reapplied later. |
108 $scope.flashRowStatus = function(success, record) { | 120 $scope.flashStatus = function(success) { |
109 var flashStyle = success ? "success-flash" : "failure-flash"; | 121 var flashStyle = success ? "success-flash" : "failure-flash"; |
110 var flashDurationMillis = success ? 500 : 800; | 122 var flashDurationMillis = success ? 500 : 800; |
111 | 123 |
112 // Store the style in the record. The row will pick up the style this wa
y instead of through | 124 // Store the style in the record. The row will pick up the style this wa
y instead of through |
113 // index because index can change with sort order. | 125 // index because index can change with sort order. |
114 record.cssClasses = flashStyle; | 126 $scope.statusClass = flashStyle; |
115 | 127 |
116 // The animation cannot be repeated unless the class is removed the elem
ent. | 128 // The animation cannot be repeated unless the class is removed the elem
ent. |
117 $timeout(function() { | 129 $timeout(function() { |
118 record.cssClasses = ""; | 130 $scope.statusClass = ""; |
119 }, flashDurationMillis); | 131 }, flashDurationMillis); |
120 } | 132 }; |
121 | 133 |
122 $scope.setHashOf = function(imagePath, record) { | 134 $scope.selectedRebaseline = function(index, event) { |
123 $http.post("/set_hash", { | 135 // Retrieve the records in the same order they are displayed. |
124 "path": imagePath | 136 var recordsInOrder = $parse("records | orderBy:sortingDiffer")($scope); |
125 }).success(function(data) { | 137 |
126 $scope.flashRowStatus(data.success, record); | 138 // If the user is shift clicking, apply the last tick/untick to all elem
ents in between this |
127 }).error(function() { | 139 // record, and the last one they ticked/unticked. |
128 $scope.flashRowStatus(false, record); | 140 if (event.shiftKey && $scope.lastSelectedIndex !== undefined) { |
129 }); | 141 var currentAction = recordsInOrder[index].isRebaselined; |
| 142 var smallerIndex = Math.min($scope.lastSelectedIndex, index); |
| 143 var largerIndex = Math.max($scope.lastSelectedIndex, index); |
| 144 for (var recordIndex = smallerIndex; recordIndex <= largerIndex; rec
ordIndex++) { |
| 145 recordsInOrder[recordIndex].isRebaselined = currentAction; |
| 146 } |
| 147 $scope.lastSelectedIndex = index; |
| 148 } |
| 149 else |
| 150 { |
| 151 $scope.lastSelectedIndex = index; |
| 152 } |
130 | 153 |
131 }; | 154 }; |
| 155 |
| 156 $scope.commitRebaselines = function() { |
| 157 // Gather up all records that have the rebaseline set. |
| 158 var rebaselines = []; |
| 159 for (var recordIndex = 0; recordIndex < $scope.records.length; recordInd
ex++) { |
| 160 if ($scope.records[recordIndex].isRebaselined) { |
| 161 rebaselines.push($scope.records[recordIndex].testPath); |
| 162 } |
| 163 } |
| 164 $http.post("/commit_rebaselines", { |
| 165 "rebaselines": rebaselines |
| 166 }).success(function(data) { |
| 167 $scope.flashStatus(data.success); |
| 168 }).error(function() { |
| 169 $scope.flashStatus(false); |
| 170 }); |
| 171 }; |
132 } | 172 } |
OLD | NEW |