Skip to content

Commit

Permalink
feat(core): Adds GridRowColumn to core
Browse files Browse the repository at this point in the history
Moves the RowCol object to core and refactors it to be an object that
can be used by the entire library.
  • Loading branch information
JLLeitschuh committed Aug 25, 2015
1 parent 69a75da commit 2bed530
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 106 deletions.
135 changes: 29 additions & 106 deletions src/features/cellnav/js/cellnav.js
Expand Up @@ -32,86 +32,9 @@
}
});

/**
* @ngdoc object
* @name ui.grid.cellNav.object:RowCol
* @param {GridRow} row The row for this pair
* @param {GridColumn} column The column for this pair
* @description A row and column pair that represents the intersection of these two entities.
*/
module.factory('RowColFactory', ['$parse', '$filter',
function($parse, $filter){
var RowCol = function RowCol(row, col) {
/**
* @ngdoc object
* @name row
* @propertyOf ui.grid.cellNav.object:RowCol
* @description {@link ui.grid.class:GridRow }
*/
this.row = row;
/**
* @ngdoc object
* @name col
* @propertyOf ui.grid.cellNav.object:RowCol
* @description {@link ui.grid.class:GridColumn }
*/
this.col = col;
};

/**
* @ngdoc function
* @name getIntersectionValueRaw
* @methodOf ui.grid.cellNav.object:RowCol
* @description Gets the intersection of where the row and column meet.
* @returns {String|Number|Object} The value from the grid data that this RowCol points too.
* If the column has a cellFilter this will NOT return the filtered value.
*/
RowCol.prototype.getIntersectionValueRaw = function(){
var getter = $parse(this.row.getEntityQualifiedColField(this.col));
var context = this.row;
return getter(context);
};
/**
* @ngdoc function
* @name getIntersectionValueFiltered
* @methodOf ui.grid.cellNav.object:RowCol
* @description Gets the intersection of where the row and column meet.
* @returns {String|Number|Object} The value from the grid data that this RowCol points too.
* If the column has a cellFilter this will also apply the filter to it and return the value that the filter displays.
*/
RowCol.prototype.getIntersectionValueFiltered = function(){
var value = this.getIntersectionValueRaw();
if (this.col.cellFilter && this.col.cellFilter !== ''){
var getFilterIfExists = function(filterName){
try {
return $filter(filterName);
} catch (e){
return null;
}
};
var filter = getFilterIfExists(this.col.cellFilter);
if (filter) { // Check if this is filter name or a filter string
value = filter(value);
} else { // We have the template version of a filter so we need to parse it apart
// Get the filter params out using a regex
// Test out this regex here https://regex101.com/r/rC5eR5/2
var re = /([^:]*):([^:]*):?([\s\S]+)?/;
var matches;
if ((matches = re.exec(this.col.cellFilter)) !== null) {
// View your result using the matches-variable.
// eg matches[0] etc.
value = $filter(matches[1])(value, matches[2], matches[3]);
}
}
}
return value;
};
return RowCol;
}]);


module.factory('uiGridCellNavFactory', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', 'RowColFactory', '$q',
function (gridUtil, uiGridConstants, uiGridCellNavConstants, RowCol, $q) {
module.factory('uiGridCellNavFactory', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', 'GridRowColumn', '$q',
function (gridUtil, uiGridConstants, uiGridCellNavConstants, GridRowColumn, $q) {
/**
* @ngdoc object
* @name ui.grid.cellNav.object:CellNav
Expand Down Expand Up @@ -188,7 +111,7 @@

var curRowIndex = 0;
var curColIndex = 0;
return new RowCol(focusableRows[0], focusableCols[0]); //return same row
return new GridRowColumn(focusableRows[0], focusableCols[0]); //return same row
};

UiGridCellNav.prototype.getRowColLeft = function (curRow, curCol) {
Expand All @@ -211,15 +134,15 @@
// return null;
// }
if (curRowIndex === 0) {
return new RowCol(curRow, focusableCols[nextColIndex]); //return same row
return new GridRowColumn(curRow, focusableCols[nextColIndex]); //return same row
}
else {
//up one row and far right column
return new RowCol(focusableRows[curRowIndex - 1], focusableCols[nextColIndex]);
return new GridRowColumn(focusableRows[curRowIndex - 1], focusableCols[nextColIndex]);
}
}
else {
return new RowCol(curRow, focusableCols[nextColIndex]);
return new GridRowColumn(curRow, focusableCols[nextColIndex]);
}
};

Expand All @@ -239,15 +162,15 @@

if (nextColIndex < curColIndex) {
if (curRowIndex === focusableRows.length - 1) {
return new RowCol(curRow, focusableCols[nextColIndex]); //return same row
return new GridRowColumn(curRow, focusableCols[nextColIndex]); //return same row
}
else {
//down one row and far left column
return new RowCol(focusableRows[curRowIndex + 1], focusableCols[nextColIndex]);
return new GridRowColumn(focusableRows[curRowIndex + 1], focusableCols[nextColIndex]);
}
}
else {
return new RowCol(curRow, focusableCols[nextColIndex]);
return new GridRowColumn(curRow, focusableCols[nextColIndex]);
}
};

Expand All @@ -263,11 +186,11 @@
}

if (curRowIndex === focusableRows.length - 1) {
return new RowCol(curRow, focusableCols[curColIndex]); //return same row
return new GridRowColumn(curRow, focusableCols[curColIndex]); //return same row
}
else {
//down one row
return new RowCol(focusableRows[curRowIndex + 1], focusableCols[curColIndex]);
return new GridRowColumn(focusableRows[curRowIndex + 1], focusableCols[curColIndex]);
}
};

Expand All @@ -284,11 +207,11 @@

var pageSize = this.bodyContainer.minRowsToRender();
if (curRowIndex >= focusableRows.length - pageSize) {
return new RowCol(focusableRows[focusableRows.length - 1], focusableCols[curColIndex]); //return last row
return new GridRowColumn(focusableRows[focusableRows.length - 1], focusableCols[curColIndex]); //return last row
}
else {
//down one page
return new RowCol(focusableRows[curRowIndex + pageSize], focusableCols[curColIndex]);
return new GridRowColumn(focusableRows[curRowIndex + pageSize], focusableCols[curColIndex]);
}
};

Expand All @@ -304,11 +227,11 @@
}

if (curRowIndex === 0) {
return new RowCol(curRow, focusableCols[curColIndex]); //return same row
return new GridRowColumn(curRow, focusableCols[curColIndex]); //return same row
}
else {
//up one row
return new RowCol(focusableRows[curRowIndex - 1], focusableCols[curColIndex]);
return new GridRowColumn(focusableRows[curRowIndex - 1], focusableCols[curColIndex]);
}
};

Expand All @@ -325,11 +248,11 @@

var pageSize = this.bodyContainer.minRowsToRender();
if (curRowIndex - pageSize < 0) {
return new RowCol(focusableRows[0], focusableCols[curColIndex]); //return first row
return new GridRowColumn(focusableRows[0], focusableCols[curColIndex]); //return first row
}
else {
//up one page
return new RowCol(focusableRows[curRowIndex - pageSize], focusableCols[curColIndex]);
return new GridRowColumn(focusableRows[curRowIndex - pageSize], focusableCols[curColIndex]);
}
};
return UiGridCellNav;
Expand All @@ -342,8 +265,8 @@
* @description Services for cell navigation features. If you don't like the key maps we use,
* or the direction cells navigation, override with a service decorator (see angular docs)
*/
module.service('uiGridCellNavService', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', '$q', 'uiGridCellNavFactory', 'RowColFactory', 'ScrollEvent',
function (gridUtil, uiGridConstants, uiGridCellNavConstants, $q, UiGridCellNav, RowCol, ScrollEvent) {
module.service('uiGridCellNavService', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', '$q', 'uiGridCellNavFactory', 'GridRowColumn', 'ScrollEvent',
function (gridUtil, uiGridConstants, uiGridCellNavConstants, $q, UiGridCellNav, GridRowColumn, ScrollEvent) {

var service = {

Expand Down Expand Up @@ -452,7 +375,7 @@
* @ngdoc function
* @name rowColSelectIndex
* @methodOf ui.grid.cellNav.api:PublicApi
* @description returns the index in the order in which the RowCol was selected, returns -1 if the RowCol
* @description returns the index in the order in which the GridRowColumn was selected, returns -1 if the GridRowColumn
* isn't selected
* @param {object} rowCol the rowCol to evaluate
*/
Expand Down Expand Up @@ -696,8 +619,8 @@
</file>
</example>
*/
module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'RowColFactory', '$timeout', '$compile',
function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, RowCol, $timeout, $compile) {
module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn', '$timeout', '$compile',
function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, GridRowColumn, $timeout, $compile) {
return {
replace: true,
priority: -150,
Expand All @@ -716,8 +639,8 @@

//Ensure that the object has all of the methods we expect it to
uiGridCtrl.cellNav.makeRowCol = function (obj) {
if (!(obj instanceof RowCol)) {
obj = new RowCol(obj.row, obj.col);
if (!(obj instanceof GridRowColumn)) {
obj = new GridRowColumn(obj.row, obj.col);
}
return obj;
};
Expand Down Expand Up @@ -756,7 +679,7 @@
var rowColSelectIndex = uiGridCtrl.grid.api.cellNav.rowColSelectIndex(rowCol);

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

grid.api.cellNav.raise.navigate(newRowCol, grid.cellNav.lastRowCol);
grid.cellNav.lastRowCol = newRowCol;
Expand Down Expand Up @@ -1088,8 +1011,8 @@
* @restrict A
* @description Stacks on top of ui.grid.uiGridCell to provide cell navigation
*/
module.directive('uiGridCell', ['$timeout', '$document', 'uiGridCellNavService', 'gridUtil', 'uiGridCellNavConstants', 'uiGridConstants', 'RowColFactory',
function ($timeout, $document, uiGridCellNavService, gridUtil, uiGridCellNavConstants, uiGridConstants, RowCol) {
module.directive('uiGridCell', ['$timeout', '$document', 'uiGridCellNavService', 'gridUtil', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn',
function ($timeout, $document, uiGridCellNavService, gridUtil, uiGridCellNavConstants, uiGridConstants, GridRowColumn) {
return {
priority: -150, // run after default uiGridCell directive and ui.grid.edit uiGridCell
restrict: 'A',
Expand All @@ -1114,7 +1037,7 @@

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

evt.stopPropagation();
$scope.$apply();
Expand Down Expand Up @@ -1152,7 +1075,7 @@

//You can only focus on elements with a tabindex value
$elm.on('focus', function (evt) {
uiGridCtrl.cellNav.broadcastCellNav(new RowCol($scope.row, $scope.col), false, evt);
uiGridCtrl.cellNav.broadcastCellNav(new GridRowColumn($scope.row, $scope.col), false, evt);
evt.stopPropagation();
$scope.$apply();
});
Expand Down
86 changes: 86 additions & 0 deletions src/js/core/factories/GridRowColumn.js
@@ -0,0 +1,86 @@
(function(){
'use strict';
/**
* @ngdoc object
* @name ui.grid.class:GridRowColumn
* @param {GridRow} row The row for this pair
* @param {GridColumn} column The column for this pair
* @description A row and column pair that represents the intersection of these two entities.
* Must be instantiated as a constructor using the `new` keyword.
*/
angular.module('ui.grid')
.factory('GridRowColumn', ['$parse', '$filter',
function GridRowColumnFactory($parse, $filter){
var GridRowColumn = function GridRowColumn(row, col) {
if ( !(this instanceof GridRowColumn)){
throw "Using GridRowColumn as a function insead of as a constructor. Must be called with `new` keyword";
}

/**
* @ngdoc object
* @name row
* @propertyOf ui.grid.class:GridRowColumn
* @description {@link ui.grid.class:GridRow }
*/
this.row = row;
/**
* @ngdoc object
* @name col
* @propertyOf ui.grid.class:GridRowColumn
* @description {@link ui.grid.class:GridColumn }
*/
this.col = col;
};

/**
* @ngdoc function
* @name getIntersectionValueRaw
* @methodOf ui.grid.class:GridRowColumn
* @description Gets the intersection of where the row and column meet.
* @returns {String|Number|Object} The value from the grid data that this GridRowColumn points too.
* If the column has a cellFilter this will NOT return the filtered value.
*/
GridRowColumn.prototype.getIntersectionValueRaw = function(){
var getter = $parse(this.row.getEntityQualifiedColField(this.col));
var context = this.row;
return getter(context);
};
/**
* @ngdoc function
* @name getIntersectionValueFiltered
* @methodOf ui.grid.class:GridRowColumn
* @description Gets the intersection of where the row and column meet.
* @returns {String|Number|Object} The value from the grid data that this GridRowColumn points too.
* If the column has a cellFilter this will also apply the filter to it and return the value that the filter displays.
*/
GridRowColumn.prototype.getIntersectionValueFiltered = function(){
var value = this.getIntersectionValueRaw();
if (this.col.cellFilter && this.col.cellFilter !== ''){
var getFilterIfExists = function(filterName){
try {
return $filter(filterName);
} catch (e){
return null;
}
};
var filter = getFilterIfExists(this.col.cellFilter);
if (filter) { // Check if this is filter name or a filter string
value = filter(value);
} else { // We have the template version of a filter so we need to parse it apart
// Get the filter params out using a regex
// Test out this regex here https://regex101.com/r/rC5eR5/2
var re = /([^:]*):([^:]*):?([\s\S]+)?/;
var matches;
if ((matches = re.exec(this.col.cellFilter)) !== null) {
// View your result using the matches-variable.
// eg matches[0] etc.
value = $filter(matches[1])(value, matches[2], matches[3]);
}
}
}
return value;
};
return GridRowColumn;
}
]);
})();

0 comments on commit 2bed530

Please sign in to comment.