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