Skip to content

Commit f6d7637

Browse files
authored
Merge pull request #100 from joaopapereira/mac-command-key-not-prevent-call-off-plugin
Cell Selection Model plugin allow Mac Command key + arrows to change the selection
2 parents 1878074 + 1dc3554 commit f6d7637

File tree

3 files changed

+181
-2
lines changed

3 files changed

+181
-2
lines changed

plugins/slick.cellselectionmodel.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,10 @@
9393
* 40 down
9494
*/
9595
var ranges, last;
96-
var active = _grid.getActiveCell();
96+
var active = _grid.getActiveCell();
97+
var metaKey = e.ctrlKey || e.metaKey;
9798

98-
if ( active && e.shiftKey && !e.ctrlKey && !e.altKey &&
99+
if ( active && e.shiftKey && !metaKey && !e.altKey &&
99100
(e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40) ) {
100101

101102
ranges = getSelectedRanges();
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>SlickGrid - Cell Selection Model plugin tests</title>
5+
<link rel="stylesheet" href="../../lib/qunit.css" type="text/css"/>
6+
<link rel="stylesheet" href="../../slick.grid.css" type="text/css"/>
7+
<link rel="stylesheet" href="../../slick-default-theme.css" type="text/css" />
8+
</head>
9+
<body>
10+
<h1 id="qunit-header">SlickGrid - Cell Selection Model Test Suite</h1>
11+
<h2 id="qunit-banner"></h2>
12+
<div id="qunit-testrunner-toolbar"></div>
13+
<h2 id="qunit-userAgent"></h2>
14+
<ol id="qunit-tests"></ol>
15+
16+
<br/><br/><br/>
17+
<div id="container" style="width:600px; height:400px;"></div>
18+
19+
<script type="text/javascript" src="../../lib/qunit.js"></script>
20+
<script type="text/javascript" src="../../lib/jquery-1.11.2.min.js"></script>
21+
<script type="text/javascript" src="../../lib/jquery-ui-1.11.3.min.js"></script>
22+
<script type="text/javascript" src="../../lib/jquery.event.drag-2.3.0.js"></script>
23+
<script type="text/javascript" src="../../lib/qunit.js"></script>
24+
<script type="text/javascript">
25+
jQuery.noConflict();
26+
</script>
27+
<script type="text/javascript" src="../../slick.core.js"></script>
28+
<script type="text/javascript" src="../../slick.grid.js"></script>
29+
<script type="text/javascript" src="../../plugins/slick.cellrangedecorator.js"></script>
30+
<script type="text/javascript" src="../../plugins/slick.cellrangeselector.js"></script>
31+
<script type="text/javascript" src="../../plugins/slick.cellselectionmodel.js"></script>
32+
<script type="text/javascript" src="cellselectionmodel_spec.js"></script>
33+
34+
</body>
35+
</html>
Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
(function($) {
2+
3+
var grid, // The SlickGrid instance
4+
cols = [ // The column definitions
5+
{ name: "Short", field: "short", width: 100 },
6+
{ name: "Medium", field: "medium", width: 100 },
7+
{ name: "Long", field: "long", width: 100 },
8+
{ name: "Mixed", field: "mixed", width: 100 },
9+
{ name: "Long header creates tooltip", field: "header", width: 50 },
10+
{ name: "Long header with predefined tooltip", field: "tooltipHeader", width: 50, tooltip: "Already have a tooltip!" }
11+
],
12+
data = [], // The grid data
13+
LONG_VALUE = "looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
14+
MEDIUM_VALUE = "mediummmmmmm",
15+
SHORT_VALUE = "short",
16+
$container = $("#container"),
17+
keys = {
18+
LEFT_ARROW: 37,
19+
UP_ARROW: 38,
20+
RIGHT_ARROW: 39,
21+
DOWN_ARROW: 40
22+
}
23+
24+
// Create data
25+
for (var i = 0; i < 10; i++) {
26+
data.push({
27+
"id": "row" + i,
28+
"short": SHORT_VALUE,
29+
"medium": MEDIUM_VALUE,
30+
"long": LONG_VALUE,
31+
"mixed": ( i % 2 == 0 ? SHORT_VALUE : LONG_VALUE ),
32+
"header": i,
33+
"tooltipHeader": i
34+
});
35+
}
36+
37+
function setupGrid() {
38+
$('<div id="grid" />').appendTo($container);
39+
grid = new Slick.Grid("#grid", data, cols);
40+
grid.setSelectionModel(new Slick.CellSelectionModel());
41+
grid.render();
42+
}
43+
44+
function teardownGrid() {
45+
$container.empty();
46+
}
47+
48+
function getCell(row, column) {
49+
return $($("#grid .slick-cell.l" + column)[row]);
50+
}
51+
52+
function assertColumnRange(range, fromRow, fromCell, toRow, toCell) {
53+
strictEqual(range.fromRow, fromRow, "start row");
54+
strictEqual(range.toRow, toRow, "end row");
55+
strictEqual(range.fromCell, fromCell, "start column");
56+
strictEqual(range.toCell, toCell, "end column");
57+
}
58+
59+
function keyDownOnCell($cell, controlKeyPressed, commandKeyPressed, shiftKeyPressed, keyPressed) {
60+
var $event = $.Event('keydown');
61+
$event.ctrlKey = controlKeyPressed;
62+
$event.metaKey = commandKeyPressed;
63+
$event.shiftKey = shiftKeyPressed;
64+
$event.which = keyPressed;
65+
$cell.trigger($event);
66+
}
67+
68+
module("plugins - cellselectionmodel - KeyDownHandler no active cell", {
69+
setup: function () {
70+
setupGrid({});
71+
},
72+
teardown: teardownGrid
73+
});
74+
75+
test("press right arrow do not change selection", function () {
76+
var $cell = getCell(0, 0);
77+
var $event = $.Event('keydown');
78+
$event.which = keys.RIGHT_ARROW;
79+
$cell.trigger($event);
80+
81+
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
82+
strictEqual(selectedRanges.length, 0, "number of ranges is incorrect");
83+
});
84+
85+
module("plugins - cellselectionmodel - KeyDownHandler with active cell", {
86+
setup: function () {
87+
setupGrid({});
88+
},
89+
teardown: teardownGrid
90+
});
91+
92+
test("press right arrow do not change selection", function () {
93+
var $cell = getCell(1, 3);
94+
$cell.click();
95+
96+
keyDownOnCell($cell, false, false, false, keys.RIGHT_ARROW);
97+
98+
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
99+
strictEqual(selectedRanges.length, 1, "number of ranges is incorrect");
100+
var range = selectedRanges[0];
101+
102+
assertColumnRange(range, 1, 4, 1, 4);
103+
});
104+
105+
test("press shift plus left arrow add second cell to selection", function () {
106+
var $cell = getCell(1, 3);
107+
108+
$cell.click();
109+
keyDownOnCell($cell, false, false, true, keys.LEFT_ARROW);
110+
111+
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
112+
strictEqual(selectedRanges.length, 1, "number of ranges is incorrect");
113+
var range = selectedRanges[0];
114+
115+
assertColumnRange(range, 1, 2, 1, 3);
116+
});
117+
118+
test("press control plus shift plus up arrow do not change selection", function () {
119+
var $cell = getCell(1, 3);
120+
$cell.click();
121+
keyDownOnCell($cell, true, false, true, keys.UP_ARROW);
122+
123+
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
124+
strictEqual(selectedRanges.length, 1, "number of ranges");
125+
126+
var range = selectedRanges[0];
127+
assertColumnRange(range, 1, 3, 1, 3);
128+
});
129+
130+
131+
test("press command plus shift plus down arrow do not change selection", function () {
132+
var $cell = getCell(1, 3);
133+
$cell.click();
134+
keyDownOnCell($cell, false, true, true, keys.DOWN_ARROW);
135+
136+
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
137+
strictEqual(selectedRanges.length, 1, "number of ranges");
138+
139+
var range = selectedRanges[0];
140+
assertColumnRange(range, 1, 3, 1, 3);
141+
});
142+
143+
})(jQuery);

0 commit comments

Comments
 (0)