diff --git a/app/index.html b/app/index.html index d0c7e3e..26f3447 100644 --- a/app/index.html +++ b/app/index.html @@ -79,7 +79,7 @@

Features

- + diff --git a/bower.json b/bower.json index 85d6707..1283c74 100644 --- a/bower.json +++ b/bower.json @@ -9,7 +9,8 @@ "jquery": "~1.10.2", "angular-sanitize": "~1.2", "angular-ui-sortable": "~0.12.3", - "angular-mousewheel": "~1.0.4" + "angular-mousewheel": "~1.0.4", + "jquery-ui": ">=1.11.0" }, "devDependencies": { "angular-route": "~1.2.16", diff --git a/src/mlhr-table.js b/src/mlhr-table.js index 49b72c5..ba198ca 100644 --- a/src/mlhr-table.js +++ b/src/mlhr-table.js @@ -571,12 +571,12 @@ angular.module('datatorrent.mlhrTable', [ var height = $scope.tbody.height(); var offset = $scope.options.rowOffset; var limit = $scope.options.row_limit; - var max = $scope.filterState.filterCount; - var heightRatio = height/max; + var numFilteredRows = $scope.filterState.filterCount; + var heightRatio = height/numFilteredRows; var newTop = heightRatio*offset; var newHeight = heightRatio * limit; - if (newHeight >= height || max <= limit) { + if (newHeight >= height || numFilteredRows <= limit) { $scope.scroller.css({ display: 'none', top: '0px' @@ -590,7 +590,7 @@ angular.module('datatorrent.mlhrTable', [ if (extraScrollPixels > 0) { // Do not include the extra pixels in the height calculation, and // recalculate the ratio and top values - heightRatio = (height - extraScrollPixels) / max; + heightRatio = (height - extraScrollPixels) / numFilteredRows; newTop = heightRatio * offset; } @@ -608,6 +608,32 @@ angular.module('datatorrent.mlhrTable', [ }); }; + // Inverse of updateScrollerPosition, meaning it looks at a + // top value of the scroller (can be passed as arg), then + // updates the offset according to this value + $scope.updateOffsetByScroller = function(top) { + // When no top is supplied, look at the css value + if (typeof top !== 'number') { + top = parseInt($scope.scroller.css('top')); + } + + var height = $scope.tbody.height(); + var numFilteredRows = $scope.filterState.filterCount; + var limit = $scope.options.row_limit; + var scrollerHeight = (limit / numFilteredRows) * height; + + var extraScrollPixels = $scope._scrollerMinHeight_ - scrollerHeight; + if (extraScrollPixels > 0) { + height -= extraScrollPixels; + } + + // calculate corresponding offset + var newOffset = Math.round((top / height) * numFilteredRows); + $scope.options.rowOffset = newOffset; + $scope.$digest(); + + }; + $scope.saveToStorage = function() { if (!$scope.storage) { return; @@ -843,10 +869,23 @@ angular.module('datatorrent.mlhrTable', [ scope.scroller = elem.find('.mlhr-table-scroller'); scope.scrollerWrapper = elem.find('.mlhr-table-scroller-wrapper'); scope._scrollerMinHeight_ = parseInt(scope.scroller.css('min-height')); + + // Some setup of the scroller wrapper must occur after the DOM + // has been painted. $timeout(function() { + // Set a margin top equal to the thead scope.scrollerWrapper.css({ 'margin-top': scope.thead.height() + 'px' }); + + // Allow the scroller to be draggable + scope.scroller.draggable({ + axis: 'y', + containment: scope.scrollerWrapper, + drag: function(event, ui) { + scope.updateOffsetByScroller(ui.position.top); + } + }); }, 0); // Look for initial sort order