/*! ui-grid - v3.0.0-RC.18 - 2014-12-09 * Copyright (c) 2014 ; License: MIT */ (function () { 'use strict'; angular.module('ui.grid.i18n', []); angular.module('ui.grid', ['ui.grid.i18n']); })(); (function () { 'use strict'; angular.module('ui.grid').constant('uiGridConstants', { LOG_DEBUG_MESSAGES: true, LOG_WARN_MESSAGES: true, LOG_ERROR_MESSAGES: true, CUSTOM_FILTERS: /CUSTOM_FILTERS/g, COL_FIELD: /COL_FIELD/g, MODEL_COL_FIELD: /MODEL_COL_FIELD/g, DISPLAY_CELL_TEMPLATE: /DISPLAY_CELL_TEMPLATE/g, TEMPLATE_REGEXP: /<.+>/, FUNC_REGEXP: /(\([^)]*\))?$/, DOT_REGEXP: /\./g, APOS_REGEXP: /'/g, BRACKET_REGEXP: /^(.*)((?:\s*\[\s*\d+\s*\]\s*)|(?:\s*\[\s*"(?:[^"\\]|\\.)*"\s*\]\s*)|(?:\s*\[\s*'(?:[^'\\]|\\.)*'\s*\]\s*))(.*)$/, COL_CLASS_PREFIX: 'ui-grid-col', events: { GRID_SCROLL: 'uiGridScroll', COLUMN_MENU_SHOWN: 'uiGridColMenuShown', ITEM_DRAGGING: 'uiGridItemDragStart' // For any item being dragged }, // copied from http://www.lsauer.com/2011/08/javascript-keymap-keycodes-in-json.html keymap: { TAB: 9, STRG: 17, CTRL: 17, CTRLRIGHT: 18, CTRLR: 18, SHIFT: 16, RETURN: 13, ENTER: 13, BACKSPACE: 8, BCKSP: 8, ALT: 18, ALTR: 17, ALTRIGHT: 17, SPACE: 32, WIN: 91, MAC: 91, FN: null, UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39, ESC: 27, DEL: 46, F1: 112, F2: 113, F3: 114, F4: 115, F5: 116, F6: 117, F7: 118, F8: 119, F9: 120, F10: 121, F11: 122, F12: 123 }, ASC: 'asc', DESC: 'desc', filter: { STARTS_WITH: 2, ENDS_WITH: 4, EXACT: 8, CONTAINS: 16, GREATER_THAN: 32, GREATER_THAN_OR_EQUAL: 64, LESS_THAN: 128, LESS_THAN_OR_EQUAL: 256, NOT_EQUAL: 512 }, aggregationTypes: { sum: 2, count: 4, avg: 8, min: 16, max: 32 }, // TODO(c0bra): Create full list of these somehow. NOTE: do any allow a space before or after them? CURRENCY_SYMBOLS: ['ƒ', '$', '£', '$', '¤', '¥', '៛', '₩', '₱', '฿', '₫'], dataChange: { ALL: 'all', EDIT: 'edit', ROW: 'row', COLUMN: 'column' }, scrollbars: { NEVER: 0, ALWAYS: 1, WHEN_NEEDED: 2 } }); })(); angular.module('ui.grid').directive('uiGridCell', ['$compile', '$parse', 'gridUtil', 'uiGridConstants', function ($compile, $parse, gridUtil, uiGridConstants) { var uiGridCell = { priority: 0, scope: false, require: '?^uiGrid', compile: function() { return { pre: function($scope, $elm, $attrs, uiGridCtrl) { function compileTemplate() { var compiledElementFn = $scope.col.compiledElementFn; compiledElementFn($scope, function(clonedElement, scope) { $elm.append(clonedElement); }); } // If the grid controller is present, use it to get the compiled cell template function if (uiGridCtrl && $scope.col.compiledElementFn) { compileTemplate(); } // No controller, compile the element manually (for unit tests) else { if ( uiGridCtrl && !$scope.col.compiledElementFn ){ // gridUtil.logError('Render has been called before precompile. Please log a ui-grid issue'); $scope.col.getCompiledElementFn() .then(function (compiledElementFn) { compiledElementFn($scope, function(clonedElement, scope) { $elm.append(clonedElement); }); }); } else { var html = $scope.col.cellTemplate .replace(uiGridConstants.MODEL_COL_FIELD, 'row.entity.' + gridUtil.preEval($scope.col.field)) .replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)'); var cellElement = $compile(html)($scope); $elm.append(cellElement); } } }, post: function($scope, $elm, $attrs, uiGridCtrl) { $elm.addClass($scope.col.getColClass(false)); var classAdded; var updateClass = function( grid ){ var contents = $elm; if ( classAdded ){ contents.removeClass( classAdded ); classAdded = null; } if (angular.isFunction($scope.col.cellClass)) { classAdded = $scope.col.cellClass($scope.grid, $scope.row, $scope.col, $scope.rowRenderIndex, $scope.colRenderIndex); } else { classAdded = $scope.col.cellClass; } contents.addClass(classAdded); }; if ($scope.col.cellClass) { updateClass(); } // Register a data change watch that would get triggered whenever someone edits a cell or modifies column defs var watchUid = $scope.grid.registerDataChangeCallback( updateClass, [uiGridConstants.dataChange.COLUMN, uiGridConstants.dataChange.EDIT]); var deregisterFunction = function() { $scope.grid.deregisterDataChangeCallback( watchUid ); }; $scope.$on( '$destroy', deregisterFunction ); } }; } }; return uiGridCell; }]); (function(){ angular.module('ui.grid') .service('uiGridColumnMenuService', [ 'i18nService', 'uiGridConstants', 'gridUtil', function ( i18nService, uiGridConstants, gridUtil ) { /** * @ngdoc service * @name ui.grid.service:uiGridColumnMenuService * * @description Services for working with column menus, factored out * to make the code easier to understand */ var service = { /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name initialize * @description Sets defaults, puts a reference to the $scope on * the uiGridController * @param {$scope} $scope the $scope from the uiGridColumnMenu * @param {controller} uiGridCtrl the uiGridController for the grid * we're on * */ initialize: function( $scope, uiGridCtrl ){ $scope.grid = uiGridCtrl.grid; // Store a reference to this link/controller in the main uiGrid controller // to allow showMenu later uiGridCtrl.columnMenuScope = $scope; // Save whether we're shown or not so the columns can check $scope.menuShown = false; }, /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name setColMenuItemWatch * @description Setup a watch on $scope.col.menuItems, and update * menuItems based on this. $scope.col needs to be set by the column * before calling the menu. * @param {$scope} $scope the $scope from the uiGridColumnMenu * @param {controller} uiGridCtrl the uiGridController for the grid * we're on * */ setColMenuItemWatch: function ( $scope ){ var deregFunction = $scope.$watch('col.menuItems', function (n, o) { if (typeof(n) !== 'undefined' && n && angular.isArray(n)) { n.forEach(function (item) { if (typeof(item.context) === 'undefined' || !item.context) { item.context = {}; } item.context.col = $scope.col; }); $scope.menuItems = $scope.defaultMenuItems.concat(n); } else { $scope.menuItems = $scope.defaultMenuItems; } }); $scope.$on( '$destroy', deregFunction ); }, /** * @ngdoc boolean * @name enableSorting * @propertyOf ui.grid.class:GridOptions.columnDef * @description (optional) True by default. When enabled, this setting adds sort * widgets to the column header, allowing sorting of the data in the individual column. */ /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name sortable * @description determines whether this column is sortable * @param {$scope} $scope the $scope from the uiGridColumnMenu * */ sortable: function( $scope ) { if ( $scope.grid.options.enableSorting && typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.enableSorting) { return true; } else { return false; } }, /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name isActiveSort * @description determines whether the requested sort direction is current active, to * allow highlighting in the menu * @param {$scope} $scope the $scope from the uiGridColumnMenu * @param {string} direction the direction that we'd have selected for us to be active * */ isActiveSort: function( $scope, direction ){ return (typeof($scope.col) !== 'undefined' && typeof($scope.col.sort) !== 'undefined' && typeof($scope.col.sort.direction) !== 'undefined' && $scope.col.sort.direction === direction); }, /** * @ngdoc boolean * @name suppressRemoveSort * @propertyOf ui.grid.class:GridOptions.columnDef * @description (optional) False by default. When enabled, this setting hides the removeSort option * in the menu. */ /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name suppressRemoveSort * @description determines whether we should suppress the removeSort option * @param {$scope} $scope the $scope from the uiGridColumnMenu * */ suppressRemoveSort: function( $scope ) { if ($scope.col && $scope.col.colDef && $scope.col.colDef.suppressRemoveSort) { return true; } else { return false; } }, /** * @ngdoc boolean * @name enableHiding * @propertyOf ui.grid.class:GridOptions.columnDef * @description (optional) True by default. When set to false, this setting prevents a user from hiding the column * using the column menu or the grid menu. */ /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name hideable * @description determines whether a column can be hidden, by checking the enableHiding columnDef option * @param {$scope} $scope the $scope from the uiGridColumnMenu * */ hideable: function( $scope ) { if (typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.colDef && $scope.col.colDef.enableHiding === false ) { return false; } else { return true; } }, /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name getDefaultMenuItems * @description returns the default menu items for a column menu * @param {$scope} $scope the $scope from the uiGridColumnMenu * */ getDefaultMenuItems: function( $scope ){ return [ { title: i18nService.getSafeText('sort.ascending'), icon: 'ui-grid-icon-sort-alt-up', action: function($event) { $event.stopPropagation(); $scope.sortColumn($event, uiGridConstants.ASC); }, shown: function () { return service.sortable( $scope ); }, active: function() { return service.isActiveSort( $scope, uiGridConstants.ASC); } }, { title: i18nService.getSafeText('sort.descending'), icon: 'ui-grid-icon-sort-alt-down', action: function($event) { $event.stopPropagation(); $scope.sortColumn($event, uiGridConstants.DESC); }, shown: function() { return service.sortable( $scope ); }, active: function() { return service.isActiveSort( $scope, uiGridConstants.DESC); } }, { title: i18nService.getSafeText('sort.remove'), icon: 'ui-grid-icon-cancel', action: function ($event) { $event.stopPropagation(); $scope.unsortColumn(); }, shown: function() { return service.sortable( $scope ) && typeof($scope.col) !== 'undefined' && (typeof($scope.col.sort) !== 'undefined' && typeof($scope.col.sort.direction) !== 'undefined') && $scope.col.sort.direction !== null && !service.suppressRemoveSort( $scope ); } }, { title: i18nService.getSafeText('column.hide'), icon: 'ui-grid-icon-cancel', shown: function() { return service.hideable( $scope ); }, action: function ($event) { $event.stopPropagation(); $scope.hideColumn(); } } ]; }, /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name getColumnElementPosition * @description gets the position information needed to place the column * menu below the column header * @param {$scope} $scope the $scope from the uiGridColumnMenu * @param {GridCol} column the column we want to position below * @param {element} $columnElement the column element we want to position below * @returns {hash} containing left, top, offset, height, width * */ getColumnElementPosition: function( $scope, column, $columnElement ){ var positionData = {}; positionData.left = $columnElement[0].offsetLeft; positionData.top = $columnElement[0].offsetTop; // Get the grid scrollLeft positionData.offset = 0; if (column.grid.options.offsetLeft) { positionData.offset = column.grid.options.offsetLeft; } positionData.height = gridUtil.elementHeight($columnElement, true); positionData.width = gridUtil.elementWidth($columnElement, true); return positionData; }, /** * @ngdoc method * @methodOf ui.grid.service:uiGridColumnMenuService * @name repositionMenu * @description Reposition the menu below the new column. If the menu has no child nodes * (i.e. it's not currently visible) then we guess it's width at 100, we'll be called again * later to fix it * @param {$scope} $scope the $scope from the uiGridColumnMenu * @param {GridCol} column the column we want to position below * @param {hash} positionData a hash containing left, top, offset, height, width * @param {element} $elm the column menu element that we want to reposition * @param {element} $columnElement the column element that we want to reposition underneath * */ repositionMenu: function( $scope, column, positionData, $elm, $columnElement ) { var menu = $elm[0].querySelectorAll('.ui-grid-menu'); var containerId = column.renderContainer ? column.renderContainer : 'body'; var renderContainer = column.grid.renderContainers[containerId]; // It's possible that the render container of the column we're attaching to is // offset from the grid (i.e. pinned containers), we need to get the difference in the offsetLeft // between the render container and the grid var renderContainerElm = gridUtil.closestElm($columnElement, '.ui-grid-render-container'); var renderContainerOffset = renderContainerElm.getBoundingClientRect().left - $scope.grid.element[0].getBoundingClientRect().left; var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft; // default value the last width for _this_ column, otherwise last width for _any_ column, otherwise default to 170 var myWidth = column.lastMenuWidth ? column.lastMenuWidth : ( $scope.lastMenuWidth ? $scope.lastMenuWidth : 170); var paddingRight = column.lastMenuPaddingRight ? column.lastMenuPaddingRight : ( $scope.lastMenuPaddingRight ? $scope.lastMenuPaddingRight : 10); if ( menu.length !== 0 ){ var mid = menu[0].querySelectorAll('.ui-grid-menu-mid'); if ( mid.length !== 0 && !angular.element(mid).hasClass('ng-hide') ) { myWidth = gridUtil.elementWidth(menu, true); $scope.lastMenuWidth = myWidth; column.lastMenuWidth = myWidth; // TODO(c0bra): use padding-left/padding-right based on document direction (ltr/rtl), place menu on proper side // Get the column menu right padding paddingRight = parseInt(gridUtil.getStyles(angular.element(menu)[0])['paddingRight'], 10); $scope.lastMenuPaddingRight = paddingRight; column.lastMenuPaddingRight = paddingRight; } } var left = positionData.left + renderContainerOffset - containerScrollLeft + positionData.width - myWidth + paddingRight; if (left < positionData.offset){ left = positionData.offset; } $elm.css('left', left + 'px'); $elm.css('top', (positionData.top + positionData.height) + 'px'); } }; return service; }]) .directive('uiGridColumnMenu', ['$timeout', 'gridUtil', 'uiGridConstants', 'uiGridColumnMenuService', function ($timeout, gridUtil, uiGridConstants, uiGridColumnMenuService) { /** * @ngdoc directive * @name ui.grid.directive:uiGridColumnMenu * @description Provides the column menu framework, leverages uiGridMenu underneath * */ var uiGridColumnMenu = { priority: 0, scope: true, require: '?^uiGrid', templateUrl: 'ui-grid/uiGridColumnMenu', replace: true, link: function ($scope, $elm, $attrs, uiGridCtrl) { var self = this; uiGridColumnMenuService.initialize( $scope, uiGridCtrl ); $scope.defaultMenuItems = uiGridColumnMenuService.getDefaultMenuItems( $scope ); // Set the menu items for use with the column menu. The user can later add additional items via the watch $scope.menuItems = $scope.defaultMenuItems; uiGridColumnMenuService.setColMenuItemWatch( $scope ); /** * @ngdoc method * @methodOf ui.grid.directive:uiGridColumnMenu * @name showMenu * @description Shows the column menu. If the menu is already displayed it * calls the menu to ask it to hide (it will animate), then it repositions the menu * to the right place whilst hidden (it will make an assumption on menu width), * then it asks the menu to show (it will animate), then it repositions the menu again * once we can calculate it's size. * @param {GridCol} column the column we want to position below * @param {element} $columnElement the column element we want to position below */ $scope.showMenu = function(column, $columnElement, event) { // Swap to this column $scope.col = column; // Get the position information for the column element var colElementPosition = uiGridColumnMenuService.getColumnElementPosition( $scope, column, $columnElement ); if ($scope.menuShown) { // we want to hide, then reposition, then show, but we want to wait for animations // we set a variable, and then rely on the menu-hidden event to call the reposition and show $scope.colElement = $columnElement; $scope.colElementPosition = colElementPosition; $scope.hideThenShow = true; $scope.$broadcast('hide-menu', { originalEvent: event }); } else { self.shown = $scope.menuShown = true; uiGridColumnMenuService.repositionMenu( $scope, column, colElementPosition, $elm, $columnElement ); $scope.colElement = $columnElement; $scope.colElementPosition = colElementPosition; $scope.$broadcast('show-menu', { originalEvent: event }); } }; /** * @ngdoc method * @methodOf ui.grid.directive:uiGridColumnMenu * @name hideMenu * @description Hides the column menu. * @param {boolean} broadcastTrigger true if we were triggered by a broadcast * from the menu itself - in which case don't broadcast again as we'll get * an infinite loop */ $scope.hideMenu = function( broadcastTrigger ) { // delete $scope.col; $scope.menuShown = false; if ( !broadcastTrigger ){ $scope.$broadcast('hide-menu'); } }; $scope.$on('menu-hidden', function() { if ( $scope.hideThenShow ){ delete $scope.hideThenShow; uiGridColumnMenuService.repositionMenu( $scope, $scope.col, $scope.colElementPosition, $elm, $scope.colElement ); $scope.$broadcast('show-menu'); $scope.menuShown = true; } else { $scope.hideMenu( true ); } }); $scope.$on('menu-shown', function() { $timeout( function() { uiGridColumnMenuService.repositionMenu( $scope, $scope.col, $scope.colElementPosition, $elm, $scope.colElement ); delete $scope.colElementPosition; delete $scope.columnElement; }, 200); }); /* Column methods */ $scope.sortColumn = function (event, dir) { event.stopPropagation(); $scope.grid.sortColumn($scope.col, dir, true) .then(function () { $scope.grid.refresh(); $scope.hideMenu(); }); }; $scope.unsortColumn = function () { $scope.col.unsort(); $scope.grid.refresh(); $scope.hideMenu(); }; $scope.hideColumn = function () { $scope.col.colDef.visible = false; $scope.grid.refresh(); $scope.hideMenu(); }; }, controller: ['$scope', function ($scope) { var self = this; $scope.$watch('menuItems', function (n, o) { self.menuItems = n; }); }] }; return uiGridColumnMenu; }]); })(); (function () { 'use strict'; angular.module('ui.grid').directive('uiGridFooterCell', ['$timeout', 'gridUtil', 'uiGridConstants', '$compile', function ($timeout, gridUtil, uiGridConstants, $compile) { var uiGridFooterCell = { priority: 0, scope: { col: '=', row: '=', renderIndex: '=' }, replace: true, require: '^uiGrid', compile: function compile(tElement, tAttrs, transclude) { return { pre: function ($scope, $elm, $attrs, uiGridCtrl) { var cellFooter = $compile($scope.col.footerCellTemplate)($scope); $elm.append(cellFooter); }, post: function ($scope, $elm, $attrs, uiGridCtrl) { //$elm.addClass($scope.col.getColClass(false)); $scope.grid = uiGridCtrl.grid; $scope.getExternalScopes = uiGridCtrl.getExternalScopes; $elm.addClass($scope.col.getColClass(false)); // apply any footerCellClass var classAdded; var updateClass = function( grid ){ var contents = $elm; if ( classAdded ){ contents.removeClass( classAdded ); classAdded = null; } if (angular.isFunction($scope.col.footerCellClass)) { classAdded = $scope.col.footerCellClass($scope.grid, $scope.row, $scope.col, $scope.rowRenderIndex, $scope.colRenderIndex); } else { classAdded = $scope.col.footerCellClass; } contents.addClass(classAdded); }; if ($scope.col.footerCellClass) { updateClass(); } // Register a data change watch that would get triggered whenever someone edits a cell or modifies column defs var watchUid = $scope.grid.registerDataChangeCallback( updateClass, [uiGridConstants.dataChange.COLUMN]); $scope.$on( '$destroy', function() { $scope.grid.deregisterDataChangeCallback( watchUid ); }); } }; } }; return uiGridFooterCell; }]); })(); (function () { 'use strict'; angular.module('ui.grid').directive('uiGridFooter', ['$templateCache', '$compile', 'uiGridConstants', 'gridUtil', '$timeout', function ($templateCache, $compile, uiGridConstants, gridUtil, $timeout) { var defaultTemplate = 'ui-grid/ui-grid-footer'; return { restrict: 'EA', replace: true, // priority: 1000, require: ['^uiGrid', '^uiGridRenderContainer'], scope: true, compile: function ($elm, $attrs) { return { pre: function ($scope, $elm, $attrs, controllers) { var uiGridCtrl = controllers[0]; var containerCtrl = controllers[1]; $scope.grid = uiGridCtrl.grid; $scope.colContainer = containerCtrl.colContainer; $scope.getExternalScopes = uiGridCtrl.getExternalScopes; containerCtrl.footer = $elm; var footerTemplate = ($scope.grid.options.footerTemplate) ? $scope.grid.options.footerTemplate : defaultTemplate; gridUtil.getTemplate(footerTemplate) .then(function (contents) { var template = angular.element(contents); var newElm = $compile(template)($scope); $elm.append(newElm); if (containerCtrl) { // Inject a reference to the footer viewport (if it exists) into the grid controller for use in the horizontal scroll handler below var footerViewport = $elm[0].getElementsByClassName('ui-grid-footer-viewport')[0]; if (footerViewport) { containerCtrl.footerViewport = footerViewport; } } }); }, post: function ($scope, $elm, $attrs, controllers) { var uiGridCtrl = controllers[0]; var containerCtrl = controllers[1]; // gridUtil.logDebug('ui-grid-footer link'); var grid = uiGridCtrl.grid; // Don't animate footer cells gridUtil.disableAnimations($elm); containerCtrl.footer = $elm; var footerViewport = $elm[0].getElementsByClassName('ui-grid-footer-viewport')[0]; if (footerViewport) { containerCtrl.footerViewport = footerViewport; } } }; } }; }]); })(); (function(){ 'use strict'; angular.module('ui.grid').directive('uiGridGroupPanel', ["$compile", "uiGridConstants", "gridUtil", function($compile, uiGridConstants, gridUtil) { var defaultTemplate = 'ui-grid/ui-grid-group-panel'; return { restrict: 'EA', replace: true, require: '?^uiGrid', scope: false, compile: function($elm, $attrs) { return { pre: function ($scope, $elm, $attrs, uiGridCtrl) { var groupPanelTemplate = $scope.grid.options.groupPanelTemplate || defaultTemplate; gridUtil.getTemplate(groupPanelTemplate) .then(function (contents) { var template = angular.element(contents); var newElm = $compile(template)($scope); $elm.append(newElm); }); }, post: function ($scope, $elm, $attrs, uiGridCtrl) { $elm.bind('$destroy', function() { // scrollUnbinder(); }); } }; } }; }]); })(); (function(){ 'use strict'; angular.module('ui.grid').directive('uiGridHeaderCell', ['$compile', '$timeout', '$window', '$document', 'gridUtil', 'uiGridConstants', function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants) { // Do stuff after mouse has been down this many ms on the header cell var mousedownTimeout = 500; var uiGridHeaderCell = { priority: 0, scope: { col: '=', row: '=', renderIndex: '=' }, require: ['?^uiGrid', '^uiGridRenderContainer'], replace: true, compile: function() { return { pre: function ($scope, $elm, $attrs) { var cellHeader = $compile($scope.col.headerCellTemplate)($scope); $elm.append(cellHeader); }, post: function ($scope, $elm, $attrs, controllers) { var uiGridCtrl = controllers[0]; var renderContainerCtrl = controllers[1]; $scope.grid = uiGridCtrl.grid; $scope.getExternalScopes = uiGridCtrl.getExternalScopes; $scope.renderContainer = uiGridCtrl.grid.renderContainers[renderContainerCtrl.containerId]; $elm.addClass($scope.col.getColClass(false)); // Hide the menu by default $scope.menuShown = false; // Put asc and desc sort directions in scope $scope.asc = uiGridConstants.ASC; $scope.desc = uiGridConstants.DESC; // Store a reference to menu element var $colMenu = angular.element( $elm[0].querySelectorAll('.ui-grid-header-cell-menu') ); var $contentsElm = angular.element( $elm[0].querySelectorAll('.ui-grid-cell-contents') ); // apply any headerCellClass var classAdded; var updateClass = function( grid ){ var contents = $elm; if ( classAdded ){ contents.removeClass( classAdded ); classAdded = null; } if (angular.isFunction($scope.col.headerCellClass)) { classAdded = $scope.col.headerCellClass($scope.grid, $scope.row, $scope.col, $scope.rowRenderIndex, $scope.colRenderIndex); } else { classAdded = $scope.col.headerCellClass; } contents.addClass(classAdded); }; if ($scope.col.headerCellClass) { updateClass(); } // Register a data change watch that would get triggered whenever someone edits a cell or modifies column defs var watchUid = $scope.grid.registerDataChangeCallback( updateClass, [uiGridConstants.dataChange.COLUMN]); var deregisterFunction = function() { $scope.grid.deregisterDataChangeCallback( watchUid ); }; $scope.$on( '$destroy', deregisterFunction ); // Figure out whether this column is sortable or not if (uiGridCtrl.grid.options.enableSorting && $scope.col.enableSorting) { $scope.sortable = true; } else { $scope.sortable = false; } // Figure out whether this column is filterable or not if (uiGridCtrl.grid.options.enableFiltering && $scope.col.enableFiltering) { $scope.filterable = true; } else { $scope.filterable = false; } // figure out whether we support column menus if ($scope.col.grid.options && $scope.col.grid.options.enableColumnMenus !== false && $scope.col.colDef && $scope.col.colDef.enableColumnMenu !== false){ $scope.colMenu = true; } else { $scope.colMenu = false; } function handleClick(evt) { // If the shift key is being held down, add this column to the sort var add = false; if (evt.shiftKey) { add = true; } // Sort this column then rebuild the grid's rows uiGridCtrl.grid.sortColumn($scope.col, add) .then(function () { if (uiGridCtrl.columnMenuScope) { uiGridCtrl.columnMenuScope.hideMenu(); } uiGridCtrl.grid.refresh(); }); } /** * @ngdoc property * @name enableColumnMenu * @propertyOf ui.grid.class:GridOptions.columnDef * @description if column menus are enabled, controls the column menus for this specific * column (i.e. if gridOptions.enableColumnMenus, then you can control column menus * using this option. If gridOptions.enableColumnMenus === false then you get no column * menus irrespective of the value of this option ). Defaults to true. * */ /** * @ngdoc property * @name enableColumnMenus * @propertyOf ui.grid.class:GridOptions.columnDef * @description Override for column menus everywhere - if set to false then you get no * column menus. Defaults to true. * */ if ( $scope.sortable || $scope.colMenu ){ // Long-click (for mobile) var cancelMousedownTimeout; var mousedownStartTime = 0; $contentsElm.on('mousedown touchstart', function(event) { if (typeof(event.originalEvent) !== 'undefined' && event.originalEvent !== undefined) { event = event.originalEvent; } // Don't show the menu if it's not the left button if (event.button && event.button !== 0) { return; } mousedownStartTime = (new Date()).getTime(); cancelMousedownTimeout = $timeout(function() { }, mousedownTimeout); cancelMousedownTimeout.then(function () { if ( $scope.colMenu ) { uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm, event); } }); }); $contentsElm.on('mouseup touchend', function () { $timeout.cancel(cancelMousedownTimeout); }); $scope.$on('$destroy', function () { $contentsElm.off('mousedown touchstart'); }); } $scope.toggleMenu = function($event) { $event.stopPropagation(); // If the menu is already showing... if (uiGridCtrl.columnMenuScope.menuShown) { // ... and we're the column the menu is on... if (uiGridCtrl.columnMenuScope.col === $scope.col) { // ... hide it uiGridCtrl.columnMenuScope.hideMenu(); } // ... and we're NOT the column the menu is on else { // ... move the menu to our column uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm); } } // If the menu is NOT showing else { // ... show it on our column uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm); } }; // If this column is sortable, add a click event handler if ($scope.sortable) { $contentsElm.on('click touchend', function(evt) { evt.stopPropagation(); $timeout.cancel(cancelMousedownTimeout); var mousedownEndTime = (new Date()).getTime(); var mousedownTime = mousedownEndTime - mousedownStartTime; if (mousedownTime > mousedownTimeout) { // long click, handled above with mousedown } else { // short click handleClick(evt); } }); $scope.$on('$destroy', function () { // Cancel any pending long-click timeout $timeout.cancel(cancelMousedownTimeout); }); } if ($scope.filterable) { var filterDeregisters = []; angular.forEach($scope.col.filters, function(filter, i) { filterDeregisters.push($scope.$watch('col.filters[' + i + '].term', function(n, o) { if (n !== o) { uiGridCtrl.grid.api.core.raise.filterChanged(); uiGridCtrl.grid.refresh() .then(function () { if (uiGridCtrl.prevScrollArgs && uiGridCtrl.prevScrollArgs.y && uiGridCtrl.prevScrollArgs.y.percentage) { uiGridCtrl.fireScrollingEvent({ y: { percentage: uiGridCtrl.prevScrollArgs.y.percentage } }); } // uiGridCtrl.fireEvent('force-vertical-scroll'); }); } })); }); $scope.$on('$destroy', function() { angular.forEach(filterDeregisters, function(filterDeregister) { filterDeregister(); }); }); } } }; } }; return uiGridHeaderCell; }]); })(); (function(){ 'use strict'; angular.module('ui.grid').directive('uiGridHeader', ['$templateCache', '$compile', 'uiGridConstants', 'gridUtil', '$timeout', function($templateCache, $compile, uiGridConstants, gridUtil, $timeout) { var defaultTemplate = 'ui-grid/ui-grid-header'; var emptyTemplate = 'ui-grid/ui-grid-no-header'; return { restrict: 'EA', // templateUrl: 'ui-grid/ui-grid-header', replace: true, // priority: 1000, require: ['^uiGrid', '^uiGridRenderContainer'], scope: true, compile: function($elm, $attrs) { return { pre: function ($scope, $elm, $attrs, controllers) { var uiGridCtrl = controllers[0]; var containerCtrl = controllers[1]; $scope.grid = uiGridCtrl.grid; $scope.colContainer = containerCtrl.colContainer; $scope.getExternalScopes = uiGridCtrl.getExternalScopes; containerCtrl.header = $elm; containerCtrl.colContainer.header = $elm; var headerTemplate; if (!$scope.grid.options.showHeader) { headerTemplate = emptyTemplate; } else { headerTemplate = ($scope.grid.options.headerTemplate) ? $scope.grid.options.headerTemplate : defaultTemplate; } gridUtil.getTemplate(headerTemplate) .then(function (contents) { var template = angular.element(contents); var newElm = $compile(template)($scope); $elm.replaceWith(newElm); // Replace the reference to the container's header element with this new element containerCtrl.header = newElm; containerCtrl.colContainer.header = newElm; // And update $elm to be the new element $elm = newElm; if (containerCtrl) { // Inject a reference to the header viewport (if it exists) into the grid controller for use in the horizontal scroll handler below var headerViewport = $elm[0].getElementsByClassName('ui-grid-header-viewport')[0]; if (headerViewport) { containerCtrl.headerViewport = headerViewport; } } }); }, post: function ($scope, $elm, $attrs, controllers) { var uiGridCtrl = controllers[0]; var containerCtrl = controllers[1]; // gridUtil.logDebug('ui-grid-header link'); var grid = uiGridCtrl.grid; // Don't animate header cells gridUtil.disableAnimations($elm); function updateColumnWidths() { // Get the width of the viewport var availableWidth = containerCtrl.colContainer.getViewportWidth(); if (typeof(uiGridCtrl.grid.verticalScrollbarWidth) !== 'undefined' && uiGridCtrl.grid.verticalScrollbarWidth !== undefined && uiGridCtrl.grid.verticalScrollbarWidth > 0) { availableWidth = availableWidth + uiGridCtrl.grid.verticalScrollbarWidth; } // The total number of columns // var equalWidthColumnCount = columnCount = uiGridCtrl.grid.options.columnDefs.length; // var equalWidth = availableWidth / equalWidthColumnCount; var columnCache = containerCtrl.colContainer.visibleColumnCache, canvasWidth = 0, asteriskNum = 0, oneAsterisk = 0, leftoverWidth = availableWidth, hasVariableWidth = false; var getColWidth = function(column){ if (column.widthType === "manual"){ return +column.width; } else if (column.widthType === "percent"){ return parseInt(column.width.replace(/%/g, ''), 10) * availableWidth / 100; } else if (column.widthType === "auto"){ // leftOverWidth is subtracted from after each call to this // function so we need to calculate oneAsterisk size only once if (oneAsterisk === 0) { oneAsterisk = parseInt(leftoverWidth / asteriskNum, 10); } return column.width.length * oneAsterisk; } }; // Populate / determine column width types: columnCache.forEach(function(column){ column.widthType = null; if (isFinite(+column.width)){ column.widthType = "manual"; } else if (gridUtil.endsWith(column.width, "%")){ column.widthType = "percent"; hasVariableWidth = true; } else if (angular.isString(column.width) && column.width.indexOf('*') !== -1){ column.widthType = "auto"; asteriskNum += column.width.length; hasVariableWidth = true; } }); // For sorting, calculate width from first to last: var colWidthPriority = ["manual", "percent", "auto"]; columnCache.filter(function(column){ // Only draw visible items with a widthType return (column.visible && column.widthType); }).sort(function(a,b){ // Calculate widths in order, so that manual comes first, etc. return colWidthPriority.indexOf(a.widthType) - colWidthPriority.indexOf(b.widthType); }).forEach(function(column){ // Calculate widths: var colWidth = getColWidth(column); if (column.minWidth){ colWidth = Math.max(colWidth, column.minWidth); } if (column.maxWidth){ colWidth = Math.min(colWidth, column.maxWidth); } column.drawnWidth = Math.floor(colWidth); canvasWidth += column.drawnWidth; leftoverWidth -= column.drawnWidth; }); // If the grid width didn't divide evenly into the column widths and we have pixels left over, dole them out to the columns one by one to make everything fit if (hasVariableWidth && leftoverWidth > 0 && canvasWidth > 0 && canvasWidth < availableWidth) { var remFn = function (column) { if (leftoverWidth > 0 && (column.widthType === "auto" || column.widthType === "percent")) { column.drawnWidth = column.drawnWidth + 1; canvasWidth = canvasWidth + 1; leftoverWidth--; } }; var prevLeftover = 0; do { prevLeftover = leftoverWidth; columnCache.forEach(remFn); } while (leftoverWidth > 0 && leftoverWidth !== prevLeftover ); } canvasWidth = Math.max(canvasWidth, availableWidth); // Build the CSS // uiGridCtrl.grid.columns.forEach(function (column) { var ret = ''; columnCache.forEach(function (column) { ret = ret + column.getColClassDefinition(); }); // Add the vertical scrollbar width back in to the canvas width, it's taken out in getViewportWidth if (grid.verticalScrollbarWidth) { canvasWidth = canvasWidth + grid.verticalScrollbarWidth; } // canvasWidth = canvasWidth + 1; // if we have a grid menu, then we prune the width of the last column header // to allow room for the button whilst still getting to the column menu if (columnCache.length > 0) { // && grid.options.enableGridMenu) { columnCache[columnCache.length - 1].headerWidth = columnCache[columnCache.length - 1].drawnWidth - 30; } containerCtrl.colContainer.canvasWidth = parseInt(canvasWidth, 10); // Return the styles back to buildStyles which pops them into the `customStyles` scope variable return ret; } containerCtrl.header = $elm; var headerViewport = $elm[0].getElementsByClassName('ui-grid-header-viewport')[0]; if (headerViewport) { containerCtrl.headerViewport = headerViewport; } //todo: remove this if by injecting gridCtrl into unit tests if (uiGridCtrl) { uiGridCtrl.grid.registerStyleComputation({ priority: 5, func: updateColumnWidths }); } } }; } }; }]); })(); (function(){ angular.module('ui.grid') .service('uiGridGridMenuService', [ 'gridUtil', 'i18nService', function( gridUtil, i18nService ) { /** * @ngdoc service * @name ui.grid.gridMenuService * * @description Methods for working with the grid menu */ var service = { /** * @ngdoc method * @methodOf ui.grid.gridMenuService * @name initialize * @description Sets up the gridMenu. Most importantly, sets our * scope onto the grid object as grid.gridMenuScope, allowing us * to operate when passed only the grid. Second most importantly, * we register the 'addToGridMenu' and 'removeFromGridMenu' methods * on the core api. * @param {$scope} $scope the scope of this gridMenu * @param {Grid} grid the grid to which this gridMenu is associated */ initialize: function( $scope, grid ){ grid.gridMenuScope = $scope; $scope.grid = grid; $scope.registeredMenuItems = []; // not certain this is needed, but would be bad to create a memory leak $scope.$on('$destroy', function() { if ( $scope.grid && $scope.grid.gridMenuScope ){ $scope.grid.gridMenuScope = null; } if ( $scope.grid ){ $scope.grid = null; } if ( $scope.registeredMenuItems ){ $scope.registeredMenuItems = null; } }); $scope.registeredMenuItems = []; /** * @ngdoc function * @name addToGridMenu * @methodOf ui.grid.core.api:PublicApi * @description add items to the grid menu. Used by features * to add their menu items if they are enabled, can also be used by * end users to add menu items. This method has the advantage of allowing * remove again, which can simplify management of which items are included * in the menu when. (Noting that in most cases the shown and active functions * provide a better way to handle visibility of menu items) * @param {Grid} grid the grid on which we are acting * @param {array} items menu items in the format as described in the tutorial, with * the added note that if you want to use remove you must also specify an `id` field, * which is provided when you want to remove an item. The id should be unique. * */ grid.api.registerMethod( 'core', 'addToGridMenu', service.addToGridMenu ); /** * @ngdoc function * @name removeFromGridMenu * @methodOf ui.grid.core.api:PublicApi * @description Remove an item from the grid menu based on a provided id. Assumes * that the id is unique, removes only the last instance of that id. Does nothing if * the specified id is not found * @param {Grid} grid the grid on which we are acting * @param {string} id the id we'd like to remove from the menu * */ grid.api.registerMethod( 'core', 'removeFromGridMenu', service.removeFromGridMenu ); }, /** * @ngdoc function * @name addToGridMenu * @propertyOf ui.grid.class:GridOptions * @description add items to the grid menu. Used by features * to add their menu items if they are enabled, can also be used by * end users to add menu items. This method has the advantage of allowing * remove again, which can simplify management of which items are included * in the menu when. (Noting that in most cases the shown and active functions * provide a better way to handle visibility of menu items) * @param {Grid} grid the grid on which we are acting * @param {array} items menu items in the format as described in the tutorial, with * the added note that if you want to use remove you must also specify an `id` field, * which is provided when you want to remove an item. The id should be unique. * */ addToGridMenu: function( grid, menuItems ) { if ( !angular.isArray( menuItems ) ) { gridUtil.logError( 'addToGridMenu: menuItems must be an array, and is not, not adding any items'); } else { if ( grid.gridMenuScope ){ grid.gridMenuScope.registeredMenuItems = grid.gridMenuScope.registeredMenuItems ? grid.gridMenuScope.registeredMenuItems : []; grid.gridMenuScope.registeredMenuItems = grid.gridMenuScope.registeredMenuItems.concat( menuItems ); } else { gridUtil.logError( 'Asked to addToGridMenu, but gridMenuScope not present. Timing issue? Please log issue with ui-grid'); } } }, /** * @ngdoc function * @name removeFromGridMenu * @methodOf ui.grid.core.api:PublicApi * @description Remove an item from the grid menu based on a provided id. Assumes * that the id is unique, removes only the last instance of that id. Does nothing if * the specified id is not found. If there is no gridMenuScope or registeredMenuItems * then do nothing silently - the desired result is those menu items not be present and they * aren't. * @param {Grid} grid the grid on which we are acting * @param {string} id the id we'd like to remove from the menu * */ removeFromGridMenu: function( grid, id ){ var foundIndex = -1; if ( grid && grid.gridMenuScope ){ grid.gridMenuScope.registeredMenuItems.forEach( function( value, index ) { if ( value.id === id ){ if (foundIndex > -1) { gridUtil.logError( 'removeFromGridMenu: found multiple items with the same id, removing only the last' ); } else { foundIndex = index; } } }); } if ( foundIndex > -1 ){ grid.gridMenuScope.registeredMenuItems.splice( foundIndex, 1 ); } }, /** * @ngdoc array * @name gridMenuCustomItems * @propertyOf ui.grid.class:GridOptions * @description (optional) An array of menu items that should be added to * the gridMenu. Follow the format documented in the tutorial for column * menu customisation. The context provided to the action function will * include context.grid. An alternative if working with dynamic menus is to use the * provided api - core.addToGridMenu and core.removeFromGridMenu, which handles * some of the management of items for you. * */ /** * @ngdoc boolean * @name gridMenuShowHideColumns * @propertyOf ui.grid.class:GridOptions * @description true by default, whether the grid menu should allow hide/show * of columns * */ /** * @ngdoc method * @methodOf ui.grid.gridMenuService * @name getMenuItems * @description Decides the menu items to show in the menu. This is a * combination of: * * - the default menu items that are always included, * - any menu items that have been provided through the addMenuItem api. These * are typically added by features within the grid * - any menu items included in grid.options.gridMenuCustomItems. These can be * changed dynamically, as they're always recalculated whenever we show the * menu * @param {$scope} $scope the scope of this gridMenu, from which we can find all * the information that we need * @returns {array} an array of menu items that can be shown */ getMenuItems: function( $scope ) { var menuItems = [ // this is where we add any menu items we want to always include ]; if ( $scope.grid.options.gridMenuCustomItems ){ if ( !angular.isArray( $scope.grid.options.gridMenuCustomItems ) ){ gridUtil.logError( 'gridOptions.gridMenuCustomItems must be an array, and is not'); } else { menuItems = menuItems.concat( $scope.grid.options.gridMenuCustomItems ); } } menuItems = menuItems.concat( $scope.registeredMenuItems ); if ( $scope.grid.options.gridMenuShowHideColumns !== false ){ menuItems = menuItems.concat( service.showHideColumns( $scope ) ); } return menuItems; }, /** * @ngdoc array * @name gridMenuTitleFilter * @propertyOf ui.grid.class:GridOptions * @description (optional) A function that takes a title string * (usually the col.displayName), and converts it into a display value. The function * must return either a string or a promise. * * Used for internationalization of the grid menu column names - for angular-translate * you can pass $translate as the function, for i18nService you can pass getSafeText as the * function * @example *
* gridOptions = {
* gridMenuTitleFilter: $translate
* }
*
*/
/**
* @ngdoc method
* @methodOf ui.grid.gridMenuService
* @name showHideColumns
* @description Adds two menu items for each of the columns in columnDefs. One
* menu item for hide, one menu item for show. Each is visible when appropriate
* (show when column is not visible, hide when column is visible). Each toggles
* the visible property on the columnDef using toggleColumnVisibility
* @param {$scope} $scope of a gridMenu, which contains a reference to the grid
*/
showHideColumns: function( $scope ){
var showHideColumns = [];
if ( !$scope.grid.options.columnDefs || $scope.grid.options.columnDefs.length === 0 || $scope.grid.columns.length === 0 ) {
return showHideColumns;
}
// add header for columns
showHideColumns.push({
title: i18nService.getSafeText('gridMenu.columns')
});
$scope.grid.options.gridMenuTitleFilter = $scope.grid.options.gridMenuTitleFilter ? $scope.grid.options.gridMenuTitleFilter : function( title ) { return title; };
$scope.grid.options.columnDefs.forEach( function( colDef, index ){
if ( colDef.enableHiding !== false ){
// add hide menu item - shows an OK icon as we only show when column is already visible
var menuItem = {
icon: 'ui-grid-icon-ok',
action: function($event) {
$event.stopPropagation();
service.toggleColumnVisibility( this.context.gridCol );
},
shown: function() {
return this.context.gridCol.colDef.visible === true || this.context.gridCol.colDef.visible === undefined;
},
context: { gridCol: $scope.grid.getColumn(colDef.name || colDef.field) }
};
service.setMenuItemTitle( menuItem, colDef, $scope.grid );
showHideColumns.push( menuItem );
// add show menu item - shows no icon as we only show when column is invisible
menuItem = {
icon: 'ui-grid-icon-cancel',
action: function($event) {
$event.stopPropagation();
service.toggleColumnVisibility( this.context.gridCol );
},
shown: function() {
return !(this.context.gridCol.colDef.visible === true || this.context.gridCol.colDef.visible === undefined);
},
context: { gridCol: $scope.grid.getColumn(colDef.name || colDef.field) }
};
service.setMenuItemTitle( menuItem, colDef, $scope.grid );
showHideColumns.push( menuItem );
}
});
return showHideColumns;
},
/**
* @ngdoc method
* @methodOf ui.grid.gridMenuService
* @name setMenuItemTitle
* @description Handles the response from gridMenuTitleFilter, adding it directly to the menu
* item if it returns a string, otherwise waiting for the promise to resolve or reject then
* putting the result into the title
* @param {object} menuItem the menuItem we want to put the title on
* @param {object} colDef the colDef from which we can get displayName, name or field
* @param {Grid} grid the grid, from which we can get the options.gridMenuTitleFilter
*
*/
setMenuItemTitle: function( menuItem, colDef, grid ){
var title = grid.options.gridMenuTitleFilter( colDef.displayName || colDef.name || colDef.field );
if ( typeof(title) === 'string' ){
menuItem.title = title;
} else if ( title.then ){
// must be a promise
menuItem.title = "";
title.then( function( successValue ) {
menuItem.title = successValue;
}, function( errorValue ) {
menuItem.title = errorValue;
});
} else {
gridUtil.logError('Expected gridMenuTitleFilter to return a string or a promise, it has returned neither, bad config');
menuItem.title = 'badconfig';
}
},
/**
* @ngdoc method
* @methodOf ui.grid.gridMenuService
* @name toggleColumnVisibility
* @description Toggles the visibility of an individual column. Expects to be
* provided a context that has on it a gridColumn, which is the column that
* we'll operate upon. We change the visibility, and refresh the grid as appropriate
* @param {GridCol} gridCol the column that we want to toggle
*
*/
toggleColumnVisibility: function( gridCol ) {
gridCol.colDef.visible = !( gridCol.colDef.visible === true || gridCol.colDef.visible === undefined );
gridCol.grid.refresh();
}
};
return service;
}])
.directive('uiGridMenuButton', ['gridUtil', 'uiGridConstants', 'uiGridGridMenuService',
function (gridUtil, uiGridConstants, uiGridGridMenuService) {
return {
priority: 0,
scope: true,
require: ['?^uiGrid'],
templateUrl: 'ui-grid/ui-grid-menu-button',
replace: true,
link: function ($scope, $elm, $attrs, controllers) {
var uiGridCtrl = controllers[0];
uiGridGridMenuService.initialize($scope, uiGridCtrl.grid);
$scope.shown = false;
$scope.toggleMenu = function () {
if ( $scope.shown ){
$scope.$broadcast('hide-menu');
$scope.shown = false;
} else {
$scope.menuItems = uiGridGridMenuService.getMenuItems( $scope );
$scope.$broadcast('show-menu');
$scope.shown = true;
}
};
$scope.$on('menu-hidden', function() {
$scope.shown = false;
});
}
};
}]);
})();
(function(){
/**
* @ngdoc directive
* @name ui.grid.directive:uiGridColumnMenu
* @element style
* @restrict A
*
* @description
* Allows us to interpolate expressions in `
I am in a box.
* mySortFn = function(a, b) {
* var nulls = $scope.gridApi.core.sortHandleNulls(a, b);
* if ( nulls !== null ){
* return nulls;
* } else {
* // your code for sorting here
* };
*
* @param {object} a sort value a
* @param {object} b sort value b
* @returns {number} null if there were no nulls/undefineds, otherwise returns
* a sort value that should be passed back from the sort function
*
*/
self.api.registerMethod( 'core', 'sortHandleNulls', rowSorter.handleNulls );
/**
* @ngdoc function
* @name sortChanged
* @methodOf ui.grid.core.api:PublicApi
* @description The sort criteria on one or more columns has
* changed. Provides as parameters the grid and the output of
* getColumnSorting, which is an array of gridColumns
* that have sorting on them, sorted in priority order.
*
* @param {Grid} grid the grid
* @param {array} sortColumns an array of columns with
* sorts on them, in priority order
*
* @example
*
* gridApi.core.on.sortChanged( grid, sortColumns );
*
*/
self.api.registerEvent( 'core', 'sortChanged' );
/**
* @ngdoc method
* @name notifyDataChange
* @methodOf ui.grid.core.api:PublicApi
* @description Notify the grid that a data or config change has occurred,
* where that change isn't something the grid was otherwise noticing. This
* might be particularly relevant where you've changed values within the data
* and you'd like cell classes to be re-evaluated, or changed config within
* the columnDef and you'd like headerCellClasses to be re-evaluated.
* @param {Grid} grid the grid
* @param {string} type one of the
* uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN), which tells
* us which refreshes to fire.
*
*/
self.api.registerMethod( 'core', 'notifyDataChange', this.notifyDataChange );
self.registerDataChangeCallback( self.columnRefreshCallback, [uiGridConstants.dataChange.COLUMN]);
self.registerDataChangeCallback( self.processRowsCallback, [uiGridConstants.dataChange.EDIT]);
};
/**
* @ngdoc function
* @name isRTL
* @methodOf ui.grid.class:Grid
* @description Returns true if grid is RightToLeft
*/
Grid.prototype.isRTL = function () {
return this.rtl;
};
/**
* @ngdoc function
* @name registerColumnBuilder
* @methodOf ui.grid.class:Grid
* @description When the build creates columns from column definitions, the columnbuilders will be called to add
* additional properties to the column.
* @param {function(colDef, col, gridOptions)} columnsProcessor function to be called
*/
Grid.prototype.registerColumnBuilder = function registerColumnBuilder(columnBuilder) {
this.columnBuilders.push(columnBuilder);
};
/**
* @ngdoc function
* @name buildColumnDefsFromData
* @methodOf ui.grid.class:Grid
* @description Populates columnDefs from the provided data
* @param {function(colDef, col, gridOptions)} rowBuilder function to be called
*/
Grid.prototype.buildColumnDefsFromData = function (dataRows){
this.options.columnDefs = gridUtil.getColumnsFromData(dataRows, this.options.excludeProperties);
};
/**
* @ngdoc function
* @name registerRowBuilder
* @methodOf ui.grid.class:Grid
* @description When the build creates rows from gridOptions.data, the rowBuilders will be called to add
* additional properties to the row.
* @param {function(row, gridOptions)} rowBuilder function to be called
*/
Grid.prototype.registerRowBuilder = function registerRowBuilder(rowBuilder) {
this.rowBuilders.push(rowBuilder);
};
/**
* @ngdoc function
* @name registerDataChangeCallback
* @methodOf ui.grid.class:Grid
* @description When a data change occurs, the data change callbacks of the specified type
* will be called. The rules are:
*
* - when the data watch fires, that is considered a ROW change (the data watch only notices
* added or removed rows)
* - when the api is called to inform us of a change, the declared type of that change is used
* - when a cell edit completes, the EDIT callbacks are triggered
* - when the columnDef watch fires, the COLUMN callbacks are triggered
*
* For a given event:
* - ALL calls ROW, EDIT, COLUMN and ALL callbacks
* - ROW calls ROW and ALL callbacks
* - EDIT calls EDIT and ALL callbacks
* - COLUMN calls COLUMN and ALL callbacks
*
* @param {function(grid)} callback function to be called
* @param {array} types the types of data change you want to be informed of. Values from
* the uiGridConstants.dataChange values ( ALL, EDIT, ROW, COLUMN ). Optional and defaults to
* ALL
* @returns {string} uid of the callback, can be used to deregister it again
*/
Grid.prototype.registerDataChangeCallback = function registerDataChangeCallback(callback, types) {
var uid = gridUtil.nextUid();
if ( !types ){
types = [uiGridConstants.dataChange.ALL];
}
if ( !Array.isArray(types)){
gridUtil.logError("Expected types to be an array or null in registerDataChangeCallback, value passed was: " + types );
}
this.dataChangeCallbacks[uid] = { callback: callback, types: types };
return uid;
};
/**
* @ngdoc function
* @name deregisterDataChangeCallback
* @methodOf ui.grid.class:Grid
* @description Delete the callback identified by the id.
* @param {string} uid the uid of the function that is to be deregistered
*/
Grid.prototype.deregisterDataChangeCallback = function deregisterDataChangeCallback(uid) {
delete this.dataChangeCallbacks[uid];
};
/**
* @ngdoc function
* @name callDataChangeCallbacks
* @methodOf ui.grid.class:Grid
* @description Calls the callbacks based on the type of data change that
* has occurred. Always calls the ALL callbacks, calls the ROW, EDIT, and COLUMN callbacks if the
* event type is matching, or if the type is ALL.
* @param {number} type the type of event that occurred - one of the
* uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN)
*/
Grid.prototype.callDataChangeCallbacks = function callDataChangeCallbacks(type, options) {
angular.forEach( this.dataChangeCallbacks, function( callback, uid ){
if ( callback.types.indexOf( uiGridConstants.dataChange.ALL ) !== -1 ||
callback.types.indexOf( type ) !== -1 ||
type === uiGridConstants.dataChange.ALL ) {
callback.callback( this );
}
}, this);
};
/**
* @ngdoc function
* @name notifyDataChange
* @methodOf ui.grid.class:Grid
* @description Notifies us that a data change has occurred, used in the public
* api for users to tell us when they've changed data or some other event that
* our watches cannot pick up
* @param {Grid} grid the grid
* @param {string} type the type of event that occurred - one of the
* uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN)
*/
Grid.prototype.notifyDataChange = function notifyDataChange(grid, type) {
var constants = uiGridConstants.dataChange;
if ( type === constants.ALL ||
type === constants.COLUMN ||
type === constants.EDIT ||
type === constants.ROW ){
grid.callDataChangeCallbacks( type );
} else {
gridUtil.logError("Notified of a data change, but the type was not recognised, so no action taken, type was: " + type);
}
};
/**
* @ngdoc function
* @name columnRefreshCallback
* @methodOf ui.grid.class:Grid
* @description refreshes the grid when a column refresh
* is notified, which triggers handling of the visible flag.
* This is called on uiGridConstants.dataChange.COLUMN, and is
* registered as a dataChangeCallback in grid.js
* @param {string} name column name
*/
Grid.prototype.columnRefreshCallback = function columnRefreshCallback( grid ){
grid.buildColumns();
grid.refresh();
};
/**
* @ngdoc function
* @name processRowsCallback
* @methodOf ui.grid.class:Grid
* @description calls the row processors, specifically
* intended to reset the sorting when an edit is called,
* registered as a dataChangeCallback on uiGridConstants.dataChange.EDIT
* @param {string} name column name
*/
Grid.prototype.processRowsCallback = function processRowsCallback( grid ){
grid.refreshRows();
};
/**
* @ngdoc function
* @name getColumn
* @methodOf ui.grid.class:Grid
* @description returns a grid column for the column name
* @param {string} name column name
*/
Grid.prototype.getColumn = function getColumn(name) {
var columns = this.columns.filter(function (column) {
return column.colDef.name === name;
});
return columns.length > 0 ? columns[0] : null;
};
/**
* @ngdoc function
* @name getColDef
* @methodOf ui.grid.class:Grid
* @description returns a grid colDef for the column name
* @param {string} name column.field
*/
Grid.prototype.getColDef = function getColDef(name) {
var colDefs = this.options.columnDefs.filter(function (colDef) {
return colDef.name === name;
});
return colDefs.length > 0 ? colDefs[0] : null;
};
/**
* @ngdoc function
* @name assignTypes
* @methodOf ui.grid.class:Grid
* @description uses the first row of data to assign colDef.type for any types not defined.
*/
/**
* @ngdoc property
* @name type
* @propertyOf ui.grid.class:GridOptions.columnDef
* @description the type of the column, used in sorting. If not provided then the
* grid will guess the type. Add this only if the grid guessing is not to your
* satisfaction. Refer to {@link ui.grid.service:GridUtil.guessType gridUtil.guessType} for
* a list of values the grid knows about.
*
*/
Grid.prototype.assignTypes = function(){
var self = this;
self.options.columnDefs.forEach(function (colDef, index) {
//Assign colDef type if not specified
if (!colDef.type) {
var col = new GridColumn(colDef, index, self);
var firstRow = self.rows.length > 0 ? self.rows[0] : null;
if (firstRow) {
colDef.type = gridUtil.guessType(self.getCellValue(firstRow, col));
}
else {
gridUtil.logWarn('Unable to assign type from data, so defaulting to string');
colDef.type = 'string';
}
}
});
};
/**
* @ngdoc function
* @name addRowHeaderColumn
* @methodOf ui.grid.class:Grid
* @description adds a row header column to the grid
* @param {object} column def
*/
Grid.prototype.addRowHeaderColumn = function addRowHeaderColumn(colDef) {
var self = this;
//self.createLeftContainer();
var rowHeaderCol = new GridColumn(colDef, self.rowHeaderColumns.length, self);
rowHeaderCol.isRowHeader = true;
if (self.isRTL()) {
self.createRightContainer();
rowHeaderCol.renderContainer = 'right';
}
else {
self.createLeftContainer();
rowHeaderCol.renderContainer = 'left';
}
// relies on the default column builder being first in array, as it is instantiated
// as part of grid creation
self.columnBuilders[0](colDef,rowHeaderCol,self.options)
.then(function(){
rowHeaderCol.enableFiltering = false;
rowHeaderCol.enableSorting = false;
rowHeaderCol.enableHiding = false;
self.rowHeaderColumns.push(rowHeaderCol);
self.buildColumns()
.then( function() {
self.preCompileCellTemplates();
self.handleWindowResize();
});
});
};
/**
* @ngdoc function
* @name buildColumns
* @methodOf ui.grid.class:Grid
* @description creates GridColumn objects from the columnDefinition. Calls each registered
* columnBuilder to further process the column
* @returns {Promise} a promise to load any needed column resources
*/
Grid.prototype.buildColumns = function buildColumns() {
// gridUtil.logDebug('buildColumns');
var self = this;
var builderPromises = [];
var headerOffset = self.rowHeaderColumns.length;
var i;
// Remove any columns for which a columnDef cannot be found
// Deliberately don't use forEach, as it doesn't like splice being called in the middle
// Also don't cache columns.length, as it will change during this operation
for (i = 0; i < self.columns.length; i++){
if (!self.getColDef(self.columns[i].name)) {
self.columns.splice(i, 1);
i--;
}
}
//add row header columns to the grid columns array _after_ columns without columnDefs have been removed
self.rowHeaderColumns.forEach(function (rowHeaderColumn) {
self.columns.unshift(rowHeaderColumn);
});
// look at each column def, and update column properties to match. If the column def
// doesn't have a column, then splice in a new gridCol
self.options.columnDefs.forEach(function (colDef, index) {
self.preprocessColDef(colDef);
var col = self.getColumn(colDef.name);
if (!col) {
col = new GridColumn(colDef, gridUtil.nextUid(), self);
self.columns.splice(index + headerOffset, 0, col);
}
else {
col.updateColumnDef(colDef);
}
self.columnBuilders.forEach(function (builder) {
builderPromises.push(builder.call(self, colDef, col, self.options));
});
});
return $q.all(builderPromises);
};
/**
* @ngdoc function
* @name preCompileCellTemplates
* @methodOf ui.grid.class:Grid
* @description precompiles all cell templates
*/
Grid.prototype.preCompileCellTemplates = function() {
var self = this;
this.columns.forEach(function (col) {
var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col));
html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
var compiledElementFn = $compile(html);
col.compiledElementFn = compiledElementFn;
if (col.compiledElementFnDefer) {
col.compiledElementFnDefer.resolve(col.compiledElementFn);
}
});
};
/**
* @ngdoc function
* @name getGridQualifiedColField
* @methodOf ui.grid.class:Grid
* @description Returns the $parse-able accessor for a column within its $scope
* @param {GridColumn} col col object
*/
Grid.prototype.getQualifiedColField = function (col) {
return 'row.entity.' + gridUtil.preEval(col.field);
};
/**
* @ngdoc function
* @name createLeftContainer
* @methodOf ui.grid.class:Grid
* @description creates the left render container if it doesn't already exist
*/
Grid.prototype.createLeftContainer = function() {
if (!this.hasLeftContainer()) {
this.renderContainers.left = new GridRenderContainer('left', this, { disableColumnOffset: true });
}
};
/**
* @ngdoc function
* @name createRightContainer
* @methodOf ui.grid.class:Grid
* @description creates the right render container if it doesn't already exist
*/
Grid.prototype.createRightContainer = function() {
if (!this.hasRightContainer()) {
this.renderContainers.right = new GridRenderContainer('right', this, { disableColumnOffset: true });
}
};
/**
* @ngdoc function
* @name hasLeftContainer
* @methodOf ui.grid.class:Grid
* @description returns true if leftContainer exists
*/
Grid.prototype.hasLeftContainer = function() {
return this.renderContainers.left !== undefined;
};
/**
* @ngdoc function
* @name hasLeftContainer
* @methodOf ui.grid.class:Grid
* @description returns true if rightContainer exists
*/
Grid.prototype.hasRightContainer = function() {
return this.renderContainers.right !== undefined;
};
/**
* undocumented function
* @name preprocessColDef
* @methodOf ui.grid.class:Grid
* @description defaults the name property from field to maintain backwards compatibility with 2.x
* validates that name or field is present
*/
Grid.prototype.preprocessColDef = function preprocessColDef(colDef) {
if (!colDef.field && !colDef.name) {
throw new Error('colDef.name or colDef.field property is required');
}
//maintain backwards compatibility with 2.x
//field was required in 2.x. now name is required
if (colDef.name === undefined && colDef.field !== undefined) {
colDef.name = colDef.field;
}
};
// Return a list of items that exist in the `n` array but not the `o` array. Uses optional property accessors passed as third & fourth parameters
Grid.prototype.newInN = function newInN(o, n, oAccessor, nAccessor) {
var self = this;
var t = [];
for (var i = 0; i < n.length; i++) {
var nV = nAccessor ? n[i][nAccessor] : n[i];
var found = false;
for (var j = 0; j < o.length; j++) {
var oV = oAccessor ? o[j][oAccessor] : o[j];
if (self.options.rowEquality(nV, oV)) {
found = true;
break;
}
}
if (!found) {
t.push(nV);
}
}
return t;
};
/**
* @ngdoc function
* @name getRow
* @methodOf ui.grid.class:Grid
* @description returns the GridRow that contains the rowEntity
* @param {object} rowEntity the gridOptions.data array element instance
*/
Grid.prototype.getRow = function getRow(rowEntity) {
var self = this;
var rows = this.rows.filter(function (row) {
return self.options.rowEquality(row.entity, rowEntity);
});
return rows.length > 0 ? rows[0] : null;
};
/**
* @ngdoc function
* @name modifyRows
* @methodOf ui.grid.class:Grid
* @description creates or removes GridRow objects from the newRawData array. Calls each registered
* rowBuilder to further process the row
*
* Rows are identified using the gridOptions.rowEquality function
*/
Grid.prototype.modifyRows = function modifyRows(newRawData) {
var self = this,
i,
rowhash,
found,
newRow;
if ((self.options.useExternalSorting || self.getColumnSorting().length === 0) && newRawData.length > 0) {
var oldRowHash = self.rowHashMap;
if (!oldRowHash) {
oldRowHash = {get: function(){return null;}};
}
self.createRowHashMap();
rowhash = self.rowHashMap;
var wasEmpty = self.rows.length === 0;
self.rows.length = 0;
for (i = 0; i < newRawData.length; i++) {
var newRawRow = newRawData[i];
found = oldRowHash.get(newRawRow);
if (found) {
newRow = found.row;
}
else {
newRow = self.processRowBuilders(new GridRow(newRawRow, i, self));
}
self.rows.push(newRow);
rowhash.put(newRawRow, {
i: i,
entity: newRawRow,
row:newRow
});
}
//now that we have data, it is save to assign types to colDefs
if (wasEmpty) {
self.assignTypes();
}
} else {
if (self.rows.length === 0 && newRawData.length > 0) {
if (self.options.enableRowHashing) {
if (!self.rowHashMap) {
self.createRowHashMap();
}
for (i = 0; i < newRawData.length; i++) {
newRow = newRawData[i];
self.rowHashMap.put(newRow, {
i: i,
entity: newRow
});
}
}
self.addRows(newRawData);
//now that we have data, it is save to assign types to colDefs
self.assignTypes();
}
else if (newRawData.length > 0) {
var unfoundNewRows, unfoundOldRows, unfoundNewRowsToFind;
// If row hashing is turned on
if (self.options.enableRowHashing) {
// Array of new rows that haven't been found in the old rowset
unfoundNewRows = [];
// Array of new rows that we explicitly HAVE to search for manually in the old row set. They cannot be looked up by their identity (because it doesn't exist).
unfoundNewRowsToFind = [];
// Map of rows that have been found in the new rowset
var foundOldRows = {};
// Array of old rows that have NOT been found in the new rowset
unfoundOldRows = [];
// Create the row HashMap if it doesn't exist already
if (!self.rowHashMap) {
self.createRowHashMap();
}
rowhash = self.rowHashMap;
// Make sure every new row has a hash
for (i = 0; i < newRawData.length; i++) {
newRow = newRawData[i];
// Flag this row as needing to be manually found if it didn't come in with a $$hashKey
var mustFind = false;
if (!self.options.getRowIdentity(newRow)) {
mustFind = true;
}
// See if the new row is already in the rowhash
found = rowhash.get(newRow);
// If so...
if (found) {
// See if it's already being used by as GridRow
if (found.row) {
// If so, mark this new row as being found
foundOldRows[self.options.rowIdentity(newRow)] = true;
}
}
else {
// Put the row in the hashmap with the index it corresponds to
rowhash.put(newRow, {
i: i,
entity: newRow
});
// This row has to be searched for manually in the old row set
if (mustFind) {
unfoundNewRowsToFind.push(newRow);
}
else {
unfoundNewRows.push(newRow);
}
}
}
// Build the list of unfound old rows
for (i = 0; i < self.rows.length; i++) {
var row = self.rows[i];
var hash = self.options.rowIdentity(row.entity);
if (!foundOldRows[hash]) {
unfoundOldRows.push(row);
}
}
}
// Look for new rows
var newRows = unfoundNewRows || [];
// The unfound new rows is either `unfoundNewRowsToFind`, if row hashing is turned on, or straight `newRawData` if it isn't
var unfoundNew = (unfoundNewRowsToFind || newRawData);
// Search for real new rows in `unfoundNew` and concat them onto `newRows`
newRows = newRows.concat(self.newInN(self.rows, unfoundNew, 'entity'));
self.addRows(newRows);
var deletedRows = self.getDeletedRows((unfoundOldRows || self.rows), newRawData);
for (i = 0; i < deletedRows.length; i++) {
if (self.options.enableRowHashing) {
self.rowHashMap.remove(deletedRows[i].entity);
}
self.rows.splice( self.rows.indexOf(deletedRows[i]), 1 );
}
}
// Empty data set
else {
// Reset the row HashMap
self.createRowHashMap();
// Reset the rows length!
self.rows.length = 0;
}
}
var p1 = $q.when(self.processRowsProcessors(self.rows))
.then(function (renderableRows) {
return self.setVisibleRows(renderableRows);
});
var p2 = $q.when(self.processColumnsProcessors(self.columns))
.then(function (renderableColumns) {
return self.setVisibleColumns(renderableColumns);
});
return $q.all([p1, p2]);
};
Grid.prototype.getDeletedRows = function(oldRows, newRows) {
var self = this;
var olds = oldRows.filter(function (oldRow) {
return !newRows.some(function (newItem) {
return self.options.rowEquality(newItem, oldRow.entity);
});
});
// var olds = self.newInN(newRows, oldRows, null, 'entity');
// dump('olds', olds);
return olds;
};
/**
* Private Undocumented Method
* @name addRows
* @methodOf ui.grid.class:Grid
* @description adds the newRawData array of rows to the grid and calls all registered
* rowBuilders. this keyword will reference the grid
*/
Grid.prototype.addRows = function addRows(newRawData) {
var self = this;
var existingRowCount = self.rows.length;
for (var i = 0; i < newRawData.length; i++) {
var newRow = self.processRowBuilders(new GridRow(newRawData[i], i + existingRowCount, self));
if (self.options.enableRowHashing) {
var found = self.rowHashMap.get(newRow.entity);
if (found) {
found.row = newRow;
}
}
self.rows.push(newRow);
}
};
/**
* @ngdoc function
* @name processRowBuilders
* @methodOf ui.grid.class:Grid
* @description processes all RowBuilders for the gridRow
* @param {GridRow} gridRow reference to gridRow
* @returns {GridRow} the gridRow with all additional behavior added
*/
Grid.prototype.processRowBuilders = function processRowBuilders(gridRow) {
var self = this;
self.rowBuilders.forEach(function (builder) {
builder.call(self, gridRow, self.options);
});
return gridRow;
};
/**
* @ngdoc function
* @name registerStyleComputation
* @methodOf ui.grid.class:Grid
* @description registered a styleComputation function
*
* If the function returns a value it will be appended into the grid's `"
);
$templateCache.put('ui-grid/uiGridCell',
"