jspreadsheet / ce

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
https://bossanova.uk/jspreadsheet/v4
MIT License
6.66k stars 818 forks source link

Custom-Editor: minor request + revisit old bug #1648

Open agordon opened 9 months ago

agordon commented 9 months ago

Hello,

First, thanks for developing and maintaining jspreadsheet, it is very awesome and extremely useful.

I'm working on integrating jspreadsheet with select2 as a custom-editor (will publish working code soon).

  1. I'd like to suggest/request a minor improvement regarding custom-editors: the ability to pass the DOM/JS event that triggered the custom-editor's openEditor function. This will enable making the user-experience much smoother. For example, if a user pressed "BACKSPACE", I can delete the cell's content instead of opening the custom-editor UI.

I have only limited understanding of jspreadsheet internals, but code changes seem minimal and not disruptive. I attach them here as a diff to index.js, but I understand that it could require changing other files.

diff --git a/src/index.js b/src/index.js
index c49572b..8e6030c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7583,18 +7583,18 @@ if (! formula && typeof(require) === 'function') {
                                             jexcel.current.setCheckRadioValue();
                                         } else {
                                             // Start edition
-                                            jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true);
+                                            jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true, e);
                                         }
                                     } else if (e.keyCode == 113) {
                                         // Start edition with current content F2
-                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], false);
+                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], false, e);
                                     } else if ((e.keyCode == 8) ||
                                                (e.keyCode >= 48 && e.keyCode <= 57) ||
                                                (e.keyCode >= 96 && e.keyCode <= 111) ||
                                                (e.keyCode >= 187 && e.keyCode <= 190) ||
                                                ((String.fromCharCode(e.keyCode) == e.key || String.fromCharCode(e.keyCode).toLowerCase() == e.key.toLowerCase()) && jexcel.validLetter(String.fromCharCode(e.keyCode)))) {
                                         // Start edition
-                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true);
+                                        jexcel.current.openEditor(jexcel.current.records[rowId][columnId], true, e);
                                         // Prevent entries in the calendar
                                         if (jexcel.current.options.columns[columnId].type == 'calendar') {
                                             e.preventDefault();
@@ -8222,7 +8222,7 @@ if (! formula && typeof(require) === 'function') {
                         }
                         var cell = getCellCoords(e.target);
                         if (cell && cell.classList.contains('highlight')) {
-                            jexcel.current.openEditor(cell);
+                            jexcel.current.openEditor(cell, false, e);
                         }
                     }
                 }

With these changes, the custom-editor function becomes:

   openEditor : function(cell, el, empty, event) {
      ...
    }

And then the event parameter can indicate why triggered opening the custom-editor.

  1. There's an old closed issue (#990 ) that relates to custom-editors, and I think I encountered the same issue: getValue and setValue are never called, even in the latest git version. A different function updateCell does get called, but it is undocumented.

An example of both of these issues is here: https://jsfiddle.net/1egbq690/2/

I'm happy to provide further details if needed.

Thanks! gordon