Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

Add TAB between field behavior option #652

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add option for tabToNext that listens for TAB or SHIFT+TAB and moves …
…to other editable fields on the same line
keymarkstuart committed Sep 17, 2018
commit 607664c473b84519a172c7ef0417c12b16d454f4
77 changes: 55 additions & 22 deletions src/scripts/mdEditDialog.js
Original file line number Diff line number Diff line change
@@ -27,7 +27,9 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
/* jshint validthis: true */

var ESCAPE = 27;

var TAB = 9;
var nextEl = null;
var prevEl = null;
var busy = false;
var body = angular.element($document.prop('body'));

@@ -46,7 +48,8 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
clickOutsideToClose: true,
disableScroll: true,
escToClose: true,
focusOnOpen: true
focusOnOpen: true,
tabToNext: true
};

function build(template, options) {
@@ -79,10 +82,10 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
});
}

if(options.escToClose) {
escToClose(element);
if(options.escToClose || options.tabToNext) {
manageKeyDownEvents(options, element, scope);
}

element.on('$destroy', function () {
busy = false;
backdrop.remove();
@@ -169,34 +172,64 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
busy = false;
console.error(error);
}

function escToClose(element) {
var keyup = function (event) {
if(event.keyCode === ESCAPE) {
element.remove();
}
function manageKeyDownEvents(options, element, scope) {
var keydown = function (event) {
if(options.escToClose) {
if(event.keyCode === ESCAPE) {
element.remove();
}
}
if (options.tabToNext) {
if (event.keyCode === TAB) {
event.preventDefault();
scope.submit();
element.remove();
if (event.shiftKey && prevEl) {
prevEl.click();
}
else if (nextEl) {
nextEl.click();
}
}
}
};
body.on('keyup', keyup);

body.on('keydown', keydown);

element.on('$destroy', function () {
body.off('keyup', keyup);
body.off('keydown', keydown);
});
}

function focusOnOpen(element) {
$mdUtil.nextTick(function () {
function focusOnOpen(element) {
$mdUtil.nextTick(function () {
var autofocus = $mdUtil.findFocusTarget(element);

if(autofocus) {
autofocus.focus();
}
}, false);
if(autofocus) {
autofocus.focus();
}
}, false);
}

function getClickableSibling(el,prev) {
while (el!==null) {
if (el.classList) {
for (var classnum in el.classList) {
if (el.classList[classnum]==='md-clickable') {
return el;
}
}
}
el = prev===true ? el.previousSibling: el.nextSibling;
}
return null;
}

function positionDialog(element, target) {
var table = angular.element(target).controller('mdCell').getTable();

prevEl = getClickableSibling(target.previousSibling,true);
nextEl = getClickableSibling(target.nextSibling,false);

var getHeight = function () {
return element.prop('clientHeight');
};