tabulator-tables 5.1.2 → 5.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,179 +1,130 @@
1
1
  import Module from '../../core/Module.js';
2
2
 
3
3
  class SelectRow extends Module{
4
-
4
+
5
5
  constructor(table){
6
6
  super(table);
7
-
7
+
8
8
  this.selecting = false; //flag selecting in progress
9
9
  this.lastClickedRow = false; //last clicked row
10
10
  this.selectPrev = []; //hold previously selected element for drag drop selection
11
11
  this.selectedRows = []; //hold selected rows
12
12
  this.headerCheckboxElement = null; // hold header select element
13
-
13
+
14
14
  this.registerTableOption("selectable", "highlight"); //highlight rows on hover
15
15
  this.registerTableOption("selectableRangeMode", "drag"); //highlight rows on hover
16
16
  this.registerTableOption("selectableRollingSelection", true); //roll selection once maximum number of selectable rows is reached
17
17
  this.registerTableOption("selectablePersistence", true); // maintain selection when table view is updated
18
18
  this.registerTableOption("selectableCheck", function(data, row){return true;}); //check wheather row is selectable
19
-
19
+
20
20
  this.registerTableFunction("selectRow", this.selectRows.bind(this));
21
21
  this.registerTableFunction("deselectRow", this.deselectRows.bind(this));
22
22
  this.registerTableFunction("toggleSelectRow", this.toggleRow.bind(this));
23
23
  this.registerTableFunction("getSelectedRows", this.getSelectedRows.bind(this));
24
24
  this.registerTableFunction("getSelectedData", this.getSelectedData.bind(this));
25
-
25
+
26
26
  //register component functions
27
27
  this.registerComponentFunction("row", "select", this.selectRows.bind(this));
28
28
  this.registerComponentFunction("row", "deselect", this.deselectRows.bind(this));
29
29
  this.registerComponentFunction("row", "toggleSelect", this.toggleRow.bind(this));
30
30
  this.registerComponentFunction("row", "isSelected", this.isRowSelected.bind(this));
31
31
  }
32
-
32
+
33
33
  initialize(){
34
34
  if(this.table.options.selectable !== false){
35
35
  this.subscribe("row-init", this.initializeRow.bind(this));
36
36
  this.subscribe("row-deleting", this.rowDeleted.bind(this));
37
37
  this.subscribe("rows-wipe", this.clearSelectionData.bind(this));
38
38
  this.subscribe("rows-retrieve", this.rowRetrieve.bind(this));
39
-
39
+
40
40
  if(this.table.options.selectable && !this.table.options.selectablePersistence){
41
41
  this.subscribe("data-refreshing", this.deselectRows.bind(this));
42
42
  }
43
43
  }
44
44
  }
45
-
45
+
46
46
  rowRetrieve(type, prevValue){
47
47
  return type === "selected" ? this.selectedRows : prevValue;
48
48
  }
49
-
49
+
50
50
  rowDeleted(row){
51
51
  this._deselectRow(row, true);
52
52
  }
53
-
53
+
54
54
  clearSelectionData(silent){
55
55
  this.selecting = false;
56
56
  this.lastClickedRow = false;
57
57
  this.selectPrev = [];
58
58
  this.selectedRows = [];
59
-
59
+
60
60
  if(silent !== true){
61
61
  this._rowSelectionChanged();
62
62
  }
63
63
  }
64
-
64
+
65
65
  initializeRow(row){
66
66
  var self = this,
67
67
  element = row.getElement();
68
-
68
+
69
69
  // trigger end of row selection
70
70
  var endSelect = function(){
71
-
71
+
72
72
  setTimeout(function(){
73
73
  self.selecting = false;
74
74
  }, 50);
75
-
75
+
76
76
  document.body.removeEventListener("mouseup", endSelect);
77
77
  };
78
-
78
+
79
79
  row.modules.select = {selected:false};
80
-
80
+
81
81
  //set row selection class
82
82
  if(self.table.options.selectableCheck.call(this.table, row.getComponent())){
83
83
  element.classList.add("tabulator-selectable");
84
84
  element.classList.remove("tabulator-unselectable");
85
-
85
+
86
86
  if(self.table.options.selectable && self.table.options.selectable != "highlight"){
87
87
  if(self.table.options.selectableRangeMode === "click"){
88
- element.addEventListener("click", function(e){
89
- if(e.shiftKey){
90
- self.table._clearSelection();
91
- self.lastClickedRow = self.lastClickedRow || row;
92
-
93
- var lastClickedRowIdx = self.table.rowManager.getDisplayRowIndex(self.lastClickedRow);
94
- var rowIdx = self.table.rowManager.getDisplayRowIndex(row);
95
-
96
- var fromRowIdx = lastClickedRowIdx <= rowIdx ? lastClickedRowIdx : rowIdx;
97
- var toRowIdx = lastClickedRowIdx >= rowIdx ? lastClickedRowIdx : rowIdx;
98
-
99
- var rows = self.table.rowManager.getDisplayRows().slice(0);
100
- var toggledRows = rows.splice(fromRowIdx, toRowIdx - fromRowIdx + 1);
101
-
102
- if(e.ctrlKey || e.metaKey){
103
- toggledRows.forEach(function(toggledRow){
104
- if(toggledRow !== self.lastClickedRow){
105
-
106
- if(self.table.options.selectable !== true && !self.isRowSelected(row)){
107
- if(self.selectedRows.length < self.table.options.selectable){
108
- self.toggleRow(toggledRow);
109
- }
110
- }else{
111
- self.toggleRow(toggledRow);
112
- }
113
- }
114
- });
115
- self.lastClickedRow = row;
116
- }else{
117
- self.deselectRows(undefined, true);
118
-
119
- if(self.table.options.selectable !== true){
120
- if(toggledRows.length > self.table.options.selectable){
121
- toggledRows = toggledRows.slice(0, self.table.options.selectable)
122
- }
123
- }
124
-
125
- self.selectRows(toggledRows);
126
- }
127
- self.table._clearSelection();
128
- }
129
- else if(e.ctrlKey || e.metaKey){
130
- self.toggleRow(row);
131
- self.lastClickedRow = row;
132
- }else{
133
- self.deselectRows(undefined, true);
134
- self.selectRows(row);
135
- self.lastClickedRow = row;
136
- }
137
- });
88
+ element.addEventListener("click", this.handleComplexRowClick.bind(this, row));
138
89
  }else{
139
90
  element.addEventListener("click", function(e){
140
91
  if(!self.table.modExists("edit") || !self.table.modules.edit.getCurrentCell()){
141
92
  self.table._clearSelection();
142
93
  }
143
-
94
+
144
95
  if(!self.selecting){
145
96
  self.toggleRow(row);
146
97
  }
147
98
  });
148
-
99
+
149
100
  element.addEventListener("mousedown", function(e){
150
101
  if(e.shiftKey){
151
102
  self.table._clearSelection();
152
-
103
+
153
104
  self.selecting = true;
154
-
105
+
155
106
  self.selectPrev = [];
156
-
107
+
157
108
  document.body.addEventListener("mouseup", endSelect);
158
109
  document.body.addEventListener("keyup", endSelect);
159
-
110
+
160
111
  self.toggleRow(row);
161
-
112
+
162
113
  return false;
163
114
  }
164
115
  });
165
-
116
+
166
117
  element.addEventListener("mouseenter", function(e){
167
118
  if(self.selecting){
168
119
  self.table._clearSelection();
169
120
  self.toggleRow(row);
170
-
121
+
171
122
  if(self.selectPrev[1] == row){
172
123
  self.toggleRow(self.selectPrev[0]);
173
124
  }
174
125
  }
175
126
  });
176
-
127
+
177
128
  element.addEventListener("mouseout", function(e){
178
129
  if(self.selecting){
179
130
  self.table._clearSelection();
@@ -182,13 +133,64 @@ class SelectRow extends Module{
182
133
  });
183
134
  }
184
135
  }
185
-
136
+
186
137
  }else{
187
138
  element.classList.add("tabulator-unselectable");
188
139
  element.classList.remove("tabulator-selectable");
189
140
  }
190
141
  }
191
-
142
+
143
+ handleComplexRowClick(row, e){
144
+ if(e.shiftKey){
145
+ this.table._clearSelection();
146
+ this.lastClickedRow = this.lastClickedRow || row;
147
+
148
+ var lastClickedRowIdx = this.table.rowManager.getDisplayRowIndex(this.lastClickedRow);
149
+ var rowIdx = this.table.rowManager.getDisplayRowIndex(row);
150
+
151
+ var fromRowIdx = lastClickedRowIdx <= rowIdx ? lastClickedRowIdx : rowIdx;
152
+ var toRowIdx = lastClickedRowIdx >= rowIdx ? lastClickedRowIdx : rowIdx;
153
+
154
+ var rows = this.table.rowManager.getDisplayRows().slice(0);
155
+ var toggledRows = rows.splice(fromRowIdx, toRowIdx - fromRowIdx + 1);
156
+
157
+ if(e.ctrlKey || e.metaKey){
158
+ toggledRows.forEach((toggledRow)=>{
159
+ if(toggledRow !== this.lastClickedRow){
160
+
161
+ if(this.table.options.selectable !== true && !this.isRowSelected(row)){
162
+ if(this.selectedRows.length < this.table.options.selectable){
163
+ this.toggleRow(toggledRow);
164
+ }
165
+ }else{
166
+ this.toggleRow(toggledRow);
167
+ }
168
+ }
169
+ });
170
+ this.lastClickedRow = row;
171
+ }else{
172
+ this.deselectRows(undefined, true);
173
+
174
+ if(this.table.options.selectable !== true){
175
+ if(toggledRows.length > this.table.options.selectable){
176
+ toggledRows = toggledRows.slice(0, this.table.options.selectable)
177
+ }
178
+ }
179
+
180
+ this.selectRows(toggledRows);
181
+ }
182
+ this.table._clearSelection();
183
+ }
184
+ else if(e.ctrlKey || e.metaKey){
185
+ this.toggleRow(row);
186
+ this.lastClickedRow = row;
187
+ }else{
188
+ this.deselectRows(undefined, true);
189
+ this.selectRows(row);
190
+ this.lastClickedRow = row;
191
+ }
192
+ }
193
+
192
194
  //toggle row selection
193
195
  toggleRow(row){
194
196
  if(this.table.options.selectableCheck.call(this.table, row.getComponent())){
@@ -199,24 +201,24 @@ class SelectRow extends Module{
199
201
  }
200
202
  }
201
203
  }
202
-
204
+
203
205
  //select a number of rows
204
206
  selectRows(rows){
205
207
  var rowMatch;
206
-
208
+
207
209
  switch(typeof rows){
208
210
  case "undefined":
209
211
  this.table.rowManager.rows.forEach((row) => {
210
212
  this._selectRow(row, true, true);
211
213
  });
212
-
214
+
213
215
  this._rowSelectionChanged();
214
216
  break;
215
-
217
+
216
218
  case "string":
217
-
219
+
218
220
  rowMatch = this.table.rowManager.findRow(rows);
219
-
221
+
220
222
  if(rowMatch){
221
223
  this._selectRow(rowMatch, true, true);
222
224
  }else{
@@ -224,16 +226,16 @@ class SelectRow extends Module{
224
226
  this._selectRow(row, true, true);
225
227
  });
226
228
  }
227
-
229
+
228
230
  this._rowSelectionChanged();
229
231
  break;
230
-
232
+
231
233
  default:
232
234
  if(Array.isArray(rows)){
233
235
  rows.forEach((row) => {
234
236
  this._selectRow(row, true, true);
235
237
  });
236
-
238
+
237
239
  this._rowSelectionChanged();
238
240
  }else{
239
241
  this._selectRow(rows, false, true);
@@ -241,11 +243,11 @@ class SelectRow extends Module{
241
243
  break;
242
244
  }
243
245
  }
244
-
246
+
245
247
  //select an individual row
246
248
  _selectRow(rowInfo, silent, force){
247
249
  var index;
248
-
250
+
249
251
  //handle max row count
250
252
  if(!isNaN(this.table.options.selectable) && this.table.options.selectable !== true && !force){
251
253
  if(this.selectedRows.length >= this.table.options.selectable){
@@ -256,29 +258,29 @@ class SelectRow extends Module{
256
258
  }
257
259
  }
258
260
  }
259
-
261
+
260
262
  var row = this.table.rowManager.findRow(rowInfo);
261
-
263
+
262
264
  if(row){
263
265
  if(this.selectedRows.indexOf(row) == -1){
264
266
  row.getElement().classList.add("tabulator-selected");
265
267
  if(!row.modules.select){
266
268
  row.modules.select = {};
267
269
  }
268
-
270
+
269
271
  row.modules.select.selected = true;
270
272
  if(row.modules.select.checkboxEl){
271
273
  row.modules.select.checkboxEl.checked = true;
272
274
  }
273
-
275
+
274
276
  this.selectedRows.push(row);
275
-
277
+
276
278
  if(this.table.options.dataTreeSelectPropagate){
277
279
  this.childRowSelection(row, true);
278
280
  }
279
-
281
+
280
282
  this.dispatchExternal("rowSelected", row.getComponent());
281
-
283
+
282
284
  this._rowSelectionChanged(silent);
283
285
  }
284
286
  }else{
@@ -287,69 +289,71 @@ class SelectRow extends Module{
287
289
  }
288
290
  }
289
291
  }
290
-
292
+
291
293
  isRowSelected(row){
292
294
  return this.selectedRows.indexOf(row) !== -1;
293
295
  }
294
-
296
+
295
297
  //deselect a number of rows
296
298
  deselectRows(rows, silent){
297
299
  var self = this,
298
300
  rowCount;
299
301
 
300
302
  if(typeof rows == "undefined"){
301
-
303
+
302
304
  rowCount = self.selectedRows.length;
303
-
305
+
304
306
  for(let i = 0; i < rowCount; i++){
305
307
  self._deselectRow(self.selectedRows[0], true);
306
308
  }
307
-
308
- self._rowSelectionChanged(silent);
309
-
309
+
310
+ if(rowCount){
311
+ self._rowSelectionChanged(silent);
312
+ }
313
+
310
314
  }else{
311
315
  if(Array.isArray(rows)){
312
316
  rows.forEach(function(row){
313
317
  self._deselectRow(row, true);
314
318
  });
315
-
319
+
316
320
  self._rowSelectionChanged(silent);
317
321
  }else{
318
322
  self._deselectRow(rows, silent);
319
323
  }
320
324
  }
321
325
  }
322
-
326
+
323
327
  //deselect an individual row
324
328
  _deselectRow(rowInfo, silent){
325
329
  var self = this,
326
330
  row = self.table.rowManager.findRow(rowInfo),
327
331
  index;
328
-
332
+
329
333
  if(row){
330
334
  index = self.selectedRows.findIndex(function(selectedRow){
331
335
  return selectedRow == row;
332
336
  });
333
-
337
+
334
338
  if(index > -1){
335
-
339
+
336
340
  row.getElement().classList.remove("tabulator-selected");
337
341
  if(!row.modules.select){
338
342
  row.modules.select = {};
339
343
  }
340
-
344
+
341
345
  row.modules.select.selected = false;
342
346
  if(row.modules.select.checkboxEl){
343
347
  row.modules.select.checkboxEl.checked = false;
344
348
  }
345
349
  self.selectedRows.splice(index, 1);
346
-
350
+
347
351
  if(this.table.options.dataTreeSelectPropagate){
348
352
  this.childRowSelection(row, false);
349
353
  }
350
-
354
+
351
355
  this.dispatchExternal("rowDeselected", row.getComponent());
352
-
356
+
353
357
  self._rowSelectionChanged(silent);
354
358
  }
355
359
  }else{
@@ -358,28 +362,28 @@ class SelectRow extends Module{
358
362
  }
359
363
  }
360
364
  }
361
-
365
+
362
366
  getSelectedData(){
363
367
  var data = [];
364
-
368
+
365
369
  this.selectedRows.forEach(function(row){
366
370
  data.push(row.getData());
367
371
  });
368
-
372
+
369
373
  return data;
370
374
  }
371
-
375
+
372
376
  getSelectedRows(){
373
-
377
+
374
378
  var rows = [];
375
-
379
+
376
380
  this.selectedRows.forEach(function(row){
377
381
  rows.push(row.getComponent());
378
382
  });
379
-
383
+
380
384
  return rows;
381
385
  }
382
-
386
+
383
387
  _rowSelectionChanged(silent){
384
388
  if(this.headerCheckboxElement){
385
389
  if(this.selectedRows.length === 0){
@@ -393,27 +397,27 @@ class SelectRow extends Module{
393
397
  this.headerCheckboxElement.checked = false;
394
398
  }
395
399
  }
396
-
400
+
397
401
  if(!silent){
398
402
  this.dispatchExternal("rowSelectionChanged", this.getSelectedData(), this.getSelectedRows());
399
403
  }
400
404
  }
401
-
405
+
402
406
  registerRowSelectCheckbox (row, element) {
403
407
  if(!row._row.modules.select){
404
408
  row._row.modules.select = {};
405
409
  }
406
-
410
+
407
411
  row._row.modules.select.checkboxEl = element;
408
412
  }
409
-
413
+
410
414
  registerHeaderSelectCheckbox (element) {
411
415
  this.headerCheckboxElement = element;
412
416
  }
413
-
417
+
414
418
  childRowSelection(row, select){
415
419
  var children = this.table.modules.dataTree.getChildren(row, true);
416
-
420
+
417
421
  if(select){
418
422
  for(let child of children){
419
423
  this._selectRow(child, true);