fix(Grid Scrolling): Overwriting default scrolling for better UX.

grunt/aliases.js

@@ -10,7 +10,7 @@ module.exports = function (grunt, options) {
     'default': ['before-test', 'test:single', 'after-test'],
 
     // Build with no testing
-    'build': ['ngtemplates', 'concat', 'uglify', 'fontello', 'less', 'ngdocs', 'copy:site', 'copy:less_customizer',],
+    'build': ['ngtemplates', 'concat', 'uglify', 'less', 'ngdocs', 'copy:site', 'copy:less_customizer',],
 
     // Auto-test tasks for development
     'autotest:unit': ['karmangular:start'],
@@ -36,11 +36,6 @@ module.exports = function (grunt, options) {
     baseTasks['dev'].splice(baseTasks['dev'].indexOf('autotest:unit'), 1);
   }
 
-  if (grunt.option('fontello') === false) {
-    grunt.log.writeln("Skipping fontello...");
-    baseTasks['build'].splice(baseTasks['build'].indexOf('fontello'), 1);
-  }
-
   if (process.env.TRAVIS){
     baseTasks['test:single'] = ['karma:travis'];
   }

grunt/watch.js

@@ -30,11 +30,6 @@ module.exports = function( grunt, options ){
       tasks: ['less', 'ngdocs', 'concat:customizer_less']
     },
 
-    fontello: {
-      files: 'src/font/config.json',
-      tasks: ['fontello', 'less']
-    },
-
     docs: {
       files: ['misc/tutorial/**/*.ngdoc', 'misc/api/**/*.ngdoc', 'misc/doc/**'],
       tasks: 'ngdocs'

misc/tutorial/116_fonts_and_installation.ngdoc

@@ -9,7 +9,7 @@ This tutorial addresses the basics of the configuration.
 
 Key points here are:
 
-1. Fonts are a derivative of font-awesome via fontello, and are used for the dropdown icons and 
+1. Fonts are a derivative of font-awesome and are used for the dropdown icons and
 various menu buttons and the like.  When they're not working they show a "chinese looking" character.  
 2. The tutorial pages generally show the fonts correctly.  If a tutorial page, when served from
 ui-grid.info is not showing fonts correctly, then this is likely a defect with ui-grid.  If it's 

package.json

@@ -50,7 +50,6 @@
     "grunt-contrib-uglify": "~0.2",
     "grunt-contrib-watch": "~0.5",
     "grunt-conventional-changelog": "~1.0.0",
-    "grunt-fontello": "~0.1",
     "grunt-gh-pages": "~0.9.0",
     "grunt-jscs": "^0.7.1",
     "grunt-karma": "~0.8",

src/features/edit/js/gridEdit.js

@@ -966,9 +966,20 @@
                     });
                   }
 
-                  $elm.on('blur', function (evt) {
-                    $scope.stopEdit(evt);
+                  // macOS will blur the checkbox when clicked in Safari and Firefox,
+                  // to get around this, we disable the blur handler on mousedown,
+                  // and then focus the checkbox and re-enable the blur handler after $timeout
+                  $elm.on('mousedown', function(evt) {
+                    if ($elm[0].type === 'checkbox') {
+                      $elm.off('blur', $scope.stopEdit);
+                      $timeout(function() {
+                        $elm.focus();
+                        $elm.on('blur', $scope.stopEdit);
+                      });
+                    }
                   });
+
+                  $elm.on('blur', $scope.stopEdit);
                 });
 
 
@@ -1132,9 +1143,9 @@
                 //set focus at start of edit
                 $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () {
                   $timeout(function(){
-                    $elm[0].focus();      
+                    $elm[0].focus();
                   });
-                  
+
                   $elm[0].style.width = ($elm[0].parentElement.offsetWidth - 1) + 'px';
                   $elm.on('blur', function (evt) {
                     $scope.stopEdit(evt);

src/features/exporter/js/exporter.js

@@ -235,6 +235,14 @@
            * <br/>Defaults to false
            */
           gridOptions.exporterOlderExcelCompatibility = gridOptions.exporterOlderExcelCompatibility === true;
+          /**
+           * @ngdoc object
+           * @name exporterMenuItemOrder
+           * @propertyOf  ui.grid.exporter.api:GridOptions
+           * @description An option to determine the starting point for the menu items created by the exporter
+           * <br/>Defaults to 200
+           */
+          gridOptions.exporterMenuItemOrder = gridOptions.exporterMenuItemOrder ? gridOptions.exporterMenuItemOrder : 200;
           /**
            * @ngdoc object
            * @name exporterPdfDefaultStyle
@@ -547,7 +555,7 @@
               shown: function() {
                 return this.grid.options.exporterMenuCsv && this.grid.options.exporterMenuAllData;
               },
-              order: 200
+              order: grid.options.exporterMenuItemOrder
             },
             {
               title: i18nService.getSafeText('gridMenu.exporterVisibleAsCsv'),
@@ -557,7 +565,7 @@
               shown: function() {
                 return this.grid.options.exporterMenuCsv && this.grid.options.exporterMenuVisibleData;
               },
-              order: 201
+              order: grid.options.exporterMenuItemOrder + 1
             },
             {
               title: i18nService.getSafeText('gridMenu.exporterSelectedAsCsv'),
@@ -568,7 +576,7 @@
                 return this.grid.options.exporterMenuCsv && this.grid.options.exporterMenuSelectedData &&
                        ( this.grid.api.selection && this.grid.api.selection.getSelectedRows().length > 0 );
               },
-              order: 202
+              order: grid.options.exporterMenuItemOrder + 2
             },
             {
               title: i18nService.getSafeText('gridMenu.exporterAllAsPdf'),
@@ -578,7 +586,7 @@
               shown: function() {
                 return this.grid.options.exporterMenuPdf && this.grid.options.exporterMenuAllData;
               },
-              order: 203
+              order: grid.options.exporterMenuItemOrder + 3
             },
             {
               title: i18nService.getSafeText('gridMenu.exporterVisibleAsPdf'),
@@ -588,7 +596,7 @@
               shown: function() {
                 return this.grid.options.exporterMenuPdf && this.grid.options.exporterMenuVisibleData;
               },
-              order: 204
+              order: grid.options.exporterMenuItemOrder + 4
             },
             {
               title: i18nService.getSafeText('gridMenu.exporterSelectedAsPdf'),
@@ -599,7 +607,7 @@
                 return this.grid.options.exporterMenuPdf && this.grid.options.exporterMenuSelectedData &&
                        ( this.grid.api.selection && this.grid.api.selection.getSelectedRows().length > 0 );
               },
-              order: 205
+              order: grid.options.exporterMenuItemOrder + 5
             }
           ]);
         },

src/features/exporter/test/exporter.spec.js

@@ -92,7 +92,8 @@ describe('ui.grid.exporter uiGridExporterService', function () {
         exporterMenuPdf: true,
         exporterFieldCallback: jasmine.any(Function),
         exporterAllDataFn: null,
-        exporterSuppressColumns: []
+        exporterSuppressColumns: [],
+        exporterMenuItemOrder: 200
       });
     });
 
@@ -122,7 +123,8 @@ describe('ui.grid.exporter uiGridExporterService', function () {
         exporterMenuPdf: false,
         exporterFieldCallback: callback,
         exporterAllDataPromise: callback,
-        exporterSuppressColumns: [ 'buttons' ]
+        exporterSuppressColumns: [ 'buttons' ],
+        exporterMenuItemOrder: 75
       };
       uiGridExporterService.defaultGridOptions(options);
       expect( options ).toEqual({
@@ -150,7 +152,8 @@ describe('ui.grid.exporter uiGridExporterService', function () {
         exporterFieldCallback: callback,
         exporterAllDataFn: callback,
         exporterAllDataPromise: callback,
-        exporterSuppressColumns: [ 'buttons' ]
+        exporterSuppressColumns: [ 'buttons' ],
+        exporterMenuItemOrder: 75
       });
     });
   });

src/js/core/constants.js

@@ -190,7 +190,26 @@
       LEFT: 'left',
       RIGHT: 'right',
       NONE: 'none'
+    },
 
+    /**
+     * @ngdoc object
+     * @name scrollType
+     * @propertyOf ui.grid.service:uiGridConstants
+     * @description Used in {@link ui.grid.class:gridScrolling},
+     * to the type of scroll event currently in progress
+     *
+     * Available options are:
+     * - `uiGridConstants.scrollEvent.NONE` - set when no scroll events are being triggered
+     * - `uiGridConstants.scrollEvent.TOUCHABLE` - set when touchstart, touchmove or touchend are triggered
+     * - `uiGridConstants.scrollEvent.MOUSE` - set when mousedown, mousemove or mouseup are triggered
+     * - `uiGridConstants.scrollEvent.POINTER` - set when pointerdown, pointermove or pointerup are triggered
+     */
+    scrollType: {
+      NONE: 0,
+      TOUCHABLE: 1,
+      MOUSE: 2,
+      POINTER: 3
     },
 
     /**

src/js/core/directives/ui-grid-viewport.js

@@ -1,8 +1,8 @@
 (function(){
   'use strict';
 
-  angular.module('ui.grid').directive('uiGridViewport', ['gridUtil','ScrollEvent','uiGridConstants', '$log',
-    function(gridUtil, ScrollEvent, uiGridConstants, $log) {
+  angular.module('ui.grid').directive('uiGridViewport', ['gridUtil','ScrollEvent','uiGridConstants', '$log', 'gridScrolling',
+    function(gridUtil, ScrollEvent, uiGridConstants, $log, gridScrolling) {
       return {
         replace: true,
         scope: {},
@@ -31,8 +31,7 @@
           // Register this viewport with its container
           containerCtrl.viewport = $elm;
 
-
-          $elm.on('scroll', scrollHandler);
+          gridScrolling($elm, scrollHandler);
 
           var ignoreScroll = false;
 

src/js/core/factories/GridApi.js

@@ -66,7 +66,7 @@
            * which will override any filtering or other visibility calculations.
            * If the row is currently visible then sets it to invisible and calls
            * both grid refresh and emits the rowsVisibleChanged event
-           * @param {object} rowEntity gridOptions.data[] array instance
+           * @param {GridRow} row the row we want to make invisible
            */
           this.registerMethod( 'core', 'setRowInvisible', GridRow.prototype.setRowInvisible );
 
@@ -79,7 +79,7 @@
            * If the row is currently invisible then sets it to visible and calls
            * both grid refresh and emits the rowsVisibleChanged event
            * TODO: if a filter is active then we can't just set it to visible?
-           * @param {object} rowEntity gridOptions.data[] array instance
+           * @param {GridRow} row the row we want to make visible
            */
           this.registerMethod( 'core', 'clearRowInvisible', GridRow.prototype.clearRowInvisible );
 

src/js/core/factories/GridOptions.js

@@ -224,10 +224,17 @@ angular.module('ui.grid')
        * @ngdoc property
        * @name rowHeight
        * @propertyOf ui.grid.class:GridOptions
-       * @description The height of the row in pixels, defaults to 30
+       * @description The height of the row in pixels,  Can be passed as integer or string. defaults to 30.
        *
        */
-      baseOptions.rowHeight = baseOptions.rowHeight || 30;
+
+      if (typeof baseOptions.rowHeight === "string") {
+        baseOptions.rowHeight = parseInt(baseOptions.rowHeight) || 30;
+      }
+
+      else {
+        baseOptions.rowHeight = baseOptions.rowHeight || 30;
+      }
 
       /**
        * @ngdoc integer

src/js/core/factories/GridRenderContainer.js

@@ -300,11 +300,11 @@ angular.module('ui.grid')
   };
 
   GridRenderContainer.prototype.getVerticalScrollLength = function getVerticalScrollLength() {
-    return this.getCanvasHeight() - this.getViewportHeight() + this.grid.scrollbarHeight;
+    return this.getCanvasHeight() - this.getViewportHeight() + this.grid.scrollbarHeight !== 0 ? this.getCanvasHeight() - this.getViewportHeight() + this.grid.scrollbarHeight : -1;
   };
 
   GridRenderContainer.prototype.getHorizontalScrollLength = function getHorizontalScrollLength() {
-    return this.getCanvasWidth() - this.getViewportWidth() + this.grid.scrollbarWidth;
+    return this.getCanvasWidth() - this.getViewportWidth() + this.grid.scrollbarWidth !== 0 ? this.getCanvasWidth() - this.getViewportWidth() + this.grid.scrollbarWidth : -1;
   };
 
   GridRenderContainer.prototype.getCanvasWidth = function getCanvasWidth() {