Skip to content
This repository has been archived by the owner on Jul 24, 2019. It is now read-only.

More intuitive arrow navigation. #13

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

More intuitive arrow navigation. #13

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fbea89c
More intuitive arrow navigation.
gamekid Aug 27, 2014
e1b23a9
Accepts multiple editors and 'noedit' attribute
gamekid Sep 10, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
94 changes: 56 additions & 38 deletions mindmup-editabletable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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) {
Expand All @@ -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())
Expand Down