Skip to content
This repository was archived by the owner on Jan 7, 2022. It is now read-only.

Commit 38fbd31

Browse files
jonshafferjonshaffer
authored
Feature add: Demo with all options toggleable (#27)
* - importing angular everywhere but base * moved directives to default export * added all options, some small bug fixes * initial commit
1 parent 717193d commit 38fbd31

29 files changed

Lines changed: 233 additions & 54 deletions

‎demos/all-options.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset=" utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="apple-mobile-web-app-capable" content="yes" />
7+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
8+
<meta name="viewport" content="width = device-width, minimal-ui, initial-scale = 1, user-scalable = no" />
9+
<meta name="apple-mobile-web-app-title" content="Datagrid">
10+
<title>Datagrid - All Options</title>
11+
<base href="/">
12+
<style>
13+
*, *:after, *:before {
14+
-webkit-box-sizing: border-box;
15+
-moz-box-sizing: border-box;
16+
box-sizing: border-box;
17+
}
18+
19+
body{
20+
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
21+
font-style: normal;
22+
font-weight: 300;
23+
font-size: 1.4rem;
24+
line-height: 2rem;
25+
letter-spacing: 0.01rem;
26+
color: #212121;
27+
background-color: #f5f5f5;
28+
-webkit-font-smoothing: antialiased;
29+
-moz-osx-font-smoothing: grayscale;
30+
text-rendering: optimizeLegibility;
31+
}
32+
33+
.dt{
34+
width:75%;
35+
margin:50px auto;
36+
}
37+
38+
</style>
39+
<link href="../dist/dataTable.css" media="all" rel="stylesheet" />
40+
<link href="../dist/themes/material.css" media="all" rel="stylesheet" />
41+
<link href="http://fontastic.s3.amazonaws.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css" rel="stylesheet">
42+
</head>
43+
<body ng-app="app" ng-controller="HomeController">
44+
<button type="button" ng-click="clearData()">Clear Data</button>
45+
<button type="button" ng-click="loadData()">Load Data</button>
46+
47+
<button type="button" ng-click="groupCountry()">Group on Country</button>
48+
<button type="button" ng-click="groupYear()">Group on Year</button>
49+
<button type="button" ng-click="groupingOff()">Grouping off</button>
50+
51+
<label><input type="checkbox" ng-change="addRemovePaging()" ng-model="hasPaging" />Has Paging</label>
52+
<label><input type="checkbox" ng-change="addRemoveScrollbarV()" ng-model="hasScrollbarV" />Has ScrollbarV</label>
53+
<label><input type="checkbox" ng-model="showTable" />Show Table</label>
54+
55+
<div ng-if="showTable">
56+
<dtable options="options" rows="data" class="material" on-row-dbl-click="onRowDblClick(row)"></dtable>
57+
</div>
58+
59+
<script src="../jspm_packages/system.js"></script>
60+
<script src="../config.js"></script>
61+
62+
<script>
63+
64+
System.import('dataTable').then(function(dt){
65+
var module = angular.module('app', [ dt.default.name ]);
66+
67+
module.controller('HomeController', function($scope, $http){
68+
window.scope = $scope;
69+
$scope.hasPaging = false;
70+
$scope.hasScrollbarV = false;
71+
$scope.showTable = true;
72+
$scope.data = [];
73+
74+
$scope.options = {
75+
rowHeight: 50,
76+
headerHeight: 50,
77+
footerHeight: false,
78+
scrollbarV: $scope.hasScrollbarV, // Note: this loses reference to scope variable when passed to directive
79+
selectable: false,
80+
columns: [
81+
{ name: 'Athlete', prop: 'athlete', width: 300 },
82+
{ name: 'Country', prop: 'country' },
83+
{ name: 'Year', prop: 'year' },
84+
{ name: 'Sport', prop: 'sport' }
85+
]
86+
};
87+
88+
$scope.onRowDblClick = function(row) {
89+
console.log('Row Double Clicked', row);
90+
}
91+
92+
/** Loading/Clearing data section **/
93+
$scope.loadData = function() {
94+
$scope.data = undefined;
95+
96+
$http.get('/demos/data/olympics.json').success(function(data) {
97+
$scope.data = data;
98+
99+
if ($scope.hasPaging) {
100+
angular.extend($scope.options, {
101+
paging: {
102+
count: data.length
103+
}
104+
});
105+
}
106+
});
107+
};
108+
109+
$scope.clearData = function() {
110+
if ($scope.data) {
111+
$scope.data.splice(0, $scope.data.length);
112+
113+
if ($scope.options.paging.count) {
114+
angular.extend($scope.options.paging, {
115+
count: 0
116+
});
117+
}
118+
}
119+
};
120+
121+
/** Grouping section **/
122+
123+
$scope.groupCountry = function() {
124+
_clearGroupColumns();
125+
126+
var col = $scope.options.columns.find(function(c) {
127+
return c.prop === 'country';
128+
});
129+
130+
col.group = !col.group;
131+
};
132+
133+
$scope.groupYear = function() {
134+
_clearGroupColumns();
135+
136+
var col = $scope.options.columns.find(function(c) {
137+
return c.prop === 'year';
138+
});
139+
140+
col.group = !col.group;
141+
};
142+
143+
$scope.groupingOff = function() {
144+
_clearGroupColumns();
145+
};
146+
147+
function _clearGroupColumns() {
148+
$scope.options.columns.map(function(column) {
149+
if (column.group) {
150+
delete column.group;
151+
}
152+
});
153+
};
154+
155+
/** Paging section **/
156+
$scope.addRemovePaging = function() {
157+
if ($scope.hasPaging) {
158+
angular.extend($scope.options, {
159+
footerHeight: 50,
160+
paging: {
161+
size: 10,
162+
count: ($scope.data) ? $scope.data.length : 0
163+
}
164+
});
165+
} else {
166+
angular.extend($scope.options, {
167+
footerHeight: undefined,
168+
paging: {}
169+
});
170+
}
171+
};
172+
173+
/** Scrollbar section **/
174+
$scope.addRemoveScrollbarV = function() {
175+
if ($scope.hasScrollbarV) {
176+
angular.extend($scope.options, {
177+
scrollbarV: true
178+
});
179+
} else {
180+
angular.extend($scope.options, {
181+
scrollbarV: false
182+
});
183+
}
184+
}
185+
186+
});
187+
});
188+
</script>
189+
190+
</body>
191+
</html>

‎gulpfile.babel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ gulp.task('es6', function () {
4646
.pipe(changed(path.output, { extension: '.js' }))
4747
.pipe(babel())
4848
.pipe(ngAnnotate({
49-
gulpWarnings: false
49+
gulpWarnings: true
5050
}))
5151
.pipe(gulp.dest(path.output))
5252
.pipe(browserSync.reload({ stream: true }));

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ <h1>Table Demos</h1>
102102
<li><a href="demos/virtual.html">100k Rows</a></li>
103103
<li><a href="demos/perf.html">10 Grids on One Page</a></li>
104104
<li><a href="demos/perf-horzscroll.html">Horz Scrolling and Full Screen</a></li>
105+
<li><a href="demos/all-options.html">All Options</a></li>
105106
</ul>
106107
</li>
107108
<li>Plugins

‎src/components/DataTableController.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import angular from 'angular';
21
import { TableDefaults, ColumnDefaults } from '../defaults';
32
import { AdjustColumnWidths, ForceFillColumnWidths } from '../utils/math';
43
import { ColumnsByPin, ColumnGroupWidths, CamelCase, ObjectId, ScrollbarWidth } from '../utils/utils';
@@ -47,6 +46,7 @@ export class DataTableController {
4746
var watch = this.$scope.$watch('dt.rows', (newVal) => {
4847
if (newVal) {
4948
watch();
49+
5050
this.onSorted();
5151
}
5252
});
@@ -58,8 +58,7 @@ export class DataTableController {
5858
defaults(){
5959
this.expanded = this.expanded || {};
6060

61-
this.options = angular.extend(angular.
62-
copy(TableDefaults), this.options);
61+
this.options = angular.extend(angular.copy(TableDefaults), this.options);
6362

6463
angular.forEach(TableDefaults.paging, (v,k) => {
6564
if(!this.options.paging[k]){

‎src/components/DataTableDirective.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import angular from 'angular';
21
import { DataTableController } from './DataTableController';
32
import { ScrollbarWidth, ObjectId } from '../utils/utils';
43
import { throttle } from '../utils/throttle';
54
import { DataTableService } from './DataTableService';
65

7-
export function DataTableDirective($window, $timeout, $parse){
6+
export default function DataTableDirective($window, $timeout, $parse){
87
return {
98
restrict: 'E',
109
replace: true,
@@ -102,10 +101,13 @@ export function DataTableDirective($window, $timeout, $parse){
102101
ctrl.adjustColumns();
103102
};
104103

105-
$window.addEventListener('resize',
104+
function _calculateResize() {
106105
throttle(() => {
107106
$timeout(resize);
108-
}));
107+
});
108+
}
109+
110+
$window.addEventListener('resize', _calculateResize);
109111

110112
// When an item is hidden for example
111113
// in a tab with display none, the height

‎src/components/DataTableService.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import angular from 'angular';
21
import { ColumnDefaults } from '../defaults';
32
import { CamelCase } from '../utils/utils';
43

@@ -60,7 +59,7 @@ export let DataTableService = {
6059
});
6160

6261
let header = c.getElementsByTagName('column-header');
63-
62+
6463
if (header.length) {
6564
column.headerTemplate = header[0].innerHTML;
6665
c.removeChild(header[0])

‎src/components/body/BodyDirective.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import BodyController from './BodyController';
22

3-
export function BodyDirective($timeout){
3+
export default function BodyDirective($timeout){
44
return {
55
restrict: 'E',
66
controller: BodyController,

‎src/components/body/CellDirective.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import angular from 'angular';
21
import { CellController } from './CellController';
32

4-
export function CellDirective($rootScope, $compile, $log, $timeout){
3+
export default function CellDirective($rootScope, $compile, $log, $timeout){
54
return {
65
restrict: 'E',
76
controller: CellController,
@@ -67,7 +66,7 @@ export function CellDirective($rootScope, $compile, $log, $timeout){
6766
} else {
6867
content[0].innerHTML = ctrl.getValue();
6968
}
70-
69+
7170
}, true);
7271

7372
function createCellScope(){

‎src/components/body/GroupRowDirective.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { GroupRowController } from './GroupRowController';
22
import { TranslateXY } from '../../utils/translate';
33

4-
export function GroupRowDirective(){
4+
export default function GroupRowDirective(){
55
return {
66
restrict: 'E',
77
controller: GroupRowController,

‎src/components/body/RowController.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import angular from 'angular';
21
import { DeepValueGetter } from '../../utils/utils';
32
import { TranslateXY } from '../../utils/translate';
43

0 commit comments

Comments
 (0)