Skip to content

Commit d454f2f

Browse files
author
Andrew Perlitch
committed
expandable WIP
1 parent 74ddad4 commit d454f2f

File tree

10 files changed

+149
-100
lines changed

10 files changed

+149
-100
lines changed

‎app/index.html‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,32 +49,6 @@
4949
</div><!-- /.container-fluid -->
5050
</nav>
5151

52-
<!-- Add your site or application content here -->
53-
<div class="container">
54-
<header>
55-
<h5>Description</h5>
56-
<p>An angular table directive catered to displaying real-time data. For many situations, this can be a suitable replacement or alternative for ng-grid/ui-grid.</p>
57-
<h5>Features</h5>
58-
<div class="row">
59-
<div class="col-sm-6">
60-
<ul>
61-
<li>complex column-specific filters</li>
62-
<li>column sorting</li>
63-
<li>column resizing</li>
64-
<li>row selection</li>
65-
</ul>
66-
</div>
67-
<div class="col-sm-6">
68-
<ul>
69-
<li>stacked ordering</li>
70-
<li>localStorage/custom state persistance</li>
71-
<li>rows are virtualized (can handle a lot of rows)</li>
72-
</ul>
73-
</div>
74-
</div>
75-
</header>
76-
</div>
77-
<hr>
7852
<div class="container" ng-view=""></div>
7953

8054
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
@@ -124,6 +98,7 @@ <h5>Features</h5>
12498
<script src="src/directives/apMesaCell.js"></script>
12599
<script src="src/directives/apMesaDummyRows.js"></script>
126100
<script src="src/directives/apMesaRows.js"></script>
101+
<script src="src/directives/apMesaRow.js"></script>
127102
<script src="src/directives/apMesaSelector.js"></script>
128103
<script src="src/filters/apMesaRowFilter.js"></script>
129104
<script src="src/filters/apMesaRowSorter.js"></script>

‎app/scripts/controllers/expandable.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@ angular.module('apMesa.ghPage')
44
.controller('ExpandableCtrl', function($scope, $q, phoneData, $templateCache) {
55

66
$scope.my_table_options = {
7-
expandableKey: 'expanded',
87
expandableTemplateUrl: 'views/expandable-panel.html'
98
};
109
$scope.my_selected_rows = [];
1110
$scope.my_table_columns = [
1211
{
1312
id: 'name',
1413
key: 'DeviceName',
15-
label: 'Device',
16-
template: '<a href="" ng-click="row.expanded = !row.expanded">' +
17-
'<i class="glyphicon glyphicon-triangle-right" ng-if="!row.expanded"></i>' +
18-
'<i class="glyphicon glyphicon-triangle-bottom" ng-if="row.expanded"></i>' +
14+
label: 'Phone',
15+
template: '<a href="" ng-click="toggleRowExpand()">' +
16+
'<i class="glyphicon glyphicon-triangle-right" ng-if="!rowIsExpanded"></i>' +
17+
'<i class="glyphicon glyphicon-triangle-bottom" ng-if="rowIsExpanded"></i>' +
1918
'{{ row.DeviceName }}' +
2019
'</a>'
2120
},

‎app/views/expandable-panel.html‎

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
1-
<strong>gprs</strong>: {{ row.gprs }}
2-
<strong>edge</strong>: {{ row.edge }}
3-
<strong>announced</strong>: {{ row.announced }}
4-
<strong>status</strong>: {{ row.status }}<br>
5-
<strong>dimensions</strong>: {{ row.dimensions }}
6-
<strong>weight</strong>: {{ row.weight }}
7-
<strong>sim</strong>: {{ row.sim }}
8-
<strong>type</strong>: {{ row.type }}<br>
9-
<strong>size</strong>: {{ row.size }}
10-
<strong>resolution</strong>: {{ row.resolution }}
11-
<strong>card_slot</strong>: {{ row.card_slot }}
12-
<strong>alert_types</strong>: {{ row.alert_types }}<br>
13-
<strong>loudspeaker_</strong>: {{ row.loudspeaker_ }}
14-
<strong>wlan</strong>: {{ row.wlan }}
15-
<strong>bluetooth</strong>: {{ row.bluetooth }}
16-
<strong>gps</strong>: {{ row.gps }}<br>
17-
<strong>radio</strong>: {{ row.radio }}
18-
<strong>usb</strong>: {{ row.usb }}
19-
<strong>messaging</strong>: {{ row.messaging }}
20-
<strong>browser</strong>: {{ row.browser }}<br>
21-
<strong>java</strong>: {{ row.java }}
22-
<strong>features_c</strong>: {{ row.features_c }}/video editor',
23-
<strong>battery_c</strong>: {{ row.battery_c }}
24-
<strong>stand_by</strong>: {{ row.stand_by }}<br>
25-
<strong>talk_time</strong>: {{ row.talk_time }}
26-
<strong>colors</strong>: {{ row.colors }}
27-
<strong>sensors</strong>: {{ row.sensors }}
28-
<strong>cpu</strong>: {{ row.cpu }}<br>
29-
<strong>internal</strong>: {{ row.internal }}
30-
<strong>os</strong>: {{ row.os }}
31-
<strong>primary_</strong>: {{ row.primary_ }}
32-
<strong>video</strong>: {{ row.video }}<br>
33-
<strong>secondary</strong>: {{ row.secondary }}
34-
<strong>speed</strong>: {{ row.speed }}
35-
<strong>network_c</strong>: {{ row.network_c }}
36-
<strong>chipset</strong>: {{ row.chipset }}<br>
37-
<strong>features</strong>: {{ row.features }}
38-
<strong>gpu</strong>: {{ row.gpu }}
39-
<strong>multitouch</strong>: {{ row.multitouch }}
40-
<strong>_2g_bands</strong>: {{ row._2g_bands }}<br>
41-
<strong>_3_5mm_jack_</strong>: {{ row._3_5mm_jack_ }}
42-
<strong>_3g_bands</strong>: {{ row._3g_bands }}
1+
<h3 style="margin-top: 0;">Specs for {{ row.DeviceName }}:</h3>
2+
<div class="row">
3+
<div class="col-xs-4">
4+
<strong>gprs</strong>: {{ row.gprs }}<br>
5+
<strong>edge</strong>: {{ row.edge }}<br>
6+
<strong>announced</strong>: {{ row.announced }}<br>
7+
<strong>status</strong>: {{ row.status }}<br>
8+
<strong>dimensions</strong>: {{ row.dimensions }}<br>
9+
<strong>weight</strong>: {{ row.weight }}<br>
10+
<strong>sim</strong>: {{ row.sim }}<br>
11+
<strong>type</strong>: {{ row.type }}<br>
12+
<strong>size</strong>: {{ row.size }}<br>
13+
<strong>resolution</strong>: {{ row.resolution }}<br>
14+
<strong>card_slot</strong>: {{ row.card_slot }}<br>
15+
<strong>alert_types</strong>: {{ row.alert_types }}<br>
16+
<strong>loudspeaker_</strong>: {{ row.loudspeaker_ }}
17+
</div>
18+
<div class="col-xs-4">
19+
<strong>wlan</strong>: {{ row.wlan }}<br>
20+
<strong>bluetooth</strong>: {{ row.bluetooth }}<br>
21+
<strong>gps</strong>: {{ row.gps }}<br>
22+
<strong>radio</strong>: {{ row.radio }}<br>
23+
<strong>usb</strong>: {{ row.usb }}<br>
24+
<strong>messaging</strong>: {{ row.messaging }}<br>
25+
<strong>browser</strong>: {{ row.browser }}<br>
26+
<strong>java</strong>: {{ row.java }}<br>
27+
<strong>features_c</strong>: {{ row.features_c }}/video editor',<br>
28+
<strong>battery_c</strong>: {{ row.battery_c }}<br>
29+
<strong>stand_by</strong>: {{ row.stand_by }}<br>
30+
<strong>talk_time</strong>: {{ row.talk_time }}<br>
31+
<strong>colors</strong>: {{ row.colors }}
32+
</div>
33+
<div class="col-xs-4">
34+
<strong>sensors</strong>: {{ row.sensors }}<br>
35+
<strong>cpu</strong>: {{ row.cpu }}<br>
36+
<strong>internal</strong>: {{ row.internal }}<br>
37+
<strong>os</strong>: {{ row.os }}<br>
38+
<strong>primary_</strong>: {{ row.primary_ }}<br>
39+
<strong>video</strong>: {{ row.video }}<br>
40+
<strong>secondary</strong>: {{ row.secondary }}<br>
41+
<strong>speed</strong>: {{ row.speed }}<br>
42+
<strong>network_c</strong>: {{ row.network_c }}<br>
43+
<strong>chipset</strong>: {{ row.chipset }}<br>
44+
<strong>features</strong>: {{ row.features }}<br>
45+
<strong>gpu</strong>: {{ row.gpu }}<br>
46+
<strong>multitouch</strong>: {{ row.multitouch }}<br>
47+
<strong>_2g_bands</strong>: {{ row._2g_bands }}<br>
48+
<strong>_3_5mm_jack_</strong>: {{ row._3_5mm_jack_ }}<br>
49+
<strong>_3g_bands</strong>: {{ row._3g_bands }}
50+
</div>
51+
</div>

‎app/views/main.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
<header>
2+
<h5>Description</h5>
3+
<p>An angular table directive catered to displaying real-time data. For many situations, this can be a suitable replacement or alternative for ng-grid/ui-grid.</p>
4+
<h5>Features</h5>
5+
<div class="row">
6+
<div class="col-sm-6">
7+
<ul>
8+
<li>complex column-specific filters</li>
9+
<li>column sorting</li>
10+
<li>column resizing</li>
11+
<li>row selection</li>
12+
</ul>
13+
</div>
14+
<div class="col-sm-6">
15+
<ul>
16+
<li>stacked ordering</li>
17+
<li>localStorage/custom state persistance</li>
18+
<li>rows are virtualized (can handle a lot of rows)</li>
19+
</ul>
20+
</div>
21+
</div>
22+
</header>
23+
24+
<hr>
25+
126
<h5>Kitchen Sink Example:</h5>
227

328
<p>This example showcases most of the features available for this module. Specifically, it shows row selection, column sorting, built-in column filters, custom column filters, column resizing, locked column width, cell formatting, template string for cell markup, templateUrl for cell markup, and use of localStorage for persistence between page loads.</p>

‎src/directives/apMesa.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,8 @@ angular.module('apMesa.directives.apMesa', [
9292
}
9393
}
9494

95-
// Check for rows
96-
// if ( !(scope.rows instanceof Array) ) {
97-
// throw new Error('"rows" array not found in apMesa scope!');
98-
// }
95+
// State of expanded rows
96+
scope.expandedRows = {};
9997

10098
// Object that holds search terms
10199
scope.searchTerms = {};

‎src/directives/apMesaDummyRows.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,16 @@ angular.module('apMesa.directives.apMesaDummyRows', [])
3131
scope: true,
3232
link: function(scope, element, attrs) {
3333

34-
scope.$watch(attrs.apMesaDummyRows, function(count) {
35-
scope.dummyRowHeight = count * scope.rowHeight;
34+
scope.$watch(attrs.apMesaDummyRows, function(offsetRange) {
35+
console.log(offsetRange);
36+
var rowsHeight = (offsetRange[1] - offsetRange[0]) * scope.rowHeight;
37+
for (var k in scope.expandedRows) {
38+
var kInt = parseInt(k);
39+
if (kInt >= offsetRange[0] && kInt <= offsetRange[1]) {
40+
rowsHeight += scope.expandedRows[k];
41+
}
42+
}
43+
scope.dummyRowHeight = rowsHeight;
3644
});
3745

3846
}

‎src/directives/apMesaRow.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
3+
angular.module('apMesa.directives.apMesaRow', ['apMesa.directives.apMesaCell'])
4+
.directive('apMesaRow', function($timeout) {
5+
return {
6+
template: '<td ng-repeat="column in columns track by column.id" class="ap-mesa-cell" ap-mesa-cell></td>',
7+
scope: true,
8+
link: function(scope, element) {
9+
var index = scope.$index + scope.rowOffset;
10+
scope.rowIsExpanded = scope.expandedRows[index];
11+
var expandPanel = element.next('tr.ap-mesa-expand-panel');
12+
scope.toggleRowExpand = function() {
13+
scope.expandedRows[index] = !scope.expandedRows[index];
14+
scope.rowIsExpanded = scope.expandedRows[index];
15+
$timeout(function() {
16+
var newHeight = expandPanel.height();
17+
if (newHeight === 0) {
18+
delete scope.expandedRows[index];
19+
} else {
20+
scope.expandedRows[index] = newHeight;
21+
}
22+
});
23+
};
24+
scope.$watch('rowOffset', function(rowOffset) {
25+
index = scope.$index + scope.rowOffset;
26+
scope.rowIsExpanded = !!scope.expandedRows[index];
27+
});
28+
}
29+
};
30+
});

‎src/directives/apMesaRows.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
'use strict';
1717

1818
angular.module('apMesa.directives.apMesaRows',[
19-
'apMesa.directives.apMesaCell',
19+
'apMesa.directives.apMesaRow',
2020
'apMesa.filters.apMesaRowFilter',
2121
'apMesa.filters.apMesaRowSorter'
2222
])
@@ -54,29 +54,29 @@ angular.module('apMesa.directives.apMesaRows',[
5454

5555
function link(scope) {
5656

57-
var updateHandler = function(newValue, oldValue) {
58-
if (newValue === oldValue) {
59-
return;
60-
}
61-
scope.visible_rows = calculateVisibleRows(scope);
62-
};
57+
var updateHandler = function(newValue, oldValue) {
58+
if (newValue === oldValue) {
59+
return;
60+
}
61+
scope.visible_rows = calculateVisibleRows(scope);
62+
};
6363

64-
scope.$watch('searchTerms', updateHandler, true);
65-
scope.$watch('[filterState.filterCount,rowOffset,rowLimit]', updateHandler);
66-
scope.$watch('sortOrder', updateHandler, true);
67-
scope.$watch('sortDirection', updateHandler, true);
68-
scope.$watch('rows', updateHandler);
69-
updateHandler(true, false);
70-
}
64+
scope.$watch('searchTerms', updateHandler, true);
65+
scope.$watch('[filterState.filterCount,rowOffset,rowLimit]', updateHandler);
66+
scope.$watch('sortOrder', updateHandler, true);
67+
scope.$watch('sortDirection', updateHandler, true);
68+
scope.$watch('rows', updateHandler);
69+
updateHandler(true, false);
70+
}
7171

7272
return {
7373
restrict: 'A',
7474
templateUrl: 'src/templates/apMesaRows.tpl.html',
7575
compile: function(tElement, tAttrs) {
76-
var tr = tElement.find('tr');
77-
var repeatString = tr.attr('ng-repeat');
76+
var tr = tElement.find('tr[ng-repeat-start]');
77+
var repeatString = tr.attr('ng-repeat-start');
7878
repeatString += tAttrs.trackBy ? ' track by row[options.trackBy]' : ' track by $index';
79-
tr.attr('ng-repeat', repeatString);
79+
tr.attr('ng-repeat-start', repeatString);
8080
return link;
8181
}
8282
};

‎src/templates/apMesa.tpl.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@
8080
</td>
8181
</tr>
8282
</tbody>
83-
<tbody ng-show="!options.loading" ap-mesa-dummy-rows="rowOffset" columns="columns" cell-content="..."></tbody>
83+
<tbody ng-show="!options.loading" ap-mesa-dummy-rows="[0,rowOffset]" columns="columns" cell-content="..."></tbody>
8484
<tbody ng-show="!options.loading" ap-mesa-rows class="ap-mesa-rendered-rows"></tbody>
85-
<tbody ng-show="!options.loading" ap-mesa-dummy-rows="filterState.filterCount - rowOffset - visible_rows.length" columns="columns" cell-content="..."></tbody>
85+
<tbody ng-show="!options.loading" ap-mesa-dummy-rows="[rowOffset + visible_rows.length, filterState.filterCount - 1]" columns="columns" cell-content="..."></tbody>
8686
</table>
8787
</div>
8888
</div>

‎src/templates/apMesaRows.tpl.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<tr ng-repeat="row in visible_rows" ng-attr-class="{{ (rowOffset + $index) % 2 ? 'odd' : 'even' }}">
2-
<td ng-repeat="column in columns track by column.id" class="ap-mesa-cell" ap-mesa-cell></td>
1+
<tr ng-repeat-start="row in visible_rows" ng-attr-class="{{ (rowOffset + $index) % 2 ? 'odd' : 'even' }}" ap-mesa-row></tr>
2+
<tr ng-repeat-end ng-show="expandedRows[$index + rowOffset]" class="ap-mesa-expand-panel">
3+
<td
4+
ng-if="expandedRows[$index + rowOffset]"
5+
ng-attr-colspan="{{ columns.length }}"
6+
ng-include="options.expandableTemplateUrl">
7+
</td>
38
</tr>

0 commit comments

Comments
 (0)