From da4c658bde5fe7737a04d8b1c7df4033baad1bfd Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Wed, 20 Apr 2016 15:25:20 -0400
Subject: [PATCH] Add support for shift key selection in checkable items

Fixes #1389
---
 static/directives/cor-checkable-item.html |  2 +-
 static/js/core-ui.js                      |  6 ++--
 static/js/services/ui-service.js          | 36 ++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/static/directives/cor-checkable-item.html b/static/directives/cor-checkable-item.html
index 4dde44d92..e31d86020 100644
--- a/static/directives/cor-checkable-item.html
+++ b/static/directives/cor-checkable-item.html
@@ -1,3 +1,3 @@
-<span class="co-checkable-item" ng-click="toggleItem()"
+<span class="co-checkable-item" ng-mousedown="toggleItem($event)"
       ng-class="controller.isChecked(item, controller.checked) ? 'checked': 'not-checked'">
 </span>
diff --git a/static/js/core-ui.js b/static/js/core-ui.js
index f23e18c50..6ce0d8a16 100644
--- a/static/js/core-ui.js
+++ b/static/js/core-ui.js
@@ -713,8 +713,10 @@ angular.module("core-ui", [])
         'controller': '=controller'
       },
       controller: function($rootScope, $scope, $element) {
-        $scope.toggleItem = function() {
-          $scope.controller.toggleItem($scope.item);
+        $scope.toggleItem = function($event) {
+          $event.preventDefault();
+          $event.stopPropagation();
+          $scope.controller.toggleItem($scope.item, $event.shiftKey);
         };
       }
     };
diff --git a/static/js/services/ui-service.js b/static/js/services/ui-service.js
index 6893abd32..5231ae92c 100644
--- a/static/js/services/ui-service.js
+++ b/static/js/services/ui-service.js
@@ -12,6 +12,8 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
     this.itemKey_ = itemKey;
     this.listeners_ = [];
     this.page_ = null;
+    this.lastChanged_ = null;
+
     this.ApiService = ApiService
   };
 
@@ -23,7 +25,28 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
     return !!this.allCheckedMap_[item[this.itemKey_]];
   };
 
-  CheckStateController.prototype.toggleItem = function(item) {
+  CheckStateController.prototype.toggleItem = function(item, opt_shift) {
+    if (opt_shift && this.lastChanged_) {
+      var itemIndex = $.inArray(item, this.items);
+      var lastIndex = $.inArray(this.lastChanged_, this.items);
+
+      if (itemIndex >= 0 && lastIndex >= 0) {
+        var startIndex = Math.min(itemIndex, lastIndex);
+        var endIndex = Math.max(itemIndex, lastIndex);
+        var shouldCheck = this.isChecked(this.lastChanged_);
+
+        for (var i = startIndex; i <= endIndex; ++i) {
+          if (shouldCheck) {
+            this.checkItem(this.items[i]);
+          } else {
+            this.uncheckItem(this.items[i]);
+          }
+        }
+
+        return;
+      }
+    }
+
     if (this.isChecked(item)) {
       this.uncheckItem(item);
     } else {
@@ -32,6 +55,7 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   };
 
   CheckStateController.prototype.toggleItems = function() {
+    this.lastChanged_= null;
     this.updateMap_(this.checked, false);
 
     if (this.checked.length) {
@@ -83,12 +107,22 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   };
 
   CheckStateController.prototype.checkItem = function(item) {
+    if (this.isChecked(item)) {
+      return;
+    }
+
+    this.lastChanged_ = item;
     this.checked.push(item);
     this.allCheckedMap_[item[this.itemKey_]] = true;
     this.callListeners_();
   };
 
   CheckStateController.prototype.uncheckItem = function(item) {
+    if (!this.isChecked(item)) {
+      return;
+    }
+
+    this.lastChanged_ = item;
     this.checked = $.grep(this.checked, function(cItem) {
       return cItem != item;
     });