mindmup / editable-table

tiny jQuery/Bootstrap widget that makes a HTML table editable
MIT License
686 stars 324 forks source link

[Enhancement] Additional Events #7

Open erobertson42 opened 10 years ago

erobertson42 commented 10 years ago

This is an enhancement rather than an issue/bug, but I'm not too familiar with GitHub, and I didn't know if there was a better way to submit this. Anyway, I had a need for a few custom events, so I figured I'd share :smile:. I've only done some quick testing so far, but everything looks to be in order.

I added editstart, which triggers when you focus a table cell and the editor appears, editend triggers when the editor is blurred and hidden, and editcancel triggers when you cancel editing by hitting ESC. Naturally, when cancelling (ESC), the editcancel and editend events will both trigger - editcancel goes first.

For the editend and editcancel events, the called function is passed a reference to the event and the table cell DOM element. The editstart function is passed the event, the table cell DOM element, and the editor input DOM element.

EDIT: I also updated the arguments that are passed to the called function for the change event. The previous ones remain the same (event, new value), but I added a third argument that contains the old cell value. This allows easy comparisons between the old and new values.

--- mindmup-editabletable.js        Thu May 01 15:28:56 2014
+++ mindmup-editabletable-new.js    Mon May 05 15:07:32 2014
@@ -27,6 +27,12 @@
                        editor.select();
                    }
                }
+               active.trigger('editstart', [active[0], editor[0]]);
+           },
+           hideEditor = function () {
+               setActiveText();
+               editor.hide();
+               active.trigger('editend', active);
            },
            setActiveText = function () {
                var text = editor.val(),
@@ -36,7 +42,7 @@
                    return true;
                }
                originalContent = active.html();
-               active.text(text).trigger(evt, text);
+               active.text(text).trigger(evt, [text, originalContent]);
                if (evt.result === false) {
                    active.html(originalContent);
                }
@@ -54,20 +60,19 @@
                return [];
            };
        editor.blur(function () {
-           setActiveText();
-           editor.hide();
+           hideEditor();
        }).keydown(function (e) {
            if (e.which === ENTER) {
-               setActiveText();
-               editor.hide();
+               editor.blur();
                active.focus();
                e.preventDefault();
                e.stopPropagation();
            } else if (e.which === ESC) {
+               active.trigger('editcancel', active);
                editor.val(active.text());
                e.preventDefault();
                e.stopPropagation();
-               editor.hide();
+               editor.blur();
                active.focus();
            } else if (e.which === TAB) {
                active.focus();