-
Notifications
You must be signed in to change notification settings - Fork 272
/
editablegrid_editors.js
511 lines (411 loc) · 18.9 KB
/
editablegrid_editors.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
/**
* Abstract cell editor
* @constructor
* @class Base class for all cell editors
*/
function CellEditor(config) { this.init(config); }
CellEditor.prototype.init = function(config)
{
// override default properties with the ones given
if (config) for (var p in config) this[p] = config[p];
};
CellEditor.prototype.edit = function(rowIndex, columnIndex, element, value)
{
// tag element and remember all the things we need to apply/cancel edition
element.isEditing = true;
element.rowIndex = rowIndex;
element.columnIndex = columnIndex;
// call the specialized getEditor method
var editorInput = this.getEditor(element, value);
if (!editorInput) return false;
// give access to the cell editor and element from the editor widget
editorInput.element = element;
editorInput.celleditor = this;
// listen to pressed keys
// - tab does not work with onkeyup (it's too late)
// - on Safari escape does not work with onkeypress
// - with onkeydown everything is fine (but don't forget to return false)
editorInput.onkeydown = function(event) {
event = event || window.event;
// ENTER or TAB: apply value
if (event.keyCode == 13 || event.keyCode == 9) {
// backup onblur then remove it: it will be restored if editing could not be applied
this.onblur_backup = this.onblur;
this.onblur = null;
if (this.celleditor.applyEditing(this.element, this.celleditor.getEditorValue(this)) === false) this.onblur = this.onblur_backup;
// TAB: move to next cell
if (event.keyCode == 9) {
if (this.element.rowIndex >= 0 && this.celleditor.editablegrid.getColumnCount() > 0 && this.celleditor.editablegrid.getRowCount() > 0) {
var candidateRowIndex = this.element.rowIndex;
var candidateColumnIndex = this.element.columnIndex;
while (true) {
// find next cell in grid
if (candidateColumnIndex < this.celleditor.editablegrid.getColumnCount() - 1) candidateColumnIndex++;
else { candidateRowIndex++; candidateColumnIndex = 0; }
if (!this.celleditor.editablegrid.getRow(candidateRowIndex)) candidateRowIndex = 0;
// candidate cell is editable: edit it and break
var column = this.celleditor.editablegrid.getColumn(candidateColumnIndex);
if (column.editable && column.datatype != 'boolean' && this.celleditor.editablegrid.isEditable(candidateRowIndex, candidateColumnIndex)) {
this.celleditor.editablegrid.editCell(candidateRowIndex, candidateColumnIndex);
break;
}
// if we ever come back to the original cell, break
if (candidateRowIndex == this.element.rowIndex && candidateColumnIndex == this.element.columnIndex) break;
}
}
}
return false;
}
// ESC: cancel editing
if (event.keyCode == 27) {
this.onblur = null;
this.celleditor.cancelEditing(this.element);
return false;
}
};
// if simultaneous edition is not allowed, we cancel edition when focus is lost
if (!this.editablegrid.allowSimultaneousEdition) editorInput.onblur = this.editablegrid.saveOnBlur ? function(event) {
// backup onblur then remove it: it will be restored if editing could not be applied
this.onblur_backup = this.onblur;
this.onblur = null;
if (this.celleditor.applyEditing(this.element, this.celleditor.getEditorValue(this)) === false) this.onblur = this.onblur_backup;
}
: function(event) {
this.onblur = null;
this.celleditor.cancelEditing(this.element);
};
// display the resulting editor widget
this.displayEditor(element, editorInput);
// give focus to the created editor
this.autoFocus(editorInput);
};
CellEditor.prototype.autoFocus = function(editorInput) {
editorInput.focus();
};
CellEditor.prototype.getEditor = function(element, value) {
return null;
};
CellEditor.prototype.getEditorValue = function(editorInput) {
return editorInput.value;
};
CellEditor.prototype.formatValue = function(value) {
return value;
};
CellEditor.prototype.displayEditor = function(element, editorInput, adjustX, adjustY)
{
// use same font in input as in cell content
editorInput.style.fontFamily = this.editablegrid.getStyle(element, "fontFamily", "font-family");
editorInput.style.fontSize = this.editablegrid.getStyle(element, "fontSize", "font-size");
// static mode: add input field in the table cell
if (this.editablegrid.editmode == "static") {
while (element.hasChildNodes()) element.removeChild(element.firstChild);
element.appendChild(editorInput);
}
// absolute mode: add input field in absolute position over table cell, leaving current content
if (this.editablegrid.editmode == "absolute") {
element.appendChild(editorInput);
editorInput.style.position = "absolute";
// position editor input on the cell with the same padding as the actual cell content (and center vertically if vertical-align is set to "middle")
var paddingLeft = this.editablegrid.paddingLeft(element);
var paddingTop = this.editablegrid.paddingTop(element);
// find scroll offset
var offsetScrollX = this.editablegrid.getScrollXOffset(element);
var offsetScrollY = this.editablegrid.getScrollYOffset(element);
// position input
var vCenter = this.editablegrid.verticalAlign(element) == "middle" ? (element.offsetHeight - editorInput.offsetHeight) / 2 - paddingTop : 0;
editorInput.style.left = (this.editablegrid.getCellX(element) - offsetScrollX + paddingLeft + (adjustX ? adjustX : 0)) + "px";
editorInput.style.top = (this.editablegrid.getCellY(element) - offsetScrollY + paddingTop + vCenter + (adjustY ? adjustY : 0)) + "px";
// if number type: align field and its content as the containing cell
if (this.column.datatype == 'integer' || this.column.datatype == 'double') {
var rightPadding = this.editablegrid.getCellX(element) - offsetScrollX + element.offsetWidth - (parseInt(editorInput.style.left) + editorInput.offsetWidth);
editorInput.style.left = (parseInt(editorInput.style.left) + rightPadding) + "px";
editorInput.style.textAlign = EditableGrid.prototype.getStyle(element, 'textAlign', 'text-align');
}
}
// fixed mode: don't show input field in the cell
if (this.editablegrid.editmode == "fixed") {
var editorzone = _$(this.editablegrid.editorzoneid);
while (editorzone.hasChildNodes()) editorzone.removeChild(editorzone.firstChild);
editorzone.appendChild(editorInput);
}
if (element && element.isEditing && this.editablegrid.openedCellEditor) {
this.editablegrid.openedCellEditor(element.rowIndex, element.columnIndex);
}
};
CellEditor.prototype._clearEditor = function(element)
{
// untag element
element.isEditing = false;
// clear fixed editor zone if any
if (this.editablegrid.editmode == "fixed") {
var editorzone = _$(this.editablegrid.editorzoneid);
while (editorzone.hasChildNodes()) editorzone.removeChild(editorzone.firstChild);
}
};
CellEditor.prototype.cancelEditing = function(element)
{
with (this) {
// check that the element is still being edited (otherwise onblur will be called on textfields that have been closed when we go to another tab in Firefox)
if (element && element.isEditing) {
// render value before editon
var renderer = this == column.headerEditor ? column.headerRenderer : column.cellRenderer;
renderer._render(element.rowIndex, element.columnIndex, element, editablegrid.getValueAt(element.rowIndex, element.columnIndex));
_clearEditor(element);
}
}
};
CellEditor.prototype.applyEditing = function(element, newValue)
{
with (this) {
// check that the element is still being edited (otherwise onblur will be called on textfields that have been closed when we go to another tab in Firefox)
if (element && element.isEditing) {
// do nothing if the value is rejected by at least one validator
if (!column.isValid(newValue)) return false;
// format the value before applying
var formattedValue = formatValue(newValue);
// update model and render cell (keeping previous value)
var previousValue = editablegrid.setValueAt(element.rowIndex, element.columnIndex, formattedValue);
// if the new value is different than the previous one, let the user handle the model change
var newValue = editablegrid.getValueAt(element.rowIndex, element.columnIndex);
if (!this.editablegrid.isSame(newValue, previousValue)) {
editablegrid.modelChanged(element.rowIndex, element.columnIndex, previousValue, newValue, editablegrid.getRow(element.rowIndex));
}
_clearEditor(element);
return true;
}
return false;
}
};
/**
* Text cell editor
* @constructor
* @class Class to edit a cell with an HTML text input
*/
function TextCellEditor(size, maxlen, config) {
if (size) this.fieldSize = size;
if (maxlen) this.maxLength = maxlen;
if (config) this.init(config);
};
TextCellEditor.prototype = new CellEditor();
TextCellEditor.prototype.fieldSize = -1;
TextCellEditor.prototype.maxLength = -1;
TextCellEditor.prototype.autoHeight = true;
TextCellEditor.prototype.editorValue = function(value) {
return value;
};
TextCellEditor.prototype.updateStyle = function(htmlInput)
{
// change style for invalid values
if (this.column.isValid(this.getEditorValue(htmlInput))) this.editablegrid.removeClassName(htmlInput, this.editablegrid.invalidClassName);
else this.editablegrid.addClassName(htmlInput, this.editablegrid.invalidClassName);
};
TextCellEditor.prototype.getEditor = function(element, value)
{
// create and initialize text field
var htmlInput = document.createElement("input");
htmlInput.setAttribute("type", "text");
if (this.maxLength > 0) htmlInput.setAttribute("maxlength", this.maxLength);
if (this.fieldSize > 0) htmlInput.setAttribute("size", this.fieldSize);
else htmlInput.style.width = this.editablegrid.autoWidth(element) + 'px'; // auto-adapt width to cell, if no length specified
var autoHeight = this.editablegrid.autoHeight(element);
if (this.autoHeight) htmlInput.style.height = autoHeight + 'px'; // auto-adapt height to cell
htmlInput.value = this.editorValue(value);
// listen to keyup to check validity and update style of input field
htmlInput.onkeyup = function(event) { this.celleditor.updateStyle(this); };
return htmlInput;
};
TextCellEditor.prototype.displayEditor = function(element, htmlInput)
{
// call base method
CellEditor.prototype.displayEditor.call(this, element, htmlInput, -1 * this.editablegrid.borderLeft(htmlInput), -1 * (this.editablegrid.borderTop(htmlInput) + 1));
// update style of input field
this.updateStyle(htmlInput);
// select text
htmlInput.select();
};
/**
* Number cell editor
* @constructor
* @class Class to edit a numeric cell with an HTML text input
*/
function NumberCellEditor(type, config) {
this.type = type;
this.init(config);
}
NumberCellEditor.prototype = new TextCellEditor(-1, 32);
//editorValue is called in getEditor to initialize field
NumberCellEditor.prototype.editorValue = function(value) {
return (value === null || isNaN(value)) ? "" : (value + '').replace('.', this.column.decimal_point);
};
//getEditorValue is called before passing to isValid and applyEditing
NumberCellEditor.prototype.getEditorValue = function(editorInput) {
return editorInput.value.replace(',', '.');
};
//formatValue is called in applyEditing
NumberCellEditor.prototype.formatValue = function(value)
{
return this.type == 'integer' ? parseInt(value) : parseFloat(value);
};
/**
* Select cell editor
* @constructor
* @class Class to edit a cell with an HTML select input
*/
function SelectCellEditor(config) {
this.minWidth = 75;
this.minHeight = 22;
this.adaptHeight = true;
this.adaptWidth = true;
this.init(config);
}
SelectCellEditor.prototype = new CellEditor();
// use select2 if defined and not on iPad
SelectCellEditor.prototype.useSelect2 = function() { return typeof jQuery.fn.select2 != 'undefined' && navigator.userAgent.match(/iPad/i) === null; };
SelectCellEditor.prototype.isValueSelected = function(htmlInput, optionValue, value) { return (!optionValue && !value) || (optionValue == value); };
SelectCellEditor.prototype.getEditor = function(element, value)
{
var self = this;
// create select list
var htmlInput = document.createElement("select");
// auto adapt dimensions to cell, with a min width
if (this.adaptWidth && !this.useSelect2()) htmlInput.style.width = Math.max(this.minWidth, this.editablegrid.autoWidth(element)) + 'px';
if (this.adaptHeight && !this.useSelect2()) htmlInput.style.height = Math.max(this.minHeight, this.editablegrid.autoHeight(element)) + 'px';
// get column option values for this row
var optionValues = this.column.getOptionValuesForEdit(element.rowIndex);
// add these options, selecting the current one
var index = 0, valueFound = false;
for (var optionIndex = 0; optionIndex < optionValues.length; optionIndex++) {
var optionValue = optionValues[optionIndex];
// if values are grouped
if (typeof optionValue.values == 'object') {
var optgroup = document.createElement('optgroup');
optgroup.label = optionValue.label;
htmlInput.appendChild(optgroup);
for (var groupOptionIndex = 0; groupOptionIndex < optionValue.values.length; groupOptionIndex++) {
var groupOptionValue = optionValue.values[groupOptionIndex];
var option = document.createElement('option');
option.text = groupOptionValue.label;
option.value = groupOptionValue.value ? groupOptionValue.value : ""; // this otherwise changes a null into a "null" !
optgroup.appendChild(option);
if (this.isValueSelected(htmlInput, groupOptionValue.value, value)) { option.selected = true; valueFound = true; } else option.selected = false;
index++;
}
}
else {
var option = document.createElement('option');
option.text = optionValue.label;
option.value = optionValue.value ? optionValue.value : ""; // this otherwise changes a null into a "null" !
// add does not work as expected in IE7 (cf. second arg)
try { htmlInput.add(option, null); } catch (e) { htmlInput.add(option); }
if (this.isValueSelected(htmlInput, optionValue.value, value)) { option.selected = true; valueFound = true; } else option.selected = false;
index++;
}
}
// if the current value is not in the list add it to the front, using display value as label
if (!valueFound) {
var option = document.createElement('option');
var value_label = this.editablegrid.getDisplayValueAt(element.rowIndex, element.columnIndex);
option.text = value_label ? value_label : "";
option.value = value ? value : "";
// add does not work as expected in IE7 (cf. second arg)
try { htmlInput.add(option, htmlInput.options[0]); } catch (e) { htmlInput.add(option); }
htmlInput.selectedIndex = 0;
}
// when a new value is selected we apply it
htmlInput.onchange = function(event) { this.onblur = null; this.celleditor.applyEditing(this.element, self.getEditorValue(this)); };
return htmlInput;
};
//redefine displayEditor to setup select2
SelectCellEditor.prototype.displayEditor = function(element, htmlInput)
{
// call base method
CellEditor.prototype.displayEditor.call(this, element, htmlInput);
// use select2 if loaded
if (this.useSelect2()) {
// select2 v4 calls onblur before onchange, when the value is not changed yet
htmlInput.onblur = null;
htmlInput.onchange = null;
// setup and open
this.select2(element, htmlInput);
// select2 v4 does not position right in X: do it then open so that drodown is also positioned correctly
jQuery(htmlInput).siblings('span.select2-container').css('position', 'absolute').css('left', htmlInput.style.left);
jQuery(htmlInput).select2('open');
// catches select2-blur and select2-close to apply (or cancel) editing
jQuery(htmlInput)
.on('select2:close', function() { this.celleditor.applyEditing(this.element, this.celleditor.getEditorValue(this)); }) // v4
.on('select2-blur', function() { this.celleditor.applyEditing(this.element, this.celleditor.getEditorValue(this)); }) // v3
.on('select2-close', function() { this.celleditor.applyEditing(this.element, this.celleditor.getEditorValue(this)); }); // v3
}
};
SelectCellEditor.prototype.select2 = function(element, htmlInput)
{
jQuery(htmlInput).select2({
dropdownAutoWidth: true,
minimumResultsForSearch: 10 // since Select2 v4, escape and arrow keys will not work correctly if no search box present... cf. TODO in autoFocus below
});
};
SelectCellEditor.prototype.autoFocus = function(editorInput)
{
// no autofocus on original select otherwise this select appears when hitting arrow
if (this.useSelect2()) {
// TODO: select2('open') does not give focus as when the user clicks... side effects = escape does not work and arrows scroll the whole body... unless a search box is present!
return true;
}
return CellEditor.prototype.autoFocus.call(this, editorInput);
};
SelectCellEditor.prototype.getEditorValue = function(editorInput)
{
// use select2 if loaded
if (this.useSelect2()) return jQuery(editorInput).val();
return CellEditor.prototype.getEditorValue.call(this, editorInput);
};
SelectCellEditor.prototype.cancelEditing = function(element)
{
// destroy select2 if loaded
if (this.useSelect2()) jQuery(element).find('select').select2('destroy');
// call base method
CellEditor.prototype.cancelEditing.call(this, element);
};
/**
* Datepicker cell editor
*
* Text field editor with date picker capabilities.
* Uses the jQuery UI's datepicker.
* This editor is used automatically for date columns if we detect that the jQuery UI's datepicker is present.
*
* @constructor Accepts an option object containing the following properties:
* - fieldSize: integer (default=auto-adapt)
* - maxLength: integer (default=255)
*
* @class Class to edit a cell with a datepicker linked to the HTML text input
*/
function DateCellEditor(config)
{
// erase defaults with given options
this.init(config);
};
//inherits TextCellEditor functionalities
DateCellEditor.prototype = new TextCellEditor();
//redefine displayEditor to setup datepicker
DateCellEditor.prototype.displayEditor = function(element, htmlInput)
{
// call base method
TextCellEditor.prototype.displayEditor.call(this, element, htmlInput);
jQuery(htmlInput).datepicker({
dateFormat: (this.editablegrid.dateFormat == "EU" ? "dd/mm/yy" : "mm/dd/yy"),
changeMonth: true,
changeYear: true,
yearRange: "c-100:c+10",
beforeShow: function() {
// the field cannot be blurred until the datepicker has gone away
// otherwise we get the "missing instance data" exception
this.onblur_backup = this.onblur;
this.onblur = null;
},
onClose: function(dateText) {
// apply date if any, otherwise call original onblur event
if (dateText != '') this.celleditor.applyEditing(htmlInput.element, dateText);
else if (this.onblur_backup != null) this.onblur_backup();
}
}).datepicker('show');
};