add antiscroll support

.gitignore

@@ -1,5 +1,10 @@
 .gitk*
 .idea/*
 .DS_Store
+
+# node stuff
 node_modules/
-npm-debug.log
+npm-debug.log
+
+# sass stuff
+.sass-cache/

README.md

@@ -27,6 +27,7 @@ topViewport           .     .            .     // The scrolling region
     header            .     .            .     // The column headers
     subHeader         .     .            .     // Optional row of cells below the column headers
                       ....................
+contentViewportWrap   .     .            .
 contentViewport       .     .            .     // The scrolling region for the grid rows
   contentCanvas       .     .            .     // Full size of row content, both width and height
                       .     .            .
@@ -39,7 +40,7 @@ contentViewport       .     .            .     // The scrolling region for the g
 
 ## Other Changes:
 
-Adds some methods that make it more performant to do auto column resizing and exposes some methods that make it easier to work with multiple grid instances and pinned columns.
+**Adds some methods** that make it more performant to do auto column resizing and exposes some methods that make it easier to work with multiple grid instances and pinned columns.
 
 * `grid.updateColumnWidths(columnDefinitions)`
   * Using this method improves the performance of changing the width of one or more grid columns by a lot. The existing API only allows for a whole grid redraw, which can be very slow. Pull request with notes [here](https://github.com/mleibman/SlickGrid/pull/897). Use cases for fast column size adjustment may be: auto-sizing columns to fit content, responsive sizing cells to fill the screen, and similar.
@@ -49,7 +50,7 @@ Adds some methods that make it more performant to do auto column resizing and ex
 * Exposes the existing method `grid.setupColumnResize`, which allows you to re-enable column resizing if you're manually screwing around with the headers.
 * Some new options on `setColumns` and `resizeCanvas` let you prevent some of the expensive calculations, useful if you're doing them yourself externally.
 
-
+**Adds [antiscroll](https://github.com/learnboost/antiscroll) compatability** to enable a uniform, OSX-style scrolling experience across browsers. Enable antiscroll by including the antiscroll library on your page, and passing the `useAntiscroll: true` option to your SlickGrid instance. By default we don't show scrollbars until the user begins scrolling (to mimic the way OSX does it); to change that behavior, you can set the `showScrollbarsOnHover` option.
 
 
 ## (Original Documentation) Welcome to SlickGrid

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "slickgrid",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "homepage": "https://github.com/SimpleAsCouldBe/SlickGrid",
   "authors": [
     "Michael Leibman",
@@ -18,5 +18,8 @@
     "column",
     "size"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "antiscroll": "bcherny/antiscroll"
+  }
 }

slick.grid.js

@@ -90,7 +90,9 @@ if (typeof Slick === "undefined") {
       columnHeaderRenderer: columnHeaderRenderer,
       subHeaderRenderer: subHeaderRenderer,
       forceSyncScrolling: false,
-      addNewRowCssClass: "new-row"
+      addNewRowCssClass: "new-row",
+      useAntiscroll: false,
+      showScrollbarsOnHover: false
     };
 
     var columnDefaults = {
@@ -194,23 +196,35 @@ if (typeof Slick === "undefined") {
      topViewport[0].width  // left width
      topViewport.el        // both els
      topViewport.el[0]     // left el
+
+
+          [0]    [1]
+          .....................
+          .      .            .
+          .  TL  .     TR     .
+          .      .            .
+          .....................
+          .      .            .
+          .      .            .
+          .      .            .
+          .  CL  .     CR     . 
+          .      .            .
+          .      .            .
+          .      .            .
+          .....................
+
      */
-                                    //      [0]       [1]
-                                    //    ....................
-    var topViewport     = [{},{}],  //    .     .            .   // The scrolling region
-        topCanvas       = [{},{}],  //    .     .            .   // The full size of content (both off and on screen)
-        header          = [{},{}],  //    .     .            .   // The column headers
-        subHeader       = [{},{}],  //    .     .            .   // Optional row of cells below the column headers
-                                    //    ....................
-        contentViewport = [{},{}],  //    .     .            .   // The scrolling region for the grid rows
-        contentCanvas   = [{},{}],  //    .     .            .   // Full size of row content, both width and height
-        rows            = [{},{}];  //    .     .            .   // Container for information about rows
-                                    //    .     .            .
-                                    //    .     .            .
-                                    //    .     .            .
-                                    //    .     .            .
-                                    //    .     .            .
-                                    //    ....................
+
+    var topViewport         = [{},{}],  // The scrolling region
+        topCanvas           = [{},{}],  // The full size of content (both off and on screen)
+        header              = [{},{}],  // The column headers
+        subHeader           = [{},{}],  // Optional row of cells below the column headers
+        contentViewportWrap = {},       // Content viewports are wrapped with elements that have
+                                        //   the same dimensions as the viewports themselves.
+                                        //   This is in service of the antiscroll plugin.
+        contentViewport     = [{},{}],  // The scrolling region for the grid rows
+        contentCanvas       = [{},{}],  // Full size of row content, both width and height
+        rows                = [{},{}];  // Container for information about rows
 
     // Renaming Objects / Variables
     // yep, an array objectk instance with properties. yay @js!
@@ -236,6 +250,10 @@ if (typeof Slick === "undefined") {
         throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM.");
       }
 
+      if (options.useAntiscroll && !$.isFunction($.fn.antiscroll)) {
+        throw new ReferenceError('The { useAntiscroll: true } option was passed to SlickGrid, but the antiscroll library is not loaded. You can download the library here: https://github.com/bcherny/antiscroll.');
+      }
+
       // calculate these only once and share between grid instances
       maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight();
       scrollbarDimensions   = scrollbarDimensions   || measureScrollbar();
@@ -317,10 +335,15 @@ if (typeof Slick === "undefined") {
 //      if (!options.showTopPanel) {
 //        $topPanelScroller.hide();
 //      }
+
+      contentViewportWrap.el = $(
+        "<div class='viewport-wrap C L' tabIndex='0' hideFocus />" +
+        "<div class='viewport-wrap C R' tabIndex='0' hideFocus />"
+      );
 
       contentViewport.el = $(
-        "<div class='viewport C L' tabIndex='0' hideFocus />" +
-        "<div class='viewport C R' tabIndex='0' hideFocus />"
+        "<div class='viewport C L antiscroll-inner' tabIndex='0' hideFocus />" +
+        "<div class='viewport C R antiscroll-inner' tabIndex='0' hideFocus />"
       );
       contentCanvas.el = $(
         "<div class='canvas C L' tabIndex='0' hideFocus />" +
@@ -337,7 +360,9 @@ if (typeof Slick === "undefined") {
       topViewport.el[1].appendChild(topCanvas.el[1]);
       contentViewport.el[0].appendChild(contentCanvas.el[0]);
       contentViewport.el[1].appendChild(contentCanvas.el[1]);
-      $container.append( topViewport.el, contentViewport.el );
+      contentViewportWrap.el[0].appendChild(contentViewport.el[0]);
+      contentViewportWrap.el[1].appendChild(contentViewport.el[1]);
+      $container.append( topViewport.el, contentViewportWrap.el );
 
       measureCssSizes(); // Wins award for most 's'es in a row.
 
@@ -382,6 +407,7 @@ if (typeof Slick === "undefined") {
         updatePinnedState();
         setupColumnSort();
         resizeCanvas();
+        updateAntiscroll();
         bindAncestorScrollEvents();
 
         $container
@@ -549,19 +575,19 @@ if (typeof Slick === "undefined") {
           // Set widths on the left side, and width+left offset on the right side
           topViewport.el[0].style.width =
             topViewport.el[1].style.left =
-              contentViewport.el[0].style.width =
-                contentViewport.el[1].style.left =
+              contentViewportWrap.el[0].style.width =
+                contentViewportWrap.el[1].style.left =
                   canvasWidthL + 'px';
           topViewport.el[1].style.width =
-            contentViewport.el[1].style.width =
+            contentViewportWrap.el[1].style.width =
               (contentViewport.width - canvasWidthL) + 'px';
 
           // Viewport
           //cl.viewport.width(canvasWidthL);
           //cr.viewport.width(contentViewport.width - canvasWidthL);
         } else {
           topViewport.el[0].style.width =
-            contentViewport.el[0].style.width =
+            contentViewportWrap.el[0].style.width =
               null;
         }
         viewportHasHScroll = (canvasWidth > contentViewport.width - scrollbarDimensions.width);
@@ -1102,10 +1128,10 @@ if (typeof Slick === "undefined") {
     function updatePinnedState() {
       if (!isPinned) {
         topViewport.el.eq(1).hide();
-        contentViewport.el.eq(1).hide();
+        contentViewportWrap.el.eq(1).hide();
       } else {
         topViewport.el.eq(1).show();
-        contentViewport.el.eq(1).show();
+        contentViewportWrap.el.eq(1).show();
       }
       setScroller();
       setOverflow();
@@ -1114,6 +1140,46 @@ if (typeof Slick === "undefined") {
       invalidateAllRows();
     }
 
+    // enable antiscroll for an element
+    function disableAntiscroll ($element) {
+
+      $element.removeClass('antiscroll-wrap');
+
+      if ($element.data('antiscroll')) {
+        $element.data('antiscroll').destroy();
+      }
+
+    }
+
+    function enableAntiscroll ($element) {
+
+      $element
+        .addClass('antiscroll-wrap')
+        .antiscroll({
+          autoShow: options.showScrollbarsOnHover
+        });
+
+    }
+
+    function updateAntiscroll () {
+
+      if (!options.useAntiscroll) {
+        return;
+      }
+
+      var cl = contentViewportWrap.el.filter('.C.L'),
+          cr = contentViewportWrap.el.filter('.C.R');
+
+      if (isPinned) {
+        enableAntiscroll(cr);
+        disableAntiscroll(cl);
+      } else {
+        enableAntiscroll(cl);
+        disableAntiscroll(cr);
+      }
+
+    }
+
     // If columns are pinned, scrollers are in the right-side panes, otherwise they're in the left ones
     function setScroller() {
       if (options.pinnedColumn == undefined) {
@@ -1616,6 +1682,7 @@ if (typeof Slick === "undefined") {
       if (pinnedColChanged) { updatePinnedState(); }
 
       render();
+      updateAntiscroll();
     }
 
     function validateAndEnforceOptions() {
@@ -1878,6 +1945,7 @@ if (typeof Slick === "undefined") {
       updateRowCount();
       invalidateAllRows();
       render();
+      updateAntiscroll();
       trigger(self.onInvalidate);
     }
 
@@ -2046,7 +2114,13 @@ if (typeof Slick === "undefined") {
       //}
 
       var topOffset = topViewport.el.height(); // the top boundary of the center row of things
-      contentViewport.el.css({ 'top': topOffset, 'height': contentViewport.height });
+      contentViewportWrap.el.css({ 'top': topOffset, 'height': contentViewport.height });
+
+      // something is setting the contentViewport's height, and should't be.
+      // this causes the viewport to not resize when the window is resized.
+      // as a workaround, override the CSS here.
+      // TODO: figure out what's setting the height and fix it there instead.
+      contentViewport.el.css({ top: 0, height: '100%', width: '100%' });
 
       //if (!resizeOptions.skipHeight) {
       //  if (options.autoHeight) {
@@ -3828,6 +3902,7 @@ if (typeof Slick === "undefined") {
         topCanvas: topCanvas,
         header: header,
         subHeader: subHeader,
+        contentViewportWrap: contentViewportWrap,
         contentViewport: contentViewport,
         contentCanvas: contentCanvas,
         rows: rows

slick.grid.sass

@@ -68,11 +68,21 @@
     left: 0
     outline: 0
 
+  .viewport-wrap,
   .viewport
     position: absolute
+    width: 100% // easy handling of the no-pinned column case
+
+  .viewport-wrap
+    bottom: 0
+    overflow: hidden
+
+    .antiscroll-scrollbar
+      z-index: 1
+
+  .viewport
     overflow: auto
     outline: 0 // removes the focus effect that shows while scrolling
-    width: 100% // easy handling of the no-pinned column case
 
     // the top left and right viewports don't scroll.
     // also, since we don't use native scrolling on
@@ -82,6 +92,11 @@
     &.pinned
       overflow: hidden
 
+    &.antiscroll-inner
+      height: 100%
+      left: 0
+      top: 0
+
   .canvas
     position: relative