|
0
|
1 /*
|
|
|
2 * Table.js
|
|
|
3 *
|
|
|
4 * Copyright (c) 2012, Stefan Jänicke. All rights reserved.
|
|
|
5 *
|
|
|
6 * This library is free software; you can redistribute it and/or
|
|
|
7 * modify it under the terms of the GNU Lesser General Public
|
|
|
8 * License as published by the Free Software Foundation; either
|
|
|
9 * version 3 of the License, or (at your option) any later version.
|
|
|
10 *
|
|
|
11 * This library is distributed in the hope that it will be useful,
|
|
|
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
|
14 * Lesser General Public License for more details.
|
|
|
15 *
|
|
|
16 * You should have received a copy of the GNU Lesser General Public
|
|
|
17 * License along with this library; if not, write to the Free Software
|
|
|
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
|
|
|
19 * MA 02110-1301 USA
|
|
|
20 */
|
|
|
21
|
|
|
22 /**
|
|
|
23 * @class Table
|
|
|
24 * Implementation for a single table
|
|
|
25 * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
|
|
|
26 * @release 1.0
|
|
|
27 * @release date: 2012-07-27
|
|
|
28 * @version date: 2012-07-27
|
|
|
29 *
|
|
|
30 * @param {Array} elements list of data items
|
|
|
31 * @param {HTML object} parent div to append the table
|
|
|
32 * @param {int} id dataset index
|
|
|
33 */
|
|
|
34 function Table(elements, parent, id) {
|
|
|
35
|
|
|
36 this.elements = elements;
|
|
|
37 this.showElementsLength = elements.length;
|
|
|
38 this.parent = parent;
|
|
|
39 this.id = id;
|
|
|
40 this.options = parent.options;
|
|
|
41
|
|
|
42 this.validResultsPerPage = [10, 20, 50, 100];
|
|
|
43 this.keyHeaderList = [];
|
|
|
44 this.initialize();
|
|
|
45
|
|
|
46 }
|
|
|
47
|
|
|
48 Table.prototype = {
|
|
|
49
|
|
|
50 initToolbar : function() {
|
|
|
51
|
|
|
52 var table = this;
|
|
|
53
|
|
|
54 this.toolbar = document.createElement("table");
|
|
|
55 this.toolbar.setAttribute('class', 'ddbToolbar');
|
|
|
56 this.toolbar.style.overflow = 'auto';
|
|
|
57 this.tableDiv.appendChild(this.toolbar);
|
|
|
58
|
|
|
59 var navigation = document.createElement("tr");
|
|
|
60 this.toolbar.appendChild(navigation);
|
|
|
61
|
|
|
62 var selectors = document.createElement("td");
|
|
|
63 navigation.appendChild(selectors);
|
|
|
64
|
|
|
65 if (table.options.tableSelectPage) {
|
|
|
66 var selectPageItems = true;
|
|
|
67 this.selectPage = document.createElement('div');
|
|
|
68 $(this.selectPage).css("float","left");
|
|
|
69 this.selectPage.setAttribute('class', 'smallButton selectPage');
|
|
|
70 this.selectPage.title = GeoTemConfig.getString('selectTablePageItemsHelp');
|
|
|
71 selectors.appendChild(this.selectPage);
|
|
|
72 this.selectPage.onclick = function() {
|
|
|
73 selectPageItems = !selectPageItems;
|
|
|
74 if (selectPageItems) {
|
|
|
75 var items = 0;
|
|
|
76 for (var i = table.first; i < table.elements.length; i++) {
|
|
|
77 table.elements[i].selected = false;
|
|
|
78 items++;
|
|
|
79 if (items == table.resultsPerPage) {
|
|
|
80 break;
|
|
|
81 }
|
|
|
82 }
|
|
|
83 table.selectPage.setAttribute('class', 'smallButton selectPage');
|
|
|
84 table.selectPage.title = GeoTemConfig.getString('selectTablePageItemsHelp');
|
|
|
85 } else {
|
|
|
86 var items = 0;
|
|
|
87 for (var i = table.first; i < table.elements.length; i++) {
|
|
|
88 table.elements[i].selected = true;
|
|
|
89 items++;
|
|
|
90 if (items == table.resultsPerPage) {
|
|
|
91 break;
|
|
|
92 }
|
|
|
93 }
|
|
|
94 table.selectPage.setAttribute('class', 'smallButton deselectPage');
|
|
|
95 table.selectPage.title = GeoTemConfig.getString('deselectTablePageItemsHelp');
|
|
|
96 }
|
|
|
97 table.update();
|
|
|
98 table.parent.tableSelection();
|
|
|
99 }
|
|
|
100 }
|
|
|
101
|
|
|
102 if (table.options.tableSelectAll) {
|
|
|
103 var selectAllItems = true;
|
|
|
104 this.selectAll = document.createElement('div');
|
|
|
105 this.selectAll.setAttribute('class', 'smallButton selectAll');
|
|
|
106 $(this.selectAll).css("float","left");
|
|
|
107 table.selectAll.title = GeoTemConfig.getString('selectAllTableItemsHelp');
|
|
|
108 selectors.appendChild(this.selectAll);
|
|
|
109 this.selectAll.onclick = function() {
|
|
|
110 selectAllItems = !selectAllItems;
|
|
|
111 if (selectAllItems) {
|
|
|
112 for (var i = 0; i < table.elements.length; i++) {
|
|
|
113 table.elements[i].selected = false;
|
|
|
114 }
|
|
|
115 table.selectAll.setAttribute('class', 'smallButton selectAll');
|
|
|
116 table.selectAll.title = GeoTemConfig.getString('selectAllTableItemsHelp');
|
|
|
117 } else {
|
|
|
118 for (var i = 0; i < table.elements.length; i++) {
|
|
|
119 table.elements[i].selected = true;
|
|
|
120 }
|
|
|
121 table.selectAll.setAttribute('class', 'smallButton deselectAll');
|
|
|
122 table.selectAll.title = GeoTemConfig.getString('deselectAllTableItemsHelp');
|
|
|
123 }
|
|
|
124 table.update();
|
|
|
125 table.parent.tableSelection();
|
|
|
126 }
|
|
|
127 }
|
|
|
128
|
|
|
129 if (table.options.tableInvertSelection) {
|
|
|
130 this.invertSelection = document.createElement('div');
|
|
|
131 this.invertSelection.setAttribute('class', 'smallButton invertSelection');
|
|
|
132 $(this.invertSelection).css("float","left");
|
|
|
133 table.invertSelection.title = GeoTemConfig.getString('invertSelectionHelp');
|
|
|
134 selectors.appendChild(this.invertSelection);
|
|
|
135 this.invertSelection.onclick = function() {
|
|
|
136 for (var i = 0; i < table.elements.length; i++) {
|
|
|
137 if (table.elements[i].selected === true)
|
|
|
138 table.elements[i].selected = false;
|
|
|
139 else
|
|
|
140 table.elements[i].selected = true;
|
|
|
141 }
|
|
|
142 table.update();
|
|
|
143 table.parent.tableSelection();
|
|
|
144 }
|
|
|
145 }
|
|
|
146
|
|
|
147 this.showSelectedItems = false;
|
|
|
148 if (table.options.tableShowSelected) {
|
|
|
149 this.showSelected = document.createElement('div');
|
|
|
150 this.showSelected.setAttribute('class', 'smallButton showSelected');
|
|
|
151 $(this.showSelected).css("float","left");
|
|
|
152 table.showSelected.title = GeoTemConfig.getString('showSelectedHelp');
|
|
|
153 selectors.appendChild(this.showSelected);
|
|
|
154 this.showSelected.onclick = function() {
|
|
|
155 table.showSelectedItems = !table.showSelectedItems;
|
|
|
156 if (table.showSelectedItems) {
|
|
|
157 table.showElementsLength = 0;
|
|
|
158 for (var i = 0; i < table.elements.length; i++) {
|
|
|
159 if (table.elements[i].selected) {
|
|
|
160 table.showElementsLength++;
|
|
|
161 }
|
|
|
162 }
|
|
|
163 table.showSelected.setAttribute('class', 'smallButton showAll');
|
|
|
164 // table.selectAll.title = GeoTemConfig.getString('showAllElementsHelp');
|
|
|
165 } else {
|
|
|
166 table.showElementsLength = table.elements.length;
|
|
|
167 table.showSelected.setAttribute('class', 'smallButton showSelected');
|
|
|
168 // table.selectAll.title = GeoTemConfig.getString('showSelectedHelp');
|
|
|
169 }
|
|
|
170 table.updateIndices(table.resultsPerPage);
|
|
|
171 table.update();
|
|
|
172 }
|
|
|
173 }
|
|
|
174
|
|
|
175 if (table.options.tableSelectByText) {
|
|
|
176 this.selectByTextDiv = document.createElement('div');
|
|
|
177 $(this.selectByTextDiv).css("float","left");
|
|
|
178 $(this.selectByTextDiv).css("vertical-align", "top");
|
|
|
179 //TODO: improve appearance (wrong margin)
|
|
|
180 $(this.selectByTextDiv).css("display", "inline-block");
|
|
|
181 //create and append the input field
|
|
|
182 this.selectByTextInput = document.createElement('input');
|
|
|
183 $(this.selectByTextInput).attr("type","text");
|
|
|
184 $(this.selectByTextDiv).append(this.selectByTextInput);
|
|
|
185 //create and append the button
|
|
|
186 this.selectByTextButton = document.createElement('input');
|
|
|
187 $(this.selectByTextButton).attr("type","button");
|
|
|
188 //TODO: add button-image
|
|
|
189 $(this.selectByTextButton).val("search");
|
|
|
190 $(this.selectByTextDiv).append(this.selectByTextButton);
|
|
|
191
|
|
|
192 table.selectByTextDiv.title = GeoTemConfig.getString('selectByTextHelp');
|
|
|
193 selectors.appendChild(this.selectByTextDiv);
|
|
|
194 $(this.selectByTextButton).click($.proxy(function() {
|
|
|
195 this.selectByText($(this.selectByTextInput).val());
|
|
|
196 },this));
|
|
|
197 }
|
|
|
198
|
|
|
199 if (table.options.tableCreateNewFromSelected) {
|
|
|
200 this.createNewFromSelected = document.createElement('div');
|
|
|
201 this.createNewFromSelected.setAttribute('class', 'smallButton createNewRefined');
|
|
|
202 $(this.createNewFromSelected).css("float","left");
|
|
|
203 this.createNewFromSelected.title = GeoTemConfig.getString('createNewFromSelectedHelp');
|
|
|
204 selectors.appendChild(this.createNewFromSelected);
|
|
|
205 this.createNewFromSelected.onclick = function() {
|
|
|
206 var copyID = table.id;
|
|
|
207 var tableWidget = table.parent;
|
|
|
208
|
|
|
209 var newObjects = [];
|
|
|
210 $(table.elements).each(function(){
|
|
|
211 if (this.selected)
|
|
|
212 newObjects.push(this.object);
|
|
|
213 });
|
|
|
214
|
|
|
215 var newDataset = new Dataset();
|
|
|
216 newDataset.label = tableWidget.datasets[copyID].label + " refined";
|
|
|
217 newDataset.objects = newObjects;
|
|
|
218
|
|
|
219 GeoTemConfig.addDataset(newDataset);
|
|
|
220 };
|
|
|
221 }
|
|
|
222
|
|
|
223 this.selectors = selectors;
|
|
|
224
|
|
|
225 // selectors.style.width = (this.filter.offsetWidth + this.selectAll.offsetWidth + this.selectPage.offsetWidth)+"px";
|
|
|
226
|
|
|
227 var results = document.createElement("td");
|
|
|
228 navigation.appendChild(results);
|
|
|
229
|
|
|
230 var pagination = document.createElement("td");
|
|
|
231 $(pagination).css('float', 'right');
|
|
|
232 navigation.appendChild(pagination);
|
|
|
233
|
|
|
234 this.resultsInfo = document.createElement('div');
|
|
|
235 this.resultsInfo.setAttribute('class', 'resultsInfo');
|
|
|
236 results.appendChild(this.resultsInfo);
|
|
|
237
|
|
|
238 this.resultsDropdown = document.createElement('div');
|
|
|
239 this.resultsDropdown.setAttribute('class', 'resultsDropdown');
|
|
|
240 pagination.appendChild(this.resultsDropdown);
|
|
|
241 var itemNumbers = [];
|
|
|
242 var addItemNumber = function(count, index) {
|
|
|
243 var setItemNumber = function() {
|
|
|
244 table.updateIndices(count);
|
|
|
245 table.update();
|
|
|
246 }
|
|
|
247 itemNumbers.push({
|
|
|
248 name : count,
|
|
|
249 onclick : setItemNumber
|
|
|
250 });
|
|
|
251 }
|
|
|
252 for (var i = 0; i < table.options.validResultsPerPage.length; i++) {
|
|
|
253 addItemNumber(table.options.validResultsPerPage[i], i);
|
|
|
254 }
|
|
|
255 var dropdown = new Dropdown(this.resultsDropdown, itemNumbers, GeoTemConfig.getString('paginationDropdownHelp'));
|
|
|
256 for (var i = 0; i < table.options.validResultsPerPage.length; i++) {
|
|
|
257 if (table.options.initialResultsPerPage == table.options.validResultsPerPage[i]) {
|
|
|
258 dropdown.setEntry(i);
|
|
|
259 break;
|
|
|
260 }
|
|
|
261 }
|
|
|
262 dropdown.div.title = GeoTemConfig.getString('paginationDropdownHelp');
|
|
|
263
|
|
|
264 this.firstPage = document.createElement('div');
|
|
|
265 this.firstPage.setAttribute('class', 'paginationButton');
|
|
|
266 this.firstPage.title = GeoTemConfig.getString('paginationFirsPageHelp');
|
|
|
267
|
|
|
268 pagination.appendChild(this.firstPage);
|
|
|
269 this.firstPage.onclick = function() {
|
|
|
270 if (table.page != 0) {
|
|
|
271 table.page = 0;
|
|
|
272 table.update();
|
|
|
273 }
|
|
|
274 }
|
|
|
275
|
|
|
276 this.previousPage = document.createElement('div');
|
|
|
277 this.previousPage.setAttribute('class', 'paginationButton');
|
|
|
278 this.previousPage.title = GeoTemConfig.getString('paginationPreviousPageHelp');
|
|
|
279 pagination.appendChild(this.previousPage);
|
|
|
280 this.previousPage.onclick = function() {
|
|
|
281 if (table.page > 0) {
|
|
|
282 table.page--;
|
|
|
283 table.update();
|
|
|
284 }
|
|
|
285 }
|
|
|
286
|
|
|
287 this.pageInfo = document.createElement('div');
|
|
|
288 this.pageInfo.setAttribute('class', 'pageInfo');
|
|
|
289 pagination.appendChild(this.pageInfo);
|
|
|
290
|
|
|
291 this.nextPage = document.createElement('div');
|
|
|
292 this.nextPage.setAttribute('class', 'paginationButton');
|
|
|
293 this.nextPage.title = GeoTemConfig.getString('paginationNextPageHelp');
|
|
|
294 pagination.appendChild(this.nextPage);
|
|
|
295 this.nextPage.onclick = function() {
|
|
|
296 if (table.page < table.pages - 1) {
|
|
|
297 table.page++;
|
|
|
298 table.update();
|
|
|
299 }
|
|
|
300 }
|
|
|
301
|
|
|
302 this.lastPage = document.createElement('div');
|
|
|
303 this.lastPage.setAttribute('class', 'paginationButton');
|
|
|
304 this.lastPage.title = GeoTemConfig.getString('paginationLastPageHelp');
|
|
|
305 pagination.appendChild(this.lastPage);
|
|
|
306 this.lastPage.onclick = function() {
|
|
|
307 if (table.page != table.pages - 1) {
|
|
|
308 table.page = table.pages - 1;
|
|
|
309 table.update();
|
|
|
310 }
|
|
|
311 }
|
|
|
312
|
|
|
313 this.input = document.createElement("div");
|
|
|
314 this.input.style.overflow = 'auto';
|
|
|
315 this.tableDiv.appendChild(this.input);
|
|
|
316
|
|
|
317 this.elementList = document.createElement("table");
|
|
|
318 this.elementList.setAttribute('class', 'resultList');
|
|
|
319 this.input.appendChild(this.elementList);
|
|
|
320 var height = this.parent.getHeight();
|
|
|
321 if (height) {
|
|
|
322 this.input.style.height = (height - pagination.offsetHeight) + 'px';
|
|
|
323 this.input.style.overflowY = 'auto';
|
|
|
324 }
|
|
|
325
|
|
|
326 this.elementListHeader = document.createElement("tr");
|
|
|
327 this.elementList.appendChild(this.elementListHeader);
|
|
|
328
|
|
|
329 if (GeoTemConfig.allowFilter) {
|
|
|
330 var cell = document.createElement('th');
|
|
|
331 this.elementListHeader.appendChild(cell);
|
|
|
332 }
|
|
|
333
|
|
|
334 //Bottom pagination elements
|
|
|
335 this.bottomToolbar = document.createElement("table");
|
|
|
336 this.bottomToolbar.setAttribute('class', 'ddbToolbar');
|
|
|
337 this.bottomToolbar.style.overflow = 'auto';
|
|
|
338 this.tableDiv.appendChild(this.bottomToolbar);
|
|
|
339
|
|
|
340 var bottomNavigation = document.createElement("tr");
|
|
|
341 this.bottomToolbar.appendChild(bottomNavigation);
|
|
|
342
|
|
|
343 var bottomPagination = document.createElement("td");
|
|
|
344 bottomNavigation.appendChild(bottomPagination);
|
|
|
345
|
|
|
346 this.bottomLastPage = document.createElement('div');
|
|
|
347 this.bottomLastPage.setAttribute('class', 'paginationButton');
|
|
|
348 this.bottomLastPage.title = GeoTemConfig.getString('paginationLastPageHelp');
|
|
|
349 $(this.bottomLastPage).css('float', 'right');
|
|
|
350 bottomPagination.appendChild(this.bottomLastPage);
|
|
|
351 this.bottomLastPage.onclick = function() {
|
|
|
352 if (table.page != table.pages - 1) {
|
|
|
353 table.page = table.pages - 1;
|
|
|
354 table.update();
|
|
|
355 }
|
|
|
356 }
|
|
|
357
|
|
|
358 this.bottomNextPage = document.createElement('div');
|
|
|
359 this.bottomNextPage.setAttribute('class', 'paginationButton');
|
|
|
360 this.bottomNextPage.title = GeoTemConfig.getString('paginationNextPageHelp');
|
|
|
361 $(this.bottomNextPage).css('float', 'right');
|
|
|
362 bottomPagination.appendChild(this.bottomNextPage);
|
|
|
363 this.bottomNextPage.onclick = function() {
|
|
|
364 if (table.page < table.pages - 1) {
|
|
|
365 table.page++;
|
|
|
366 table.update();
|
|
|
367 }
|
|
|
368 }
|
|
|
369
|
|
|
370 this.bottomPageInfo = document.createElement('div');
|
|
|
371 this.bottomPageInfo.setAttribute('class', 'pageInfo');
|
|
|
372 $(this.bottomPageInfo).css('float', 'right');
|
|
|
373 bottomPagination.appendChild(this.bottomPageInfo);
|
|
|
374
|
|
|
375 this.bottomPreviousPage = document.createElement('div');
|
|
|
376 this.bottomPreviousPage.setAttribute('class', 'paginationButton');
|
|
|
377 this.bottomPreviousPage.title = GeoTemConfig.getString('paginationPreviousPageHelp');
|
|
|
378 $(this.bottomPreviousPage).css('float', 'right');
|
|
|
379 bottomPagination.appendChild(this.bottomPreviousPage);
|
|
|
380 this.bottomPreviousPage.onclick = function() {
|
|
|
381 if (table.page > 0) {
|
|
|
382 table.page--;
|
|
|
383 table.update();
|
|
|
384 }
|
|
|
385 }
|
|
|
386
|
|
|
387 this.bottomFirstPage = document.createElement('div');
|
|
|
388 this.bottomFirstPage.setAttribute('class', 'paginationButton');
|
|
|
389 this.bottomFirstPage.title = GeoTemConfig.getString('paginationFirsPageHelp');
|
|
|
390 $(this.bottomFirstPage).css('float', 'right');
|
|
|
391 bottomPagination.appendChild(this.bottomFirstPage);
|
|
|
392 this.bottomFirstPage.onclick = function() {
|
|
|
393 if (table.page != 0) {
|
|
|
394 table.page = 0;
|
|
|
395 table.update();
|
|
|
396 }
|
|
|
397 }
|
|
|
398
|
|
|
399 if ( typeof (this.elements[0]) == 'undefined') {
|
|
|
400 return;
|
|
|
401 }
|
|
|
402
|
|
|
403 var ascButtons = [];
|
|
|
404 var descButtons = [];
|
|
|
405 var clearButtons = function() {
|
|
|
406 for (var i in ascButtons ) {
|
|
|
407 ascButtons[i].setAttribute('class', 'sort sortAscDeactive');
|
|
|
408 }
|
|
|
409 for (var i in descButtons ) {
|
|
|
410 descButtons[i].setAttribute('class', 'sort sortDescDeactive');
|
|
|
411 }
|
|
|
412 }
|
|
|
413 var addSortButton = function(key) {
|
|
|
414 table.keyHeaderList.push(key);
|
|
|
415 var cell = document.createElement('th');
|
|
|
416 table.elementListHeader.appendChild(cell);
|
|
|
417 var sortAsc = document.createElement('div');
|
|
|
418 var sortDesc = document.createElement('div');
|
|
|
419 var span = document.createElement('div');
|
|
|
420 span.setAttribute('class', 'headerLabel');
|
|
|
421 span.innerHTML = key;
|
|
|
422 cell.appendChild(sortDesc);
|
|
|
423 cell.appendChild(span);
|
|
|
424 cell.appendChild(sortAsc);
|
|
|
425 sortAsc.setAttribute('class', 'sort sortAscDeactive');
|
|
|
426 sortAsc.title = GeoTemConfig.getString('sortAZHelp');
|
|
|
427 sortDesc.setAttribute('class', 'sort sortDescDeactive');
|
|
|
428 sortDesc.title = GeoTemConfig.getString('sortZAHelp');
|
|
|
429 ascButtons.push(sortAsc);
|
|
|
430 descButtons.push(sortDesc);
|
|
|
431 sortAsc.onclick = function() {
|
|
|
432 clearButtons();
|
|
|
433 sortAsc.setAttribute('class', 'sort sortAscActive');
|
|
|
434 table.sortAscending(key);
|
|
|
435 table.update();
|
|
|
436 }
|
|
|
437 sortDesc.onclick = function() {
|
|
|
438 clearButtons();
|
|
|
439 sortDesc.setAttribute('class', 'sort sortDescActive');
|
|
|
440 table.sortDescending(key);
|
|
|
441 table.update();
|
|
|
442 }
|
|
|
443 }
|
|
|
444 for (var key in this.elements[0].object.tableContent) {
|
|
|
445 addSortButton(key);
|
|
|
446 }
|
|
|
447 },
|
|
|
448
|
|
|
449 sortAscending : function(key) {
|
|
|
450 var sortFunction = function(e1, e2) {
|
|
|
451 if (e1.object.tableContent[key] < e2.object.tableContent[key]) {
|
|
|
452 return -1;
|
|
|
453 }
|
|
|
454 return 1;
|
|
|
455 }
|
|
|
456 this.elements.sort(sortFunction);
|
|
|
457 },
|
|
|
458
|
|
|
459 sortDescending : function(key) {
|
|
|
460 var sortFunction = function(e1, e2) {
|
|
|
461 if (e1.object.tableContent[key] > e2.object.tableContent[key]) {
|
|
|
462 return -1;
|
|
|
463 }
|
|
|
464 return 1;
|
|
|
465 }
|
|
|
466 this.elements.sort(sortFunction);
|
|
|
467 },
|
|
|
468
|
|
|
469 selectByText : function(text) {
|
|
|
470 //deselect all elements
|
|
|
471 $(this.elements).each(function(){
|
|
|
472 this.selected = false;
|
|
|
473 });
|
|
|
474
|
|
|
475 var selectedCount = 0;
|
|
|
476 $(this.elements).filter(function(index){
|
|
|
477 return this.object.contains(text);
|
|
|
478 }).each(function(){
|
|
|
479 this.selected = true;
|
|
|
480 selectedCount++;
|
|
|
481 });
|
|
|
482
|
|
|
483 //only show selected elements
|
|
|
484 this.showSelectedItems = true;
|
|
|
485 this.showElementsLength = selectedCount;
|
|
|
486 this.showSelected.setAttribute('class', 'smallButton showAll');
|
|
|
487
|
|
|
488 this.update();
|
|
|
489 this.parent.tableSelection();
|
|
|
490 },
|
|
|
491
|
|
|
492 setPagesText : function() {
|
|
|
493 var infoText = GeoTemConfig.getString('pageInfo');
|
|
|
494 infoText = infoText.replace('PAGES_ID', this.pages);
|
|
|
495 infoText = infoText.replace('PAGE_ID', this.page + 1);
|
|
|
496 this.pageInfo.innerHTML = infoText;
|
|
|
497 this.bottomPageInfo.innerHTML = infoText;
|
|
|
498 },
|
|
|
499
|
|
|
500 setResultsText : function() {
|
|
|
501 if (this.elements.length == 0) {
|
|
|
502 this.resultsInfo.innerHTML = '0 Results';
|
|
|
503 } else {
|
|
|
504 var infoText = GeoTemConfig.getString('resultsInfo');
|
|
|
505 var first = this.page * this.resultsPerPage + 1;
|
|
|
506 var last = (this.page + 1 == this.pages ) ? this.showElementsLength : first + this.resultsPerPage - 1;
|
|
|
507 infoText = infoText.replace('RESULTS_FROM_ID', first);
|
|
|
508 infoText = infoText.replace('RESULTS_TO_ID', last);
|
|
|
509 infoText = infoText.replace('RESULTS_ID', this.showElementsLength);
|
|
|
510 this.resultsInfo.innerHTML = infoText;
|
|
|
511 }
|
|
|
512 },
|
|
|
513
|
|
|
514 updateIndices : function(rpp) {
|
|
|
515 if ( typeof this.resultsPerPage == 'undefined') {
|
|
|
516 this.page = 0;
|
|
|
517 this.resultsPerPage = 0;
|
|
|
518 }
|
|
|
519 var index = this.page * this.resultsPerPage;
|
|
|
520 this.resultsPerPage = rpp;
|
|
|
521 if (this.showSelectedItems) {
|
|
|
522 index = 0;
|
|
|
523 }
|
|
|
524 this.pages = Math.floor(this.showElementsLength / this.resultsPerPage);
|
|
|
525 if (this.showElementsLength % this.resultsPerPage != 0) {
|
|
|
526 this.pages++;
|
|
|
527 }
|
|
|
528 this.page = Math.floor(index / this.resultsPerPage);
|
|
|
529 },
|
|
|
530
|
|
|
531 update : function() {
|
|
|
532 var table = this;
|
|
|
533 $(this.elementList).find("tr:gt(0)").remove();
|
|
|
534 if (this.page == 0) {
|
|
|
535 this.previousPage.setAttribute('class', 'paginationButton previousPageDisabled');
|
|
|
536 this.firstPage.setAttribute('class', 'paginationButton firstPageDisabled');
|
|
|
537 this.bottomPreviousPage.setAttribute('class', 'paginationButton previousPageDisabled');
|
|
|
538 this.bottomFirstPage.setAttribute('class', 'paginationButton firstPageDisabled');
|
|
|
539 } else {
|
|
|
540 this.previousPage.setAttribute('class', 'paginationButton previousPageEnabled');
|
|
|
541 this.firstPage.setAttribute('class', 'paginationButton firstPageEnabled');
|
|
|
542 this.bottomPreviousPage.setAttribute('class', 'paginationButton previousPageEnabled');
|
|
|
543 this.bottomFirstPage.setAttribute('class', 'paginationButton firstPageEnabled');
|
|
|
544 }
|
|
|
545 if (this.page == this.pages - 1) {
|
|
|
546 this.nextPage.setAttribute('class', 'paginationButton nextPageDisabled');
|
|
|
547 this.lastPage.setAttribute('class', 'paginationButton lastPageDisabled');
|
|
|
548 this.bottomNextPage.setAttribute('class', 'paginationButton nextPageDisabled');
|
|
|
549 this.bottomLastPage.setAttribute('class', 'paginationButton lastPageDisabled');
|
|
|
550 } else {
|
|
|
551 this.nextPage.setAttribute('class', 'paginationButton nextPageEnabled');
|
|
|
552 this.lastPage.setAttribute('class', 'paginationButton lastPageEnabled');
|
|
|
553 this.bottomNextPage.setAttribute('class', 'paginationButton nextPageEnabled');
|
|
|
554 this.bottomLastPage.setAttribute('class', 'paginationButton lastPageEnabled');
|
|
|
555 }
|
|
|
556 this.setPagesText();
|
|
|
557 this.setResultsText();
|
|
|
558 if (this.showSelectedItems) {
|
|
|
559 var start = this.page * this.resultsPerPage;
|
|
|
560 var items = 0;
|
|
|
561 for (var i = 0; i < this.elements.length; i++) {
|
|
|
562 if (items == start) {
|
|
|
563 this.first = i;
|
|
|
564 break;
|
|
|
565 }
|
|
|
566 if (this.elements[i].selected) {
|
|
|
567 items++;
|
|
|
568 }
|
|
|
569 }
|
|
|
570 } else {
|
|
|
571 this.first = this.page * this.resultsPerPage;
|
|
|
572 }
|
|
|
573 //this.last = ( this.page + 1 == this.pages ) ? this.elements.length : this.first + this.resultsPerPage;
|
|
|
574 var c = GeoTemConfig.getColor(this.id);
|
|
|
575 var itemSet = [];
|
|
|
576 var clearDivs = function() {
|
|
|
577 for (var i = 0; i < itemSet.length; i++) {
|
|
|
578 if (!itemSet[i].e.selected) {
|
|
|
579 itemSet[i].e.highlighted = false;
|
|
|
580 $(itemSet[i].div).css('background-color', table.options.unselectedCellColor);
|
|
|
581 }
|
|
|
582 }
|
|
|
583 }
|
|
|
584 var setHighlight = function(item, div) {
|
|
|
585 var enter = function() {
|
|
|
586 clearDivs();
|
|
|
587 if (!item.selected) {
|
|
|
588 item.highlighted = true;
|
|
|
589 $(div).css('background-color', 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')');
|
|
|
590 table.parent.triggerHighlight(item.object);
|
|
|
591 }
|
|
|
592 }
|
|
|
593 var leave = function() {
|
|
|
594 clearDivs();
|
|
|
595 if (!item.selected) {
|
|
|
596 table.parent.triggerHighlight();
|
|
|
597 }
|
|
|
598 }
|
|
|
599 $(div).hover(enter, leave);
|
|
|
600 $(div).mousemove(function() {
|
|
|
601 if (!item.selected && !item.highlighted) {
|
|
|
602 item.highlighted = true;
|
|
|
603 $(div).css('background-color', 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')');
|
|
|
604 table.parent.triggerHighlight(item.object);
|
|
|
605 }
|
|
|
606 });
|
|
|
607 }
|
|
|
608 var setSelection = function(item, div, checkbox) {
|
|
|
609 var click = function(e) {
|
|
|
610 var checked = $(checkbox).is(':checked');
|
|
|
611 if (checked) {
|
|
|
612 item.selected = true;
|
|
|
613 item.highlighted = false;
|
|
|
614 } else {
|
|
|
615 item.selected = false;
|
|
|
616 item.highlighted = true;
|
|
|
617 }
|
|
|
618 //if( e.target == div ){
|
|
|
619 // $(checkbox).attr('checked', !checked);
|
|
|
620 //}
|
|
|
621 table.parent.tableSelection();
|
|
|
622 }
|
|
|
623 //$(div).click(click);
|
|
|
624 $(checkbox).click(click);
|
|
|
625 }
|
|
|
626 this.checkboxes = [];
|
|
|
627 var items = 0;
|
|
|
628 for (var i = this.first; i < this.elements.length; i++) {
|
|
|
629 var e = this.elements[i];
|
|
|
630 //vhz because of an error
|
|
|
631 if ( typeof (e) == "undefined") {
|
|
|
632 continue;
|
|
|
633 }
|
|
|
634 if (this.showSelectedItems && !e.selected) {
|
|
|
635 continue;
|
|
|
636 }
|
|
|
637 var itemRow = $("<tr/>").appendTo(this.elementList);
|
|
|
638 if (GeoTemConfig.allowFilter) {
|
|
|
639 var checkColumn = $("<td/>").appendTo(itemRow);
|
|
|
640 var checkbox = $("<input type='checkbox'/>").appendTo(checkColumn);
|
|
|
641 $(checkbox).attr('checked', e.selected);
|
|
|
642 }
|
|
|
643 var makeSubtext = function(cell, text) {
|
|
|
644 var subtext = text.substring(0, table.options.tableContentOffset);
|
|
|
645 subtext = subtext.substring(0, subtext.lastIndexOf(' '));
|
|
|
646 subtext += ' ... ';
|
|
|
647 var textDiv = $("<div style='display:inline-block;'/>").appendTo(cell);
|
|
|
648 $(textDiv).html(subtext);
|
|
|
649 var show = false;
|
|
|
650 var fullDiv = $("<div style='display:inline-block;'><a href='javascript:void(0)'>\>\></a></div>").appendTo(cell);
|
|
|
651 $(fullDiv).click(function() {
|
|
|
652 show = !show;
|
|
|
653 if (show) {
|
|
|
654 $(textDiv).html(text);
|
|
|
655 $(fullDiv).html('<a href="javascript:void(0)">\<\<</a>');
|
|
|
656 } else {
|
|
|
657 $(textDiv).html(subtext);
|
|
|
658 $(fullDiv).html('<a href="javascript:void(0)">\>\></a>');
|
|
|
659 }
|
|
|
660 });
|
|
|
661 }
|
|
|
662 for (var k = 0; k < table.keyHeaderList.length; k++) {
|
|
|
663 var key = table.keyHeaderList[k];
|
|
|
664 //vhz
|
|
|
665 var text = e.object.tableContent[key];
|
|
|
666 if (typeof text === "undefined")
|
|
|
667 text = "";
|
|
|
668 var cell = $("<td></td>").appendTo(itemRow);
|
|
|
669
|
|
|
670 //align the elements (if unset: "center")
|
|
|
671 if (typeof table.options.verticalAlign !== "undefined"){
|
|
|
672 if (table.options.verticalAlign === "top")
|
|
|
673 $(cell).attr("valign","top");
|
|
|
674 else if (table.options.verticalAlign === "center")
|
|
|
675 $(cell).attr("valign","center");
|
|
|
676 else if (table.options.verticalAlign === "bottom")
|
|
|
677 $(cell).attr("valign","bottom");
|
|
|
678 }
|
|
|
679
|
|
|
680 if (table.options.tableContentOffset && text.length < table.options.tableContentOffset) {
|
|
|
681 $(cell).html(text);
|
|
|
682 } else {
|
|
|
683 makeSubtext(cell, text);
|
|
|
684 }
|
|
|
685 }
|
|
|
686 if (e.selected || e.highlighted) {
|
|
|
687 $(itemRow).css('background-color', 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')');
|
|
|
688 } else {
|
|
|
689 $(itemRow).css('background-color', table.options.unselectedCellColor);
|
|
|
690 }
|
|
|
691 itemSet.push({
|
|
|
692 e : e,
|
|
|
693 div : itemRow
|
|
|
694 });
|
|
|
695 setHighlight(e, itemRow);
|
|
|
696 if (GeoTemConfig.allowFilter) {
|
|
|
697 setSelection(e, itemRow, checkbox);
|
|
|
698 this.checkboxes.push(checkbox);
|
|
|
699 $(checkColumn).css('text-align', 'center');
|
|
|
700 }
|
|
|
701 items++;
|
|
|
702 if (items == this.resultsPerPage) {
|
|
|
703 break;
|
|
|
704 }
|
|
|
705 }
|
|
|
706 },
|
|
|
707
|
|
|
708 show : function() {
|
|
|
709 if (GeoTemConfig.allowFilter) {
|
|
|
710 this.parent.filterBar.appendTo(this.selectors);
|
|
|
711 }
|
|
|
712 this.tableDiv.style.display = "block";
|
|
|
713 },
|
|
|
714
|
|
|
715 hide : function() {
|
|
|
716 this.tableDiv.style.display = "none";
|
|
|
717 },
|
|
|
718
|
|
|
719 resetElements : function() {
|
|
|
720 for (var i = 0; i < this.elements.length; i++) {
|
|
|
721 this.elements[i].selected = false;
|
|
|
722 this.elements[i].highlighted = false;
|
|
|
723 }
|
|
|
724 },
|
|
|
725
|
|
|
726 reset : function() {
|
|
|
727 if (!this.options.tableKeepShowSelected){
|
|
|
728 this.showSelectedItems = false;
|
|
|
729 this.showElementsLength = this.elements.length;
|
|
|
730 this.showSelected.setAttribute('class', 'smallButton showSelected');
|
|
|
731 }
|
|
|
732 this.updateIndices(this.resultsPerPage);
|
|
|
733 },
|
|
|
734
|
|
|
735 initialize : function() {
|
|
|
736
|
|
|
737 this.tableDiv = document.createElement("div");
|
|
|
738 this.tableDiv.setAttribute('class', 'singleTable');
|
|
|
739 this.parent.gui.input.appendChild(this.tableDiv);
|
|
|
740
|
|
|
741 this.initToolbar();
|
|
|
742
|
|
|
743 this.tableDiv.style.display = 'none';
|
|
|
744 this.updateIndices(this.options.initialResultsPerPage);
|
|
|
745
|
|
|
746 this.update();
|
|
|
747
|
|
|
748 }
|
|
|
749 }
|
|
|
750
|
|
|
751 function TableElement(object) {
|
|
|
752
|
|
|
753 this.object = object;
|
|
|
754 this.selected = false;
|
|
|
755 this.highlighted = false;
|
|
|
756
|
|
|
757 }
|
