diff --git a/mindmup-editabletable.js b/mindmup-editabletable.js index 36be540..95f44e8 100644 --- a/mindmup-editabletable.js +++ b/mindmup-editabletable.js @@ -2,19 +2,23 @@ $.fn.editableTableWidget = function (options) { 'use strict'; return $(this).each(function () { + if(!$.isArray(options.editor))options.editor=[options.editor]; var buildDefaultOptions = function () { var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions); - opts.editor = opts.editor.clone(); + opts.editor = [opts.editor.clone()]; return opts; }, activeOptions = $.extend(buildDefaultOptions(), options), ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9, element = $(this), - editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()), + editors = activeOptions.editor, + editor, active, showEditor = function (select) { - active = element.find('td:focus'); + active = element.find('td:not([noedit]):focus'); if (active.length) { + var index = active.index(); + editor = (editors[index]) ? editors[index] : editors[0]; editor.val(active.text()) .removeClass('error') .show() @@ -41,54 +45,64 @@ $.fn.editableTableWidget = function (options) { active.html(originalContent); } }, - movement = function (element, keycode) { - if (keycode === ARROW_RIGHT) { + movement = function (element, keycode, start, end) { + start = (typeof start === 'undefined') ? true : start; + end = (typeof end === 'undefined') ? true : end; + if (keycode === ARROW_RIGHT && end) { return element.next('td'); - } else if (keycode === ARROW_LEFT) { + } else if (keycode === ARROW_LEFT && start) { return element.prev('td'); - } else if (keycode === ARROW_UP) { + } else if (keycode === ARROW_UP && start) { return element.parent().prev().children().eq(element.index()); - } else if (keycode === ARROW_DOWN) { + } else if (keycode === ARROW_DOWN && end) { return element.parent().next().children().eq(element.index()); } return []; }; - editor.blur(function () { - setActiveText(); - editor.hide(); - }).keydown(function (e) { - if (e.which === ENTER) { + $.each(editors,function(key,ed){ + ed.blur(function () { setActiveText(); editor.hide(); - active.focus(); - e.preventDefault(); - e.stopPropagation(); - } else if (e.which === ESC) { - editor.val(active.text()); - e.preventDefault(); - e.stopPropagation(); - editor.hide(); - active.focus(); - } else if (e.which === TAB) { - active.focus(); - } else if (this.selectionEnd - this.selectionStart === this.value.length) { - var possibleMove = movement(active, e.which); - if (possibleMove.length > 0) { - possibleMove.focus(); + }).keydown(function (e) { + if (e.which === ENTER) { + setActiveText(); + editor.hide(); + active.focus(); + e.preventDefault(); + e.stopPropagation(); + } else if (e.which === ESC) { + editor.val(active.text()); e.preventDefault(); e.stopPropagation(); + editor.hide(); + active.focus(); + } else if (e.which === TAB) { + active.focus(); + } else { + var possibleMove = movement( + active, + e.which, + this.selectionEnd===0, + this.selectionStart===this.value.length + ); + if (possibleMove.length > 0) { + possibleMove.focus(); + e.preventDefault(); + e.stopPropagation(); + } } - } - }) - .on('input paste', function () { - var evt = $.Event('validate'); - active.trigger(evt, editor.val()); - if (evt.result === false) { - editor.addClass('error'); - } else { - editor.removeClass('error'); - } + }) + .on('input paste', function () { + var evt = $.Event('validate'); + active.trigger(evt, editor.val()); + if (evt.result === false) { + editor.addClass('error'); + } else { + editor.removeClass('error'); + } + }); }); + element.on('click keypress dblclick', showEditor) .css('cursor', 'pointer') .keydown(function (e) { @@ -112,6 +126,10 @@ $.fn.editableTableWidget = function (options) { element.find('td').prop('tabindex', 1); + $.each(editors,function(key,ed){ + ed.css('position', 'absolute').hide().appendTo(element.parent()); + }); + $(window).on('resize', function () { if (editor.is(':visible')) { editor.offset(active.offset())