Skip to content

Commit

Permalink
1. data-model chenged to ng-model (issue davidjnelson#27)
Browse files Browse the repository at this point in the history 
2. sort state fix (issue davidjnelson#24)
3. scope is now inherited (issue davidjnelson#8)
4. less verbose markup (sort-arrow-ascending and sort-arrow-descending
are optional markup)
  • Loading branch information
@garaboncias
garaboncias committed Aug 3, 2013
1 parent dafd06b commit b61a9f1
Showing 1 changed file with 36 additions and 48 deletions.
84 changes: 36 additions & 48 deletions src/main/webapp/js/lib/angular-table.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
angular.module('angular-table', [])
.directive('angularTable', ['SortState', 'TemplateStaticState',
function(SortState, TemplateStaticState) {
.directive('angularTable', ['TemplateStaticState',
function(TemplateStaticState) {
return {
// only support elements for now to simplify the manual transclusion and replace logic.
restrict: 'E',
// manually transclude and replace the template to work around not being able to have a template with td or tr as a root element
// see bug: https://github.com/angular/angular.js/issues/1459
compile: function (tElement, tAttrs) {
SortState.sortExpression = tAttrs.defaultSortColumn;
TemplateStaticState.instrumentationEnabled = tAttrs.instrumentationEnabled;

// find whatever classes were passed into the angular-table, and merge them with the built in classes for the container div
Expand All @@ -18,31 +17,29 @@ angular.module('angular-table', [])
tElement.replaceWith(rowTemplate);

// return linking function
return function(scope) {
scope.parent = scope.$parent;
return function(scope, element, attrs, controller) {
scope.sortState = {
sortExpression : attrs.defaultSortColumn,
sortDirectionToColumnMap : {},
setSortExpression : function(columnName) {
var s = scope.sortState;
s.sortExpression = columnName;

// track sort directions by sorted column for a better ux
s.sortDirectionToColumnMap[s.sortExpression] = !s.sortDirectionToColumnMap[s.sortExpression];
}
};
scope.$watch(attrs.ngModel,function(value){scope.model = value});
scope.$watch(attrs.filterQueryModel,function(value){scope.filterQueryModel = value});
};
},
scope: {
model: '=',
filterQueryModel: '='
}
};
}])
.directive('headerRow', ['ManualCompiler', 'ScrollingContainerHeightState', 'JqLiteExtension', 'SortState', 'ResizeHeightEvent', 'ResizeWidthEvent', 'Instrumentation',
function(ManualCompiler, ScrollingContainerHeightState, JqLiteExtension, SortState, ResizeHeightEvent, ResizeWidthEvent, Instrumentation) {
.directive('headerRow', ['ManualCompiler', 'ScrollingContainerHeightState', 'JqLiteExtension', 'ResizeHeightEvent', 'ResizeWidthEvent', 'Instrumentation',
function(ManualCompiler, ScrollingContainerHeightState, JqLiteExtension, ResizeHeightEvent, ResizeWidthEvent, Instrumentation) {
return {
// only support elements for now to simplify the manual transclusion and replace logic.
restrict: 'E',
controller: ['$scope', '$parse', function($scope, $parse) {
$scope.SortState = SortState;

$scope.setSortExpression = function(columnName) {
SortState.sortExpression = columnName;

// track sort directions by sorted column for a better ux
SortState.sortDirectionToColumnMap[SortState.sortExpression] = !SortState.sortDirectionToColumnMap[SortState.sortExpression];
};
}],
// manually transclude and replace the template to work around not being able to have a template with td or tr as a root element
// see bug: https://github.com/angular/angular.js/issues/1459
compile: function (tElement, tAttrs) {
Expand All @@ -67,16 +64,14 @@ angular.module('angular-table', [])
}
};
}])
.directive('row', ['ManualCompiler', 'ResizeHeightEvent', '$window', 'Debounce', 'TemplateStaticState', 'RowState', 'SortState',
.directive('row', ['ManualCompiler', 'ResizeHeightEvent', '$window', 'Debounce', 'TemplateStaticState', 'RowState',
'ScrollingContainerHeightState', 'JqLiteExtension', 'Instrumentation', 'ResizeWidthEvent', '$compile',
function(ManualCompiler, ResizeHeightEvent, $window, Debounce, TemplateStaticState, RowState, SortState, ScrollingContainerHeightState,
function(ManualCompiler, ResizeHeightEvent, $window, Debounce, TemplateStaticState, RowState, ScrollingContainerHeightState,
JqLiteExtension, Instrumentation, ResizeWidthEvent, $compile) {
return {
// only support elements for now to simplify the manual transclusion and replace logic.
restrict: 'E',
controller: ['$scope', function($scope) {
$scope.sortExpression = SortState.sortExpression;

$scope.handleClick = function(row, parentScopeClickHandler, selectedRowBackgroundColor) {
var clickHandlerFunctionName = parentScopeClickHandler.replace('(row)', '');

Expand Down Expand Up @@ -115,7 +110,6 @@ angular.module('angular-table', [])
// return a linking function
return function(scope, iElement) {
scope.ScrollingContainerHeightState = ScrollingContainerHeightState;
scope.SortState = SortState;

var getHeaderComputedHeight = function() {
return JqLiteExtension.getComputedHeightAsFloat(iElement.parent()[0]);
Expand Down Expand Up @@ -163,7 +157,7 @@ angular.module('angular-table', [])
// scroll to top when sort applied
// watches get called n times until the model settles. it's typically one or two, but processing in the functions
// must be idempotent and as such shouldn't rely on it being any specific number.
scope.$watch('SortState', function() {
scope.$watch('sortState', function() {
iElement[0].scrollTop = 0;
}, true);

Expand Down Expand Up @@ -261,18 +255,24 @@ angular.module('angular-table', [])
angular.forEach(tElement.children(), function(childColumn, index) {
if(angular.element(childColumn).attr('sortable') === 'true') {
// add the ascending sort icon
angular.element(childColumn).find('sort-arrow-descending').attr('ng-show',
'SortState.sortExpression == \'' + angular.element(childColumn).attr('sort-field-name') +
'\' && !SortState.sortDirectionToColumnMap[\'' + angular.element(childColumn).attr('sort-field-name') + '\']').addClass('angularTableDefaultSortArrowAscending');
var $sortdesc = angular.element(childColumn).find('sort-arrow-descending');
if ($sortdesc.length == 0)
$sortdesc = $('<div>').appendTo(angular.element(childColumn));
$sortdesc.attr('ng-show',
'sortState.sortExpression == \'' + angular.element(childColumn).attr('sort-field-name') +
'\' && !sortState.sortDirectionToColumnMap[\'' + angular.element(childColumn).attr('sort-field-name') + '\']').addClass('angularTableDefaultSortArrowAscending');

// add the descending sort icon
angular.element(childColumn).find('sort-arrow-ascending').attr('ng-show',
'SortState.sortExpression == \'' + angular.element(childColumn).attr('sort-field-name') +
'\' && SortState.sortDirectionToColumnMap[\'' + angular.element(childColumn).attr('sort-field-name') + '\']').addClass('angularTableDefaultSortArrowDescending');
var $sortasc = angular.element(childColumn).find('sort-arrow-ascending');
if ($sortasc.length == 0)
$sortasc = $('<div>').appendTo(angular.element(childColumn));
$sortasc.attr('ng-show',
'sortState.sortExpression == \'' + angular.element(childColumn).attr('sort-field-name') +
'\' && sortState.sortDirectionToColumnMap[\'' + angular.element(childColumn).attr('sort-field-name') + '\']').addClass('angularTableDefaultSortArrowDescending');

// add the sort click handler
angular.element(childColumn).attr('ng-click', 'setSortExpression(\'' +
angular.element(childColumn).attr('sort-field-name') + '\')');
angular.element(childColumn).attr('ng-click', 'sortState.setSortExpression(\'' +
angular.element(childColumn).attr('sort-field-name') + '\')');

// remove the sort field name attribute from the dsl
angular.element(childColumn).removeAttr('sort-field-name');
Expand Down Expand Up @@ -316,7 +316,7 @@ angular.module('angular-table', [])

// add the ng-repeat and row selection click handler to each row
rowTemplate = rowTemplate.replace('<tr',
'<tr ng-repeat="row in model | orderBy:SortState.sortExpression:SortState.sortDirectionToColumnMap[SortState.sortExpression] | filter:filterQueryModel" ' +
'<tr ng-repeat="row in model | orderBy:sortState.sortExpression:sortState.sortDirectionToColumnMap[sortState.sortExpression] | filter:filterQueryModel" ' +
selectedBackgroundColor + ngClick);
}

Expand Down Expand Up @@ -379,18 +379,6 @@ angular.module('angular-table', [])
return self;
})

.service('SortState', function() {
var self = this;

// store the sort expression
self.sortExpression = '';

// store the columns sort direction mapping
self.sortDirectionToColumnMap = {};

return self;
})

.service('Instrumentation', ['TemplateStaticState', '$log', function(TemplateStaticState, $log) {
var self = this;
self.log = function(source, event, value) {
Expand Down

0 comments on commit b61a9f1

Please sign in to comment.