webstaff: automatically advance focus in MARC editor

Upon completing a tag, indicator, or subfield code
input, focus will now automatically advance to the next
input, allowing users to enter records with less need
to use the tab button.

Signed-off-by: Galen Charlton <gmc@esilibrary.com>

diff --git a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
index 64a185a..c295207 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
@@ -65,7 +65,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
             contextItemGenerator: '=',
             max: '@',
             itype: '@',
-            selectOnFocus: '='
+            selectOnFocus: '=',
+            advanceFocusAfterInput: '='
         },
         controller : ['$scope',
             function ( $scope ) {
@@ -148,6 +149,35 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                 element.bind('focus', function () { element.select() });
             }
 
+            function findCaretTarget(id, itype) {
+                var tgt = null;
+                if (itype == 'tag') {
+                    tgt = id.replace(/tag$/, 'i1');
+                } else if (itype == 'ind') {
+                    if (id.match(/i1$/)) {
+                        tgt = id.replace(/i1$/, 'i2');
+                    } else if (id.match(/i2$/)) {
+                        tgt = id.replace(/i2$/, 's0code');
+                    }
+                } else if (itype == 'sfc') {
+                    tgt = id.replace(/code$/, 'value');
+                }
+                return tgt;
+            }
+            if (Boolean(scope.advanceFocusAfterInput)) {
+                element.bind('input', function (e) {
+                    if (scope.content.length == scope.max) {
+                        var tgt = findCaretTarget(e.currentTarget.id, scope.itype);
+                        if (tgt) {
+                            var element = $('#' + tgt).get(0);
+                            if (element) {
+                                element.focus();
+                            }
+                        }
+                    }
+                });
+            }
+
             element.bind('change', function (e) { element.size = scope.max || parseInt(scope.content.length * 1.1) });
 
             element.bind('contextmenu', {scope : scope}, scope.showContext);
@@ -300,6 +330,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                         '>‡</label><eg-marc-edit-editable '+
                         'itype="sfc" '+
                         'select-on-focus="true" '+
+                        'advance-focus-after-input="true" '+
                         'class="marcedit marcsf marcsfcode" '+
                         'field="field" '+
                         'subfield="subfield" '+
@@ -344,6 +375,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                       'itype="ind" '+
                       'class="marcedit marcind" '+
                       'select-on-focus="true" '+
+                      'advance-focus-after-input="true" '+
                       'field="field" '+
                       'content="ind" '+
                       'max="1" '+
@@ -372,6 +404,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                       'itype="tag" '+
                       'class="marcedit marctag" '+
                       'select-on-focus="true" '+
+                      'advance-focus-after-input="true" '+
                       'field="field" '+
                       'content="tag" '+
                       'max="3" '+