@refinitiv-ui/efx-grid 6.0.16 → 6.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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 };