LP#1862235 - Create MARC Record - focus on item add and call number
authorJosh Stompro <stompro@stompro.org>
Mon, 10 Feb 2020 16:15:02 +0000 (10:15 -0600)
committerJosh Stompro <stompro@stompro.org>
Mon, 10 Feb 2020 16:15:02 +0000 (10:15 -0600)
This change sets the focus on the "Add Item" checkbox when the marc editor
is opened with fast item add enabled.  This allows the user to just press space
to enable Add item.

When the add item checkbox is enabled, the focus is moved to the call number field.

This adds a directive to app.js called focusOnShow that makes it easy
to mark an element to have focus when it becomes visible when using ng-show.

I had to add in a bit of redundancy in t_marcedit.tt2, the Add Item checkbox
needs to have it's own ng-show directive for the focus-on-show to work.

Signed-off-by: Josh Stompro <stompro@stompro.org>
Open-ILS/src/templates/staff/cat/share/t_marcedit.tt2
Open-ILS/web/js/ui/default/staff/cat/catalog/app.js

index 5ba7859..e52e7f1 100644 (file)
@@ -1,10 +1,10 @@
 <div>
   <div ng-show="bre && fastAdd" class="row pad-vert marcfastitemadd">
     <div class="col-md-2">
-      <label><input type="checkbox" ng-model="enable_fast_add"/> [% l('Add Item') %]</label>
+      <label><input ng-show="bre && fastAdd" type="checkbox" ng-model="enable_fast_add" focus-on-show/> [% l('Add Item') %]</label>
     </div>
     <div class="col-md-2">
-      <input id="mfiacn" class="form-control" ng-show="enable_fast_add" type="text" placeholder="[% l('Call Number') %]" ng-model="fast_item_callnumber"/>
+      <input id="mfiacn" class="form-control" ng-show="enable_fast_add" type="text" placeholder="[% l('Call Number') %]" ng-model="fast_item_callnumber" focus-on-show/>
     </div>
     <div class="col-md-2">
       <input id="mfiabc" class="form-control" ng-show="enable_fast_add" type="text" placeholder="[% l('Barcode') %]" ng-model="fast_item_barcode"/>
index c3ecb17..ad7f57e 100644 (file)
@@ -283,6 +283,33 @@ function($scope , $routeParams , $location , $window , $q , egCore) {
     };
 })
 
+.directive('focusOnShow', function($timeout) {
+    return {
+        restrict: 'A',
+        link: function($scope, $element, $attr) {
+            if ($attr.ngShow){
+                $scope.$watch($attr.ngShow, function(newValue){
+                    if(newValue){
+                        $timeout(function(){
+                            $element[0].focus();
+                        }, 0);
+                    }
+                })
+            }
+            if ($attr.ngHide){
+                $scope.$watch($attr.ngHide, function(newValue){
+                    if(!newValue){
+                        $timeout(function(){
+                            $element[0].focus();
+                        }, 0);
+                    }
+                })
+            }
+
+        }
+    };
+})
+
 .controller('CatalogCtrl',
        ['$scope','$routeParams','$location','$window','$q','egCore','egHolds','egCirc','egConfirmDialog','ngToast',
         'egGridDataProvider','egHoldGridActions','egProgressDialog','$timeout','$uibModal','holdingsSvc','egUser','conjoinedSvc',