Skip to content

Commit 4ad07f8

Browse files
awerlangawerlang
committed
fix(directive): Support td[colspan]
Take into account colspan attributes on TD's to fetch the respective header Fixes #9
1 parent e25e3bf commit 4ad07f8

File tree

7 files changed

+152
-4
lines changed

7 files changed

+152
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.idea/
22
bower_components/
33
node_modules/
4+
typings/
45
commit.txt

‎examples/index.html‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,31 @@ <h3>Simple table with no thead, tbody</h3>
8787
<td>{{item.stars}}</td>
8888
</tr>
8989
</table>
90-
90+
91+
<h3>Simple table with colspan</h3>
92+
<table wt-responsive-table>
93+
<thead>
94+
<tr>
95+
<th>First title</th>
96+
<th>Second title</th>
97+
<th>Third title</th>
98+
<th>Forth title</th>
99+
</tr>
100+
</thead>
101+
<tbody>
102+
<tr>
103+
<td colspan="3">This cell spans for 3 columns</td>
104+
<td>Forth column</td>
105+
</tr>
106+
<tr>
107+
<td>First column</td>
108+
<td>Second column</td>
109+
<td>Third column</td>
110+
<td>Forth column</td>
111+
</tr>
112+
</tbody>
113+
</table>
114+
91115
<h2>With Bootstrap</h2>
92116

93117
<h3>Static table</h3>

‎karma.conf.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Karma configuration
2+
// Generated on Mon Apr 27 2015 01:22:27 GMT-0300 (Hora oficial do Brasil)
3+
4+
module.exports = function(config) {
5+
config.set({
6+
7+
// base path that will be used to resolve all patterns (eg. files, exclude)
8+
basePath: '',
9+
10+
11+
// frameworks to use
12+
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13+
frameworks: ['jasmine'],
14+
15+
16+
// list of files / patterns to load in the browser
17+
files: [
18+
'bower_components/jquery/dist/jquery.js',
19+
'bower_components/angular/angular.js',
20+
'bower_components/angular-mocks/angular-mocks.js',
21+
'src/**/*.js',
22+
'tests/**/*.spec.js'
23+
],
24+
25+
26+
// list of files to exclude
27+
exclude: [
28+
],
29+
30+
31+
// preprocess matching files before serving them to the browser
32+
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33+
preprocessors: {
34+
},
35+
36+
37+
// test results reporter to use
38+
// possible values: 'dots', 'progress'
39+
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
40+
reporters: ['progress'],
41+
42+
43+
// web server port
44+
port: 9876,
45+
46+
47+
// enable / disable colors in the output (reporters and logs)
48+
colors: true,
49+
50+
51+
// level of logging
52+
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
53+
logLevel: config.LOG_INFO,
54+
55+
56+
// enable / disable watching file and executing tests whenever any file changes
57+
autoWatch: true,
58+
59+
60+
// start these browsers
61+
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
62+
browsers: ['Chrome'],
63+
64+
65+
// Continuous Integration mode
66+
// if true, Karma captures browsers, runs the tests and exits
67+
singleRun: false
68+
});
69+
};

‎release/angular-responsive-tables.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@
1010
var rows = element[0].querySelectorAll("tbody tr");
1111
if (headers.length && rows.length) {
1212
rows = rows[0];
13+
var headerIndex = 0;
1314
Array.prototype.forEach.call(rows.querySelectorAll("td"), function(value, index) {
14-
var title = headers.item(index).textContent;
15+
var title = headers.item(headerIndex).textContent;
1516
if (title && !value.getAttributeNode("data-title")) {
1617
value.setAttribute("data-title", title);
1718
}
19+
var colspan = value.getAttributeNode("colspan");
20+
headerIndex += colspan ? parseInt(colspan.value) : 1;
1821
});
1922
}
2023
}

‎release/angular-responsive-tables.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/directive.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,15 @@ function wtResponsiveTable() {
99
var rows = element[0].querySelectorAll('tbody tr');
1010
if (headers.length && rows.length) {
1111
rows = rows[0];
12+
var headerIndex = 0;
1213
Array.prototype.forEach.call(rows.querySelectorAll('td'), function (value, index) {
13-
var title = headers.item(index).textContent;
14+
var title = headers.item(headerIndex).textContent;
1415
if (title && !value.getAttributeNode('data-title')) {
1516
value.setAttribute('data-title', title);
1617
}
18+
19+
var colspan = value.getAttributeNode('colspan');
20+
headerIndex += colspan ? parseInt(colspan.value) : 1;
1721
});
1822
}
1923
}

‎tests/directive.spec.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* global inject */
2+
/// <reference path="../typings/angularjs/angular.d.ts"/>
3+
/// <reference path="../typings/jasmine/jasmine.d.ts"/>
4+
describe('directive', function () {
5+
var $compile;
6+
7+
beforeEach(module('wt.responsive'));
8+
beforeEach(inject(function (_$compile_) {
9+
$compile = _$compile_;
10+
}));
11+
12+
it('supports colspan', function () {
13+
var markup = [
14+
'<table wt-responsive-table>',
15+
' <thead>',
16+
' <tr>',
17+
' <th>First title</th>',
18+
' <th>Second title</th>',
19+
' <th>Third title</th>',
20+
' <th>Forth title</th>',
21+
' </tr>',
22+
' </thead>',
23+
' <tbody>',
24+
' <tr>',
25+
' <td colspan="3">This cell spans for 3 columns</td>',
26+
' <td>Forth column</td>',
27+
' </tr>',
28+
' <tr>',
29+
' <td>First column</td>',
30+
' <td>Second column</td>',
31+
' <td>Third column</td>',
32+
' <td>Forth column</td>',
33+
' </tr>',
34+
' </tbody>',
35+
'</table>'
36+
].join('');
37+
var element = angular.element(markup);
38+
39+
var firstDataRow = element.find('tbody tr:first td');
40+
expect(firstDataRow.attr('data-title')).toBeUndefined();
41+
42+
$compile(element);
43+
44+
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
45+
expect(firstDataRow.eq(1).attr('data-title')).toBe('Forth title');
46+
});
47+
});

0 commit comments

Comments
 (0)