@refinitiv-ui/efx-grid 6.0.16 → 6.0.17

Sign up to get free protection for your applications and to get access to all the features.
@@ -6,6 +6,7 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
6
6
  import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
7
7
  import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
8
8
  import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
9
+
9
10
  /** @typedef {Object} InCellEditingPlugin~Options
10
11
  * @description InCellEditingPlugin options that can be specified from `inCellEditing` property of the main grid's options
11
12
  * @property {boolean=} balloonMode=false Show editor in a balloon. This is useful when there is not much space in the cell
@@ -42,6 +43,7 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
42
43
  * @description Editor options specified through `inCellEditing` property on the column configuration object
43
44
  * @property {string=} type="text" Specify type of the editor. Available types are text, number, dropdown, date, checkbox, and combobox.
44
45
  * @property {Array=} entries=null Specify list of items available in the dropdown box
46
+ * @property {Object=} attributes=null Specify attribute of input element
45
47
  */
46
48
 
47
49
  /** @typedef {Object} InCellEditingPlugin~ColumnOptions
@@ -145,7 +147,6 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
145
147
  * @param {InCellEditingPlugin~Options=} options
146
148
  * @extends {GridPlugin}
147
149
  */
148
-
149
150
  var InCellEditingPlugin = function InCellEditingPlugin(options) {
150
151
  var t = this;
151
152
  t._onDoubleClick = t._onDoubleClick.bind(t);
@@ -162,20 +163,18 @@ var InCellEditingPlugin = function InCellEditingPlugin(options) {
162
163
  t._onValueChanged = t._onValueChanged.bind(t);
163
164
  t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
164
165
  t._hosts = [];
165
-
166
166
  if (options) {
167
167
  this.config({
168
168
  "inCellEditing": options
169
169
  });
170
170
  }
171
171
  };
172
-
173
172
  Ext.inherits(InCellEditingPlugin, GridPlugin);
173
+
174
174
  /** @type {Object}
175
175
  * @private
176
176
  * @static
177
177
  */
178
-
179
178
  InCellEditingPlugin._uiElementTypesMap = {
180
179
  "input": "input",
181
180
  "text": "input",
@@ -187,209 +186,197 @@ InCellEditingPlugin._uiElementTypesMap = {
187
186
  "boolean": "ef-checkbox",
188
187
  "combobox": "ef-combo-box"
189
188
  };
189
+
190
190
  /** @type {boolean}
191
191
  * @private
192
192
  */
193
-
194
193
  InCellEditingPlugin.prototype._editableTitle = false;
195
194
  /** @type {boolean}
196
195
  * @private
197
196
  */
198
-
199
197
  InCellEditingPlugin.prototype._editableContent = false;
198
+
200
199
  /** Position of text editor is active.
201
200
  * @type {Object}
202
201
  * @private
203
202
  */
204
-
205
203
  InCellEditingPlugin.prototype._activePos = null;
204
+
206
205
  /** Where the cell was user double-cliked.
207
206
  * @type {Object}
208
207
  * @private
209
208
  */
210
-
211
209
  InCellEditingPlugin.prototype._activeCell = null;
210
+
212
211
  /** row id that editor placed
213
212
  * @type {string}
214
213
  * @private
215
214
  */
216
-
217
215
  InCellEditingPlugin.prototype._activeRowId = "";
216
+
218
217
  /** Previous core grid object that editor open.
219
218
  * @type {Object}
220
219
  * @private
221
220
  */
222
-
223
221
  InCellEditingPlugin.prototype._lastActiveGrid = null;
222
+
224
223
  /** Previous content cell before user editited, use to rollback when user cancelled.
225
224
  * @type {*}
226
225
  * @private
227
226
  */
228
-
229
227
  InCellEditingPlugin.prototype._prevContent = null;
228
+
230
229
  /** @type {string}
231
230
  * @private
232
231
  */
233
-
234
232
  InCellEditingPlugin.prototype._initialText = "";
233
+
235
234
  /** @type {!InCellEditingPlugin~Cache}
236
235
  * @private
237
236
  */
238
-
239
237
  InCellEditingPlugin.prototype._headerInCellCache = null;
238
+
240
239
  /** @type {!InCellEditingPlugin~Cache}
241
240
  * @private
242
241
  */
243
-
244
242
  InCellEditingPlugin.prototype._activeInCellCache = null;
243
+
245
244
  /** @type {boolean}
246
245
  * @private
247
246
  */
248
-
249
247
  InCellEditingPlugin.prototype._usingBalloon = false;
248
+
250
249
  /** @type {boolean}
251
250
  * @private
252
251
  */
253
-
254
252
  InCellEditingPlugin.prototype._balloonMode = false;
253
+
255
254
  /** @type {boolean}
256
255
  * @private
257
256
  */
258
-
259
257
  InCellEditingPlugin.prototype._dataBinding = true;
258
+
260
259
  /** @type {boolean}
261
260
  * @private
262
261
  */
263
-
264
262
  InCellEditingPlugin.prototype._dblClick = true;
263
+
265
264
  /** @type {boolean}
266
265
  * @private
267
266
  */
268
-
269
267
  InCellEditingPlugin.prototype._autoCommitText = false;
268
+
270
269
  /** @type {number}
271
270
  * @private
272
271
  */
273
-
274
272
  InCellEditingPlugin.prototype._touchTimerId = 0;
273
+
275
274
  /** @type {number}
276
275
  * @private
277
276
  */
278
-
279
277
  InCellEditingPlugin.prototype._longPressTime = 1000; // For touch screen
280
278
 
281
279
  /** @type {boolean}
282
280
  * @private
283
281
  */
284
-
285
282
  InCellEditingPlugin.prototype._editing = false;
283
+
286
284
  /** Where other element stored.
287
285
  * @type {Element}
288
286
  * @private
289
287
  */
290
-
291
288
  InCellEditingPlugin.prototype._customElement = null;
289
+
292
290
  /** Popup element where custom element stored.
293
291
  * @type {Popup}
294
292
  * @private
295
293
  */
296
-
297
294
  InCellEditingPlugin.prototype._customElementPopup = null;
298
295
  /** @type {Number}
299
296
  * @private
300
297
  */
301
-
302
298
  InCellEditingPlugin.prototype._tabToMove = false;
303
299
  /** @type {string}
304
300
  * @private
305
301
  */
306
-
307
302
  InCellEditingPlugin.prototype._contentSource = "textContent";
308
303
  /** @type {boolean}
309
304
  * @private
310
305
  */
311
-
312
306
  InCellEditingPlugin.prototype._inlineStyling = false;
313
307
  /** @type {boolean}
314
308
  * @private
315
309
  */
316
-
317
310
  InCellEditingPlugin.prototype._disablingScroll = false;
318
311
  /** @type {boolean}
319
312
  * @private
320
313
  */
321
-
322
314
  InCellEditingPlugin.prototype._uiBlocking = false;
323
315
  /** @type {Element}
324
316
  * @private
325
317
  */
326
-
327
318
  InCellEditingPlugin.prototype._autoSuggest = null;
328
319
  /** @type {string}
329
320
  * @private
330
321
  */
331
-
332
322
  InCellEditingPlugin.prototype._defaultTag = "input";
333
323
  /** status to show that row is closing
334
324
  * @type {boolean}
335
325
  * @private
336
326
  */
337
-
338
327
  InCellEditingPlugin.prototype._rowClosing = false;
339
328
  /** @type {boolean}
340
329
  * @private
341
330
  */
342
-
343
331
  InCellEditingPlugin.prototype._closingOnScroll = true;
344
332
  /** @type {number}
345
333
  * @private
346
334
  */
347
-
348
335
  InCellEditingPlugin.prototype._editorTimerId = 0;
349
336
  /** @type {boolean}
350
337
  * @private
351
338
  */
352
-
353
339
  InCellEditingPlugin._scrolling = false;
340
+
354
341
  /** @type {number}
355
342
  * @private
356
343
  */
357
-
358
344
  InCellEditingPlugin.prototype._elfVersion = 0;
359
345
  /** @type {string}
360
346
  * @private
361
347
  */
362
-
363
348
  InCellEditingPlugin._primaryColor = "";
349
+
364
350
  /** @type {string}
365
351
  * @private
366
352
  */
367
-
368
353
  InCellEditingPlugin._styles = prettifyCss([":host .cell.editing input[type=text]", ["border-style: solid;"]]);
354
+
369
355
  /** @private
370
356
  */
371
-
372
357
  InCellEditingPlugin._onThemeLoaded = function () {
373
358
  var colors = ElfUtil.getColors();
374
359
  InCellEditingPlugin._primaryColor = colors.primary;
375
360
  };
361
+
376
362
  /** @private
377
363
  * @param {string} tag element tag
364
+ * @param {Object=} attributes attribute of input element
378
365
  * @return {Element} input element
379
366
  */
380
-
381
-
382
- InCellEditingPlugin.prototype._createInputElement = function (tag) {
367
+ InCellEditingPlugin.prototype._createInputElement = function (tag, attributes) {
383
368
  var t = this;
384
369
  var elem = document.createElement(tag);
385
- var typeMap = InCellEditingPlugin._uiElementTypesMap; // Resolve elf theme style
386
-
370
+ for (var attribute in attributes) {
371
+ elem.setAttribute(attribute, attributes[attribute]);
372
+ }
373
+ var typeMap = InCellEditingPlugin._uiElementTypesMap;
374
+ // Resolve elf theme style
387
375
  elem.style.width = "100%";
388
376
  elem.style.height = "100%";
389
377
  elem.style.margin = "0";
390
378
  elem.style.borderColor = InCellEditingPlugin._primaryColor || "#ee7600";
391
379
  elem.style.maxHeight = "unset";
392
-
393
380
  if (tag === typeMap.checkbox) {
394
381
  elem.style.borderStyle = "solid";
395
382
  elem.style.borderWidth = "1px";
@@ -408,13 +395,10 @@ InCellEditingPlugin.prototype._createInputElement = function (tag) {
408
395
  } else if (tag === typeMap.input) {
409
396
  elem.setAttribute("type", "text");
410
397
  }
411
-
412
398
  if (this._autoSuggest) {
413
399
  this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
414
-
415
400
  this._autoSuggest.addEventListener("wheel", t._stopPropagation, false);
416
401
  }
417
-
418
402
  elem.addEventListener("keydown", t._onTextKeyDown, false);
419
403
  elem.addEventListener("keyup", t._onTextKeyUp, false);
420
404
  elem.addEventListener("mousedown", t._stopPropagation, false);
@@ -425,43 +409,38 @@ InCellEditingPlugin.prototype._createInputElement = function (tag) {
425
409
  elem.addEventListener("paste", t._stopPropagation, false);
426
410
  return elem;
427
411
  };
412
+
428
413
  /** @private
429
414
  * @return {Element}
430
415
  */
431
-
432
-
433
416
  InCellEditingPlugin.prototype._createEditor = function () {
434
417
  var editor = document.createElement("div");
435
418
  editor.className = "cell editing";
436
419
  editor.style.position = "absolute";
437
420
  return editor;
438
421
  };
422
+
439
423
  /** @private
440
424
  * @param {Element} editor
441
425
  * @return {Popup} popup instance
442
426
  */
443
-
444
-
445
427
  InCellEditingPlugin.prototype._createBalloonPopup = function (editor) {
446
428
  var popup = new Popup(editor, {
447
429
  positioning: "over"
448
430
  });
449
431
  return popup;
450
432
  };
433
+
451
434
  /** @private
452
435
  * @param {Object} grid core grid object
453
436
  * @param {string} elemTag
437
+ * @param {Object=} attributes of element
454
438
  * @return {object} inCellCache
455
439
  */
456
-
457
-
458
- InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag) {
440
+ InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag, attributes) {
459
441
  var t = this;
460
-
461
442
  var editor = t._createEditor();
462
-
463
- var inputElement = t._createInputElement(elemTag);
464
-
443
+ var inputElement = t._createInputElement(elemTag, attributes);
465
444
  var balloonPopup = new Popup(editor, {
466
445
  positioning: "over"
467
446
  });
@@ -473,114 +452,96 @@ InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag) {
473
452
  balloonPopup: balloonPopup
474
453
  };
475
454
  };
455
+
476
456
  /** @private
477
457
  * @param {Object} grid core grid object
478
458
  * @return {object} inCellCache
479
459
  */
480
-
481
-
482
460
  InCellEditingPlugin.prototype._createTitleEditor = function (grid) {
483
461
  var t = this;
484
-
485
462
  if (!t._headerInCellCache) {
486
463
  t._headerInCellCache = t._createInCellCache(grid, "input");
487
464
  }
488
-
489
465
  return t._headerInCellCache;
490
466
  };
467
+
491
468
  /** @private
492
469
  * @param {number} columnIndex
493
470
  * @param {Object} grid core grid object
494
471
  * @return {object} inCellCache
495
472
  */
496
-
497
-
498
473
  InCellEditingPlugin.prototype._createContentEditor = function (columnIndex, grid) {
499
474
  var t = this;
500
475
  var typeMap = InCellEditingPlugin._uiElementTypesMap;
501
-
502
476
  var columnData = t._getColumnData(columnIndex, grid);
503
-
504
477
  var inCellColumnConfig = columnData["inCellEditing"];
505
478
  var elemTag = typeMap[inCellColumnConfig && inCellColumnConfig.type] || t._defaultTag;
506
-
507
479
  if (!columnData["inCellCache"]) {
508
- columnData["inCellCache"] = t._createInCellCache(grid, elemTag);
480
+ var attributes = inCellColumnConfig ? inCellColumnConfig.attributes : null;
481
+ columnData["inCellCache"] = t._createInCellCache(grid, elemTag, attributes);
509
482
  }
483
+ var inCellCache = columnData["inCellCache"];
510
484
 
511
- var inCellCache = columnData["inCellCache"]; // Setup initial value for the editor
512
-
485
+ // Setup initial value for the editor
513
486
  if (elemTag === typeMap.select || elemTag === typeMap.combobox) {
514
487
  inCellCache["inputElement"].data = inCellColumnConfig && inCellColumnConfig.entries;
515
488
  }
516
-
517
489
  return inCellCache;
518
490
  };
519
491
  /** @override
520
492
  * @return {string}
521
493
  */
522
-
523
-
524
494
  InCellEditingPlugin.prototype.getName = function () {
525
495
  return "InCellEditingPlugin";
526
496
  };
497
+
527
498
  /** @private
528
499
  * @param {Event|Element} e
529
500
  */
530
-
531
-
532
501
  InCellEditingPlugin.prototype._onColumnAdded = function (e) {
533
502
  if (e.context && e.colIndex != null) {
534
503
  // e.context is a columnOption;
535
504
  this._retrieveColumnOption(e.context, e.colIndex);
536
505
  }
537
506
  };
507
+
538
508
  /** Called by grid system when initial plugins.
539
509
  * @public
540
510
  * @param {Object} host core grid object
541
511
  * @param {Object} options
542
512
  */
543
-
544
-
545
513
  InCellEditingPlugin.prototype.initialize = function (host, options) {
546
514
  if (this._hosts.indexOf(host) >= 0) {
547
515
  return;
548
516
  }
549
-
550
517
  if (!this._hosts.length) {
551
518
  window.addEventListener("scroll", this._onScroll);
552
519
  }
553
-
554
520
  host.listen("columnAdded", this._onColumnAdded);
555
521
  host.getVScrollbar().listen("scroll", this._onScroll);
556
522
  host.getHScrollbar().listen("scroll", this._onScroll);
557
-
558
523
  if (this._dblClick) {
559
- host.listen("dblclick", this._onDoubleClick); // Make a comparable functionality for touchscreen
524
+ host.listen("dblclick", this._onDoubleClick);
560
525
 
526
+ // Make a comparable functionality for touchscreen
561
527
  if (isTouchDevice()) {
562
528
  host.listen("touchstart", this._onTouchStart);
563
529
  host.listen("touchend", this._onTouchEnd);
564
530
  host.listen("touchcancel", this._onTouchEnd);
565
531
  }
566
532
  }
567
-
568
533
  this._hosts.push(host);
569
-
570
534
  if (ElfUtil.getElfVersion() < 4) {
571
535
  // ef-input available in elf version < 4
572
536
  InCellEditingPlugin._uiElementTypesMap["number"] = "ef-input";
573
537
  }
574
-
575
538
  if (ElfUtil.isHaloTheme()) {
576
539
  if (!host._inCellEditingStyles) {
577
540
  host._inCellEditingStyles = true;
578
541
  injectCss(InCellEditingPlugin._styles, host.getElement());
579
542
  }
580
543
  }
581
-
582
544
  this.config(options);
583
-
584
545
  if (!InCellEditingPlugin._primaryColor) {
585
546
  ElfUtil.getThemeColors().then(InCellEditingPlugin._onThemeLoaded)["catch"](InCellEditingPlugin._onThemeLoaded);
586
547
  }
@@ -591,8 +552,6 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
591
552
  * @param {*} optionVal
592
553
  * @return {*} The transformed value of the option
593
554
  */
594
-
595
-
596
555
  InCellEditingPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
597
556
  if (optionName == "cellEditing") {
598
557
  return null; // eslint-disable-line
@@ -603,36 +562,31 @@ InCellEditingPlugin.prototype.beforeProcessOption = function (optionName, option
603
562
  /** @private
604
563
  * @override
605
564
  */
606
-
607
-
608
565
  InCellEditingPlugin.prototype._afterInit = function () {
609
566
  this._elfVersion = ElfUtil.getElfVersion();
610
567
  };
568
+
611
569
  /** @public
612
570
  * @param {Object=} options
613
571
  */
614
-
615
-
616
572
  InCellEditingPlugin.prototype.config = function (options) {
617
573
  if (!options) {
618
574
  return;
619
575
  }
576
+ var t = this;
620
577
 
621
- var t = this; // config column
622
-
578
+ // config column
623
579
  var columns = options["columns"];
624
-
625
580
  if (columns) {
626
581
  var len = columns.length;
627
-
628
582
  for (var c = 0; c < len; ++c) {
629
583
  t._retrieveColumnOption(columns[c], c);
630
584
  }
631
585
  }
632
-
633
586
  var pluginOption = options["inCellEditing"];
634
- if (!pluginOption) return; // options
587
+ if (!pluginOption) return;
635
588
 
589
+ // options
636
590
  if (pluginOption["type"]) t._defaultTag = InCellEditingPlugin._uiElementTypesMap[pluginOption["type"]];
637
591
  if (pluginOption["balloonMode"]) t.enableBalloonMode(pluginOption["balloonMode"]);
638
592
  if (pluginOption["editableTitle"]) t.enableTitleEditing(pluginOption["editableTitle"]);
@@ -641,34 +595,27 @@ InCellEditingPlugin.prototype.config = function (options) {
641
595
  if (pluginOption["autoCommitText"]) t.enableAutoCommitText(pluginOption["autoCommitText"]);
642
596
  if (pluginOption["dataBinding"] != null) t.disableDataBinding(!pluginOption["dataBinding"]);
643
597
  if (pluginOption["contentSource"] != null) t._contentSource = pluginOption["contentSource"];
644
-
645
598
  if (pluginOption["popupElement"]) {
646
599
  t.setPopupElement(pluginOption["popupElement"]);
647
600
  }
648
-
649
601
  if (pluginOption["doubleClick"] != null) t.disableDblClick(!pluginOption["doubleClick"]);
650
-
651
602
  if (pluginOption["inlineStyling"]) {
652
603
  t._inlineStyling = true;
653
604
  }
654
-
655
605
  if (pluginOption["disablingScroll"]) {
656
606
  t._disablingScroll = true;
657
607
  }
658
-
659
608
  if (pluginOption["uiBlocking"]) {
660
609
  t._uiBlocking = true;
661
610
  }
662
-
663
611
  if (pluginOption["autoSuggest"]) {
664
612
  t._autoSuggest = pluginOption["autoSuggest"];
665
613
  }
666
-
667
614
  if (pluginOption["closingOnScroll"] == false) {
668
615
  t._closingOnScroll = false;
669
- } // event callback
670
-
616
+ }
671
617
 
618
+ // event callback
672
619
  t.addListener(pluginOption, "preEditorOpening");
673
620
  t.addListener(pluginOption, "editorOpened");
674
621
  t.addListener(pluginOption, "beforeCommit");
@@ -677,51 +624,52 @@ InCellEditingPlugin.prototype.config = function (options) {
677
624
  t.addListener(pluginOption, "beforeRowCommit");
678
625
  t.addListener(pluginOption, "rowEditorClosed");
679
626
  };
627
+
680
628
  /** Get a current state of grid and extension config
681
629
  * @public
682
630
  * @param {Object=} out_obj
683
631
  * @returns {!Object}
684
632
  */
685
-
686
-
687
633
  InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
688
634
  var obj = out_obj || {};
689
635
  var columns = obj.columns;
690
-
691
636
  if (!columns) {
692
637
  columns = obj.columns = [];
693
638
  }
694
-
695
639
  var len = this.getColumnCount();
696
-
640
+ var val, opt;
697
641
  for (var i = 0; i < len; ++i) {
698
642
  var col = columns[i];
699
-
700
643
  if (!col) {
701
644
  col = columns[i] = {};
702
645
  }
703
-
704
- var opt = this._getColumnData(i);
705
-
646
+ opt = this._getColumnData(i);
706
647
  if (!opt) {
707
648
  continue;
708
649
  }
709
-
710
650
  if (opt.editableContent != null) {
711
651
  col.editableContent = opt.editableContent;
712
652
  }
713
-
714
653
  if (opt.inCellEditing != null) {
715
- col.inCellEditing = opt.inCellEditing;
654
+ col.inCellEditing = {};
655
+ val = opt.inCellEditing["type"];
656
+ if (val != null) {
657
+ col.inCellEditing["type"] = val;
658
+ }
659
+ val = opt.inCellEditing["entries"];
660
+ if (val != null) {
661
+ col.inCellEditing["entries"] = val;
662
+ }
663
+ val = opt.inCellEditing["attributes"];
664
+ if (val != null) {
665
+ col.inCellEditing["attributes"] = val;
666
+ }
716
667
  }
717
668
  }
718
-
719
669
  var extOptions = obj.inCellEditing;
720
-
721
670
  if (!extOptions) {
722
671
  extOptions = obj.inCellEditing = {};
723
672
  }
724
-
725
673
  extOptions.balloonMode = this._balloonMode;
726
674
  extOptions.editableTitle = this._editableTitle;
727
675
  extOptions.editableContent = this._editableContent;
@@ -735,19 +683,16 @@ InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
735
683
  extOptions.uiBlocking = this._uiBlocking;
736
684
  return obj;
737
685
  };
686
+
738
687
  /** @private
739
688
  * @param {Object} columnOption
740
689
  * @param {number} colIndex
741
690
  */
742
-
743
-
744
691
  InCellEditingPlugin.prototype._retrieveColumnOption = function (columnOption, colIndex) {
745
692
  var pluginOptions = columnOption["inCellEditing"];
746
693
  var editableContent = columnOption["editableContent"];
747
-
748
694
  if (pluginOptions != null || editableContent != null) {
749
695
  var colData = this._newColumnData(colIndex);
750
-
751
696
  if (pluginOptions != null) {
752
697
  colData["inCellEditing"] = pluginOptions;
753
698
  pluginOptions.entries = CoralItems.create(pluginOptions.entries); // Create entries for coral select and combobox
@@ -758,18 +703,14 @@ InCellEditingPlugin.prototype._retrieveColumnOption = function (columnOption, co
758
703
  }
759
704
  }
760
705
  };
761
- /** @override */
762
-
763
706
 
707
+ /** @override */
764
708
  InCellEditingPlugin.prototype.unload = function (host) {
765
709
  var at = this._hosts.indexOf(host);
766
-
767
710
  if (at < 0) {
768
711
  return;
769
712
  }
770
-
771
713
  this._hosts.splice(at, 1);
772
-
773
714
  host.unlisten("columnAdded", this._onColumnAdded);
774
715
  host.getVScrollbar().unlisten("scroll", this._onScroll);
775
716
  host.getHScrollbar().unlisten("scroll", this._onScroll);
@@ -777,15 +718,14 @@ InCellEditingPlugin.prototype.unload = function (host) {
777
718
  host.unlisten("touchstart", this._onTouchStart);
778
719
  host.unlisten("touchend", this._onTouchEnd);
779
720
  host.unlisten("touchcancel", this._onTouchEnd);
780
-
781
721
  if (!this._hosts.length) {
782
722
  this._touchTimerId = 0;
783
723
  this._editorTimerId = 0;
784
724
  window.removeEventListener("scroll", this._onScroll);
785
725
  }
786
-
787
726
  this._dispose();
788
727
  };
728
+
789
729
  /** @public
790
730
  * @param {number} colIndex
791
731
  * @param {number} rowIndex
@@ -793,23 +733,17 @@ InCellEditingPlugin.prototype.unload = function (host) {
793
733
  * @param {Object=} grid core grid object
794
734
  * @fires InCellEditingPlugin#editorOpened
795
735
  */
796
-
797
-
798
736
  InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, sectionRef, grid) {
799
737
  if (!grid) {
800
738
  grid = this._hosts[0];
801
-
802
739
  if (!grid) {
803
740
  return;
804
741
  }
805
742
  }
806
-
807
743
  var sectionSettings = grid.getSectionSettings(sectionRef || "content");
808
744
  var activePos = this._activePos;
809
-
810
745
  if (activePos) {
811
746
  var sectionName = sectionSettings ? sectionSettings.getType() : "";
812
-
813
747
  if (activePos["colIndex"] === colIndex && activePos["rowIndex"] === rowIndex && activePos["sectionName"] === sectionName && activePos["grid"] === grid) {
814
748
  return; // The same cell is open twice
815
749
  }
@@ -819,7 +753,6 @@ InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, section
819
753
 
820
754
  var section = sectionSettings ? sectionSettings.getSection() : null;
821
755
  var cell = section ? section.getCell(colIndex, rowIndex) : null;
822
-
823
756
  if (!cell) {
824
757
  return; // Some input is invalid
825
758
  }
@@ -829,85 +762,76 @@ InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, section
829
762
 
830
763
  setTimeout(this._openEditor.bind(this, cell, grid), 100);
831
764
  };
765
+
832
766
  /** @public
833
767
  * @param {boolean=} opt_forceCommit
834
768
  * @fires InCellEditingPlugin#cancelled
835
769
  */
836
-
837
-
838
770
  InCellEditingPlugin.prototype.closeCellEditor = function (opt_forceCommit) {
839
771
  this._commitText(opt_forceCommit || this._autoCommitText);
840
772
  };
773
+
841
774
  /** @public
842
775
  * @param {boolean=} opt_enabled
843
776
  */
844
-
845
-
846
777
  InCellEditingPlugin.prototype.enableBalloonMode = function (opt_enabled) {
847
778
  this._balloonMode = opt_enabled !== false;
848
779
  };
780
+
849
781
  /** @public
850
782
  * @param {boolean=} opt_enabled
851
783
  */
852
-
853
-
854
784
  InCellEditingPlugin.prototype.enableTitleEditing = function (opt_enabled) {
855
785
  this._editableTitle = opt_enabled !== false;
856
786
  };
787
+
857
788
  /** Disable editing on all title sections
858
789
  * @public
859
790
  * @param {boolean=} opt_disabled
860
791
  */
861
-
862
-
863
792
  InCellEditingPlugin.prototype.disableTitleEditing = function (opt_disabled) {
864
793
  this._editableTitle = opt_disabled === false;
865
794
  };
795
+
866
796
  /** Disable editing on a per cell basis
867
797
  * @public
868
798
  * @param {Object} cell Grid cell object
869
799
  * @param {boolean=} opt_disabled
870
800
  */
871
-
872
-
873
801
  InCellEditingPlugin.prototype.disableCellEditing = function (cell, opt_disabled) {
874
802
  if (cell) {
875
803
  cell.enableClass("no-editing", opt_disabled !== false);
876
804
  }
877
805
  };
806
+
878
807
  /** @public
879
808
  * @param {boolean=} opt_disabled
880
809
  */
881
-
882
-
883
810
  InCellEditingPlugin.prototype.disableDataBinding = function (opt_disabled) {
884
811
  this._dataBinding = opt_disabled === false;
885
812
  };
813
+
886
814
  /** @public
887
815
  * @param {boolean=} opt_disabled
888
816
  */
889
-
890
-
891
817
  InCellEditingPlugin.prototype.disableDblClick = function (opt_disabled) {
892
818
  var dblClick = opt_disabled === false;
893
-
894
819
  if (this._dblClick !== dblClick) {
895
820
  this._dblClick = dblClick;
896
-
897
821
  for (var i = this._hosts.length; --i >= 0;) {
898
822
  this._listenForTriggering(this._hosts[i], dblClick);
899
823
  }
900
824
  }
901
825
  };
826
+
902
827
  /** Checking Editing is in process.
903
828
  * @public
904
829
  * @return {boolean}
905
830
  */
906
-
907
-
908
831
  InCellEditingPlugin.prototype.isEditing = function () {
909
832
  return this._editing;
910
833
  };
834
+
911
835
  /**
912
836
  * @public
913
837
  * @param {number=} columnIndex column index of editor, used in row editing mode
@@ -917,19 +841,14 @@ InCellEditingPlugin.prototype.isEditing = function () {
917
841
  * for row editing mode, specific column index and grid instance is need.
918
842
  * for cell editing mode. function not require param since only one editor can be opened at a time.
919
843
  */
920
-
921
-
922
844
  InCellEditingPlugin.prototype.getTextBox = function (columnIndex, grid) {
923
845
  if (this._activeRowId) {
924
846
  // for row editing mode
925
847
  // get rowEditor that's stored in column data
926
848
  grid = grid || this._hosts[0];
927
-
928
849
  if (grid) {
929
850
  var columnData = this._getColumnData(columnIndex, grid);
930
-
931
851
  var inCellCache = columnData["inCellCache"];
932
-
933
852
  if (inCellCache) {
934
853
  return inCellCache["inputElement"];
935
854
  }
@@ -938,17 +857,16 @@ InCellEditingPlugin.prototype.getTextBox = function (columnIndex, grid) {
938
857
  // for cell editing mode
939
858
  return this._activeInCellCache["inputElement"];
940
859
  }
941
-
942
860
  return null; // no editor open
943
861
  };
862
+
944
863
  /** @public
945
864
  * @return {string}
946
865
  */
947
-
948
-
949
866
  InCellEditingPlugin.prototype.getInitialText = function () {
950
867
  return this._initialText;
951
868
  };
869
+
952
870
  /** @private
953
871
  * @param {Object} dataSource DataView
954
872
  * @param {number} rowIndex
@@ -956,95 +874,78 @@ InCellEditingPlugin.prototype.getInitialText = function () {
956
874
  * @param {Element=} content element that get from cell.getContent
957
875
  * @return {*}
958
876
  */
959
-
960
-
961
877
  InCellEditingPlugin.prototype._getSourceContent = function (dataSource, rowIndex, field, content) {
962
878
  if (this._contentSource == "field") {
963
879
  return this._getData(dataSource, rowIndex, field);
964
880
  } else {
965
881
  var textNode, str;
966
-
967
882
  if (content) {
968
883
  var len = content.childNodes.length;
969
-
970
884
  for (var i = 0; i < len; ++i) {
971
885
  if (content.childNodes[i].nodeType === 3) {
972
886
  textNode = content.childNodes[i]; // To preserve current content structure
973
-
974
887
  break;
975
888
  }
976
889
  }
977
890
  }
978
-
979
891
  if (textNode) {
980
892
  str = textNode.textContent;
981
893
  } else if (content) {
982
894
  str = content.textContent;
983
895
  }
984
-
985
896
  return str;
986
897
  }
987
898
  };
899
+
988
900
  /**
989
901
  * @public
990
902
  * @param {string} rowId
991
903
  * @return {!number} row index will return -1 if not found
992
904
  */
993
-
994
-
995
905
  InCellEditingPlugin.prototype._getRowIndex = function (rowId) {
996
906
  if (rowId && this._lastActiveGrid) {
997
907
  var dv = this._lastActiveGrid.getDataSource();
998
-
999
908
  if (dv) return dv.getRowIndex(rowId);
1000
909
  }
1001
-
1002
910
  return -1;
1003
911
  };
912
+
1004
913
  /**
1005
914
  * @public
1006
915
  * @param {number} rowIndex
1007
916
  * @return {!string} return empty string if not found
1008
917
  */
1009
-
1010
-
1011
918
  InCellEditingPlugin.prototype._getRowId = function (rowIndex) {
1012
919
  if (rowIndex != null && this._lastActiveGrid) {
1013
920
  var dv = this._lastActiveGrid.getDataSource();
1014
-
1015
921
  if (dv) return dv.getRowId(rowIndex);
1016
922
  }
1017
-
1018
923
  return "";
1019
924
  };
925
+
1020
926
  /** @public
1021
927
  * @return {Object|null} core grid object
1022
928
  */
1023
-
1024
-
1025
929
  InCellEditingPlugin.prototype.getActiveGrid = function () {
1026
930
  return this._activePos ? this._activePos["grid"] : null;
1027
931
  };
932
+
1028
933
  /** get active column index that editor had opended. Function can work only in cell editing mode.
1029
934
  * @public
1030
935
  * @return {number} column index will return -1 if not found
1031
936
  */
1032
-
1033
-
1034
937
  InCellEditingPlugin.prototype.getActiveColIndex = function () {
1035
938
  if (this._activePos) {
1036
939
  var colIndex = this._activePos["colIndex"];
1037
940
  if (colIndex != null) return colIndex;
1038
941
  }
1039
-
1040
942
  return -1;
1041
943
  };
944
+
1042
945
  /** get active row index that editor had opended. Function Can work in both cell/row editing modes.
1043
946
  * @public
1044
947
  * @return {number} row index will return -1 if not found
1045
948
  */
1046
-
1047
-
1048
949
  InCellEditingPlugin.prototype.getActiveRowIndex = function () {
1049
950
  if (this._activeRowId) {
1050
951
  // row editing mode
@@ -1054,35 +955,30 @@ InCellEditingPlugin.prototype.getActiveRowIndex = function () {
1054
955
  var rowIndex = this._activePos["rowIndex"];
1055
956
  if (rowIndex != null) return rowIndex;
1056
957
  }
1057
-
1058
958
  return -1;
1059
959
  };
960
+
1060
961
  /** @public
1061
962
  * @return {Object}
1062
963
  */
1063
-
1064
-
1065
964
  InCellEditingPlugin.prototype.getInputElementPosition = function () {
1066
965
  return this._activePos || null;
1067
966
  };
967
+
1068
968
  /** @public
1069
969
  * @param {boolean=} opt_enable
1070
970
  */
1071
-
1072
-
1073
971
  InCellEditingPlugin.prototype.enableAutoCommitText = function (opt_enable) {
1074
972
  this._autoCommitText = opt_enable !== false;
1075
973
  };
974
+
1076
975
  /** Check if the column can be edited by double click
1077
976
  * @public
1078
977
  * @param {number} colIndex
1079
978
  * @return {boolean}
1080
979
  */
1081
-
1082
-
1083
980
  InCellEditingPlugin.prototype.isColumnEditable = function (colIndex) {
1084
981
  var val = this._getColumnOption(colIndex, "editableContent");
1085
-
1086
982
  return val == null ? this._editableContent : val;
1087
983
  };
1088
984
  /** @private
@@ -1090,83 +986,68 @@ InCellEditingPlugin.prototype.isColumnEditable = function (colIndex) {
1090
986
  * @param {Object=} opt_host core grid object
1091
987
  * @fires InCellEditingPlugin#editorOpened
1092
988
  */
1093
-
1094
-
1095
989
  InCellEditingPlugin.prototype._onDoubleClick = function (e, opt_host) {
1096
990
  var t = this;
1097
991
  var host = opt_host || t.getRelativeGrid(e);
1098
-
1099
992
  if (t.isEditing() || !host) {
1100
993
  return;
1101
994
  }
1102
-
1103
995
  var arg = host.getRelativePosition(e);
1104
996
  var sectionType = arg["sectionType"];
1105
-
1106
997
  if (sectionType === "content" && !t.isColumnEditable(arg["colIndex"])) {
1107
998
  return;
1108
999
  } else if (sectionType === "title" && !t._editableTitle) {
1109
1000
  return;
1110
1001
  } else if (sectionType === "header") {
1111
1002
  return;
1112
- } // Initialize internal states
1113
-
1003
+ }
1114
1004
 
1005
+ // Initialize internal states
1115
1006
  if (e["preventDefault"]) {
1116
1007
  Dom.preventDefault(e);
1117
1008
  }
1118
-
1119
1009
  t.openEditor(arg.colIndex, arg.rowIndex, arg.section, host);
1120
1010
  };
1011
+
1121
1012
  /** @private
1122
1013
  * @param {Element} e
1123
1014
  * @param {Object} host core grid object
1124
1015
  * @param {Object=} arg
1125
1016
  */
1126
-
1127
-
1128
1017
  InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
1129
1018
  var t = this;
1130
-
1131
1019
  if (!host.getElement() || this._hosts.indexOf(host) < 0) {
1132
1020
  // Check validity due to asyncronous call
1133
1021
  return;
1134
1022
  }
1135
-
1136
1023
  if (!arg) {
1137
1024
  arg = host.getRelativePosition(e);
1138
1025
  }
1139
-
1140
1026
  if (!arg["hit"]) {
1141
1027
  // The specified cell could be gone during the asyncronous process
1142
1028
  return;
1143
1029
  }
1144
-
1145
1030
  t._dispatch("preEditorOpening", arg);
1146
-
1147
1031
  if (arg["cancel"]) {
1148
1032
  return;
1149
1033
  }
1150
-
1151
1034
  var colIndex = arg["colIndex"];
1152
1035
  var rowIndex = arg["rowIndex"];
1153
1036
  var section = arg["section"];
1154
1037
  var cell = section.getCell(colIndex, rowIndex);
1155
1038
  var rowSpan = 1;
1156
1039
  var stretchedCell = section.getStretchedCell(cell, rowIndex);
1157
-
1158
1040
  if (stretchedCell) {
1159
1041
  cell = stretchedCell;
1160
1042
  } else {
1161
1043
  rowSpan = section.getCellRowSpan(colIndex, rowIndex);
1162
1044
  }
1163
-
1164
1045
  if (!cell || cell.hasClass("no-editing")) {
1165
1046
  return;
1166
- } // Everything has been verified at this point. We can start the opening process.
1167
- // close row editor first
1168
-
1047
+ }
1048
+ // Everything has been verified at this point. We can start the opening process.
1169
1049
 
1050
+ // close row editor first
1170
1051
  t.closeRowEditor(false, host);
1171
1052
  section.addClass("edit-mode");
1172
1053
  t._lastActiveGrid = host;
@@ -1175,116 +1056,92 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
1175
1056
  arg["content"] = t._prevContent = cell.getContent();
1176
1057
  arg["field"] = t._getField(colIndex);
1177
1058
  var dataSource = arg["dataSource"];
1178
-
1179
1059
  if (dataSource != null) {
1180
1060
  var rowId = arg["rowId"] = this._getRowId(arg["rowIndex"]);
1181
-
1182
1061
  arg["groupHeader"] = dataSource.isSegmentSeparator(rowId) || dataSource.getGroupByRowId(rowId);
1183
1062
  arg["rowData"] = this._getRow(dataSource, rowId);
1184
- } // Initialize UIs
1185
-
1063
+ }
1186
1064
 
1065
+ // Initialize UIs
1187
1066
  if (arg["sectionType"] === "title") {
1188
1067
  t._activeInCellCache = t._createTitleEditor(host);
1189
1068
  } else {
1190
1069
  t._activeInCellCache = t._createContentEditor(colIndex, host);
1191
1070
  }
1192
-
1193
1071
  var inputElement = arg["inputElement"] = t._activeInCellCache["inputElement"];
1194
1072
  var editor = arg["editor"] = t._activeInCellCache["editor"];
1195
1073
  var balloonPopup = t._activeInCellCache["balloonPopup"];
1196
1074
  var sourceContent = arg ? t._getSourceContent(arg["dataSource"], arg["rowIndex"], arg["field"], arg["content"]) : "";
1197
-
1198
1075
  if (rowIndex + 1 >= section.getRowCount()) {
1199
1076
  inputElement.classList.add("bottom");
1200
1077
  } else {
1201
1078
  inputElement.classList.remove("bottom");
1202
- } // Initialize Balloon
1203
-
1079
+ }
1204
1080
 
1081
+ // Initialize Balloon
1205
1082
  t._usingBalloon = t._isBalloonMode(cell);
1206
-
1207
1083
  if (t._usingBalloon) {
1208
1084
  editor.classList.add("balloon");
1209
1085
  } else {
1210
1086
  editor.classList.remove("balloon");
1211
1087
  }
1212
-
1213
1088
  var editorStyle = editor.style;
1214
-
1215
1089
  if (this._elfVersion || t._inlineStyling) {
1216
1090
  editorStyle.backgroundColor = section.getComputedStyle().backgroundColor;
1217
1091
  }
1218
-
1219
1092
  var rowH = section.getRowHeight(rowIndex);
1220
1093
  var width = cell.getWidth();
1221
-
1222
1094
  if (!host.isPinnedColumn(colIndex)) {
1223
1095
  var hScrollbar = host.getHScrollbar();
1224
-
1225
1096
  if (hScrollbar.isActive()) {
1226
1097
  var paneSize = hScrollbar.getPaneSize();
1227
-
1228
1098
  if (width > paneSize) {
1229
1099
  width = paneSize;
1230
1100
  }
1231
1101
  }
1232
1102
  }
1233
-
1234
1103
  if (!t._usingBalloon || width > 208) {
1235
1104
  editorStyle.width = width + "px";
1236
1105
  } else {
1237
1106
  editorStyle.width = "";
1238
1107
  }
1239
-
1240
1108
  if (rowSpan > 1) {
1241
1109
  editorStyle.height = cell.getHeight() + "px";
1242
1110
  } else {
1243
1111
  editorStyle.height = rowH + "px";
1244
- } // Attach our popup (balloon element)
1245
-
1112
+ }
1246
1113
 
1114
+ // Attach our popup (balloon element)
1247
1115
  var parentElement = document.body;
1248
-
1249
1116
  if (t._compositeGrid || t._realTimeGrid) {
1250
1117
  var activeGrid = t.getActiveGrid();
1251
-
1252
1118
  if (activeGrid) {
1253
1119
  parentElement = activeGrid.getElement().parentElement;
1254
1120
  }
1255
1121
  }
1256
-
1257
1122
  balloonPopup.enableUIBlocking(t._uiBlocking);
1258
1123
  balloonPopup.addEventListener("hidden", t._onPopupHide);
1259
1124
  balloonPopup.disableAutoHiding(false);
1260
1125
  balloonPopup.disableHideOnScroll(true);
1261
1126
  balloonPopup.attachTo(cell.getElement());
1262
1127
  balloonPopup.show(true, parentElement);
1128
+ this._updateEditorPopup(t._activeInCellCache, cell, host);
1263
1129
 
1264
- this._updateEditorPopup(t._activeInCellCache, cell, host); // Attach user element
1265
-
1266
-
1130
+ // Attach user element
1267
1131
  if (t._customElement) {
1268
1132
  t._customElementPopup.attachTo(editor);
1269
-
1270
1133
  t._customElementPopup.show(true, parentElement);
1271
-
1272
1134
  t._customElementPopup.disableAutoHiding(false);
1273
-
1274
1135
  arg["popupElement"] = t._customElement;
1275
- } // WARNING: value-changed event from ELF v3 component may NOT be triggered due to their design flaw
1276
-
1136
+ }
1277
1137
 
1138
+ // WARNING: value-changed event from ELF v3 component may NOT be triggered due to their design flaw
1278
1139
  t._setText(sourceContent, inputElement);
1279
-
1280
1140
  arg["initialText"] = t._initialText = sourceContent;
1281
-
1282
1141
  if (t._disablingScroll) {
1283
1142
  t._freezeScrolling(host, true);
1284
1143
  }
1285
-
1286
1144
  arg["autoSuggest"] = t._autoSuggest;
1287
-
1288
1145
  if (t._autoSuggest) {
1289
1146
  if (t._autoSuggest.attach === inputElement) {
1290
1147
  t._autoSuggest.attach = null; // WORKAROUND: reset attach for re-attach target
@@ -1294,87 +1151,73 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
1294
1151
  // if we appendChild all time when open editor, events won't work
1295
1152
  editor.appendChild(t._autoSuggest);
1296
1153
  }
1297
-
1298
1154
  t._autoSuggest.attach = inputElement;
1299
1155
  t._autoSuggest.positionTarget = inputElement; // for re-position of autosuggest
1300
- } // Dispatch an event for user to setup stuff
1301
-
1156
+ }
1302
1157
 
1158
+ // Dispatch an event for user to setup stuff
1303
1159
  t._dispatch("editorOpened", arg); // User may modify the editor
1304
1160
 
1305
-
1306
1161
  inputElement.focus();
1307
-
1308
1162
  if (typeof inputElement.select === "function") {
1309
1163
  inputElement.select();
1310
1164
  }
1311
-
1312
1165
  arg["initialText"] = t._initialText = t.getText(); // After all modifications, cache the string for text change event
1313
-
1314
1166
  t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
1315
1167
  };
1168
+
1316
1169
  /** Using to open row editor.
1317
1170
  * @public
1318
1171
  * @param {number} rowIndex
1319
1172
  * @param {Object=} grid core grid object
1320
1173
  */
1321
-
1322
-
1323
1174
  InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
1324
1175
  var t = this;
1325
- grid = grid || t._hosts[0]; // if open same row we will do nothing
1326
-
1176
+ grid = grid || t._hosts[0];
1177
+ // if open same row we will do nothing
1327
1178
  if (t._getRowIndex(t._activeRowId) === rowIndex || !grid) {
1328
1179
  return;
1329
- } // close all open editor
1330
-
1180
+ }
1331
1181
 
1182
+ // close all open editor
1332
1183
  t.closeRowEditor(false, grid);
1333
-
1334
1184
  t._commitText(false);
1335
-
1336
1185
  var firstInput, firstPopup;
1337
1186
  var section = grid.getSection("content");
1338
1187
  var dataSource = grid.getDataSource();
1339
1188
  var lastIndex = (section.getColumnCount() || 0) - 1;
1340
1189
  var isBottom = rowIndex + 1 >= section.getRowCount();
1341
1190
  var sectionBGColor = this._elfVersion || t._inlineStyling ? section.getComputedStyle().backgroundColor : null;
1342
- var rowH = section.getRowHeight(rowIndex); // if normally parent popup will be document.body
1191
+ var rowH = section.getRowHeight(rowIndex);
1343
1192
 
1344
- var parentElement = document.body; // but if grid is _compositeGrid or _realTimeGrid then
1345
- // then we will use grid parent instead
1193
+ // if normally parent popup will be document.body
1194
+ var parentElement = document.body;
1346
1195
 
1196
+ // but if grid is _compositeGrid or _realTimeGrid then
1197
+ // then we will use grid parent instead
1347
1198
  if (t._compositeGrid || t._realTimeGrid) {
1348
1199
  parentElement = grid.getElement().parentElement;
1349
- } // loop for all column
1350
-
1200
+ }
1351
1201
 
1202
+ // loop for all column
1352
1203
  for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
1353
1204
  // ignore column that can't edit
1354
1205
  if (!t.isColumnEditable(columnIndex)) {
1355
1206
  continue;
1356
1207
  }
1357
-
1358
1208
  var cell = section.getCell(columnIndex, rowIndex);
1359
-
1360
1209
  if (!cell || cell.hasClass("no-editing")) {
1361
1210
  continue;
1362
1211
  } // all verify is done
1363
- // create editor, popup, inputElement
1364
-
1365
1212
 
1213
+ // create editor, popup, inputElement
1366
1214
  var inCellCache = t._createContentEditor(columnIndex, grid);
1367
-
1368
1215
  var content = cell.getContent();
1369
-
1370
1216
  var field = t._getField(columnIndex);
1371
-
1372
1217
  var sourceContent = t._getSourceContent(dataSource, rowIndex, field, content);
1373
-
1374
1218
  var inputElement = inCellCache["inputElement"];
1375
1219
  var editor = inCellCache["editor"];
1376
1220
  var balloonPopup = inCellCache["balloonPopup"];
1377
-
1378
1221
  if (!firstInput) {
1379
1222
  firstInput = inputElement;
1380
1223
  firstPopup = balloonPopup;
@@ -1382,25 +1225,21 @@ InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
1382
1225
  } else {
1383
1226
  balloonPopup.enableUIBlocking(false);
1384
1227
  }
1385
-
1386
1228
  t._setText(sourceContent, inputElement); // WARNING: value-changed event from ELF v3 component may be triggered due to their design flaw
1387
1229
 
1388
-
1389
1230
  if (isBottom) {
1390
1231
  inputElement.classList.add("bottom");
1391
1232
  } else {
1392
1233
  inputElement.classList.remove("bottom");
1393
1234
  }
1394
-
1395
1235
  var editorStyle = editor.style;
1396
-
1397
1236
  if (sectionBGColor) {
1398
1237
  editorStyle.backgroundColor = sectionBGColor;
1399
1238
  }
1239
+ editorStyle.height = rowH + "px";
1400
1240
 
1401
- editorStyle.height = rowH + "px"; // this is different from single edit mode
1241
+ // this is different from single edit mode
1402
1242
  // row edit mode not support balloon mode
1403
-
1404
1243
  var width = section.getCellWidth(columnIndex, rowIndex);
1405
1244
  editorStyle.width = width + "px";
1406
1245
  editor.classList.remove("balloon");
@@ -1408,46 +1247,40 @@ InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
1408
1247
  balloonPopup.disableHideOnScroll(true);
1409
1248
  balloonPopup.attachTo(cell.getElement());
1410
1249
  balloonPopup.show(true, parentElement);
1250
+ this._updateEditorPopup(inCellCache, cell, grid);
1411
1251
 
1412
- this._updateEditorPopup(inCellCache, cell, grid); // this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
1413
-
1414
- } // if firstInput not undefined that mean at lease one popup is open
1415
-
1252
+ // this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
1253
+ }
1416
1254
 
1255
+ // if firstInput not undefined that mean at lease one popup is open
1417
1256
  if (firstInput) {
1418
1257
  firstPopup.addEventListener("hidden", t._onPopupHide);
1419
1258
  t._lastActiveGrid = grid;
1420
1259
  t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
1421
-
1422
1260
  t._activeRowId = this._getRowId(rowIndex);
1423
1261
  firstInput.focus();
1424
1262
  section.addClass("edit-mode");
1425
-
1426
1263
  if (t._disablingScroll) {
1427
1264
  t._freezeScrolling(grid, true);
1428
1265
  }
1429
1266
  }
1430
1267
  };
1268
+
1431
1269
  /** Using to close row editor.
1432
1270
  * @public
1433
1271
  * @param {boolean=} isCommit=true Default is true, to save change that user made to datasource
1434
1272
  * @fires InCellEditingPlugin#beforeRowCommit
1435
1273
  * @fires InCellEditingPlugin#rowEditorClosed
1436
1274
  */
1437
-
1438
-
1439
1275
  InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
1440
1276
  var t = this;
1441
- var grid = t._lastActiveGrid; // if no row active then do nothing
1442
-
1277
+ var grid = t._lastActiveGrid;
1278
+ // if no row active then do nothing
1443
1279
  if (!t._activeRowId || !grid) {
1444
1280
  return;
1445
1281
  }
1446
-
1447
1282
  var rowId = t._activeRowId;
1448
-
1449
1283
  var rowIndex = t._getRowIndex(rowId);
1450
-
1451
1284
  if (rowIndex <= -1) {
1452
1285
  isCommit = false; // rowIndex -1 mean row is not found or already disposed
1453
1286
  } else {
@@ -1458,31 +1291,29 @@ InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
1458
1291
  var columnLength = grid.getColumnCount();
1459
1292
  var fieldValue = {};
1460
1293
  var inCellCaches = [];
1461
- var inCellCache; // in this section we just prepare data
1294
+ var inCellCache;
1462
1295
 
1296
+ // in this section we just prepare data
1463
1297
  for (var columnIndex = 0; columnIndex < columnLength; columnIndex++) {
1464
1298
  var columnData = t._getColumnData(columnIndex, grid);
1299
+ inCellCache = columnData && columnData["inCellCache"];
1465
1300
 
1466
- inCellCache = columnData && columnData["inCellCache"]; // if not have inCellCache then this column not have editor
1467
-
1301
+ // if not have inCellCache then this column not have editor
1468
1302
  if (!inCellCache) {
1469
1303
  continue;
1470
1304
  }
1471
-
1472
1305
  inCellCache.columnIndex = columnIndex;
1473
1306
  inCellCaches.push(inCellCache);
1474
-
1475
1307
  if (isCommit) {
1476
1308
  var field = t._getField(columnIndex);
1477
-
1478
1309
  inCellCache.field = field;
1479
1310
  fieldValue[field] = this._getValue(inCellCache["inputElement"]);
1480
1311
  }
1481
1312
  }
1482
-
1483
1313
  var length = inCellCaches.length;
1484
- var i, e; // dispatch event beforeRowCommit
1314
+ var i, e;
1485
1315
 
1316
+ // dispatch event beforeRowCommit
1486
1317
  if (isCommit) {
1487
1318
  if (t.hasListener("beforeRowCommit")) {
1488
1319
  e = {
@@ -1492,37 +1323,31 @@ InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
1492
1323
  cancel: false,
1493
1324
  rowId: t._activeRowId
1494
1325
  };
1495
-
1496
- t._dispatch("beforeRowCommit", e); // e.cancel = true mean user want to cancel closeRowEditor operation
1497
-
1498
-
1326
+ t._dispatch("beforeRowCommit", e);
1327
+ // e.cancel = true mean user want to cancel closeRowEditor operation
1499
1328
  isCommit = !e.cancel;
1500
1329
  }
1501
-
1502
1330
  if (isCommit) {
1503
1331
  var dataSource = grid.getDataSource();
1504
-
1505
1332
  for (i = 0; i < length; i++) {
1506
1333
  inCellCache = inCellCaches[i];
1507
- var value = fieldValue[inCellCache.field]; // set data to datasource
1508
-
1334
+ var value = fieldValue[inCellCache.field];
1335
+ // set data to datasource
1509
1336
  if (dataSource) {
1510
1337
  // only use value from fieldValue
1511
1338
  // because fieldValue maybe mutate from beforeRowCommit event
1512
1339
  t._setData(dataSource, rowIndex, inCellCache.field, value);
1513
- } // set value to ui if content is a build in text
1514
-
1340
+ }
1515
1341
 
1342
+ // set value to ui if content is a build in text
1516
1343
  var cell = section.getCell(inCellCache.columnIndex, rowIndex);
1517
1344
  var content = cell.getContent();
1518
-
1519
1345
  if (content && content.classList.contains("text")) {
1520
1346
  cell.setContent(value);
1521
1347
  }
1522
1348
  }
1523
1349
  }
1524
1350
  }
1525
-
1526
1351
  if (t.hasListener("rowEditorClosed")) {
1527
1352
  e = {
1528
1353
  grid: grid,
@@ -1530,27 +1355,25 @@ InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
1530
1355
  fieldValue: fieldValue,
1531
1356
  committed: isCommit
1532
1357
  };
1533
-
1534
1358
  t._dispatch("rowEditorClosed", e);
1535
- } // hide editor by remove popup from dom
1536
-
1359
+ }
1537
1360
 
1361
+ // hide editor by remove popup from dom
1538
1362
  for (i = 0; i < length; i++) {
1539
1363
  var popup = inCellCaches[i].balloonPopup;
1540
1364
  popup.removeEventListener("hidden", t._onPopupHide); // remove event every popup to make sure nothing left
1541
-
1542
1365
  popup.hide();
1543
1366
  }
1367
+ t._freezeScrolling(grid, false);
1544
1368
 
1545
- t._freezeScrolling(grid, false); // reset status and resource
1546
-
1547
-
1369
+ // reset status and resource
1548
1370
  section.removeClass("edit-mode");
1549
1371
  t._editing = false;
1550
1372
  t._activeRowId = "";
1551
1373
  t._lastActiveGrid = null;
1552
1374
  grid.focus();
1553
1375
  };
1376
+
1554
1377
  /** open row editor if no any row editor opened, and close row editor if it already opened
1555
1378
  * @public
1556
1379
  * @param {number} rowIndex
@@ -1559,8 +1382,6 @@ InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
1559
1382
  * @fires InCellEditingPlugin#beforeRowCommit
1560
1383
  * @fires InCellEditingPlugin#rowEditorClosed
1561
1384
  */
1562
-
1563
-
1564
1385
  InCellEditingPlugin.prototype.toggleRowEditor = function (rowIndex, isCommit, grid) {
1565
1386
  if (this._getRowIndex(this._activeRowId) === rowIndex) {
1566
1387
  this.closeRowEditor(isCommit, grid);
@@ -1571,165 +1392,135 @@ InCellEditingPlugin.prototype.toggleRowEditor = function (rowIndex, isCommit, gr
1571
1392
  this.openRowEditor(rowIndex, grid);
1572
1393
  }
1573
1394
  };
1395
+
1574
1396
  /** handle grid scrolling not window scroll
1575
1397
  * @private
1576
1398
  * @param {Object} e
1577
1399
  */
1578
-
1579
-
1580
1400
  InCellEditingPlugin.prototype._onScroll = function (e) {
1581
1401
  this._scrolling = true;
1582
-
1583
1402
  if (!this._closingOnScroll && this._editing) {
1584
1403
  if (this._activeInCellCache) {
1585
1404
  var popup = this._activeInCellCache.balloonPopup;
1586
1405
  popup.hide();
1587
1406
  } else if (this._activeRowId) {
1588
1407
  var grid = this.getActiveGrid() || this._lastActiveGrid;
1589
-
1590
1408
  var section = grid.getSection("content");
1591
1409
  var lastIndex = (section.getColumnCount() || 0) - 1;
1592
-
1593
1410
  for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
1594
1411
  var columnData = this._getColumnData(columnIndex, grid);
1595
-
1596
1412
  var inCellCache = columnData["inCellCache"];
1597
-
1598
1413
  if (!inCellCache) {
1599
1414
  continue;
1600
1415
  }
1601
-
1602
1416
  var popupCache = inCellCache["balloonPopup"];
1603
-
1604
1417
  if (popupCache) {
1605
1418
  popupCache.hide();
1606
1419
  }
1607
1420
  }
1608
1421
  }
1609
1422
  }
1610
-
1611
1423
  this._onPopupHide();
1612
-
1613
1424
  this._scrolling = false;
1614
1425
  };
1426
+
1615
1427
  /** handle popup hidden event
1616
1428
  * @private
1617
1429
  * @param {Object} e
1618
1430
  */
1619
-
1620
-
1621
1431
  InCellEditingPlugin.prototype._onPopupHide = function (e) {
1622
1432
  if (!this._closingOnScroll) {
1623
1433
  if (this._scrolling) {
1624
1434
  this.requestShowEditorPopup();
1625
1435
  return;
1626
1436
  }
1627
- } // in cell editing mode, when popup hide for any reason
1437
+ }
1438
+ // in cell editing mode, when popup hide for any reason
1628
1439
  // cell editing will be close and make a commit. (depend on _autoCommitText flag)
1629
1440
  // WARNING: when user scroll outside grid. it will call _onPopupHide as well
1441
+ this._commitText(this._autoCommitText);
1630
1442
 
1631
-
1632
- this._commitText(this._autoCommitText); // for row editing mode if editor hide by any reason
1443
+ // for row editing mode if editor hide by any reason
1633
1444
  // we will call close closeRowEditor to reset all internal flag status
1634
1445
  // row editing mode not care about _autoCommitText. (for the time being)
1635
-
1636
-
1637
1446
  this.closeRowEditor(false);
1638
1447
  };
1448
+
1639
1449
  /** @private
1640
1450
  * @param {Object} event
1641
1451
  */
1642
-
1643
-
1644
1452
  InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
1645
1453
  if (event.detail.target) {
1646
1454
  var method = event.detail.method;
1647
1455
  var value = event.detail.target.value;
1648
-
1649
1456
  if (method === 'enter' || method === 'click') {
1650
1457
  if (value) {
1651
1458
  this.setText(value);
1652
-
1653
1459
  this._commitText(true);
1654
1460
  }
1655
1461
  }
1656
1462
  }
1657
1463
  };
1464
+
1658
1465
  /** @private
1659
1466
  * @param {Object} e
1660
1467
  */
1661
-
1662
-
1663
1468
  InCellEditingPlugin.prototype._onValueChanged = function (e) {
1664
1469
  if (this._activeRowId) {
1665
1470
  return;
1666
1471
  } // do nothing in rowEditMode
1667
1472
 
1668
-
1669
1473
  this._commitText(true);
1670
1474
  };
1475
+
1671
1476
  /** @private
1672
1477
  * @param {Object} e
1673
1478
  */
1674
-
1675
-
1676
1479
  InCellEditingPlugin.prototype._onTextKeyDown = function (e) {
1677
1480
  e.stopPropagation();
1678
-
1679
1481
  if (this._activeRowId) {
1680
1482
  return;
1681
1483
  } // do nothing in rowEditMode
1682
- // KeyCodes.ESC = 27
1683
-
1684
1484
 
1485
+ // KeyCodes.ESC = 27
1685
1486
  if (e.keyCode === 27) {
1686
1487
  this._commitText(this._autoCommitText);
1687
- } // KeyCodes.TAB = 9
1688
-
1689
-
1488
+ }
1489
+ // KeyCodes.TAB = 9
1690
1490
  if (e.keyCode === 9) {
1691
1491
  // For check press tab key when user tab on auto suggest list
1692
1492
  // When user tab on auto suggest, the focus should be in input and data doesn't commit
1693
1493
  if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
1694
1494
  this._activeInCellCache.inputElement.focus();
1695
1495
  }
1696
-
1697
1496
  e.preventDefault(); // stop losing focus
1698
1497
  }
1699
1498
  };
1499
+
1700
1500
  /** @private
1701
1501
  * @param {Object} e
1702
1502
  */
1703
-
1704
-
1705
1503
  InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
1706
1504
  e.stopPropagation();
1707
-
1708
1505
  if (this._activeRowId) {
1709
1506
  return;
1710
1507
  } // do nothing in rowEditMode
1711
1508
 
1712
-
1713
1509
  if (this.hasListener("keyUp")) {
1714
1510
  this._activePos["text"] = this._activePos["enteredText"] = this._activeInCellCache["inputElement"].value;
1715
-
1716
1511
  this._dispatch("keyUp", this._activePos);
1717
- } // KeyCodes.ENTER = 13 && KeyCodes.TAB = 9
1718
-
1512
+ }
1719
1513
 
1514
+ // KeyCodes.ENTER = 13 && KeyCodes.TAB = 9
1720
1515
  var tabKey = e.keyCode === 9;
1721
-
1722
1516
  if (tabKey || e.keyCode === 13) {
1723
1517
  var text = this.getText();
1724
1518
  var cellInfo = this._activePos;
1725
-
1726
1519
  if (this._initialText !== text) {
1727
1520
  e.preventDefault(); // TODO: Check if this is needed
1728
1521
  // Clear auto suggest and doesn't commit when user tab on auto suggest item
1729
-
1730
1522
  if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
1731
1523
  this._activeInCellCache.inputElement.focus();
1732
-
1733
1524
  this._autoSuggest.suggestions = [];
1734
1525
  return; // when use tabToMove with auto suggest, it shouldn't be effect when doesn't commit text
1735
1526
  } else {
@@ -1738,16 +1529,12 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
1738
1529
  } else {
1739
1530
  this._commitText(false);
1740
1531
  }
1741
-
1742
1532
  if (tabKey && this._tabToMove && !e.altKey && !e.ctrlKey) {
1743
1533
  var host = cellInfo ? cellInfo["grid"] : null;
1744
-
1745
1534
  if (host && host["getCellInfo"]) {
1746
1535
  var dv = host.getDataSource();
1747
-
1748
1536
  while (cellInfo) {
1749
1537
  cellInfo = e.shiftKey ? host.getPrevCell(cellInfo) : host.getNextCell(cellInfo);
1750
-
1751
1538
  if (cellInfo && cellInfo["cell"]) {
1752
1539
  if (dv.getRowDataAt(cellInfo["rowIndex"])) {
1753
1540
  // Check group header row
@@ -1768,48 +1555,39 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
1768
1555
  * @private
1769
1556
  * @param {boolean} committed
1770
1557
  */
1771
-
1772
-
1773
1558
  InCellEditingPlugin.prototype._commitText = function (committed) {
1774
1559
  var t = this;
1775
1560
  var arg = t._activePos;
1776
-
1777
1561
  if (!t.isEditing() || !arg) {
1778
1562
  return;
1779
1563
  }
1780
-
1781
1564
  arg["section"].removeClass("edit-mode");
1782
1565
  t._editing = false;
1783
1566
  var enteredValue = arg["text"] = this.getValue();
1784
1567
  var groupHeader = arg["groupHeader"] || false;
1785
-
1786
1568
  if (committed) {
1787
1569
  if (t.hasListener("beforeCommit")) {
1788
1570
  t._dispatch("beforeCommit", arg);
1789
-
1790
1571
  committed = !arg["cancel"];
1791
1572
  enteredValue = arg["text"];
1792
1573
  }
1793
-
1794
1574
  if (committed && t._dataBinding && !groupHeader) {
1795
1575
  var sectionSettings = arg["sectionSettings"];
1796
- var sectionType = sectionSettings.getType(); // case edit content
1797
-
1576
+ var sectionType = sectionSettings.getType();
1577
+ // case edit content
1798
1578
  if ("content" === sectionType) {
1799
1579
  var dv = sectionSettings.getDataSource();
1800
-
1801
1580
  if (dv) {
1802
1581
  t._setData(dv, arg["rowIndex"], arg["field"], enteredValue);
1803
-
1804
1582
  if (t._prevContent && t._prevContent.classList.contains("text")) {
1805
1583
  // Bind data only if previous content is a build in text
1806
1584
  t._activeCell.setContent(enteredValue);
1807
1585
  }
1808
1586
  }
1809
- } // case edit title
1587
+ }
1588
+ // case edit title
1810
1589
  else if ("title" === sectionType) {
1811
1590
  var _grid = this._compositeGrid || this._realTimeGrid || null;
1812
-
1813
1591
  if (_grid) {
1814
1592
  _grid.setColumnName(arg["colIndex"], enteredValue);
1815
1593
  }
@@ -1818,57 +1596,48 @@ InCellEditingPlugin.prototype._commitText = function (committed) {
1818
1596
  }
1819
1597
  }
1820
1598
  }
1821
-
1822
1599
  if (t.hasListener("editorClosed")) {
1823
1600
  arg["canceled"] = arg["cancelled"] = !committed;
1824
1601
  arg["committed"] = committed;
1825
-
1826
1602
  t._dispatch("editorClosed", arg);
1827
1603
  }
1828
-
1829
1604
  if (t._activeInCellCache && t._activeInCellCache.balloonPopup) {
1830
1605
  t._activeInCellCache.balloonPopup.removeEventListener("hidden", t._onPopupHide);
1831
-
1832
1606
  t._activeInCellCache.balloonPopup.hide();
1833
1607
  }
1834
-
1835
1608
  Dom.removeParent(t._customElement);
1836
-
1837
1609
  t._freezeScrolling(arg["grid"], false);
1838
-
1839
1610
  arg["grid"].focus();
1840
1611
  t._activePos = t._activeCell = t._prevContent = t._lastActiveGrid = t._activeInCellCache = null;
1841
1612
  };
1613
+
1842
1614
  /** @private
1843
1615
  * @param {Event} e
1844
1616
  */
1845
-
1846
-
1847
1617
  InCellEditingPlugin.prototype._stopPropagation = function (e) {
1848
1618
  e.stopPropagation();
1849
1619
  };
1620
+
1850
1621
  /** Using for Check balloon mode is turn on/off.
1851
1622
  * @private
1852
1623
  * @param {Object} cell Grid cell object
1853
1624
  * @return {boolean}
1854
1625
  */
1855
-
1856
-
1857
1626
  InCellEditingPlugin.prototype._isBalloonMode = function (cell) {
1858
1627
  var cellElem = cell.getElement();
1859
1628
  var compStyles = cellElem ? window.getComputedStyle(cellElem) : {};
1860
1629
  return this._balloonMode || compStyles.display === "none" || compStyles.visibility === "hidden";
1861
1630
  };
1631
+
1862
1632
  /** @private
1863
1633
  * @param {Object} host core grid object
1864
1634
  * @param {boolean} bool
1865
1635
  */
1866
-
1867
-
1868
1636
  InCellEditingPlugin.prototype._listenForTriggering = function (host, bool) {
1869
1637
  if (bool) {
1870
- host.listen("dblclick", this._onDoubleClick); // Make a comparable functionality for touchscreen
1638
+ host.listen("dblclick", this._onDoubleClick);
1871
1639
 
1640
+ // Make a comparable functionality for touchscreen
1872
1641
  if (isTouchDevice()) {
1873
1642
  host.listen("touchstart", this._onTouchStart);
1874
1643
  host.listen("touchend", this._onTouchEnd);
@@ -1881,102 +1650,85 @@ InCellEditingPlugin.prototype._listenForTriggering = function (host, bool) {
1881
1650
  host.unlisten("touchcancel", this._onTouchEnd);
1882
1651
  }
1883
1652
  };
1653
+
1884
1654
  /** Use only On-Touch-Start event on mobile devices.
1885
1655
  * @private
1886
1656
  * @param {Object} e
1887
1657
  */
1888
-
1889
-
1890
1658
  InCellEditingPlugin.prototype._onTouchStart = function (e) {
1891
1659
  this._resetTouchTimer();
1892
-
1893
1660
  this._touchTimerId = setTimeout(this._onTouchTimer, this._longPressTime);
1894
1661
  };
1662
+
1895
1663
  /** Use only press time on mobile devices.
1896
1664
  * @private
1897
1665
  * @param {Object} e
1898
1666
  */
1899
-
1900
-
1901
1667
  InCellEditingPlugin.prototype._onTouchTimer = function (e) {
1902
1668
  this._touchTimerId = 0;
1903
1669
  };
1670
+
1904
1671
  /** Use only On-Touch-End event on mobile devices.
1905
1672
  * @private
1906
1673
  * @param {Event} e
1907
1674
  */
1908
-
1909
-
1910
1675
  InCellEditingPlugin.prototype._onTouchEnd = function (e) {
1911
1676
  if (!this._resetTouchTimer()) {
1912
1677
  this._onDoubleClick(e); // Trigger cell editor
1913
-
1914
1678
  }
1915
1679
  };
1680
+
1916
1681
  /** Use only to reset timer on mobile devices.
1917
1682
  * @private
1918
1683
  * @return {boolean}
1919
1684
  */
1920
-
1921
-
1922
1685
  InCellEditingPlugin.prototype._resetTouchTimer = function () {
1923
1686
  if (this._touchTimerId) {
1924
1687
  clearTimeout(this._touchTimerId);
1925
1688
  this._touchTimerId = 0;
1926
1689
  return true;
1927
1690
  }
1928
-
1929
1691
  return false;
1930
1692
  };
1693
+
1931
1694
  /** Set other elements to using like popup when editing cell.
1932
1695
  * @public
1933
1696
  * @param {Element} elm
1934
1697
  */
1935
-
1936
-
1937
1698
  InCellEditingPlugin.prototype.setPopupElement = function (elm) {
1938
1699
  var balloonPopup = this._activeInCellCache && this._activeInCellCache["balloonPopup"];
1939
-
1940
1700
  if (this._customElement) {
1941
1701
  balloonPopup && balloonPopup.removeFocusElement(this._customElement);
1942
-
1943
1702
  this._customElementPopup.dispose();
1944
-
1945
1703
  this._customElementPopup = null;
1946
1704
  }
1947
-
1948
1705
  this._customElement = elm;
1949
-
1950
1706
  if (this._customElement) {
1951
1707
  this._customElementPopup = new Popup(this._customElement);
1952
1708
  balloonPopup && balloonPopup.addFocusElement(this._customElement);
1953
1709
  }
1954
1710
  };
1711
+
1955
1712
  /** Set content to the editor but do not commit anything to internal storage.
1956
1713
  * @public
1957
1714
  * @param {*} content
1958
1715
  */
1959
-
1960
-
1961
1716
  InCellEditingPlugin.prototype.setText = function (content) {
1962
1717
  // TODO: since we have inputElement per each column
1963
1718
  // we should receive column index to set value in specific column
1964
1719
  this._activeInCellCache && this._setText(content, this._activeInCellCache["inputElement"]);
1965
1720
  };
1721
+
1966
1722
  /** @private
1967
1723
  * @param {*} content
1968
1724
  * @param {Element} inputElement editor element
1969
1725
  */
1970
-
1971
-
1972
1726
  InCellEditingPlugin.prototype._setText = function (content, inputElement) {
1973
1727
  inputElement._origValue = content;
1974
1728
  var inputTag = inputElement.tagName.toLowerCase();
1975
1729
  var typeMap = InCellEditingPlugin._uiElementTypesMap;
1976
-
1977
1730
  if (inputTag === typeMap.checkbox) {
1978
1731
  var checked = content ? !(content === "f" || content === "false") : false;
1979
-
1980
1732
  if (checked) {
1981
1733
  inputElement.setAttribute("checked", "true");
1982
1734
  } else {
@@ -1996,7 +1748,6 @@ InCellEditingPlugin.prototype._setText = function (content, inputElement) {
1996
1748
  ElfDate.setDate(inputElement, content);
1997
1749
  } else {
1998
1750
  var txt = "";
1999
-
2000
1751
  if (content != null) {
2001
1752
  if (typeof content === "string") {
2002
1753
  txt = content;
@@ -2005,32 +1756,28 @@ InCellEditingPlugin.prototype._setText = function (content, inputElement) {
2005
1756
  txt = content + "";
2006
1757
  }
2007
1758
  }
2008
-
2009
1759
  inputElement.value = txt;
2010
1760
  }
2011
1761
  };
1762
+
2012
1763
  /** Get current text from the editor
2013
1764
  * @public
2014
1765
  * @return {string}
2015
1766
  * @see {@link InCellEditingPlugin#getValue}
2016
1767
  */
2017
-
2018
-
2019
1768
  InCellEditingPlugin.prototype.getText = function () {
2020
1769
  // TODO: since we have inputElement per each column
2021
1770
  // we should receive column index to return text of inputElement in specific column
2022
1771
  if (this._activeInCellCache) return this._getText(this._activeInCellCache["inputElement"]);else return "";
2023
1772
  };
1773
+
2024
1774
  /** @private
2025
1775
  * @param {Element} inputElement editor element
2026
1776
  * @return {string}
2027
1777
  */
2028
-
2029
-
2030
1778
  InCellEditingPlugin.prototype._getText = function (inputElement) {
2031
1779
  var inputTag = inputElement.tagName.toLowerCase();
2032
1780
  var typeMap = InCellEditingPlugin._uiElementTypesMap;
2033
-
2034
1781
  if (inputTag === typeMap.checkbox) {
2035
1782
  return inputElement.checked + "";
2036
1783
  } else if (inputTag === typeMap.combobox) {
@@ -2040,31 +1787,27 @@ InCellEditingPlugin.prototype._getText = function (inputElement) {
2040
1787
  } else if (inputTag === typeMap.date) {
2041
1788
  return inputElement.value + "";
2042
1789
  }
2043
-
2044
1790
  return inputElement.value;
2045
1791
  };
1792
+
2046
1793
  /** Convert current text from the editor to value corresponding to the type of the editor
2047
1794
  * @public
2048
1795
  * @return {*} Returned type is based on the type of the editor
2049
1796
  * @see {@link InCellEditingPlugin#getText}
2050
1797
  */
2051
-
2052
-
2053
1798
  InCellEditingPlugin.prototype.getValue = function () {
2054
1799
  // TODO: since we have inputElement per each column
2055
1800
  // we should receive column index to return value of inputElement in specific column
2056
1801
  return this._activeInCellCache ? this._getValue(this._activeInCellCache["inputElement"]) : null;
2057
1802
  };
1803
+
2058
1804
  /** @private
2059
1805
  * @param {Element} inputElement editor element
2060
1806
  * @return {*} Returned type is based on the type of the editor
2061
1807
  */
2062
-
2063
-
2064
1808
  InCellEditingPlugin.prototype._getValue = function (inputElement) {
2065
1809
  var inputTag = inputElement.tagName.toLowerCase();
2066
1810
  var typeMap = InCellEditingPlugin._uiElementTypesMap;
2067
-
2068
1811
  if (inputTag === typeMap.checkbox) {
2069
1812
  return inputElement.checked ? true : false;
2070
1813
  } else if (inputTag === typeMap.date) {
@@ -2073,23 +1816,20 @@ InCellEditingPlugin.prototype._getValue = function (inputElement) {
2073
1816
  ) {
2074
1817
  return +inputElement.value;
2075
1818
  }
2076
-
2077
1819
  return this._getText(inputElement);
2078
1820
  };
1821
+
2079
1822
  /** Use to clear text in text editor.
2080
1823
  * @public
2081
1824
  */
2082
-
2083
-
2084
1825
  InCellEditingPlugin.prototype.clearText = function () {
2085
1826
  this.setText("");
2086
1827
  };
1828
+
2087
1829
  /** Use to append text in text editor. WARNING: Only works with the text type editor
2088
1830
  * @public
2089
1831
  * @param {string} word
2090
1832
  */
2091
-
2092
-
2093
1833
  InCellEditingPlugin.prototype.appendText = function (word) {
2094
1834
  // TODO: since we have inputElement per each column
2095
1835
  // we should receive column index to return append text in specific column
@@ -2097,58 +1837,52 @@ InCellEditingPlugin.prototype.appendText = function (word) {
2097
1837
  this._activeInCellCache["inputElement"].value += word;
2098
1838
  }
2099
1839
  };
1840
+
2100
1841
  /** Commit text will set text and commit to cell.
2101
1842
  * @public
2102
1843
  * @param {string=} word
2103
1844
  */
2104
-
2105
-
2106
1845
  InCellEditingPlugin.prototype.commitText = function (word) {
2107
1846
  if (word) {
2108
1847
  this.setText(word);
2109
1848
  }
2110
-
2111
1849
  this._commitText(true);
2112
1850
  };
1851
+
2113
1852
  /** Get Balloon Popup Element to access any API provided.
2114
1853
  * @public
2115
1854
  * @return {Popup|null}
2116
1855
  */
2117
-
2118
-
2119
1856
  InCellEditingPlugin.prototype.getBalloonPopup = function () {
2120
1857
  // TODO: since we have balloonPopup per each column
2121
1858
  // we should receive column index to return balloonPopup in specific column
2122
1859
  return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
2123
1860
  };
1861
+
2124
1862
  /** Get ef-autosuggest or atlas-autosuggest
2125
1863
  * @public
2126
1864
  * @return {Element}
2127
1865
  */
2128
-
2129
-
2130
1866
  InCellEditingPlugin.prototype.getAutoSuggest = function () {
2131
1867
  return this._autoSuggest;
2132
1868
  };
1869
+
2133
1870
  /**
2134
1871
  * @public
2135
1872
  * @param {boolean=} disabled
2136
1873
  * @return {boolean} previous disablingScroll status
2137
1874
  */
2138
-
2139
-
2140
1875
  InCellEditingPlugin.prototype.setDisablingScroll = function (disabled) {
2141
1876
  var prev = disabled;
2142
1877
  this._disablingScroll = disabled;
2143
1878
  return prev;
2144
1879
  };
1880
+
2145
1881
  /** stop scrolling to move to prevent editor close
2146
1882
  * @private
2147
1883
  * @param {Object} grid grid instance
2148
1884
  * @param {boolean=} frozen
2149
1885
  */
2150
-
2151
-
2152
1886
  InCellEditingPlugin.prototype._freezeScrolling = function (grid, frozen) {
2153
1887
  if (!grid) return;
2154
1888
  var vs = grid.getVScrollbar();
@@ -2156,76 +1890,58 @@ InCellEditingPlugin.prototype._freezeScrolling = function (grid, frozen) {
2156
1890
  vs && vs.freezeScrolling(frozen);
2157
1891
  hs && hs.freezeScrolling(frozen);
2158
1892
  };
1893
+
2159
1894
  /** Set a timer to call onUpdateEditorPopup only once to avoid performance issue
2160
1895
  * @public
2161
1896
  */
2162
-
2163
-
2164
1897
  InCellEditingPlugin.prototype.requestShowEditorPopup = function () {
2165
1898
  if (!this._editorTimerId) {
2166
1899
  this._editorTimerId = setTimeout(this._onUpdateEditorPopup.bind(this), 100);
2167
1900
  }
2168
1901
  };
2169
- /** @private */
2170
-
2171
1902
 
1903
+ /** @private */
2172
1904
  InCellEditingPlugin.prototype._onUpdateEditorPopup = function () {
2173
1905
  this._editorTimerId = 0;
2174
-
2175
1906
  var grid = this.getActiveGrid() || this._lastActiveGrid;
2176
-
2177
1907
  if (!grid) {
2178
1908
  return;
2179
1909
  }
2180
-
2181
1910
  var parentElement = document.body;
2182
-
2183
1911
  if (this._compositeGrid || this._realTimeGrid) {
2184
1912
  parentElement = grid.getElement().parentElement;
2185
1913
  }
2186
-
2187
1914
  if (this._activeInCellCache) {
2188
1915
  var activePos = this._activePos;
2189
-
2190
1916
  if (activePos) {
2191
1917
  var section = grid.getSection(activePos["sectionType"]);
2192
1918
  var cell = section.getCell(activePos["colIndex"], activePos["rowIndex"]);
2193
-
2194
1919
  if (cell) {
2195
1920
  var popup = this._activeInCellCache["balloonPopup"];
2196
1921
  popup.attachTo(cell.getElement());
2197
1922
  popup.show(true, parentElement);
2198
-
2199
1923
  this._updateEditorPopup(this._activeInCellCache, cell, grid);
2200
1924
  }
2201
1925
  }
2202
1926
  } else if (this._activeRowId) {
2203
1927
  var sectionContent = grid.getSection("content");
2204
-
2205
1928
  var rowIndex = this._getRowIndex(this._activeRowId);
2206
-
2207
1929
  if (sectionContent.isRowVisible(rowIndex)) {
2208
1930
  var lastIndex = (sectionContent.getColumnCount() || 0) - 1;
2209
-
2210
1931
  for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
2211
1932
  var columnData = this._getColumnData(columnIndex, grid);
2212
-
2213
1933
  var inCellCache = columnData["inCellCache"];
2214
1934
  var cellContent = sectionContent.getCell(columnIndex, rowIndex);
2215
-
2216
1935
  if (!inCellCache || !cellContent) {
2217
1936
  continue;
2218
1937
  }
2219
-
2220
1938
  var popupCache = inCellCache["balloonPopup"];
2221
1939
  popupCache.attachTo(cellContent.getElement());
2222
1940
  popupCache.show(true, parentElement);
2223
-
2224
1941
  this._updateEditorPopup(inCellCache, cellContent, grid);
2225
1942
  }
2226
1943
  }
2227
1944
  }
2228
-
2229
1945
  grid.focus();
2230
1946
  };
2231
1947
  /** Update editor popup position and styles
@@ -2234,8 +1950,6 @@ InCellEditingPlugin.prototype._onUpdateEditorPopup = function () {
2234
1950
  * @param {Object} cell
2235
1951
  * @param {Object} grid grid instance
2236
1952
  */
2237
-
2238
-
2239
1953
  InCellEditingPlugin.prototype._updateEditorPopup = function (contentEditor, cell, grid) {
2240
1954
  var popup = contentEditor["balloonPopup"];
2241
1955
  var editor = contentEditor["editor"];
@@ -2254,10 +1968,8 @@ InCellEditingPlugin.prototype._updateEditorPopup = function (contentEditor, cell
2254
1968
  var displayStyle = "inline-block";
2255
1969
  var marginLeft = 0;
2256
1970
  var marginTop = 0;
2257
-
2258
1971
  if (colRect.leftPinnedIndex != -1) {
2259
1972
  var diff = 0;
2260
-
2261
1973
  if (grid.getVScrollbar().isActive()) {
2262
1974
  diff -= 8; // If column is left pinned, scrollbar width need to be subtracted
2263
1975
  }
@@ -2266,7 +1978,6 @@ InCellEditingPlugin.prototype._updateEditorPopup = function (contentEditor, cell
2266
1978
  offsetWidth += diff;
2267
1979
  offsetLeft += diff;
2268
1980
  }
2269
-
2270
1981
  if (editor.classList.contains("balloon") && !this._activeRowId) {
2271
1982
  popupElem.style.display = "";
2272
1983
  editor.style.width = "";
@@ -2276,45 +1987,39 @@ InCellEditingPlugin.prototype._updateEditorPopup = function (contentEditor, cell
2276
1987
  marginTop = -4;
2277
1988
  newWidth = popup.getElement().offsetWidth;
2278
1989
  }
2279
-
2280
1990
  if (!pos["hit"]) {
2281
1991
  displayStyle = "none";
2282
1992
  } else {
2283
1993
  var acquiredWidth = pos["x"] + newWidth;
2284
- var acquiredHeight = pos["y"] - offsetTop + newHeight; // Left overflow
1994
+ var acquiredHeight = pos["y"] - offsetTop + newHeight;
2285
1995
 
1996
+ // Left overflow
2286
1997
  if (pos["x"] < offsetLeft) {
2287
1998
  newWidth = newWidth - (offsetLeft - pos["x"]);
2288
1999
  marginLeft = marginLeft + Math.abs(pos["x"] - offsetLeft);
2289
- } // Right overflow
2290
-
2291
-
2000
+ }
2001
+ // Right overflow
2292
2002
  if (acquiredWidth > offsetWidth) {
2293
2003
  newWidth = newWidth - (acquiredWidth - offsetWidth);
2294
- } // Top overflow
2295
-
2296
-
2004
+ }
2005
+ // Top overflow
2297
2006
  if (pos["y"] < offsetTop) {
2298
2007
  newHeight = newHeight + pos["y"] - offsetTop;
2299
2008
  marginTop = marginTop + Math.abs(pos["y"] - offsetTop);
2300
- } // Bottom overflow
2301
-
2302
-
2009
+ }
2010
+ // Bottom overflow
2303
2011
  if (acquiredHeight > offsetHeight) {
2304
2012
  newHeight = newHeight - (acquiredHeight - offsetHeight);
2305
2013
  }
2306
-
2307
2014
  if (newWidth < 48 && newWidth != width || newHeight < 16 && newHeight != height) {
2308
2015
  displayStyle = "none";
2309
2016
  }
2310
2017
  }
2311
-
2312
2018
  popupElem.style.display = displayStyle;
2313
2019
  editor.style.width = newWidth ? newWidth + "px" : "";
2314
2020
  editor.style.height = newHeight ? newHeight + "px" : "";
2315
2021
  editor.style.marginLeft = marginLeft ? marginLeft + "px" : 0;
2316
2022
  editor.style.marginTop = marginTop ? marginTop + "px" : 0;
2317
2023
  };
2318
-
2319
2024
  export default InCellEditingPlugin;
2320
2025
  export { InCellEditingPlugin, InCellEditingPlugin as InCellEditing, InCellEditingPlugin as InCellEditingExtension };