From 0e2ced94b0cafe76dba22f1589a764446be3c04d Mon Sep 17 00:00:00 2001 From: Austin Kurpuis Date: Mon, 2 Nov 2015 12:31:42 -0800 Subject: [PATCH 1/3] Added arrow_navigation config option Pass false on init to disable navigation by arrow keys --- mindmup-editabletable.js | 247 ++++++++++++++++++++------------------- 1 file changed, 124 insertions(+), 123 deletions(-) diff --git a/mindmup-editabletable.js b/mindmup-editabletable.js index 36be540..93dcf72 100644 --- a/mindmup-editabletable.js +++ b/mindmup-editabletable.js @@ -1,131 +1,132 @@ /*global $, window*/ $.fn.editableTableWidget = function (options) { - 'use strict'; - return $(this).each(function () { - var buildDefaultOptions = function () { - var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions); - 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()), - active, - showEditor = function (select) { - active = element.find('td:focus'); - if (active.length) { - editor.val(active.text()) - .removeClass('error') - .show() - .offset(active.offset()) - .css(active.css(activeOptions.cloneProperties)) - .width(active.width()) - .height(active.height()) - .focus(); - if (select) { - editor.select(); - } - } - }, - setActiveText = function () { - var text = editor.val(), - evt = $.Event('change'), - originalContent; - if (active.text() === text || editor.hasClass('error')) { - return true; - } - originalContent = active.html(); - active.text(text).trigger(evt, text); - if (evt.result === false) { - active.html(originalContent); - } - }, - movement = function (element, keycode) { - if (keycode === ARROW_RIGHT) { - return element.next('td'); - } else if (keycode === ARROW_LEFT) { - return element.prev('td'); - } else if (keycode === ARROW_UP) { - return element.parent().prev().children().eq(element.index()); - } else if (keycode === ARROW_DOWN) { - return element.parent().next().children().eq(element.index()); - } - return []; - }; - editor.blur(function () { - setActiveText(); - editor.hide(); - }).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 if (this.selectionEnd - this.selectionStart === this.value.length) { - var possibleMove = movement(active, e.which); - 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'); - } - }); - element.on('click keypress dblclick', showEditor) - .css('cursor', 'pointer') - .keydown(function (e) { - var prevent = true, - possibleMove = movement($(e.target), e.which); - if (possibleMove.length > 0) { - possibleMove.focus(); - } else if (e.which === ENTER) { - showEditor(false); - } else if (e.which === 17 || e.which === 91 || e.which === 93) { - showEditor(true); - prevent = false; - } else { - prevent = false; - } - if (prevent) { - e.stopPropagation(); - e.preventDefault(); - } - }); + 'use strict'; + return $(this).each(function () { + var buildDefaultOptions = function () { + var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions); + 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()), + active, + showEditor = function (select) { + active = element.find('td:focus'); + if (active.length) { + editor.val(active.text()) + .removeClass('error') + .show() + .offset(active.offset()) + .css(active.css(activeOptions.cloneProperties)) + .width(active.width()) + .height(active.height()) + .focus(); + if (select) { + editor.select(); + } + } + }, + setActiveText = function () { + var text = editor.val(), + evt = $.Event('change'), + originalContent; + if (active.text() === text || editor.hasClass('error')) { + return true; + } + originalContent = active.html(); + active.text(text).trigger(evt, text); + if (evt.result === false) { + active.html(originalContent); + } + }, + movement = function (element, keycode) { + if (keycode === ARROW_RIGHT) { + return element.next('td'); + } else if (keycode === ARROW_LEFT) { + return element.prev('td'); + } else if (keycode === ARROW_UP) { + return element.parent().prev().children().eq(element.index()); + } else if (keycode === ARROW_DOWN) { + return element.parent().next().children().eq(element.index()); + } + return []; + }; + editor.blur(function () { + setActiveText(); + editor.hide(); + }).keydown(function (e) { + if(activeOptions.arrow_navigation === false) return; + 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 if (this.selectionEnd - this.selectionStart === this.value.length) { + var possibleMove = movement(active, e.which); + 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'); + } + }); + element.on('click keypress dblclick', showEditor) + .css('cursor', 'pointer') + .keydown(function (e) { + var prevent = true, + possibleMove = movement($(e.target), e.which); + if (possibleMove.length > 0) { + possibleMove.focus(); + } else if (e.which === ENTER) { + showEditor(false); + } else if (e.which === 17 || e.which === 91 || e.which === 93) { + showEditor(true); + prevent = false; + } else { + prevent = false; + } + if (prevent) { + e.stopPropagation(); + e.preventDefault(); + } + }); - element.find('td').prop('tabindex', 1); + element.find('td').prop('tabindex', 1); - $(window).on('resize', function () { - if (editor.is(':visible')) { - editor.offset(active.offset()) - .width(active.width()) - .height(active.height()); - } - }); - }); + $(window).on('resize', function () { + if (editor.is(':visible')) { + editor.offset(active.offset()) + .width(active.width()) + .height(active.height()); + } + }); + }); }; $.fn.editableTableWidget.defaultOptions = { - cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', - 'text-align', 'font', 'font-size', 'font-family', 'font-weight', - 'border', 'border-top', 'border-bottom', 'border-left', 'border-right'], - editor: $('') + cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', + 'text-align', 'font', 'font-size', 'font-family', 'font-weight', + 'border', 'border-top', 'border-bottom', 'border-left', 'border-right'], + editor: $(''), + arrow_navigation: true }; - From 6b9aa649ddbb7055702bda0fbfffe937d27adb5c Mon Sep 17 00:00:00 2001 From: Austin Kurpuis Date: Mon, 2 Nov 2015 12:41:46 -0800 Subject: [PATCH 2/3] Add some basic docs... --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 0ceb596..436be30 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,16 @@ Basic Usage See http://mindmup.github.com/editable-table/ + +Config Options +----------- +| Name | Effect | Type | Default | +|------------------|-----------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| arrow_navigation | Disables arrow key navigation on table. | Boolean | ```false``` | +| editor | Markup used for editor input. | Object | ```$('input')``` | +| cloneProperties | Styles cloned to editor when shown. | Array | ```['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',,'text-align', 'font', 'font-size', 'font-family', 'font-weight',,'border', 'border-top', 'border-bottom', 'border-left', 'border-right']``` | + + Dependencies ------------ * jQuery http://jquery.com/ From 6f6c22257dac67ffbd64649321c81be550fb942c Mon Sep 17 00:00:00 2001 From: Austin Kurpuis Date: Mon, 2 Nov 2015 13:18:10 -0800 Subject: [PATCH 3/3] Allow enter key when arrows nav is disabled --- mindmup-editabletable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mindmup-editabletable.js b/mindmup-editabletable.js index 93dcf72..fa194a2 100644 --- a/mindmup-editabletable.js +++ b/mindmup-editabletable.js @@ -57,7 +57,6 @@ $.fn.editableTableWidget = function (options) { setActiveText(); editor.hide(); }).keydown(function (e) { - if(activeOptions.arrow_navigation === false) return; if (e.which === ENTER) { setActiveText(); editor.hide(); @@ -73,6 +72,7 @@ $.fn.editableTableWidget = function (options) { } else if (e.which === TAB) { active.focus(); } else if (this.selectionEnd - this.selectionStart === this.value.length) { + if(activeOptions.arrow_navigation === false) return; var possibleMove = movement(active, e.which); if (possibleMove.length > 0) { possibleMove.focus();