Skip to content

Commit 2bed530

Browse files
JLLeitschuhJLLeitschuh
committed
feat(core): Adds GridRowColumn to core
Moves the RowCol object to core and refactors it to be an object that can be used by the entire library.
1 parent 69a75da commit 2bed530

File tree

2 files changed

+115
-106
lines changed

2 files changed

+115
-106
lines changed

‎src/features/cellnav/js/cellnav.js

+29-106
Original file line numberDiff line numberDiff line change
@@ -32,86 +32,9 @@
3232
}
3333
});
3434

35-
/**
36-
* @ngdoc object
37-
* @name ui.grid.cellNav.object:RowCol
38-
* @param {GridRow} row The row for this pair
39-
* @param {GridColumn} column The column for this pair
40-
* @description A row and column pair that represents the intersection of these two entities.
41-
*/
42-
module.factory('RowColFactory', ['$parse', '$filter',
43-
function($parse, $filter){
44-
var RowCol = function RowCol(row, col) {
45-
/**
46-
* @ngdoc object
47-
* @name row
48-
* @propertyOf ui.grid.cellNav.object:RowCol
49-
* @description {@link ui.grid.class:GridRow }
50-
*/
51-
this.row = row;
52-
/**
53-
* @ngdoc object
54-
* @name col
55-
* @propertyOf ui.grid.cellNav.object:RowCol
56-
* @description {@link ui.grid.class:GridColumn }
57-
*/
58-
this.col = col;
59-
};
60-
61-
/**
62-
* @ngdoc function
63-
* @name getIntersectionValueRaw
64-
* @methodOf ui.grid.cellNav.object:RowCol
65-
* @description Gets the intersection of where the row and column meet.
66-
* @returns {String|Number|Object} The value from the grid data that this RowCol points too.
67-
* If the column has a cellFilter this will NOT return the filtered value.
68-
*/
69-
RowCol.prototype.getIntersectionValueRaw = function(){
70-
var getter = $parse(this.row.getEntityQualifiedColField(this.col));
71-
var context = this.row;
72-
return getter(context);
73-
};
74-
/**
75-
* @ngdoc function
76-
* @name getIntersectionValueFiltered
77-
* @methodOf ui.grid.cellNav.object:RowCol
78-
* @description Gets the intersection of where the row and column meet.
79-
* @returns {String|Number|Object} The value from the grid data that this RowCol points too.
80-
* If the column has a cellFilter this will also apply the filter to it and return the value that the filter displays.
81-
*/
82-
RowCol.prototype.getIntersectionValueFiltered = function(){
83-
var value = this.getIntersectionValueRaw();
84-
if (this.col.cellFilter && this.col.cellFilter !== ''){
85-
var getFilterIfExists = function(filterName){
86-
try {
87-
return $filter(filterName);
88-
} catch (e){
89-
return null;
90-
}
91-
};
92-
var filter = getFilterIfExists(this.col.cellFilter);
93-
if (filter) { // Check if this is filter name or a filter string
94-
value = filter(value);
95-
} else { // We have the template version of a filter so we need to parse it apart
96-
// Get the filter params out using a regex
97-
// Test out this regex here https://regex101.com/r/rC5eR5/2
98-
var re = /([^:]*):([^:]*):?([\s\S]+)?/;
99-
var matches;
100-
if ((matches = re.exec(this.col.cellFilter)) !== null) {
101-
// View your result using the matches-variable.
102-
// eg matches[0] etc.
103-
value = $filter(matches[1])(value, matches[2], matches[3]);
104-
}
105-
}
106-
}
107-
return value;
108-
};
109-
return RowCol;
110-
}]);
111-
11235

113-
module.factory('uiGridCellNavFactory', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', 'RowColFactory', '$q',
114-
function (gridUtil, uiGridConstants, uiGridCellNavConstants, RowCol, $q) {
36+
module.factory('uiGridCellNavFactory', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', 'GridRowColumn', '$q',
37+
function (gridUtil, uiGridConstants, uiGridCellNavConstants, GridRowColumn, $q) {
11538
/**
11639
* @ngdoc object
11740
* @name ui.grid.cellNav.object:CellNav
@@ -188,7 +111,7 @@
188111

189112
var curRowIndex = 0;
190113
var curColIndex = 0;
191-
return new RowCol(focusableRows[0], focusableCols[0]); //return same row
114+
return new GridRowColumn(focusableRows[0], focusableCols[0]); //return same row
192115
};
193116

194117
UiGridCellNav.prototype.getRowColLeft = function (curRow, curCol) {
@@ -211,15 +134,15 @@
211134
// return null;
212135
// }
213136
if (curRowIndex === 0) {
214-
return new RowCol(curRow, focusableCols[nextColIndex]); //return same row
137+
return new GridRowColumn(curRow, focusableCols[nextColIndex]); //return same row
215138
}
216139
else {
217140
//up one row and far right column
218-
return new RowCol(focusableRows[curRowIndex - 1], focusableCols[nextColIndex]);
141+
return new GridRowColumn(focusableRows[curRowIndex - 1], focusableCols[nextColIndex]);
219142
}
220143
}
221144
else {
222-
return new RowCol(curRow, focusableCols[nextColIndex]);
145+
return new GridRowColumn(curRow, focusableCols[nextColIndex]);
223146
}
224147
};
225148

@@ -239,15 +162,15 @@
239162

240163
if (nextColIndex < curColIndex) {
241164
if (curRowIndex === focusableRows.length - 1) {
242-
return new RowCol(curRow, focusableCols[nextColIndex]); //return same row
165+
return new GridRowColumn(curRow, focusableCols[nextColIndex]); //return same row
243166
}
244167
else {
245168
//down one row and far left column
246-
return new RowCol(focusableRows[curRowIndex + 1], focusableCols[nextColIndex]);
169+
return new GridRowColumn(focusableRows[curRowIndex + 1], focusableCols[nextColIndex]);
247170
}
248171
}
249172
else {
250-
return new RowCol(curRow, focusableCols[nextColIndex]);
173+
return new GridRowColumn(curRow, focusableCols[nextColIndex]);
251174
}
252175
};
253176

@@ -263,11 +186,11 @@
263186
}
264187

265188
if (curRowIndex === focusableRows.length - 1) {
266-
return new RowCol(curRow, focusableCols[curColIndex]); //return same row
189+
return new GridRowColumn(curRow, focusableCols[curColIndex]); //return same row
267190
}
268191
else {
269192
//down one row
270-
return new RowCol(focusableRows[curRowIndex + 1], focusableCols[curColIndex]);
193+
return new GridRowColumn(focusableRows[curRowIndex + 1], focusableCols[curColIndex]);
271194
}
272195
};
273196

@@ -284,11 +207,11 @@
284207

285208
var pageSize = this.bodyContainer.minRowsToRender();
286209
if (curRowIndex >= focusableRows.length - pageSize) {
287-
return new RowCol(focusableRows[focusableRows.length - 1], focusableCols[curColIndex]); //return last row
210+
return new GridRowColumn(focusableRows[focusableRows.length - 1], focusableCols[curColIndex]); //return last row
288211
}
289212
else {
290213
//down one page
291-
return new RowCol(focusableRows[curRowIndex + pageSize], focusableCols[curColIndex]);
214+
return new GridRowColumn(focusableRows[curRowIndex + pageSize], focusableCols[curColIndex]);
292215
}
293216
};
294217

@@ -304,11 +227,11 @@
304227
}
305228

306229
if (curRowIndex === 0) {
307-
return new RowCol(curRow, focusableCols[curColIndex]); //return same row
230+
return new GridRowColumn(curRow, focusableCols[curColIndex]); //return same row
308231
}
309232
else {
310233
//up one row
311-
return new RowCol(focusableRows[curRowIndex - 1], focusableCols[curColIndex]);
234+
return new GridRowColumn(focusableRows[curRowIndex - 1], focusableCols[curColIndex]);
312235
}
313236
};
314237

@@ -325,11 +248,11 @@
325248

326249
var pageSize = this.bodyContainer.minRowsToRender();
327250
if (curRowIndex - pageSize < 0) {
328-
return new RowCol(focusableRows[0], focusableCols[curColIndex]); //return first row
251+
return new GridRowColumn(focusableRows[0], focusableCols[curColIndex]); //return first row
329252
}
330253
else {
331254
//up one page
332-
return new RowCol(focusableRows[curRowIndex - pageSize], focusableCols[curColIndex]);
255+
return new GridRowColumn(focusableRows[curRowIndex - pageSize], focusableCols[curColIndex]);
333256
}
334257
};
335258
return UiGridCellNav;
@@ -342,8 +265,8 @@
342265
* @description Services for cell navigation features. If you don't like the key maps we use,
343266
* or the direction cells navigation, override with a service decorator (see angular docs)
344267
*/
345-
module.service('uiGridCellNavService', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', '$q', 'uiGridCellNavFactory', 'RowColFactory', 'ScrollEvent',
346-
function (gridUtil, uiGridConstants, uiGridCellNavConstants, $q, UiGridCellNav, RowCol, ScrollEvent) {
268+
module.service('uiGridCellNavService', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', '$q', 'uiGridCellNavFactory', 'GridRowColumn', 'ScrollEvent',
269+
function (gridUtil, uiGridConstants, uiGridCellNavConstants, $q, UiGridCellNav, GridRowColumn, ScrollEvent) {
347270

348271
var service = {
349272

@@ -452,7 +375,7 @@
452375
* @ngdoc function
453376
* @name rowColSelectIndex
454377
* @methodOf ui.grid.cellNav.api:PublicApi
455-
* @description returns the index in the order in which the RowCol was selected, returns -1 if the RowCol
378+
* @description returns the index in the order in which the GridRowColumn was selected, returns -1 if the GridRowColumn
456379
* isn't selected
457380
* @param {object} rowCol the rowCol to evaluate
458381
*/
@@ -696,8 +619,8 @@
696619
</file>
697620
</example>
698621
*/
699-
module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'RowColFactory', '$timeout', '$compile',
700-
function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, RowCol, $timeout, $compile) {
622+
module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn', '$timeout', '$compile',
623+
function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, GridRowColumn, $timeout, $compile) {
701624
return {
702625
replace: true,
703626
priority: -150,
@@ -716,8 +639,8 @@
716639

717640
//Ensure that the object has all of the methods we expect it to
718641
uiGridCtrl.cellNav.makeRowCol = function (obj) {
719-
if (!(obj instanceof RowCol)) {
720-
obj = new RowCol(obj.row, obj.col);
642+
if (!(obj instanceof GridRowColumn)) {
643+
obj = new GridRowColumn(obj.row, obj.col);
721644
}
722645
return obj;
723646
};
@@ -756,7 +679,7 @@
756679
var rowColSelectIndex = uiGridCtrl.grid.api.cellNav.rowColSelectIndex(rowCol);
757680

758681
if (grid.cellNav.lastRowCol === null || rowColSelectIndex === -1) {
759-
var newRowCol = new RowCol(row, col);
682+
var newRowCol = new GridRowColumn(row, col);
760683

761684
grid.api.cellNav.raise.navigate(newRowCol, grid.cellNav.lastRowCol);
762685
grid.cellNav.lastRowCol = newRowCol;
@@ -1088,8 +1011,8 @@
10881011
* @restrict A
10891012
* @description Stacks on top of ui.grid.uiGridCell to provide cell navigation
10901013
*/
1091-
module.directive('uiGridCell', ['$timeout', '$document', 'uiGridCellNavService', 'gridUtil', 'uiGridCellNavConstants', 'uiGridConstants', 'RowColFactory',
1092-
function ($timeout, $document, uiGridCellNavService, gridUtil, uiGridCellNavConstants, uiGridConstants, RowCol) {
1014+
module.directive('uiGridCell', ['$timeout', '$document', 'uiGridCellNavService', 'gridUtil', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn',
1015+
function ($timeout, $document, uiGridCellNavService, gridUtil, uiGridCellNavConstants, uiGridConstants, GridRowColumn) {
10931016
return {
10941017
priority: -150, // run after default uiGridCell directive and ui.grid.edit uiGridCell
10951018
restrict: 'A',
@@ -1114,7 +1037,7 @@
11141037

11151038
// When a cell is clicked, broadcast a cellNav event saying that this row+col combo is now focused
11161039
$elm.find('div').on('click', function (evt) {
1117-
uiGridCtrl.cellNav.broadcastCellNav(new RowCol($scope.row, $scope.col), evt.ctrlKey || evt.metaKey, evt);
1040+
uiGridCtrl.cellNav.broadcastCellNav(new GridRowColumn($scope.row, $scope.col), evt.ctrlKey || evt.metaKey, evt);
11181041

11191042
evt.stopPropagation();
11201043
$scope.$apply();
@@ -1152,7 +1075,7 @@
11521075

11531076
//You can only focus on elements with a tabindex value
11541077
$elm.on('focus', function (evt) {
1155-
uiGridCtrl.cellNav.broadcastCellNav(new RowCol($scope.row, $scope.col), false, evt);
1078+
uiGridCtrl.cellNav.broadcastCellNav(new GridRowColumn($scope.row, $scope.col), false, evt);
11561079
evt.stopPropagation();
11571080
$scope.$apply();
11581081
});

‎src/js/core/factories/GridRowColumn.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
(function(){
2+
'use strict';
3+
/**
4+
* @ngdoc object
5+
* @name ui.grid.class:GridRowColumn
6+
* @param {GridRow} row The row for this pair
7+
* @param {GridColumn} column The column for this pair
8+
* @description A row and column pair that represents the intersection of these two entities.
9+
* Must be instantiated as a constructor using the `new` keyword.
10+
*/
11+
angular.module('ui.grid')
12+
.factory('GridRowColumn', ['$parse', '$filter',
13+
function GridRowColumnFactory($parse, $filter){
14+
var GridRowColumn = function GridRowColumn(row, col) {
15+
if ( !(this instanceof GridRowColumn)){
16+
throw "Using GridRowColumn as a function insead of as a constructor. Must be called with `new` keyword";
17+
}
18+
19+
/**
20+
* @ngdoc object
21+
* @name row
22+
* @propertyOf ui.grid.class:GridRowColumn
23+
* @description {@link ui.grid.class:GridRow }
24+
*/
25+
this.row = row;
26+
/**
27+
* @ngdoc object
28+
* @name col
29+
* @propertyOf ui.grid.class:GridRowColumn
30+
* @description {@link ui.grid.class:GridColumn }
31+
*/
32+
this.col = col;
33+
};
34+
35+
/**
36+
* @ngdoc function
37+
* @name getIntersectionValueRaw
38+
* @methodOf ui.grid.class:GridRowColumn
39+
* @description Gets the intersection of where the row and column meet.
40+
* @returns {String|Number|Object} The value from the grid data that this GridRowColumn points too.
41+
* If the column has a cellFilter this will NOT return the filtered value.
42+
*/
43+
GridRowColumn.prototype.getIntersectionValueRaw = function(){
44+
var getter = $parse(this.row.getEntityQualifiedColField(this.col));
45+
var context = this.row;
46+
return getter(context);
47+
};
48+
/**
49+
* @ngdoc function
50+
* @name getIntersectionValueFiltered
51+
* @methodOf ui.grid.class:GridRowColumn
52+
* @description Gets the intersection of where the row and column meet.
53+
* @returns {String|Number|Object} The value from the grid data that this GridRowColumn points too.
54+
* If the column has a cellFilter this will also apply the filter to it and return the value that the filter displays.
55+
*/
56+
GridRowColumn.prototype.getIntersectionValueFiltered = function(){
57+
var value = this.getIntersectionValueRaw();
58+
if (this.col.cellFilter && this.col.cellFilter !== ''){
59+
var getFilterIfExists = function(filterName){
60+
try {
61+
return $filter(filterName);
62+
} catch (e){
63+
return null;
64+
}
65+
};
66+
var filter = getFilterIfExists(this.col.cellFilter);
67+
if (filter) { // Check if this is filter name or a filter string
68+
value = filter(value);
69+
} else { // We have the template version of a filter so we need to parse it apart
70+
// Get the filter params out using a regex
71+
// Test out this regex here https://regex101.com/r/rC5eR5/2
72+
var re = /([^:]*):([^:]*):?([\s\S]+)?/;
73+
var matches;
74+
if ((matches = re.exec(this.col.cellFilter)) !== null) {
75+
// View your result using the matches-variable.
76+
// eg matches[0] etc.
77+
value = $filter(matches[1])(value, matches[2], matches[3]);
78+
}
79+
}
80+
}
81+
return value;
82+
};
83+
return GridRowColumn;
84+
}
85+
]);
86+
})();

0 commit comments

Comments
 (0)