Skip to content

Commit 579494e

Browse files
awerlangawerlang
committed
feat(directive): remove responsive-dynamic explicit attribute
1 parent 41b3b60 commit 579494e

File tree

3 files changed

+111
-86
lines changed

3 files changed

+111
-86
lines changed

‎src/directive.js‎

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ function wtResponsiveTable() {
2323
controller: function ($element) {
2424
return {
2525
getHeader: function (td) {
26+
var firstHeader = td.parentElement.querySelector('th');
27+
if (firstHeader) return firstHeader;
28+
2629
var headers = getHeaders($element[0]);
2730
if (headers.length) {
2831
var row = td.parentElement;
@@ -41,47 +44,35 @@ function wtResponsiveTable() {
4144
}
4245
},
4346
compile: function (element, attrs) {
44-
function apply() {
45-
var headers = getHeaders(element[0]);
46-
if (headers.length) {
47-
var rows = element[0].querySelectorAll('tbody > tr');
48-
Array.prototype.forEach.call(rows, function(row) {
49-
var headerIndex = 0;
50-
Array.prototype.forEach.call(row.querySelectorAll('td'), function (value, index) {
51-
if (!value.getAttributeNode('responsive-dynamic')) {
52-
var th = value.parentElement.querySelector('th') || headers.item(headerIndex);
53-
updateTitle(value, th);
54-
}
47+
attrs.$addClass('responsive');
48+
var headers = getHeaders(element[0]);
49+
if (headers.length) {
50+
var rows = element[0].querySelectorAll('tbody > tr');
51+
Array.prototype.forEach.call(rows, function(row) {
52+
var headerIndex = 0;
53+
Array.prototype.forEach.call(row.querySelectorAll('td'), function (value, index) {
54+
var th = value.parentElement.querySelector('th') || headers.item(headerIndex);
55+
updateTitle(value, th);
5556

56-
headerIndex += colspan(value);
57-
});
57+
headerIndex += colspan(value);
5858
});
59-
}
60-
}
61-
62-
attrs.$addClass('responsive');
63-
if (Array.prototype.some.call(element.find('th'), function (it) {
64-
return it.getAttributeNode('ng-repeat') || it.getAttributeNode('data-ng-repeat')
65-
})) {
66-
setTimeout(function () {
67-
apply();
68-
}, 0);
69-
} else {
70-
apply();
59+
});
7160
}
7261
}
7362
};
7463
}
7564

7665
function wtResponsiveDynamic() {
7766
return {
78-
restrict: 'A',
67+
restrict: 'E',
7968
require: '^^wtResponsiveTable',
8069
link: function (scope, element, attrs, tableCtrl) {
81-
Array.prototype.forEach.call(element[0].parentElement.querySelectorAll("td"), function (td) {
82-
var th = tableCtrl.getHeader(td);
83-
updateTitle(td, th);
84-
});
70+
setTimeout(function () {
71+
Array.prototype.forEach.call(element[0].parentElement.querySelectorAll("td"), function (td) {
72+
var th = tableCtrl.getHeader(td);
73+
updateTitle(td, th);
74+
});
75+
}, 0);
8576
}
8677
};
8778
}

‎src/module.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22

33
angular.module('wt.responsive', [])
44
.directive('wtResponsiveTable', [wtResponsiveTable])
5-
.directive('responsiveDynamic', [wtResponsiveDynamic]);
5+
.directive('td', [wtResponsiveDynamic]);

‎tests/directive.spec.js‎

Lines changed: 89 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ describe('directive', function () {
4848
expect(headerRow.is(':offscreen')).toBe(true);
4949
});
5050

51-
it('supports rows with no <thead>', function () {
51+
it('supports rows with no <thead>', function (done) {
5252
var markup = [
5353
'<table wt-responsive-table>',
5454
' <tr>',
@@ -67,22 +67,29 @@ describe('directive', function () {
6767
].join('');
6868
var element = angular.element(markup);
6969
document.body.appendChild(element[0]);
70-
$compile(element);
7170

72-
var firstDataRow = element.find('tr td');
73-
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
74-
expect(firstDataRow.eq(1).attr('data-title')).toBe('Second title');
75-
expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
76-
expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
71+
var scope = $rootScope.$new();
72+
$compile(element)(scope);
73+
scope.$digest();
7774

78-
var headerRow = element.find('tr th');
79-
expect(headerRow.eq(0).attr('data-title')).toBeUndefined();
80-
expect(headerRow.eq(1).attr('data-title')).toBeUndefined();
81-
expect(headerRow.eq(2).attr('data-title')).toBeUndefined();
82-
expect(headerRow.eq(3).attr('data-title')).toBeUndefined();
75+
setTimeout(function () {
76+
var firstDataRow = element.find('tr td');
77+
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
78+
expect(firstDataRow.eq(1).attr('data-title')).toBe('Second title');
79+
expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
80+
expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
81+
82+
var headerRow = element.find('tr th');
83+
expect(headerRow.eq(0).attr('data-title')).toBeUndefined();
84+
expect(headerRow.eq(1).attr('data-title')).toBeUndefined();
85+
expect(headerRow.eq(2).attr('data-title')).toBeUndefined();
86+
expect(headerRow.eq(3).attr('data-title')).toBeUndefined();
87+
88+
done();
89+
}, 0);
8390
});
8491

85-
it('supports <th> as first column of each <tr>', function () {
92+
it('supports <th> as first column of each <tr>', function (done) {
8693
var markup = [
8794
'<table wt-responsive-table>',
8895
' <tr>',
@@ -105,22 +112,29 @@ describe('directive', function () {
105112
].join('');
106113
var element = angular.element(markup);
107114
document.body.appendChild(element[0]);
108-
$compile(element);
109115

110-
var firstDataRow = element.find('tr td');
111-
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
112-
expect(firstDataRow.eq(1).attr('data-title')).toBe('Second title');
113-
expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
114-
expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
116+
var scope = $rootScope.$new();
117+
$compile(element)(scope);
118+
scope.$digest();
115119

116-
var headerRow = element.find('tr th');
117-
expect(headerRow.eq(0).attr('data-title')).toBeUndefined();
118-
expect(headerRow.eq(1).attr('data-title')).toBeUndefined();
119-
expect(headerRow.eq(2).attr('data-title')).toBeUndefined();
120-
expect(headerRow.eq(3).attr('data-title')).toBeUndefined();
120+
setTimeout(function() {
121+
var firstDataRow = element.find('tr td');
122+
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
123+
expect(firstDataRow.eq(1).attr('data-title')).toBe('Second title');
124+
expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
125+
expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
126+
127+
var headerRow = element.find('tr th');
128+
expect(headerRow.eq(0).attr('data-title')).toBeUndefined();
129+
expect(headerRow.eq(1).attr('data-title')).toBeUndefined();
130+
expect(headerRow.eq(2).attr('data-title')).toBeUndefined();
131+
expect(headerRow.eq(3).attr('data-title')).toBeUndefined();
132+
133+
done();
134+
}, 0);
121135
});
122136

123-
it('supports colspan', function () {
137+
it('supports colspan', function (done) {
124138
var markup = [
125139
'<table wt-responsive-table>',
126140
' <thead>',
@@ -150,13 +164,18 @@ describe('directive', function () {
150164
var firstDataRow = element.find('tbody tr:first td');
151165
expect(firstDataRow.attr('data-title')).toBeUndefined();
152166

153-
$compile(element);
167+
var scope = $rootScope.$new();
168+
$compile(element)(scope);
169+
scope.$digest();
154170

155-
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
156-
expect(firstDataRow.eq(1).attr('data-title')).toBe('Forth title');
171+
setTimeout(function () {
172+
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
173+
expect(firstDataRow.eq(1).attr('data-title')).toBe('Forth title');
174+
done();
175+
}, 0);
157176
});
158177

159-
it('support tables with multiple static rows', function () {
178+
it('support tables with multiple static rows', function (done) {
160179
var markup = [
161180
'<table wt-responsive-table>',
162181
' <thead>',
@@ -187,17 +206,22 @@ describe('directive', function () {
187206

188207
var rows = element.find('tbody tr');
189208

190-
$compile(element);
209+
var scope = $rootScope.$new();
210+
$compile(element)(scope);
211+
scope.$digest();
191212

192-
rows.each(function (index, element) {
193-
var titles = Array.prototype.map.call(element.querySelectorAll('td'), function (item) {
194-
return item.getAttribute('data-title');
213+
setTimeout(function () {
214+
rows.each(function (index, element) {
215+
var titles = Array.prototype.map.call(element.querySelectorAll('td'), function (item) {
216+
return item.getAttribute('data-title');
217+
});
218+
expect(titles).toEqual(['First title', 'Second title', 'Third title', 'Forth title']);
195219
});
196-
expect(titles).toEqual(['First title', 'Second title', 'Third title', 'Forth title']);
197-
});
220+
done();
221+
}, 0);
198222
});
199223

200-
it('supports ng-repeat applied on TR', function () {
224+
it('supports ng-repeat applied on TR', function (done) {
201225
var markup = [
202226
'<table wt-responsive-table>',
203227
' <thead>',
@@ -222,15 +246,19 @@ describe('directive', function () {
222246
var scope = $rootScope.$new();
223247
scope.rows = [0, 1];
224248

225-
var firstDataRow = element.find('tbody tr:first td');
226-
expect(firstDataRow.attr('data-title')).toBeUndefined();
227-
228249
$compile(element)(scope);
250+
scope.$digest();
229251

230-
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
231-
expect(firstDataRow.eq(1).attr('data-title')).toBe('Second title');
232-
expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
233-
expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
252+
setTimeout(function () {
253+
var firstDataRow = element.find('tbody tr:first td');
254+
255+
expect(firstDataRow.eq(0).attr('data-title')).toBe('First title');
256+
expect(firstDataRow.eq(1).attr('data-title')).toBe('Second title');
257+
expect(firstDataRow.eq(2).attr('data-title')).toBe('Third title');
258+
expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
259+
260+
done();
261+
}, 0);
234262
});
235263

236264
it('supports ng-repeat applied on TH', function (done) {
@@ -332,7 +360,7 @@ describe('directive', function () {
332360
});
333361

334362
describe('responsive-dynamic', function () {
335-
it('supports ng-if applied on all TDs', function () {
363+
it('supports ng-if applied on all TDs', function (done) {
336364
var markup = [
337365
'<table wt-responsive-table>',
338366
' <thead>',
@@ -342,8 +370,8 @@ describe('directive', function () {
342370
' </thead>',
343371
' <tbody>',
344372
' <tr>',
345-
' <td ng-if="!condition" responsive-dynamic>tom</td>',
346-
' <td ng-if="condition" responsive-dynamic>jerry</td>',
373+
' <td ng-if="!condition">tom</td>',
374+
' <td ng-if="condition">jerry</td>',
347375
' </tr>',
348376
' </tbody>',
349377
'</table>'
@@ -356,11 +384,14 @@ describe('directive', function () {
356384
scope.$digest();
357385

358386
var els = element.find('tbody tr:first td');
359-
expect(els.eq(0).text()).toBe('jerry');
360-
expect(els.eq(0).attr('data-title')).toBe('column');
387+
setTimeout(function () {
388+
expect(els.eq(0).text()).toBe('jerry');
389+
expect(els.eq(0).attr('data-title')).toBe('column');
390+
done();
391+
}, 0);
361392
});
362393

363-
it('supports ng-if applied on some TDs', function () {
394+
it('supports ng-if applied on some TDs', function (done) {
364395
var markup = [
365396
'<table wt-responsive-table>',
366397
' <thead>',
@@ -371,8 +402,8 @@ describe('directive', function () {
371402
' </thead>',
372403
' <tbody>',
373404
' <tr>',
374-
' <td ng-if="!condition" responsive-dynamic>tom</td>',
375-
' <td ng-if="condition" responsive-dynamic>jerry</td>',
405+
' <td ng-if="!condition">tom</td>',
406+
' <td ng-if="condition">jerry</td>',
376407
' <td>simple</td>',
377408
' </tr>',
378409
' </tbody>',
@@ -386,10 +417,13 @@ describe('directive', function () {
386417
scope.$digest();
387418

388419
var els = element.find('tbody tr:first td');
389-
expect(els.eq(0).text()).toBe('jerry');
390-
expect(els.eq(0).attr('data-title')).toBe('column');
391-
expect(els.eq(1).text()).toBe('simple');
392-
expect(els.eq(1).attr('data-title')).toBe('simple');
420+
setTimeout(function () {
421+
expect(els.eq(0).text()).toBe('jerry');
422+
expect(els.eq(0).attr('data-title')).toBe('column');
423+
expect(els.eq(1).text()).toBe('simple');
424+
expect(els.eq(1).attr('data-title')).toBe('simple');
425+
done();
426+
}, 0);
393427
});
394428

395429
});

0 commit comments

Comments
 (0)