Merge pull request #100 from joaopapereira/mac-command-key-not-preven…

…t-call-off-plugin Cell Selection Model plugin allow Mac Command key + arrows to change the selection
6pac · May 1, 2017 · f6d7637 · f6d7637
2 parents 1878074 + 1dc3554
commit f6d7637
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 2 deletions.
diff --git a/plugins/slick.cellselectionmodel.js b/plugins/slick.cellselectionmodel.js
@@ -93,9 +93,10 @@
        * 40 down                     
        */                                         
       var ranges, last;
-      var active = _grid.getActiveCell(); 
+      var active = _grid.getActiveCell();
+      var metaKey = e.ctrlKey || e.metaKey;
 
-      if ( active && e.shiftKey && !e.ctrlKey && !e.altKey && 
+      if ( active && e.shiftKey && !metaKey && !e.altKey &&
           (e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40) ) {
 
         ranges = getSelectedRanges();

diff --git a/tests/plugins/cellselectionmodel.html b/tests/plugins/cellselectionmodel.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>SlickGrid - Cell Selection Model plugin tests</title>
+	<link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
+	<link rel="stylesheet" href="../../slick.grid.css" type="text/css"/>
+	<link rel="stylesheet" href="../../slick-default-theme.css" type="text/css" />
+</head>
+<body>
+	<h1 id="qunit-header">SlickGrid - Cell Selection Model Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+
+	<br/><br/><br/>
+	<div id="container" style="width:600px; height:400px;"></div>
+
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-1.11.2.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery-ui-1.11.3.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.event.drag-2.3.0.js"></script>
+	<script type="text/javascript" src="../../lib/qunit.js"></script>
+	<script type="text/javascript">
+		jQuery.noConflict();
+	</script>
+	<script type="text/javascript" src="../../slick.core.js"></script>
+	<script type="text/javascript" src="../../slick.grid.js"></script>
+	<script type="text/javascript" src="../../plugins/slick.cellrangedecorator.js"></script>
+	<script type="text/javascript" src="../../plugins/slick.cellrangeselector.js"></script>
+	<script type="text/javascript" src="../../plugins/slick.cellselectionmodel.js"></script>
+	<script type="text/javascript" src="cellselectionmodel_spec.js"></script>
+
+</body>
+</html>
diff --git a/tests/plugins/cellselectionmodel_spec.js b/tests/plugins/cellselectionmodel_spec.js
@@ -0,0 +1,143 @@
+(function($) {
+
+  var grid,         // The SlickGrid instance
+      cols = [      // The column definitions
+        { name: "Short",  field: "short",   width: 100 },
+        { name: "Medium", field: "medium",  width: 100 },
+        { name: "Long",   field: "long",    width: 100 },
+        { name: "Mixed",  field: "mixed",   width: 100 },
+        { name: "Long header creates tooltip",         field: "header",        width: 50 },
+        { name: "Long header with predefined tooltip", field: "tooltipHeader", width: 50, tooltip: "Already have a tooltip!" }
+      ],
+      data            = [], // The grid data
+      LONG_VALUE      = "looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
+      MEDIUM_VALUE    = "mediummmmmmm",
+      SHORT_VALUE     = "short",
+      $container      = $("#container"),
+      keys = {
+        LEFT_ARROW:  37,
+        UP_ARROW:    38,
+        RIGHT_ARROW: 39,
+        DOWN_ARROW:  40
+      }
+
+  // Create data
+  for (var i = 0; i < 10; i++) {
+    data.push({
+      "id":             "row" + i,
+      "short":          SHORT_VALUE,
+      "medium":         MEDIUM_VALUE,
+      "long":           LONG_VALUE,
+      "mixed":          ( i % 2 == 0 ? SHORT_VALUE : LONG_VALUE ),
+      "header":         i,
+      "tooltipHeader":  i
+    });
+  }
+
+  function setupGrid() {
+    $('<div id="grid" />').appendTo($container);
+    grid = new Slick.Grid("#grid", data, cols);
+    grid.setSelectionModel(new Slick.CellSelectionModel());
+    grid.render();
+  }
+
+  function teardownGrid() {
+    $container.empty();
+  }
+
+  function getCell(row, column) {
+    return $($("#grid .slick-cell.l" + column)[row]);
+  }
+
+  function assertColumnRange(range, fromRow, fromCell, toRow, toCell) {
+    strictEqual(range.fromRow, fromRow, "start row");
+    strictEqual(range.toRow, toRow, "end row");
+    strictEqual(range.fromCell, fromCell, "start column");
+    strictEqual(range.toCell, toCell, "end column");
+  }
+
+  function keyDownOnCell($cell, controlKeyPressed, commandKeyPressed, shiftKeyPressed, keyPressed) {
+    var $event = $.Event('keydown');
+    $event.ctrlKey = controlKeyPressed;
+    $event.metaKey = commandKeyPressed;
+    $event.shiftKey = shiftKeyPressed;
+    $event.which = keyPressed;
+    $cell.trigger($event);
+  }
+
+  module("plugins - cellselectionmodel - KeyDownHandler no active cell", {
+    setup: function () {
+      setupGrid({});
+    },
+    teardown: teardownGrid
+  });
+
+  test("press right arrow do not change selection", function () {
+    var $cell = getCell(0, 0);
+    var $event = $.Event('keydown');
+    $event.which = keys.RIGHT_ARROW;
+    $cell.trigger($event);
+
+    var selectedRanges = grid.getSelectionModel().getSelectedRanges();
+    strictEqual(selectedRanges.length, 0, "number of ranges is incorrect");
+  });
+
+  module("plugins - cellselectionmodel - KeyDownHandler with active cell", {
+    setup: function () {
+      setupGrid({});
+    },
+    teardown: teardownGrid
+  });
+
+  test("press right arrow do not change selection", function () {
+    var $cell = getCell(1, 3);
+    $cell.click();
+
+    keyDownOnCell($cell, false, false, false, keys.RIGHT_ARROW);
+
+    var selectedRanges = grid.getSelectionModel().getSelectedRanges();
+    strictEqual(selectedRanges.length, 1, "number of ranges is incorrect");
+    var range = selectedRanges[0];
+
+    assertColumnRange(range, 1, 4, 1, 4);
+  });
+
+  test("press shift plus left arrow add second cell to selection", function () {
+    var $cell = getCell(1, 3);
+
+    $cell.click();
+    keyDownOnCell($cell, false, false, true, keys.LEFT_ARROW);
+
+    var selectedRanges = grid.getSelectionModel().getSelectedRanges();
+    strictEqual(selectedRanges.length, 1, "number of ranges is incorrect");
+    var range = selectedRanges[0];
+
+    assertColumnRange(range, 1, 2, 1, 3);
+  });
+
+  test("press control plus shift plus up arrow do not change selection", function () {
+    var $cell = getCell(1, 3);
+    $cell.click();
+    keyDownOnCell($cell, true, false, true, keys.UP_ARROW);
+
+    var selectedRanges = grid.getSelectionModel().getSelectedRanges();
+    strictEqual(selectedRanges.length, 1, "number of ranges");
+
+    var range = selectedRanges[0];
+    assertColumnRange(range, 1, 3, 1, 3);
+  });
+
+
+  test("press command plus shift plus down arrow do not change selection", function () {
+    var $cell = getCell(1, 3);
+    $cell.click();
+    keyDownOnCell($cell, false, true, true, keys.DOWN_ARROW);
+
+    var selectedRanges = grid.getSelectionModel().getSelectedRanges();
+    strictEqual(selectedRanges.length, 1, "number of ranges");
+
+    var range = selectedRanges[0];
+    assertColumnRange(range, 1, 3, 1, 3);
+  });
+
+})(jQuery);