Skip to content

Commit 0bbef0f

Browse files
awerlangawerlang
committed
feat(directive): Initial version
1 parent c1ca55e commit 0bbef0f

File tree

8 files changed

+173
-6
lines changed

8 files changed

+173
-6
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
bower_components/
2+
node_modules/

‎README.md‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,6 @@ All this work is based on the following assumptions:
6969
</tr>
7070
</table>
7171

72-
## Configuration
73-
74-
app.config(function (easyMaskProvider) {
75-
easyMaskProvider.publishMask('myId', '999.999.999-99');
76-
});
77-
7872
### Directives
7973

8074
#### wt-responsive-table

‎bower.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "angular-responsive-tables",
3+
"version": "0.1.0",
4+
"homepage": "https://github.com/awerlang/angular-responsive-tables",
5+
"authors": [
6+
"André Werlang"
7+
],
8+
"description": "Make your HTML tables look great on every device",
9+
"main": [
10+
"release/angular-responsive-tables.js",
11+
"release/style.css"
12+
],
13+
"keywords": [
14+
"angular",
15+
"angularjs",
16+
"table",
17+
"tables",
18+
"responsive",
19+
"adaptive",
20+
"mobile"
21+
],
22+
"license": "MIT",
23+
"ignore": [
24+
"**/.*",
25+
"node_modules",
26+
"bower_components",
27+
"test",
28+
"tests"
29+
],
30+
"dependencies": {
31+
"angular": "^1.3.4"
32+
},
33+
"devDependencies": {
34+
"angular-mocks": "^1.3.4",
35+
"jquery": "~2.1.4"
36+
}
37+
}

‎package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "angular-responsive-tables",
3+
"version": "0.1.0",
4+
"description": "Make your HTML tables look great on every device",
5+
"main": "release/angular-responsive-tables.js",
6+
"scripts": {
7+
"build": "./node_modules/.bin/uglifyjs src/directive.js src/module.js -b -e --preamble \"// https://github.com/awerlang/angular-responsive-tables\" -o release/angular-responsive-tables.js",
8+
"release": "./node_modules/.bin/uglifyjs src/directive.js src/module.js -c -e --preamble \"// https://github.com/awerlang/angular-responsive-tables\" -o release/angular-responsive-tables.min.js",
9+
"test": "karma start"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/awerlang/angular-responsive-tables.git"
14+
},
15+
"keywords": [
16+
"angular",
17+
"angularjs",
18+
"table",
19+
"tables",
20+
"responsive",
21+
"adaptive",
22+
"mobile"
23+
],
24+
"author": "André Werlang",
25+
"license": "MIT",
26+
"bugs": {
27+
"url": "https://github.com/awerlang/angular-responsive-tables/issues"
28+
},
29+
"homepage": "https://github.com/awerlang/angular-responsive-tables",
30+
"devDependencies": {
31+
"conventional-changelog": "0.0.17",
32+
"jasmine-core": "^2.2.0",
33+
"karma": "^0.12.31",
34+
"karma-chrome-launcher": "^0.1.8",
35+
"karma-jasmine": "^0.3.5",
36+
"uglify-js": "^2.4.20"
37+
}
38+
}

‎release.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
require('conventional-changelog')({
2+
repository: 'https://github.com/awerlang/angular-responsive-tables',
3+
version: require('./package.json').version
4+
}, function(err, log) {
5+
var fs = require('fs');
6+
7+
fs.writeFile('CHANGELOG.md', log, function (err){
8+
if(err) {
9+
console.log(err);
10+
} else {
11+
console.log("Change log generated and saved:", 'CHANGELOG.md');
12+
}
13+
});
14+
});

‎src/directive.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use strict';
2+
3+
function wtResponsiveTable() {
4+
return {
5+
restrict: 'A',
6+
compile: function (element, attrs) {
7+
attrs.$addClass('responsive');
8+
var headers = element[0].querySelectorAll('thead th');
9+
var rows = element[0].querySelectorAll('tbody tr');
10+
if (headers.length && rows.length) {
11+
rows = rows[0];
12+
Array.prototype.forEach.call(rows.querySelectorAll('td'), function (value, index) {
13+
var title = headers.item(index).textContent;
14+
if (title && !value.getAttributeNode('data-title')) {
15+
value.setAttribute('data-title', title);
16+
}
17+
});
18+
}
19+
}
20+
};
21+
}

‎src/module.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
'use strict';
2+
3+
angular.module('wt.responsive', [])
4+
.directive('wtResponsiveTable', [wtResponsiveTable]);

‎src/style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* original: http://css-tricks.com/responsive-data-tables/ */
2+
3+
.responsive {
4+
width: 100%;
5+
border-collapse: collapse;
6+
}
7+
8+
@media only screen and (max-width: 800px) {
9+
10+
/* Force table to not be like tables anymore */
11+
/* table.responsive,*/
12+
.responsive thead,
13+
.responsive tbody,
14+
.responsive th,
15+
.responsive td,
16+
.responsive tr {
17+
display: block;
18+
}
19+
20+
/* Hide table headers (but not display: none;, for accessibility) */
21+
.responsive thead tr {
22+
position: absolute;
23+
top: -9999px;
24+
left: -9999px;
25+
}
26+
27+
.responsive tr {
28+
border: 1px solid #ccc;
29+
}
30+
31+
.responsive td {
32+
/* Behave like a "row" */
33+
border: none;
34+
border-bottom: 1px solid #eee;
35+
position: relative;
36+
padding-left: 50%;
37+
white-space: normal;
38+
text-align: left;
39+
}
40+
41+
.responsive td:before {
42+
/* Now like a table header */
43+
position: absolute;
44+
/* Top/left values mimic padding */
45+
top: 6px;
46+
left: 6px;
47+
width: 45%;
48+
padding-right: 10px;
49+
white-space: nowrap;
50+
text-align: left;
51+
font-weight: bold;
52+
/*
53+
Label the data
54+
*/
55+
content: attr(data-title);
56+
}
57+
}

0 commit comments

Comments
 (0)