Browse Source

[spark] Add shift-click support to select a range of notebooks

Johan Ahlen 10 years ago
parent
commit
1396378da7

+ 2 - 1
apps/spark/src/spark/templates/notebooks.mako

@@ -77,7 +77,7 @@ ${ commonheader(_("Notebooks"), "spark", user, "60px") | n,unicode }
     <tbody data-bind="foreach: { data: jobs }">
     <tbody data-bind="foreach: { data: jobs }">
       <tr>
       <tr>
         <td data-bind="click: $root.handleSelect" class="center" style="cursor: default" data-row-selector-exclude="true">
         <td data-bind="click: $root.handleSelect" class="center" style="cursor: default" data-row-selector-exclude="true">
-          <div data-bind="css: { 'hueCheckbox': true, 'fa': true, 'fa-check': isSelected }" data-row-selector-exclude="true"></div>
+          <div class="hueCheckbox fa" data-bind="multiCheck: '#notebookTable', css: {'fa-check': isSelected }" data-row-selector-exclude="true"></div>
           <a data-bind="attr: { 'href': '${ url('spark:notebook') }?notebook=' + id() }" data-row-selector="true"></a>
           <a data-bind="attr: { 'href': '${ url('spark:notebook') }?notebook=' + id() }" data-row-selector="true"></a>
         </td>
         </td>
         <td data-bind="text: name"></td>
         <td data-bind="text: name"></td>
@@ -129,6 +129,7 @@ ${ commonshare() | n,unicode }
 <script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/js/ko.hue-bindings.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/share.vm.js') }"></script>
 <script src="${ static('desktop/js/share.vm.js') }"></script>
 
 
 <script type="text/javascript" charset="utf-8">
 <script type="text/javascript" charset="utf-8">

+ 43 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -38,6 +38,49 @@ ko.bindingHandlers.fadeVisible = {
 };
 };
 
 
 
 
+ko.bindingHandlers.multiCheck = {
+  init: function (element, valueAccessor) {
+    $(element).attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
+
+    var $container = $(ko.unwrap(valueAccessor()));
+    $(element).click(function (e, shouldIgnore) {
+      var $self = $(this);
+      if ($self.data('noMultiCheck')) {
+        $self.data('noMultiCheck', false);
+        return;
+      }
+      var shouldCheck = $self.is(':checked') || ! $self.hasClass('fa-check');
+      if (e.shiftKey && shouldCheck === $container.data('last-clicked-checkbox-state')) {
+        var insideGroup = false;
+        var allCheckboxes = $container.find(":checkbox");
+        if (allCheckboxes.length == 0) {
+          allCheckboxes = $container.find(".hueCheckbox");
+        }
+        for (var i = 0; i < allCheckboxes.length; i++) {
+          var checkbox = allCheckboxes[i];
+          if (checkbox === this || checkbox === $container.data('last-clicked-checkbox')) {
+            if (insideGroup) {
+              break;
+            }
+            insideGroup = true;
+            continue;
+          }
+          if (insideGroup) {
+            var $checkbox = $(checkbox);
+            $checkbox.data('noMultiCheck', true);
+            if (($checkbox.is(':checked') || $checkbox.hasClass('fa-check')) !== shouldCheck) {
+              $checkbox.trigger("click");
+            }
+          }
+        }
+      }
+      $container.data('last-clicked-checkbox', this);
+      $container.data('last-clicked-checkbox-state', shouldCheck);
+    });
+  },
+  update: function() {}
+};
+
 ko.extenders.numeric = function (target, config) {
 ko.extenders.numeric = function (target, config) {
   var precision = typeof config.precision === 'undefined' ? config : config.precision;
   var precision = typeof config.precision === 'undefined' ? config : config.precision;
   var roundingMultiplier = Math.pow(10, precision);
   var roundingMultiplier = Math.pow(10, precision);