Skip to content

Commit 5b87bb4

Browse files
uhafneruhafner
authored
Merge pull request #104 from jenkinsci/remove-globals
Move global JS methods into enclosing block to avoid name clashes
2 parents 8718c79 + a56935a commit 5b87bb4

File tree

1 file changed

+124
-123
lines changed

1 file changed

+124
-123
lines changed

‎src/main/webapp/js/table.js‎

Lines changed: 124 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,150 @@
11
/* global jQuery3, luxon, tableDataProxy */
22
jQuery3(document).ready(function () {
3-
bindTables();
4-
});
5-
6-
/**
7-
* Binds all tables that have the class 'data-table' to a new JQuery DataTables instance.
8-
*/
9-
function bindTables() {
103
/**
11-
* Creates the data table instance for the specified table element.
4+
* Binds all tables that have the class 'data-table' to a new JQuery DataTables instance.
125
*/
13-
function createDataTable(table) {
14-
const defaultConfiguration = {
15-
language: {
16-
emptyTable: 'Loading - please wait ...'
17-
},
18-
deferRender: true,
19-
pagingType: 'numbers', // page number button only
20-
order: [[1, 'asc']], // default order, if not persisted yet
21-
columnDefs: [
22-
{
23-
targets: 'nosort', // All columns with the '.nosort' class in the <th>
24-
orderable: false
6+
function bindTables() {
7+
/**
8+
* Creates the data table instance for the specified table element.
9+
*/
10+
function createDataTable(table) {
11+
const defaultConfiguration = {
12+
language: {
13+
emptyTable: 'Loading - please wait ...'
2514
},
26-
{
27-
targets: 'date', // All columns with the '.date' class in the <th>
28-
render: function (data, type, _row, _meta) {
29-
if (type === 'display') {
30-
if (data === 0) {
31-
return '-';
15+
deferRender: true,
16+
pagingType: 'numbers', // page number button only
17+
order: [[1, 'asc']], // default order, if not persisted yet
18+
columnDefs: [
19+
{
20+
targets: 'nosort', // All columns with the '.nosort' class in the <th>
21+
orderable: false
22+
},
23+
{
24+
targets: 'date', // All columns with the '.date' class in the <th>
25+
render: function (data, type, _row, _meta) {
26+
if (type === 'display') {
27+
if (data === 0) {
28+
return '-';
29+
}
30+
var dateTime = luxon.DateTime.fromMillis(data * 1000);
31+
return '<span data-toggle="tooltip" data-placement="bottom" title="'
32+
+ dateTime.toLocaleString(luxon.DateTime.DATETIME_SHORT) + '">'
33+
+ dateTime.toRelative({locale: 'en'}) + '</span>';
34+
}
35+
else {
36+
return data;
3237
}
33-
var dateTime = luxon.DateTime.fromMillis(data * 1000);
34-
return '<span data-toggle="tooltip" data-placement="bottom" title="'
35-
+ dateTime.toLocaleString(luxon.DateTime.DATETIME_SHORT) + '">'
36-
+ dateTime.toRelative({locale: 'en'}) + '</span>';
37-
} else {
38-
return data;
3938
}
4039
}
41-
}
42-
],
43-
columns: JSON.parse(table.attr('data-columns-definition'))
44-
};
45-
const tableConfiguration = JSON.parse(table.attr('data-table-configuration'));
46-
// overwrite/merge the default configuration with values from the provided table configuration
47-
const dataTable = table.DataTable(Object.assign(defaultConfiguration, tableConfiguration));
40+
],
41+
columns: JSON.parse(table.attr('data-columns-definition'))
42+
};
43+
const tableConfiguration = JSON.parse(table.attr('data-table-configuration'));
44+
// overwrite/merge the default configuration with values from the provided table configuration
45+
const dataTable = table.DataTable(Object.assign(defaultConfiguration, tableConfiguration));
4846

49-
// add the buttons to the top of the table
50-
if (tableConfiguration.buttons) {
51-
dataTable
52-
.buttons()
53-
.container()
54-
.addClass('float-none mb-3')
55-
.prependTo(jQuery3(dataTable.table().container()).closest('.table-responsive'));
56-
}
47+
// add the buttons to the top of the table
48+
if (tableConfiguration.buttons) {
49+
dataTable
50+
.buttons()
51+
.container()
52+
.addClass('float-none mb-3')
53+
.prependTo(jQuery3(dataTable.table().container()).closest('.table-responsive'));
54+
}
5755

58-
return dataTable;
59-
}
56+
return dataTable;
57+
}
6058

61-
/**
62-
* Loads the content for the specified table element via an Ajax call.
63-
*/
64-
function loadTableData(table, dataTable) {
65-
if (!table[0].hasAttribute('isLoaded')) {
66-
table.attr('isLoaded', 'true');
67-
tableDataProxy.getTableRows(table.attr('id'), function (t) {
68-
(function () {
69-
const model = JSON.parse(t.responseObject());
70-
dataTable.rows.add(model).draw();
71-
jQuery3('[data-toggle="tooltip"]').tooltip();
72-
})();
73-
});
59+
/**
60+
* Loads the content for the specified table element via an Ajax call.
61+
*/
62+
function loadTableData(table, dataTable) {
63+
if (!table[0].hasAttribute('isLoaded')) {
64+
table.attr('isLoaded', 'true');
65+
tableDataProxy.getTableRows(table.attr('id'), function (t) {
66+
(function () {
67+
const model = JSON.parse(t.responseObject());
68+
dataTable.rows.add(model).draw();
69+
jQuery3('[data-toggle="tooltip"]').tooltip();
70+
})();
71+
});
72+
}
7473
}
75-
}
7674

77-
const allTables = jQuery3('table.data-table');
75+
const allTables = jQuery3('table.data-table');
7876

79-
function toggleDetailsColumnIcon(tr, from, to) {
80-
const svg = tr.find("use");
81-
const current = svg.attr("href");
82-
svg.attr("href", current.replace(from, to))
83-
}
77+
function toggleDetailsColumnIcon(tr, from, to) {
78+
const svg = tr.find("use");
79+
const current = svg.attr("href");
80+
svg.attr("href", current.replace(from, to))
81+
}
8482

85-
allTables.each(function () {
86-
const table = jQuery3(this);
87-
const id = table.attr('id');
88-
const dataTable = createDataTable(table);
83+
allTables.each(function () {
84+
const table = jQuery3(this);
85+
const id = table.attr('id');
86+
const dataTable = createDataTable(table);
8987

90-
// Add event listener for opening and closing details
91-
table.on('click', 'div.details-control', function () {
92-
const tr = jQuery3(this).parents('tr');
93-
const row = dataTable.row(tr);
88+
// Add event listener for opening and closing details
89+
table.on('click', 'div.details-control', function () {
90+
const tr = jQuery3(this).parents('tr');
91+
const row = dataTable.row(tr);
92+
93+
if (row.child.isShown()) {
94+
row.child.hide();
95+
tr.removeClass('shown');
96+
toggleDetailsColumnIcon(tr, "minus-circle", "plus-circle");
97+
}
98+
else {
99+
row.child(jQuery3(this).data('description')).show();
100+
tr.addClass('shown');
101+
toggleDetailsColumnIcon(tr, "plus-circle", "minus-circle");
102+
}
103+
});
94104

95-
if (row.child.isShown()) {
96-
row.child.hide();
97-
tr.removeClass('shown');
98-
toggleDetailsColumnIcon(tr, "minus-circle", "plus-circle");
105+
if (table.is(":visible")) {
106+
loadTableData(table, dataTable);
99107
}
100108
else {
101-
row.child(jQuery3(this).data('description')).show();
102-
tr.addClass('shown');
103-
toggleDetailsColumnIcon(tr, "plus-circle", "minus-circle");
109+
table.on('becameVisible', function () {
110+
loadTableData(table, dataTable);
111+
});
104112
}
105-
});
106113

107-
if (table.is(":visible")) {
108-
loadTableData(table, dataTable);
109-
}
110-
else {
111-
table.on('becameVisible', function () {
112-
loadTableData(table, dataTable);
114+
// Add event listener that stores the order a user selects
115+
table.on('order.dt', function () {
116+
const order = table.DataTable().order();
117+
localStorage.setItem(id + '#orderBy', order[0][0]);
118+
localStorage.setItem(id + '#orderDirection', order[0][1]);
113119
});
114-
}
115-
116-
// Add event listener that stores the order a user selects
117-
table.on('order.dt', function () {
118-
const order = table.DataTable().order();
119-
localStorage.setItem(id + '#orderBy', order[0][0]);
120-
localStorage.setItem(id + '#orderDirection', order[0][1]);
121-
});
122120

123-
/**
124-
* Restores the order of every table by reading the local storage of the browser.
125-
* If no order has been stored yet, the table is skipped.
126-
* Also saves the default length of the number of table columns.
127-
*/
128-
const orderBy = localStorage.getItem(id + '#orderBy');
129-
const orderDirection = localStorage.getItem(id + '#orderDirection');
130-
if (orderBy && orderDirection) {
131-
const order = [orderBy, orderDirection];
132-
try {
133-
dataTable.order(order).draw();
134-
}
135-
catch (ignore) { // TODO: find a way to determine the number of columns here
136-
dataTable.order([[1, 'asc']]).draw();
121+
/**
122+
* Restores the order of every table by reading the local storage of the browser.
123+
* If no order has been stored yet, the table is skipped.
124+
* Also saves the default length of the number of table columns.
125+
*/
126+
const orderBy = localStorage.getItem(id + '#orderBy');
127+
const orderDirection = localStorage.getItem(id + '#orderDirection');
128+
if (orderBy && orderDirection) {
129+
const order = [orderBy, orderDirection];
130+
try {
131+
dataTable.order(order).draw();
132+
}
133+
catch (ignore) { // TODO: find a way to determine the number of columns here
134+
dataTable.order([[1, 'asc']]).draw();
135+
}
137136
}
138-
}
139137

140-
// Store paging size
141-
table.on('length.dt', function (e, settings, len) {
142-
localStorage.setItem(id + '#table-length', len);
138+
// Store paging size
139+
table.on('length.dt', function (e, settings, len) {
140+
localStorage.setItem(id + '#table-length', len);
141+
});
142+
const storedLength = localStorage.getItem(id + '#table-length');
143+
if (jQuery3.isNumeric(storedLength)) {
144+
dataTable.page.len(storedLength).draw();
145+
}
143146
});
144-
const storedLength = localStorage.getItem(id + '#table-length');
145-
if (jQuery3.isNumeric(storedLength)) {
146-
dataTable.page.len(storedLength).draw();
147-
}
148-
});
149-
}
147+
}
148+
149+
bindTables();
150+
});

0 commit comments

Comments
 (0)