element.
5 | */
6 | angular.module('ui.codemirror', [])
7 | .constant('uiCodemirrorConfig', {})
8 | .directive('uiCodemirror', uiCodemirrorDirective);
9 |
10 | /**
11 | * @ngInject
12 | */
13 | function uiCodemirrorDirective($timeout, uiCodemirrorConfig) {
14 |
15 | return {
16 | restrict: 'EA',
17 | require: '?ngModel',
18 | compile: function compile() {
19 |
20 | // Require CodeMirror
21 | if (angular.isUndefined(window.CodeMirror)) {
22 | throw new Error('ui-codemirror needs CodeMirror to work... (o rly?)');
23 | }
24 |
25 | return postLink;
26 | }
27 | };
28 |
29 | function postLink(scope, iElement, iAttrs, ngModel) {
30 |
31 | var codemirrorOptions = angular.extend(
32 | { value: iElement.text() },
33 | uiCodemirrorConfig.codemirror || {},
34 | scope.$eval(iAttrs.uiCodemirror),
35 | scope.$eval(iAttrs.uiCodemirrorOpts)
36 | );
37 |
38 | var codemirror = newCodemirrorEditor(iElement, codemirrorOptions);
39 |
40 | configOptionsWatcher(
41 | codemirror,
42 | iAttrs.uiCodemirror || iAttrs.uiCodemirrorOpts,
43 | scope
44 | );
45 |
46 | configNgModelLink(codemirror, ngModel, scope);
47 |
48 | configUiRefreshAttribute(codemirror, iAttrs.uiRefresh, scope);
49 |
50 | // Allow access to the CodeMirror instance through a broadcasted event
51 | // eg: $broadcast('CodeMirror', function(cm){...});
52 | scope.$on('CodeMirror', function(event, callback) {
53 | if (angular.isFunction(callback)) {
54 | callback(codemirror);
55 | } else {
56 | throw new Error('the CodeMirror event requires a callback function');
57 | }
58 | });
59 |
60 | // onLoad callback
61 | if (angular.isFunction(codemirrorOptions.onLoad)) {
62 | codemirrorOptions.onLoad(codemirror);
63 | }
64 | }
65 |
66 | function newCodemirrorEditor(iElement, codemirrorOptions) {
67 | var codemirrot;
68 |
69 | if (iElement[0].tagName === 'TEXTAREA') {
70 | // Might bug but still ...
71 | codemirrot = window.CodeMirror.fromTextArea(iElement[0], codemirrorOptions);
72 | } else {
73 | iElement.html('');
74 | codemirrot = new window.CodeMirror(function(cm_el) {
75 | iElement.append(cm_el);
76 | }, codemirrorOptions);
77 | }
78 |
79 | return codemirrot;
80 | }
81 |
82 | function configOptionsWatcher(codemirrot, uiCodemirrorAttr, scope) {
83 | if (!uiCodemirrorAttr) { return; }
84 |
85 | var codemirrorDefaultsKeys = Object.keys(window.CodeMirror.defaults);
86 | scope.$watch(uiCodemirrorAttr, updateOptions, true);
87 | function updateOptions(newValues, oldValue) {
88 | if (!angular.isObject(newValues)) { return; }
89 | codemirrorDefaultsKeys.forEach(function(key) {
90 | if (newValues.hasOwnProperty(key)) {
91 |
92 | if (oldValue && newValues[key] === oldValue[key]) {
93 | return;
94 | }
95 |
96 | codemirrot.setOption(key, newValues[key]);
97 | }
98 | });
99 | }
100 | }
101 |
102 | function configNgModelLink(codemirror, ngModel, scope) {
103 | if (!ngModel) { return; }
104 | // CodeMirror expects a string, so make sure it gets one.
105 | // This does not change the model.
106 | ngModel.$formatters.push(function(value) {
107 | if (angular.isUndefined(value) || value === null) {
108 | return '';
109 | } else if (angular.isObject(value) || angular.isArray(value)) {
110 | throw new Error('ui-codemirror cannot use an object or an array as a model');
111 | }
112 | return value;
113 | });
114 |
115 |
116 | // Override the ngModelController $render method, which is what gets called when the model is updated.
117 | // This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
118 | ngModel.$render = function() {
119 | //Code mirror expects a string so make sure it gets one
120 | //Although the formatter have already done this, it can be possible that another formatter returns undefined (for example the required directive)
121 | var safeViewValue = ngModel.$viewValue || '';
122 | codemirror.setValue(safeViewValue);
123 | };
124 |
125 |
126 | // Keep the ngModel in sync with changes from CodeMirror
127 | codemirror.on('change', function(instance) {
128 | var newValue = instance.getValue();
129 | if (newValue !== ngModel.$viewValue) {
130 | scope.$evalAsync(function() {
131 | ngModel.$setViewValue(newValue);
132 | });
133 | }
134 | });
135 | }
136 |
137 | function configUiRefreshAttribute(codeMirror, uiRefreshAttr, scope) {
138 | if (!uiRefreshAttr) { return; }
139 |
140 | scope.$watch(uiRefreshAttr, function(newVal, oldVal) {
141 | // Skip the initial watch firing
142 | if (newVal !== oldVal) {
143 | $timeout(function() {
144 | codeMirror.refresh();
145 | });
146 | }
147 | });
148 | }
149 |
150 | }
151 |
--------------------------------------------------------------------------------
/example/partials/additional_filters.html:
--------------------------------------------------------------------------------
1 | Additional filters
2 | add filtering by controller variables
3 |
4 |
5 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
29 |
30 |
31 |
32 | In template:
33 |
63 |
64 |
Notice:
65 | $owner is a link to Controller
66 |
67 |
68 |
--------------------------------------------------------------------------------
/example/partials/attributes.html:
--------------------------------------------------------------------------------
1 | Possible attrributes:
2 |
3 | Required:
4 |
5 |
6 | -
7 |
data="controllerArray"
8 | Data source (array of objects) in your Controller. But if 'fromUrl' is present 'data' atribute will contain controller link to empty array( will be fill up after receiving data ).
9 |
10 | -
11 |
headers="headerName1,headerName1,headerName3"
12 | Array of table header names
13 |
14 | -
15 |
fields="Property1, Property2"
16 | Array of displayed properties of object. This option allows you to display only certain fields of the object. Number of fields must be equal number of headers.
17 |
18 |
19 |
20 | Optional:
21 |
22 |
23 |
24 | -
25 |
fromUrl="URL"
26 | Load data from external URL.
27 |
28 | -
29 |
display="N"
30 | Display N records per page.
31 |
32 | -
33 |
search="true | false | separate"
34 | Display search input. Value "separate" is allows you search by columns.
35 |
36 | -
37 |
paging="true | false"
38 | Use paging to present data.
39 |
40 | -
41 |
sorting="simple | compound | false"
42 | Use sorting. 'simple' - by single column (property), 'compound' - by few columns.
43 |
44 | -
45 |
select="multiply"
46 | Allows to select more than one row. Selected rows are accessible.
47 |
48 | -
49 |
editable="all"
50 | Allows to edit content inside cells. Edit uptates your angular model.
51 |
52 | -
53 |
selected-model="model"
54 | It exports selected model to controller variable.
55 |
56 | -
57 |
resize="true"
58 | Use column resizing.
59 |
60 | -
61 |
drag-columns="true"
62 | It allows to reorder your columns using drag-n-drop.
63 |
64 |
65 |
66 | Default values:
67 |
68 |
69 |
70 | -
71 |
display="5"
72 |
73 | -
74 |
paging="true"
75 |
76 | -
77 |
sorting="simple"
78 |
79 |
80 | -
81 |
resize="false"
82 |
83 | -
84 |
drag-columns="false"
85 |
86 |
87 |
--------------------------------------------------------------------------------
/example/partials/basic.html:
--------------------------------------------------------------------------------
1 | Bacis
2 |
3 |
12 |
13 |
14 |
15 | In template:
16 |
27 |
28 | In controller:
29 |
30 |
49 |
50 |
--------------------------------------------------------------------------------
/example/partials/column_highlighting.html:
--------------------------------------------------------------------------------
1 | Column highlighting
2 |
3 |
13 |
14 |
15 |
16 |
17 | In template:
18 |
27 |
28 |
29 |
Notice:
30 | just add class class="hover-column" to add CSS column highlighting
31 |
32 |
--------------------------------------------------------------------------------
/example/partials/compound_resize.html:
--------------------------------------------------------------------------------
1 | Resizable table columns
2 |
3 |
10 |
11 |
12 |
13 |
14 |
Example
15 | Just add attribute resize to the table
16 |
17 |
18 |
19 | In template:
20 |
29 |
30 |
31 |
Notice
32 | If you want to change in the size of the cell was changed and the length of the table, just add a CSS class with style width:auto to the table. Example:
33 | .object-table-module table{ width:auto; }
34 |
35 |
36 | If you are using custom header:
37 | 1) Add ng-mousedown="resizeStart($event)" and ng-mouseup="resizeEnd($event)" to your <thead>tag.
38 | 2) Add <div class="resize"></div> to resized headers (<td> tag)
39 |
40 |
46 |
47 |
48 | |
49 |
50 | Name of Person
51 | |
52 |
53 |
54 | Eye |
55 |
56 |
57 | Age |
58 |
59 |
60 |
61 |
62 |
63 | In template:
64 |
88 |
--------------------------------------------------------------------------------
/example/partials/compound_sorting.html:
--------------------------------------------------------------------------------
1 | Compound sorting
2 |
3 |
10 |
11 |
12 |
Example
13 | First try sort by 'Full Name' , then by 'Money'
14 |
15 |
24 |
--------------------------------------------------------------------------------
/example/partials/custom_headers.html:
--------------------------------------------------------------------------------
1 | Custom headers pattern
2 |
3 |
10 |
11 |
12 | | Personal information |
13 | Additional information |
14 |
15 |
16 | | Name |
17 | Eye color |
18 | Age |
19 | Balance |
20 | Company |
21 | Address |
22 | Favorite Fruit |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | In template:
33 |
78 |
79 |
80 |
Notice:
81 | If you want to allow sorting you need to add attributes to header (th):
82 | ng-click="sortBy('object.property')" and
83 | ng-class="headerIsSortedClass('Header Name')"
84 |
85 |
--------------------------------------------------------------------------------
/example/partials/custom_rows.html:
--------------------------------------------------------------------------------
1 | Rows pattern
2 |
3 |
11 |
12 |
13 | | {{::item.name}} |
14 |
15 | {{::item.eyeColor}}
16 | |
17 | {{::item.age}} |
18 | {{::item.balance}} |
19 | {{::item.company}} |
20 | {{::item.address}} |
21 | {{::item.favoriteFruit}} |
22 |
23 |
24 |
25 |
26 |
27 |
28 | In template:
29 |
54 |
55 |
56 |
Warning:
57 | If you want to use ng-attributes (like ng-if, ng-repeat,...) inside your template - please add to your <body> ng-non-bindable attribute to prevent Angular engine to compile attributes before table render.
58 |
59 |
60 | Example:
61 |
62 |
67 |
68 |
69 | | {{::item.name}} |
70 |
71 | {{::item.eyeColor}}
72 | |
73 | {{::item.address}} |
74 |
75 |
76 | {{::friend.name}}
77 |
78 | |
79 |
80 |
81 |
82 |
83 |
84 | In template:
85 |
107 |
--------------------------------------------------------------------------------
/example/partials/custom_rows_headers.html:
--------------------------------------------------------------------------------
1 | Custom rows and headers pattern:
2 |
3 |
10 |
11 |
12 | | Name..(click me) |
13 | Age |
14 | Money $ |
15 |
16 |
17 |
18 |
19 |
20 | | {{::item.name}} |
21 | {{::item.age}} |
22 | {{::item.money}} USD |
23 |
24 |
25 |
26 |
27 |
28 |
29 | In template:
30 |
56 |
57 |
58 |
Notice:
59 | $owner is a link to Controller
60 |
--------------------------------------------------------------------------------
/example/partials/draggable_headers.html:
--------------------------------------------------------------------------------
1 | Draggable headers
2 |
3 |
12 |
13 |
14 | In template:
15 |
26 |
27 |
Example
28 | Working perfect with resize resizing columns
29 |
30 |
31 | If you are using custom templates:
32 | add allow-drag attribute to draggable header
33 |
39 |
40 |
41 | | Name |
42 | Eye color |
43 | Age |
44 | Balance |
45 | Company |
46 | Favorite Fruit |
47 |
48 |
49 |
50 |
51 | | {{::item.name}} |
52 |
53 | {{::item.eyeColor}}
54 | |
55 | {{::item.age}} |
56 | {{::item.balance}} |
57 | {{::item.balance}} |
58 | {{::item.favoriteFruit}} |
59 |
60 |
61 |
62 |
63 |
64 | In template:
65 |
96 |
--------------------------------------------------------------------------------
/example/partials/editable_cells.html:
--------------------------------------------------------------------------------
1 | Editable cells (all)
2 |
3 |
13 |
14 |
15 |
16 | In template:
17 |
28 |
29 |
30 |
Notice:
31 | Add attribute editable = "true" to allow to edit all cells.
32 |
33 |
34 | Editable single column (Eye color)
35 |
36 |
44 |
45 |
46 | | {{::item.name}} |
47 | {{item.eyeColor}} |
48 | {{::item.age}} |
49 | {{::item.balance}} |
50 | {{::item.company}} |
51 | {{::item.address}} |
52 | {{::item.favoriteFruit}} |
53 |
54 |
55 |
56 |
57 |
58 |
59 | In template:
60 |
81 |
82 |
83 |
Notice:
84 | Add attribute editable to cell for editing.
85 |
86 |
87 |
--------------------------------------------------------------------------------
/example/partials/external.html:
--------------------------------------------------------------------------------
1 | External resource
2 |
3 |
10 |
11 |
12 |
13 | In template:
14 |
23 |
24 |
25 |
Notice
26 | Directive exports all data to controller variable.
27 |
28 |
29 | In controller:
30 |
34 |
--------------------------------------------------------------------------------
/example/partials/footer_expression.html:
--------------------------------------------------------------------------------
1 | Footer expressions
2 | aggregate functions in footer
3 |
4 |
11 |
12 |
13 | | Total users:{{$filtered.length}} |
14 | |
15 | Total balance:{{ $owner.getTotalBalance($filtered) }} $ |
16 |
17 |
18 |
19 |
20 | | {{::item.name}} |
21 | {{::item.age}} |
22 | {{item.money}} |
23 |
24 |
25 |
26 |
27 |
28 |
Please try to edit money column
29 |
30 |
31 |
32 | In template:
33 |
56 |
57 |
58 |
Notice:
59 |
variable $filtered contains displayed array (It depends on the filters like search or your custom filters);
60 |
If you want to apply your aggregate function for all data array despite filters, please use getTotalBalance(data). In this case returned of function value won't be changed during search.
61 |
64 |
Notice:
65 |
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
66 |
Method getTotalBalance in controller:
72 |
--------------------------------------------------------------------------------
/example/partials/other.html:
--------------------------------------------------------------------------------
1 | Without header
2 |
7 |
8 |
9 |
10 | | {{::item.name}} |
11 | {{item.eyeColor}} |
12 | {{::item.age}} |
13 | {{::item.balance}} |
14 | {{::item.company}} |
15 | {{::item.address}} |
16 | {{::item.favoriteFruit}} |
17 |
18 |
19 |
20 |
21 |
22 |
23 | In template:
24 |
44 |
--------------------------------------------------------------------------------
/example/partials/pagination.html:
--------------------------------------------------------------------------------
1 | Pagination
2 |
3 |
11 |
12 |
13 |
Notice
14 | paging ="true" by defaults.
15 |
16 |
17 |
18 | In template:
19 |
--------------------------------------------------------------------------------
/example/partials/select_multiply.html:
--------------------------------------------------------------------------------
1 | Multiply selection
2 |
3 |
14 |
15 | Selected:
16 |
17 | {{report.selectedPerson}}
18 |
19 |
20 |
21 |
22 | In template:
23 |
40 |
41 |
42 | Controller rows click event:
43 |
50 |
51 |
52 | | {{item.eyeColor}} |
53 | {{::item.age}} |
54 | {{::item.balance}} |
55 | {{::item.company}} |
56 | {{::item.address}} |
57 | {{::item.favoriteFruit}} |
58 |
59 |
60 |
61 |
62 |
63 | In template:
64 |
84 |
85 |
86 |
87 |
88 |
Notice
89 | If you don't want to disable row selection, please add setSelected(item) to your ng-click.
90 | $owner is a link to Controller.
91 |
92 |
93 |
100 |
--------------------------------------------------------------------------------
/example/partials/separate_search.html:
--------------------------------------------------------------------------------
1 | Separate Search
2 | Searching by each column
3 |
9 |
10 |
11 |
12 | In template:
13 |
--------------------------------------------------------------------------------
/example/partials/server_paging.html:
--------------------------------------------------------------------------------
1 | Server Paging (Simple)
2 |
3 |
4 |
5 | Just imagine, server returns JSON, that contains such information:
6 | data: array of objects
7 | page: current number page
8 | limit: the amount of items on the page
9 | total: the total amount of objects (to calculate the number of pages).
10 |
Example
11 |
30 |
31 |
32 |
38 |
39 |
49 |
50 |
51 | In template:
52 |
71 |
72 |
73 | In controller:
74 |
109 |
110 |
111 | Server Paging (Advanced)
112 |
113 |
119 |
120 |
121 |
122 | Loading Data...
123 |
124 |
125 |
126 |
143 |
144 |
145 | In template:
146 |
178 |
179 |
180 | In controller:
181 |
--------------------------------------------------------------------------------
/example/partials/themes.html:
--------------------------------------------------------------------------------
1 | Themes
2 |
3 | Default theme:
4 | Without additional classes
5 |
13 |
14 |
15 |
16 |
Notice
17 | Add class to table to apply theme (class="blue-dust")
18 |
19 |
20 | In template:
21 |
30 |
31 |
32 | Blue Dust
33 | class="blue-dust"
34 |
35 |
43 |
44 |
45 | Dark sky
46 | class="dark-sky"
47 |
48 |
56 |
--------------------------------------------------------------------------------
/example/test-data/data-page1.json:
--------------------------------------------------------------------------------
1 | {
2 | "data":[{"name": "Moroni", "age": 50, "money": -10},
3 | {"name": "Tiancum", "age": 43,"money": 120},
4 | {"name": "Jacob", "age": 27, "money": 5.5},
5 | {"name": "Nephi", "age": 29,"money": -54},
6 | {"name": "Enos", "age": 34,"money": 110},
7 | {"name": "Tiancum", "age": 43, "money": 1000},
8 | {"name": "Jacob", "age": 27,"money": -201},
9 | {"name": "Nephi", "age": 29, "money": 100},
10 | {"name": "Enos", "age": 34, "money": -52.5},
11 | {"name": "Tiancum", "age": 43, "money": 52.1}],
12 | "page":1,
13 | "limit":10,
14 | "total":25
15 | }
--------------------------------------------------------------------------------
/example/test-data/data-page2.json:
--------------------------------------------------------------------------------
1 | {
2 | "data":[{"name": "2Moroni", "age": 50, "money": -10},
3 | {"name": "2Tiancum", "age": 43,"money": 120},
4 | {"name": "2Jacob", "age": 27, "money": 5.5},
5 | {"name": "Nephi", "age": 29,"money": -54},
6 | {"name": "Enos", "age": 34,"money": 110},
7 | {"name": "Tiancum", "age": 43, "money": 1000},
8 | {"name": "Jacob", "age": 27,"money": -201},
9 | {"name": "Nephi", "age": 29, "money": 100},
10 | {"name": "Enos", "age": 34, "money": -52.5},
11 | {"name": "Tiancum", "age": 43, "money": 52.1}],
12 | "page":2,
13 | "limit":10,
14 | "total":25
15 | }
--------------------------------------------------------------------------------
/example/test-data/data-page3.json:
--------------------------------------------------------------------------------
1 | {
2 | "data":[{"name": "Tiancum", "age": 43, "money": 1000},
3 | {"name": "Jacob", "age": 27,"money": -201},
4 | {"name": "Nephi", "age": 29, "money": 100},
5 | {"name": "Enos", "age": 34, "money": -52.5},
6 | {"name": "Tiancum", "age": 43, "money": 52.1}],
7 | "page":3,
8 | "limit":5,
9 | "total":25
10 | }
--------------------------------------------------------------------------------
/gulp/build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp'),
4 | gulpLoadPlugins = require('gulp-load-plugins'),
5 | minifyCSS = require('gulp-minify-css'),
6 | path = require('path'),
7 | gutil = require('gulp-util'),
8 | plugins = gulpLoadPlugins(),
9 | header = require('gulp-header'),
10 |
11 |
12 | TEMP_FOLDER = ".tmp",
13 | SRC_FOLDER = "src",
14 | TEMPLATES_FOLDER = "templates",
15 | BUILD_FOLDER = "build",
16 | OUTPUT_FILE = "object-table.js",
17 |
18 | /* add HEADER */
19 | pkg = require('../package.json');
20 | var banner = ['/**',
21 | ' * <%= pkg.name %> - <%= pkg.description %>',
22 | ' * @version v<%= pkg.version %>',
23 | ' * @author <%= pkg.author %>',
24 | ' * @license <%= pkg.license %>',
25 | ' */',
26 | ''].join('\n');
27 |
28 |
29 | gulp.task('less', function () {
30 | return gulp.src('src/css/**/*.less')
31 | .pipe(plugins.less({
32 | paths: [path.join(__dirname, 'less', 'includes')]
33 | }).on('error', function (err) {
34 | gutil.log(err);
35 | this.emit('end');
36 | }))
37 | .pipe(minifyCSS())
38 |
39 | .pipe(gulp.dest(BUILD_FOLDER));
40 | });
41 |
42 | gulp.task('watch', function () {
43 | return plugins.watch('src/css/**/*.less', function () {
44 | gulp.start('less')
45 | .on('error', gutil.log);
46 | })
47 | });
48 |
49 | gulp.task('js-min', function () {
50 | return gulp.src(SRC_FOLDER + '/js/**/*.js')
51 | .pipe(plugins.concat(OUTPUT_FILE))
52 | .pipe(plugins.ngAnnotate({add: true}))
53 | .pipe(plugins.uglify({mangle: true}))
54 | .pipe(header(banner, {pkg: pkg}))
55 | .pipe(gulp.dest(TEMP_FOLDER))
56 | });
57 |
58 | gulp.task('js-templates', function () {
59 | return gulp.src(SRC_FOLDER + '/' + TEMPLATES_FOLDER + '/**/*.html')
60 | .pipe(plugins.htmlmin({collapseWhitespace: true}))
61 | .pipe(plugins.angularTemplatecache('templates.js', {
62 | module: 'objectTable',
63 | root: '/' + SRC_FOLDER + '/' + TEMPLATES_FOLDER + '/'
64 | }))
65 | .pipe(gulp.dest(TEMP_FOLDER))
66 | });
67 |
68 | /*gulp.task('css', function() {
69 | return gulp.src('src/css/object-table-style.css')
70 | .pipe(minifyCSS())
71 | .pipe(gulp.dest(BUILD_FOLDER));
72 | });*/
73 |
74 | gulp.task('js-concat', function () {
75 | return gulp.src(TEMP_FOLDER + '/**/*.js')
76 | .pipe(plugins.concat(OUTPUT_FILE))
77 | .pipe(gulp.dest('./build'))
78 | });
79 |
80 | gulp.task('build', gulp.series('js-templates', 'js-min', 'less', 'js-concat'));
81 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp');
4 |
5 | require('require-dir')('./gulp');
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-object-table",
3 | "version": "0.2.6",
4 | "description": "angular smart table directive",
5 | "main": "build/angular-object-table.js",
6 | "scripts": {
7 | "test": "karma start tests/karma.conf.js",
8 | "build": "gulp build"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/ekokotov/object-table.git"
13 | },
14 | "keywords": [
15 | "angular",
16 | "gtable",
17 | "dablegrid",
18 | "grid"
19 | ],
20 | "author": "Yauheni Kokatau",
21 | "license": "MIT",
22 | "dependencies": {},
23 | "engine": {
24 | "node": "10.15.3",
25 | "npm": "6.9.0"
26 | },
27 | "devDependencies": {
28 | "angular": "^1.4.1",
29 | "angular-mocks": "^1.4.1",
30 | "bower": "^1.8.8",
31 | "gulp": "^4.0.2",
32 | "gulp-angular-templatecache": "^3.0.0",
33 | "gulp-clean": "^0.4.0",
34 | "gulp-concat": "^2.6.1",
35 | "gulp-header": "^2.0.7",
36 | "gulp-htmlmin": "^5.0.1",
37 | "gulp-less": "^4.0.1",
38 | "gulp-load": "^0.1.1",
39 | "gulp-load-plugins": "^1.5.0",
40 | "gulp-minify-css": "^1.2.4",
41 | "gulp-ng-annotate": "^2.1.0",
42 | "gulp-uglify": "^3.0.2",
43 | "gulp-util": "^3.0.8",
44 | "gulp-watch": "^5.0.1",
45 | "jasmine-core": "^3.4.0",
46 | "karma": "^4.1.0",
47 | "karma-jasmine": "^2.0.1",
48 | "karma-phantomjs-launcher": "^1.0.4",
49 | "plugins": "^0.4.2",
50 | "require-dir": "^1.2.0"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/css/object-table-style.less:
--------------------------------------------------------------------------------
1 | .object-table-module {
2 |
3 | .back-cover{
4 | background-color: white;
5 | }
6 |
7 | .count{
8 | font-size: 15px;
9 | float: right;
10 | margin-top: 20px;
11 | color: rgb(33, 101, 163);
12 | background-color: rgba(188, 188, 188, 0.35);
13 | .records{
14 | color: rgb(136, 136, 136);
15 | font-weight: normal;
16 | }
17 | }
18 |
19 | /*## Search */
20 | .search{
21 | max-width:250px;
22 | padding-right: 25px;
23 | &.separate{
24 | width: 100%;
25 | max-width: 100%;
26 | padding-left: 22px;
27 | }
28 | }
29 | .search_icon{
30 | position: absolute;
31 | right: 8px;
32 | top: 10px;
33 | color: gray;
34 | &.separate{
35 | left: 15px;
36 | top: 20px;
37 | font-size: 10px;
38 | width: 10px;
39 | }
40 | }
41 |
42 | /*## Sorting */
43 | .sorting-badge{
44 | background-color: white;
45 | position: relative;
46 | font-weight: 600;
47 | font-size: 10px;
48 | padding: 5px 5px 5px 10px;
49 | display: inline-block;
50 | border-radius: 4px;
51 | margin-left: 5px;
52 | color: rgb(51, 122, 183);
53 | border: 1px solid rgba(12, 75, 140, 0.43);
54 | margin-bottom: 3px;
55 | }
56 |
57 | .sorting-container{
58 | margin: 10px 0;
59 |
60 | .sorting-badge{
61 | &:hover{
62 | background-color: rgb(51, 122, 183);
63 | color: white;
64 | .close{
65 | opacity:1;
66 | cursor: pointer;
67 | color: rgb(0, 38, 85);
68 | text-shadow:none;
69 | }
70 | }
71 | .close{
72 | margin-left: 5px;
73 | float: right;
74 | font-size: 12px;
75 | line-height: 1;
76 | color: #000;
77 | filter: alpha(opacity=20);
78 | opacity: .2;
79 | }
80 | /*.up,.down{
81 | &:extend(.object-table-module .object-table thead>tr>th.sortable:after)
82 | }*/
83 | }
84 | }
85 |
86 | .object-table{
87 | margin-bottom: 0px;
88 | color: gray;
89 |
90 | thead{
91 | >tr{
92 | background-color: #e6f1f6;
93 | color: rgb(33, 101, 163);
94 | cursor: pointer;
95 | -webkit-touch-callout: none;
96 | -webkit-user-select: none;
97 | -khtml-user-select: none;
98 | -moz-user-select: none;
99 | -ms-user-select: none;
100 | user-select: none;
101 | th{
102 | border-bottom: 0;
103 | padding-right: 25px;
104 | position: relative;
105 | will-change:width;
106 | -webkit-touch-callout: none;
107 | -webkit-user-select: none;
108 | -khtml-user-select: none;
109 | -moz-user-select: none;
110 | -ms-user-select: none;
111 | user-select: none;
112 | &[draggable]{
113 | a{
114 | width: 100%;
115 | display: block;
116 | }
117 | }
118 | &.dragged{
119 | background-color: rgba(255, 255, 255, 0.64);
120 | border: 2px dashed rgb(66, 121, 152);
121 | div.resize{
122 | display: none;
123 | }
124 | }
125 | &.draggedOver{
126 | background-color: rgba(128, 128, 128, 0.16);
127 | border: 1px solid rgb(147, 153, 156);
128 | div.resize{
129 | display: none;
130 | }
131 | }
132 | &.sortable{
133 | position: relative;
134 | &:before {
135 | margin-top: 2px;
136 | content: "\e113";
137 | font-size: 9px;
138 | font-family: 'Glyphicons Halflings';
139 | visibility: visible;
140 | right: 8px;
141 | top: 40%;
142 | position: absolute;
143 | opacity: .25;
144 | margin-top: -4px;
145 | }
146 | &:after {
147 | &:extend(.object-table-module .object-table thead > tr th.sortable:before);
148 | content: "\e114";
149 | margin-top: 5px;
150 | }
151 | &:hover:not(.table-sort-up):not(.table-sort-down):after,
152 | &:hover:not(.table-sort-up):not(.table-sort-down):before{
153 | opacity: 1;
154 | }
155 | &.table-sort-up:before,&.table-sort-down:after{
156 | opacity: 1;
157 | }
158 | }
159 |
160 | &.separate{
161 | position: relative;
162 | padding-right: 7px;
163 | text-shadow: none !important;
164 | outline: none;
165 | &:focus{
166 | outline: none;
167 | }
168 | }
169 | div.resize{
170 | width: 5px;
171 | border-right: 2px dotted rgb(148, 148, 148);
172 | position: absolute;
173 | right: -2px;
174 | visibility: hidden;
175 | top: 0;
176 | z-index: 999;
177 | height: 100%;
178 | cursor: ew-resize;
179 | }
180 | &:hover{
181 | div.resize{
182 | visibility: visible;
183 | }
184 | }
185 | }
186 | }
187 |
188 | }
189 |
190 | tfoot{
191 | tr{
192 | &:extend(.object-table-module .object-table thead>tr);
193 | cursor: auto;
194 | }
195 | }
196 | tbody{
197 | tr{
198 | &.selected-row td{
199 | background-color: rgb(215, 241, 160);
200 | }
201 | &:hover{
202 | background-color:rgba(103, 103, 103, 0.08);
203 | color: black;
204 | }
205 | }
206 | td{
207 | //will-change:width;
208 | &:hover{
209 | cursor: pointer;
210 | }
211 | &[editable]{
212 | div[contenteditable]{
213 | padding: 3px;
214 | &:focus{
215 | margin: -3px;
216 | border: 2px dotted #738395;
217 | background-color: #F5F5F5;
218 | vertical-align: middle;
219 | color: rgb(12, 75, 140);
220 | display: block;
221 | outline: none;
222 | }
223 | }
224 | }
225 | }
226 |
227 | }
228 | /*&.resize{
229 | width: auto;
230 | }*/
231 | }
232 |
233 | &.hover-column table{
234 | overflow: hidden !important;
235 |
236 | thead{
237 | tr{
238 | th{
239 | z-index: 3;
240 | position: relative;
241 | }
242 | }
243 | }
244 | tbody{
245 | tr{
246 | td{
247 | position: relative;
248 | outline: 0;
249 | z-index: 2;
250 | &:hover{
251 | z-index: 1;
252 | &::before{
253 | content: '';
254 | height: 10000px;
255 | left: 0;
256 | position: absolute;
257 | top: -5000px;
258 | width: 100%;
259 | z-index: -1;
260 | background-color: rgba(103, 103, 103, 0.08);
261 | }
262 | }
263 |
264 | }
265 | }
266 | }
267 | }
268 |
269 | }
270 | /* global loading */
271 | .loading{
272 | padding: 5px;
273 | text-align: center;
274 | color: rgb(51, 122, 185);
275 | }
276 |
277 | .loading .glyphicon-refresh-animate {
278 | -animation: spin .7s infinite linear;
279 | -webkit-animation: spin2 .7s infinite linear;
280 | }
281 |
282 |
283 | @-webkit-keyframes spin2 {
284 | from { -webkit-transform: rotate(0deg);}
285 | to { -webkit-transform: rotate(360deg);}
286 | }
287 |
288 | @keyframes spin {
289 | from { transform: scale(1) rotate(0deg);}
290 | to { transform: scale(1) rotate(360deg);}
291 | }
292 |
--------------------------------------------------------------------------------
/src/css/themes/blue-dust.less:
--------------------------------------------------------------------------------
1 | @table-background-color:#bac9d1;
2 | @table-font-color:#02658C;
3 | @table-border:rgb(0, 85, 118);
4 | @head-background-color:#545761;
5 | @head-color:rgb(144, 223, 255);
6 | @row-selected-background:rgba(136, 223, 255, 1);
7 | @row-selected-border:2px solid rgb(74, 190, 232) !important;
8 | @row-selected-color:black;
9 | @row-hover-background:rgba(136, 223, 255, 0.19);
10 | @editable-background:#D7D7D7;
11 | @editable-border:2px dotted #009AD5;
12 | @counts-background:#BAC9D1;
13 | @counts-border:1px solid rgba(43, 51, 74, 0.45);
14 | @paging-color:#2B334A;
15 |
16 | /* table background */
17 | .object-table-module.blue-dust {
18 |
19 | .back-cover {
20 | background-color: @table-background-color;
21 | table{
22 | color: @table-font-color;
23 | &.table{
24 | border: 1px solid @table-border;
25 | border-bottom: 5px solid @head-background-color;
26 | }
27 | &.object-table{
28 | thead{
29 | tr{
30 | background-color: @head-background-color;
31 | color: @head-color;
32 | th{
33 | border: 1px solid rgba(143, 153, 162, 0.39);
34 | text-shadow: 1px 0 1px rgba(0, 0, 0, 0.64);
35 | }
36 | }
37 | }
38 |
39 | tbody{
40 | tr{
41 | &:hover{
42 | background-color: @row-hover-background;
43 | color: @row-selected-color;
44 | text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.29);
45 | }
46 | &.selected-row{
47 | td{
48 | background-color: @row-selected-background;
49 | color: @row-selected-color;
50 | border-bottom: @row-selected-border;
51 | border-top: @row-selected-border;
52 | }
53 | }
54 | td{
55 | border:1px solid rgba(84, 87, 97, 0.23);
56 | &[editable]{
57 | span:focus {
58 | padding: 3px;
59 | margin: -5px;
60 | font-weight: bold;
61 | border: @editable-border;
62 | background-color: @editable-background;
63 | }
64 | }
65 | }
66 | }
67 | }
68 |
69 | }
70 | }
71 | }
72 |
73 | .sorting-badge{
74 | color: rgb(51, 55, 66);
75 | background-color: rgb(186, 201, 209);
76 | &:hover{
77 | background-color: @head-background-color;
78 | color: rgb(186, 201, 209);
79 | }
80 | }
81 |
82 |
83 |
84 | /* column hover*/
85 | &.hover-column table tbody td:hover::before {
86 | background-color: @row-hover-background;
87 | }
88 |
89 | /*search*/
90 | .search{
91 | color: rgb(51, 55, 66);
92 | border: 3px solid rgba(0, 137, 189, 0.23);
93 | &:focus{
94 | border: 2px solid rgba(84, 87, 97, 0.77);
95 | }
96 | &.separate{
97 | border: none;
98 | }
99 | }
100 |
101 |
102 | /*barge*/
103 | .count {
104 | background-color: @counts-background;
105 | border: @counts-border;
106 | color: @head-background-color;
107 | .records {
108 | color: rgb(51, 55, 66);
109 | }
110 | }
111 |
112 | .pagination>li{
113 | &.active{
114 | a{
115 | color: #88DFFF;
116 | background-color: #545761;
117 | }
118 | }
119 | a {
120 | padding: 3px 12px;
121 | color: @paging-color;
122 | background-color: @counts-background;
123 | border: @counts-border;
124 | &:hover{
125 | background-color: #DFDFDF;
126 | }
127 | }
128 | }
129 |
130 | }
--------------------------------------------------------------------------------
/src/css/themes/dark-sky.less:
--------------------------------------------------------------------------------
1 | @table-background-color:#333742;
2 | @table-font-color:#9ca0a9;
3 | @table-border:#24272f;
4 | @head-background-color:#009AD5;
5 | @head-color:rgb(51, 55, 66);
6 | @row-selected-background:rgba(156, 156, 159, 0.56);
7 | @row-selected-color:rgb(0, 177, 245);
8 | @row-hover-background:rgba(0, 154, 213, 0.19);
9 | @editable-background:#D7D7D7;
10 | @editable-border:2px dotted #009AD5;
11 | @counts-background:#5D7187;
12 | @counts-border:#2B334A;
13 | @counts-color:#2B334A;
14 |
15 | .object-table-module.dark-sky{
16 | /* table background */
17 | .back-cover {
18 | background-color: @table-background-color;
19 | /* cell font color */
20 | table{
21 | color: @table-font-color;
22 | /* cell border */
23 | &.table{
24 | border: 1px @table-border;
25 | border-bottom: 5px solid @head-background-color;
26 | }
27 | /* table border */
28 | &.table-bordered>tbody>tr>td{
29 | border: 1px solid @table-border;
30 | }
31 | /* table head cell border*/
32 | &.object-table thead{
33 | tr{
34 | background-color: @head-background-color;
35 | color: @head-color;
36 | th {
37 | border: 1px solid @table-background-color;
38 | }
39 | }
40 | }
41 | tbody{
42 | tr{
43 | /* table row selected*/
44 | &.selected-row td {
45 | background-color: @row-selected-background;
46 | color: @row-selected-color;
47 | }
48 | /* table row hover*/
49 | &:hover {
50 | background-color: @row-hover-background;
51 | color: white;
52 | }
53 | td{
54 | /*editable*/
55 | &[editable] span:focus {
56 | padding: 3px;
57 | margin: -5px;
58 | font-weight: bold;
59 | border: @editable-border;
60 | background-color: @editable-background;
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 |
68 | .sorting-badge{
69 | color: @head-color;
70 | background-color: @head-background-color;
71 | cursor: pointer;
72 | &:hover{
73 | background-color: fade(@head-background-color, 70%);
74 | color: @head-color;
75 | }
76 | }
77 |
78 |
79 | /* column hover*/
80 | &.hover-column table tbody td:hover::before {
81 | background-color: @row-hover-background;
82 | }
83 |
84 | /*search*/
85 | .search{
86 | background-color: rgba(239, 239, 239, 0.9);
87 | color: @head-color;
88 | border: 2px solid rgba(0, 154, 213, 1);
89 | box-shadow: inset 0 1px 5px rgba(51, 55, 66, 0.67);
90 | &:focus{
91 | box-shadow: none;
92 | }
93 | &.separate{
94 | color: #333742;
95 | border: 1px solid rgba(0, 118, 163, 1);
96 | box-shadow: none;
97 | }
98 | }
99 |
100 |
101 |
102 | .count {
103 | background-color: @counts-background;
104 | color: lighten(@head-background-color,30%);
105 | .records {
106 | color: @head-color;
107 | }
108 | }
109 | /*paggination*/
110 | .pagination>li{
111 | &.active>a{
112 | color: #000000;
113 | background-color: @head-background-color;
114 | top: -3px;
115 | height: 35px;
116 | padding-top: 6px;
117 | }
118 | a {
119 | padding: 3px 12px;
120 | color: @counts-color;
121 | background-color: @counts-background;
122 | border: 1px solid @counts-border;
123 | }
124 | }
125 | }
--------------------------------------------------------------------------------
/src/js/contenteditableDirective.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | angular.module('objectTable',[]).directive('contenteditable', function() {
3 | return {
4 | restrict: 'A',
5 | require: ['ngModel', '^objectTable'],
6 | link: function(scope, element, attrs, ctrls) {
7 | var ngModel = ctrls[0], objectTableCtrl = ctrls[1];
8 | ngModel.$render = function() {
9 | element.html(ngModel.$viewValue || '');
10 | };
11 |
12 | element.bind('change blur', function() {
13 | var oldValue = ngModel.$viewValue.toString();
14 | var newValue = element.text();
15 | if (oldValue !== newValue) {
16 | scope.$apply(function() {
17 | ngModel.$setViewValue(newValue);
18 | });
19 | if (!!objectTableCtrl.onEdit && typeof objectTableCtrl.onEdit === 'function') objectTableCtrl.onEdit({$oldValue: oldValue, $newValue: newValue});
20 | }
21 | })
22 | }
23 | }
24 | });
25 |
--------------------------------------------------------------------------------
/src/js/directive.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | angular.module('objectTable').directive('objectTable', ['$compile','$interpolate',function($compile, $interpolate) {
3 | return {
4 | restrict: 'A',
5 | replace: true,
6 | templateUrl: '/src/templates/common.html',
7 | controller: 'objectTableCtrl',
8 | controllerAs: 'ctrl',
9 | transclude: true,
10 | scope: {
11 | data: '=',
12 | display: '=?',
13 | resize: '=?',
14 | paging: '=?',
15 | fromUrl: '@',
16 | //search:"@?",
17 | //headers:"@",
18 | //fields:"@",
19 | sortingType: '@?sorting',
20 | editable: '&?',
21 | select: '@?',
22 | selectedModel: '=?',
23 | dragColumns: '=?',
24 | //events
25 | onEdit: '&?',
26 | onDrag: '&?',
27 |
28 | },
29 | compile: function(tElement, tAttributes) {
30 |
31 | //collect filters
32 | var rowFilter = '',
33 | pagingFilter = '';
34 |
35 | // additional user filters
36 | if (!!tAttributes.addFilter) {
37 | rowFilter += tAttributes.addFilter;
38 | }
39 |
40 | //If SORTING allowed
41 | if (tAttributes.sorting !== 'false') {
42 | rowFilter += '| orderBy:sortingArray';
43 | }
44 |
45 | // add 'allow-drag' attribute to header is just cistom tbody present
46 | if (tAttributes.dragColumns) {
47 | tElement.find('th').attr('allow-drag','');
48 | }
49 |
50 | //If SEARCH allowed
51 | if (tAttributes.search === 'separate') {
52 | tAttributes.fields.split(',').forEach(function(item, index) {
53 | rowFilter += '| filter:{\'' + item.trim() + '\':columnSearch[\'' + item + '\']}';
54 | });
55 |
56 | } else if (typeof(tAttributes.search) === 'undefined' || tAttributes.search === 'true') {
57 | rowFilter += '| filter:globalSearch';
58 | }
59 |
60 | //pagingFilter = rowFilter;
61 | pagingFilter += ' | offset: currentPage:display |limitTo: display';
62 |
63 | tElement[0].querySelector('#rowTr').setAttribute('ng-repeat','item in $parent.$filtered = (data' + rowFilter + ')' + pagingFilter);
64 | //add paging
65 | tElement.find('paging').attr('count','$filtered.length');
66 |
67 | return function preLink(scope, element, attrs, ctrl, transclude) {
68 | ctrl._init();
69 | transclude(scope, function(clone, innerScope) {
70 | scope.$owner = innerScope.$parent;
71 | for (var key in clone) {
72 | if (clone.hasOwnProperty(key)) {
73 | switch (clone[key].tagName) {
74 | case 'THEAD':
75 | ctrl._addHeaderPattern(clone[key]);
76 | break;
77 | case 'TBODY':
78 | scope.findBody = true;
79 | ctrl._addRowPattern(clone[key],rowFilter,pagingFilter);
80 | break;
81 | case 'TFOOT':
82 | ctrl._addFooterPattern(clone[key]);
83 | break;
84 | }
85 | }
86 | }
87 | });
88 |
89 | }; //[END transclude]
90 |
91 | },
92 |
93 | };
94 |
95 | }]);
96 |
--------------------------------------------------------------------------------
/src/js/draggableDirective.js:
--------------------------------------------------------------------------------
1 | angular.module('objectTable').directive('allowDrag', function() {
2 | return {
3 | restrict: 'A',
4 | controller: function() {},
5 | compile: function(el, attr) {
6 |
7 | function removeDragClass(element, className) {
8 | var elm = element[0].parentNode.querySelector('.' + className);
9 | if (!!elm)
10 | elm.classList.remove(className);
11 | }
12 |
13 | return function pre(scope, element, attrs, ctrl) {
14 | element.attr('draggable',true);
15 |
16 | element.bind('dragstart', function(e) {
17 | ctrl.target = this;
18 | this.classList.add('dragged');
19 | var ev = e.originalEvent || e; // override event for touch events
20 | ev.dataTransfer.setData('text', ctrl.target.cellIndex);
21 | });
22 |
23 | element.bind('dragover', function(e) {
24 | e.preventDefault();
25 | });
26 |
27 | element.bind('dragenter', function(e) {
28 | ctrl.toTarget = this;
29 | if (!this.classList.contains('draggedOver') && !this.classList.contains('dragged'))
30 | this.classList.add('draggedOver');
31 | e.preventDefault();
32 | e.stopPropagation();
33 | });
34 |
35 | element.bind('dragend', function(e) {
36 | if (this.classList.contains('dragged'))
37 | this.classList.remove('dragged');
38 | e.preventDefault();
39 | });
40 |
41 | element.bind('dragleave', function(e) {
42 | this.classList.remove('draggedOver');
43 | });
44 |
45 | element.bind('drop', function(e) {
46 | var currentIndex = ctrl.toTarget.cellIndex,
47 | ev = e.originalEvent || e,
48 | draggedIndex = parseInt(ev.dataTransfer.getData('text'),10);
49 | removeDragClass(element, 'dragged');
50 | removeDragClass(element, 'draggedOver');
51 | element.parent().controller('objectTable').changeColumnsOrder(currentIndex,draggedIndex);
52 | e.preventDefault();
53 | });
54 | };
55 | }
56 |
57 | };
58 | });
59 |
--------------------------------------------------------------------------------
/src/js/objectTableCtrl.js:
--------------------------------------------------------------------------------
1 | angular.module('objectTable').controller('objectTableCtrl', ['$scope', '$timeout','$element', '$attrs','$http', '$compile', '$controller', 'objectTableUtilService',
2 | function angTableCtrl($scope, $timeout, $element, $attrs, $http, $compile, $controller, Util) {
3 |
4 | $controller('objectTableSortingCtrl', {$scope: $scope});
5 | var ctrl = this;
6 |
7 | this._init = function() {
8 | $scope.headers = [];
9 | $scope.fields = [];
10 | $scope.display = $scope.display || 5;
11 | $scope.paging = angular.isDefined($scope.paging) ? $scope.paging : true;
12 | $scope.sortingType = $scope.sortingType || 'simple';
13 | $scope.currentPage = 0;
14 | $scope.customHeader = false;
15 |
16 | if ($attrs.search == 'separate') {
17 | $scope.search = 'separate';
18 | $scope.columnSearch = [];
19 |
20 | /* ## after changing search model - clear currentPage ##*/
21 | } else {
22 | /* 'separate' or 'true' or 'false '*/
23 | $scope.search = typeof($attrs.search) === 'undefined' || $attrs.search === 'true';
24 | }
25 |
26 | /* GET HEADERS */
27 | $scope.headers = Util.getArrayFromParams($attrs.headers,'headers');
28 |
29 | /* GET FIELDS */
30 | $scope.fields = Util.getArrayFromParams($attrs.fields,'fields');
31 |
32 | //LOAD FROM EXTERNAL URL
33 | if (!!$attrs.fromUrl) {
34 | this._loadExternalData($attrs.fromUrl);
35 | }
36 |
37 | if (!!$scope.onEdit) {
38 | this.onEdit = $scope.onEdit;
39 | }
40 |
41 | //reinitialize selected model~`
42 | $scope.selectedModel = $scope.select === 'multiply' ? [] : {};
43 |
44 | };
45 |
46 | this.onEdit = $scope.onEdit;
47 |
48 | this._loadExternalData = function(url) {
49 | $scope.dataIsLoading = true;
50 | $http.get(url).then(function(response) {
51 | $scope.data = response.data;
52 | $scope.dataIsLoading = false;
53 | });
54 |
55 | };
56 |
57 | this._addHeaderPattern = function(node) {
58 | $scope.customHeader = true;
59 | //add Index to drag
60 | Array.prototype.forEach.call(node.querySelectorAll('[allow-drag]'), function(th, index) {
61 | th.setAttribute('index',index);
62 | });
63 | node.removeAttribute('ng-non-bindable');
64 | $element.find('table').prepend(node);
65 | };
66 |
67 | this._addFooterPattern = function(node) {
68 | $element.find('table').prepend(node);
69 | };
70 |
71 | this._addRowPattern = function(node, rowFilter, paggingFilter) {
72 | this._checkEditableContent(node);
73 | this._addRepeatToRow(node, rowFilter, paggingFilter);
74 | node.removeAttribute('ng-non-bindable');
75 | //compile TBODY
76 | $element.find('table').append(node.outerHTML);
77 | this.bodyTemplate = node.innerHTML;
78 | $compile($element.find('tbody'))($scope);
79 | };
80 |
81 | this._addRepeatToRow = function(node, rowFilter, paggingFilter) {
82 | var tr = angular.element(node).find('tr');
83 |
84 | tr.attr('ng-repeat','item in $filtered = (data' + rowFilter + ')' + paggingFilter);
85 | if (!tr.attr('ng-click')) {
86 | tr.attr('ng-click','setSelected(item)');
87 | }
88 |
89 | tr.attr('ng-class','{\'selected-row\':ifSelected(item)}');
90 | };
91 |
92 | this._checkEditableContent = function(node) {
93 | var innerModel, findModelRegex = /\{\{:*:*(.*?)\}\}/g;
94 | Array.prototype.forEach.call(node.querySelectorAll('[editable]'), function(td) {
95 | innerModel = td.innerHTML.replace(findModelRegex,'$1');
96 | td.innerHTML = '{{' + innerModel + '}}
';
97 | });
98 | };
99 |
100 | this.setCurrentPage = function(_currentPage) {
101 | $scope.currentPage = _currentPage;
102 | };
103 |
104 | $scope.setSelected = function(item) {
105 | if ($scope.select === 'multiply') {
106 | if (!ctrl._containsInSelectArray(item)) {
107 | $scope.selectedModel.push(item);
108 | } else {
109 | $scope.selectedModel.splice($scope.selectedModel.indexOf(item),1);
110 | }
111 | }else {
112 | $scope.selectedModel = item;
113 | }
114 | };
115 |
116 | this._containsInSelectArray = function(obj) {
117 | if ($scope.selectedModel.length)
118 | return $scope.selectedModel.filter(function(listItem) {
119 | return angular.equals(listItem, obj);
120 | }).length > 0;
121 | };
122 |
123 | $scope.ifSelected = function(item) {
124 | if (!!$scope.selectedModel ) {
125 | if ($scope.select === 'multiply') {
126 | return ctrl._containsInSelectArray(item);
127 | } else {
128 | return item.$$hashKey == $scope.selectedModel.$$hashKey;
129 | }
130 | }
131 | return false;
132 | };
133 |
134 | /* Drag-n-Drop columns exchange*/
135 | this.changeColumnsOrder = function(from, to) {
136 | $scope.$apply(function() {
137 | $scope.fields.swap(from,to);
138 | var headersBackup = $scope.headers.slice();
139 | $scope.headers.swap(from,to);
140 | if (!!$scope.onDrag && typeof $scope.onDrag === 'function')
141 | $scope.onDrag({$oldOrder: headersBackup, $newOrder: $scope.headers});
142 | headersBackup = null;
143 | if (!!$scope.columnSearch) {
144 | $scope.columnSearch.swap(from,to);
145 | }
146 | if (!!ctrl.bodyTemplate) {
147 | var tds = angular.element(ctrl.bodyTemplate).children(),
148 | html = '',
149 | tr = document.createElement('tr'),
150 | tbody = document.createElement('tbody'),
151 | attributes = $element.find('tbody').find('tr')[0].attributes;
152 | Array.prototype.swap.apply(tds,[from,to]);
153 |
154 | [].forEach.call(attributes, function(attr, index) {
155 | tr.setAttribute(attr.name, attr.value);
156 | });
157 |
158 | for (var i = 0,length = tds.length; i < length; i++) {
159 | tr.appendChild(tds[i]);
160 | }
161 |
162 | tbody.appendChild(tr);
163 |
164 | $element.find('tbody').replaceWith(tbody);
165 | ctrl.bodyTemplate = tbody.innerHTML;
166 | $compile($element.find('tbody'))($scope);
167 | }
168 | if ($scope.customHeader) {
169 | var ths = $element.find('th'),
170 | tr = document.createElement('tr'),
171 | thead = document.createElement('thead');
172 |
173 | Array.prototype.swap.apply(ths,[from,to]);
174 |
175 | for (var i = 0, length = ths.length; i < length; i++) {
176 | tr.appendChild(ths[i]);
177 | };
178 | thead.appendChild(tr);
179 | $element.find('thead').replaceWith(thead);
180 |
181 | }
182 | if (!!ctrl.pageCtrl)
183 | ctrl.pageCtrl.setPage(0);
184 | });
185 | };
186 |
187 | $scope.setCurrentPageForPageCtrl = function(_currentPage) {
188 | if (!!ctrl.pageCtrl) ctrl.pageCtrl.setPage(_currentPage);
189 | }
190 |
191 | }]);
192 |
--------------------------------------------------------------------------------
/src/js/objectTableFilters.js:
--------------------------------------------------------------------------------
1 | angular.module('objectTable').filter('offset', function() {
2 | return function(input, start, display) {
3 | if (!input) return;
4 | start = parseInt(start, 10);
5 | //if (start == 1) return input.slice(0, display);
6 | display = parseInt(display, 10);
7 | var offset = start* display;
8 | return input.slice(offset, offset + display);
9 | };
10 | });
--------------------------------------------------------------------------------
/src/js/objectTablePagingCtrl.js:
--------------------------------------------------------------------------------
1 | angular.module('objectTable').controller('pagingTableCtrl', ['$scope', '$element', '$attrs',
2 | function ($scope, $element, $attrs) {
3 |
4 | $scope.currentPage = 0;
5 |
6 |
7 | $scope.prevPage = function () {
8 | if ($scope.currentPage > 0) {
9 | $scope.currentPage--;
10 | }
11 | $scope.setCurrentPageToTable();
12 | };
13 |
14 | $scope.nextPage = function () {
15 | if ($scope.currentPage < $scope.pageCount()) {
16 | $scope.currentPage++;
17 | }
18 | $scope.setCurrentPageToTable();
19 | };
20 |
21 | $scope.setCurrentPageToTable = function (){
22 | $scope.objectTableCtrl.setCurrentPage($scope.currentPage);
23 | };
24 |
25 | $scope.prevPageDisabled = function () {
26 | return $scope.currentPage === 0 ? "disabled" : "";
27 | };
28 |
29 | $scope.pageCount = function () {
30 | return $scope.count>0 ?Math.ceil($scope.count/$scope.display)-1: 0;
31 | };
32 |
33 | $scope.nextPageDisabled = function () {
34 | return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
35 | };
36 |
37 | $scope.setPage = function(n) {
38 | $scope.currentPage = n;
39 | $scope.setCurrentPageToTable();
40 | };
41 |
42 |
43 | $scope.range = function () {
44 | var rangeSize = $scope.pageCount()+1 <5 ?$scope.pageCount()+1 :5;
45 |
46 | var ret = [];
47 | var start = $scope.currentPage;
48 |
49 | if ( start > $scope.pageCount()-rangeSize ) {
50 | start = $scope.pageCount()-rangeSize+1;
51 | }
52 |
53 | for (var i=start; i -1) {
69 | $scope.sort.fields.splice(index, 1);
70 | $scope.sort.reverse.splice(index, 1);
71 | $scope.sortingArray.splice(index, 1);
72 | }
73 | index = null;
74 | };
75 | /* sorting [END]*/
76 |
77 |
78 | /* column resizing*/
79 | var resizePressed = false,
80 | resizePressedEnd = false,
81 | start,startX, startWidth;
82 |
83 | $scope.resizeStart = function(e) {
84 | var target = e.target ? e.target : e.srcElement;
85 | if (target.classList.contains("resize")) {
86 | start = target.parentNode;
87 | resizePressed = true;
88 | startX = e.pageX;
89 | startWidth = target.parentNode.offsetWidth;
90 | document.addEventListener('mousemove', drag);
91 | e.stopPropagation();
92 | e.preventDefault();
93 | }
94 | };
95 |
96 | function drag(e) {
97 | if (resizePressed) {
98 | start.width = startWidth + (e.pageX - startX);
99 | }
100 | }
101 |
102 | $scope.resizeEnd = function(e) {
103 | if (resizePressed) {
104 | document.removeEventListener('mousemove', drag);
105 | e.stopPropagation();
106 | e.preventDefault();
107 | resizePressed = false;
108 | resizePressedEnd = true;
109 | }
110 | };
111 |
112 | }
113 | ]);
114 |
--------------------------------------------------------------------------------
/src/js/objectTableUtilService.js:
--------------------------------------------------------------------------------
1 | angular.module('objectTable').service('objectTableUtilService', [function () {
2 | //extend Array [+swap]
3 | Array.prototype.swap = function (new_index,old_index) {
4 |
5 | if (new_index >= this.length) {
6 | var k = new_index - this.length;
7 | while ((k--) + 1) {
8 | this.push(undefined);
9 | }
10 | }
11 | this.splice(new_index, 0, this.splice(old_index, 1)[0]);
12 | return this; // for testing purposes
13 | };
14 | return {
15 | getArrayFromParams : function (string,attrName){
16 | if(!string) throw "Required '" + attrName + "' attribute is not found!";
17 | var tempArray=[];
18 | var preArray = string.split(',');
19 | for (var i = 0,length=preArray.length; i
2 |
3 |
4 | Sorting:
5 |
6 |
7 | {{::sortField}}
8 |
9 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
52 |
53 |
54 | Loading Data...
55 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/src/templates/paging.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
19 | {{count}} records
20 |
21 |