expandable functionality

Author: Andrew Perlitch

README.md

@@ -68,7 +68,7 @@ The options object should be available on the parent scope of the `<ap-mesa>` el
 
 |        key         |    type   |   default   |                                                             description                                                              |
 | ------------------ | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| rowPadding         | `number`  | 10          | Number of rows to add before and after the viewport                                                                                  |
+| rowPadding         | `number`  | 10          | Number of pixels to pre-render before and after the viewport                                                                                  |
 | sortClasses        | `Array`   | (see below) |                                                                                                                                      |
 | storage            | `Object`  | undefined   |                                                                                                                                      |
 | storageHash        | `String`  | undefined   | Non-sequential "version" hash used to identify and compare items in `storage`.                                                       |
@@ -88,7 +88,8 @@ The options object should be available on the parent scope of the `<ap-mesa>` el
 | fillHeight         | `boolean` | false       | If true, the table will fill the calculated height of the parent element. Note that this overrides `bodyHeight`. The table will listen for `'apMesa:resize'` events from the rootScope to recalculate the height. |
 | fixedHeight        | `boolean` | false       | If true, the table body will always have a height of `bodyHeight`, regardless of whether the rows fill up the vertical space.        |
 | onRegisterApi      | `function` | {}         | Provides a access to select table controller methods, including selectAll, deselectAll, isSelectedAll, setLoading, etc.              | 
-| getter             | `function` | {}         | Customize the way to get column value. If not specified, get columen value by row[column.key]                                        | 
+| getter             | `function` | {}         | Customize the way to get column value. If not specified, get columen value by row[column.key]                                        |
+| expandableTemplateUrl | `String` | undefined | A template reference to be used for the expandable row feature. See *Expandable Rows* below. |
 
 
 ### Loading
@@ -228,6 +229,30 @@ There is a special type of column called a selector, which will render as a chec
     ]
 
 
+Expandable Rows
+---------------
+
+To use the expandable rows feature, you will need to specify a expandableTemplateUrl call `toggleRowExpand()` from a custom column template. For example, a column definition may look like: 
+
+```javascript
+$scope.tableOptions = {
+    expandableTemplateUrl: 'path/to/panel-template.html'
+};
+$scope.columns = [
+    {
+        id: 'foo',
+        template: '<a href="" ng-click="toggleRowExpand()">CLICK TO EXPAND</a>'
+    },
+    ...
+];
+```
+
+There will also be a property on row scope called `rowIsExpanded` which is a boolean indicating if the row's panel is expanded.
+It's also recommended to make the `rowPadding` option at least as large as the expected pixel height of the expanded panels.
+
+For a complete example, please check out `/app/scripts/controllers/expandable.js`.
+
+
 
 Browser Support
 ---------------

app/scripts/controllers/expandable.js

@@ -4,14 +4,18 @@ angular.module('apMesa.ghPage')
 .controller('ExpandableCtrl', function($scope, $q, phoneData, $templateCache) {
 
   $scope.my_table_options = {
-    expandableTemplateUrl: 'views/expandable-panel.html'
+    expandableTemplateUrl: 'views/expandable-panel.html',
+    bodyHeight: 600,
+    rowPadding: 600
   };
   $scope.my_selected_rows = [];
   $scope.my_table_columns = [
     {
       id: 'name',
       key: 'DeviceName',
       label: 'Phone',
+      sort: 'string',
+      filter: 'like',
       template: '<a href="" ng-click="toggleRowExpand()">' +
                   '<i class="glyphicon glyphicon-triangle-right" ng-if="!rowIsExpanded"></i>' +
                   '<i class="glyphicon glyphicon-triangle-bottom" ng-if="rowIsExpanded"></i>' +
@@ -21,11 +25,13 @@ angular.module('apMesa.ghPage')
     {
       id: 'brand',
       key: 'Brand',
+      sort: 'string',
       label: 'Brand'
     },
     {
       id: 'tech',
       key: 'technology',
+      sort: 'string',
       label: 'Tech'
     }
   ];

dist/ap-mesa.css

@@ -175,4 +175,5 @@ when a discreet width has been set on it */
 
 table tbody .ap-mesa-dummy-row td {
   border-top: none;
+  padding: 0;
 }

dist/ap-mesa.js

@@ -144,4 +144,5 @@ when a discreet width has been set on it */
 }
 table tbody .ap-mesa-dummy-row td {
   border-top: none;
+  padding: 0;
 }

dist/ap-mesa.min.css

@@ -411,7 +411,7 @@ angular.module('apMesa.controllers.ApMesaController', [
   $scope.calculateRowLimit = function() {
     var rowHeight = $scope.scrollDiv.find('.ap-mesa-rendered-rows tr').height();
     $scope.rowHeight = rowHeight || $scope.options.defaultRowHeight || 20;
-    $scope.rowLimit = Math.ceil($scope.options.bodyHeight / $scope.rowHeight) + $scope.options.rowPadding*2;
+    $scope.rowLimit = Math.ceil(($scope.options.bodyHeight + $scope.options.rowPadding*2) / $scope.rowHeight);
   };
 
 }]);

dist/ap-mesa.min.js

@@ -115,7 +115,7 @@ angular.module('apMesa.directives.apMesa', [
     scope.options = scope.options || {};
     defaults(scope.options, {
       bgSizeMultiplier: 1,
-      rowPadding: 10,
+      rowPadding: 300,
       bodyHeight: 300,
       fixedHeight: false,
       defaultRowHeight: 40,
@@ -205,15 +205,54 @@ angular.module('apMesa.directives.apMesa', [
 
       scope.calculateRowLimit();
 
-      var scrollTop = scope.scrollDiv[0].scrollTop;
+      var scrollTop = scope.scrollDiv[0].scrollTop - scope.options.rowPadding;
 
       var rowHeight = scope.rowHeight;
 
       if (rowHeight === 0) {
         return false;
       }
 
-      scope.rowOffset = Math.max(0, Math.floor(scrollTop / rowHeight) - scope.options.rowPadding);
+      var rowOffset = 0;
+      var runningTotalScroll = 0;
+      var expandedOffsets = Object.keys(scope.expandedRows)
+        .map(function(i) { return parseInt(i); })
+        .sort();
+
+      // push the max offset so this works in constant time
+      // when no expanded rows are present
+      expandedOffsets.push(scope.filterState.filterCount);
+
+      // a counter that holds the last offset of an expanded row
+      for (var i = 0; i <= expandedOffsets.length; i++) {
+        // the offset of the expanded row
+        var expandedOffset = expandedOffsets[i];
+
+        // the height of the collapsed rows before this expanded row
+        // and after the previous expanded row
+        var rowsHeight = (expandedOffset - rowOffset) * rowHeight;
+
+        // check if the previous rows is more than enough
+        if (runningTotalScroll + rowsHeight >= scrollTop) {
+          rowOffset += Math.floor((scrollTop - runningTotalScroll)/rowHeight);
+          break;
+        }
+        // otherwise add it to the running total
+        runningTotalScroll += rowsHeight;
+
+        // the pixels that this row's expanded panel displaces
+        var expandedPixels = scope.expandedRows[expandedOffset];
+        runningTotalScroll += expandedPixels;
+        rowOffset = expandedOffset;
+
+        // Check if the expanded panel put us over the edge
+        if (runningTotalScroll >= scrollTop) {
+          rowOffset--;
+          break;
+        }
+      }
+
+      scope.rowOffset = Math.max(0, rowOffset);
 
       scrollDeferred.resolve();
 

src/ap-mesa.css

@@ -32,11 +32,10 @@ angular.module('apMesa.directives.apMesaDummyRows', [])
     link: function(scope, element, attrs) {
 
       scope.$watch(attrs.apMesaDummyRows, function(offsetRange) {
-        console.log(offsetRange);
         var rowsHeight = (offsetRange[1] - offsetRange[0]) * scope.rowHeight;
         for (var k in scope.expandedRows) {
           var kInt = parseInt(k);
-          if (kInt >= offsetRange[0] && kInt <= offsetRange[1]) {
+          if (kInt >= offsetRange[0] && kInt < offsetRange[1]) {
             rowsHeight += scope.expandedRows[k];
           }
         }