LP#1560601 - Prevent tab changing focus & return to scanbox on click user/mccanna/lp1560601-selfcheck-keep-focus-signoff
authorJosh Stompro <stompro@stompro.org>
Fri, 13 Sep 2019 20:40:08 +0000 (15:40 -0500)
committerTerran McCanna <tmccanna@georgialibraries.org>
Thu, 17 Oct 2019 18:56:59 +0000 (14:56 -0400)
Web based self check - prevent the tab key from moving the focus away from
the barcode scan box.  Always return focus to the scan box after click.

This is to prevent a bump of the keyboard or an errant touch of the touch
screen from failing the next barcode scan.

Signed-off-by: Josh Stompro <stompro@stompro.org>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Open-ILS/src/templates/circ/selfcheck/banner.tt2
Open-ILS/web/css/skin/default/selfcheck.css
Open-ILS/web/js/ui/default/circ/selfcheck/selfcheck.js

index baf12e4..6c7af5a 100644 (file)
@@ -8,6 +8,7 @@
     <div id='oils-selfck-scan-text'></div>
     <br/>
     <input jsId='selfckScanBox' dojoType='dijit.form.TextBox'/>
+    <a id='oils-selfck-dummy-a' href=''>.</a>
     <br/>
     <br/>
 </div>
index 37b8dff..40f5f70 100644 (file)
@@ -22,6 +22,10 @@ body {
     font-weight:bold;
 }
 
+#oils-selfck-dummy-a {
+    color: #00593d;
+}
+
 #oils-selfck-user-banner {
     position:fixed;
     top:30px;
index 9182e44..9969460 100644 (file)
@@ -88,6 +88,27 @@ function selfckLogoutWarning() {
     );
 }
 
+var tabEventHandler;
+var htmlClickHandler;
+
+//Disable tab by always returning to scan box when tab is pressed
+function disableTab() {
+   tabEventHandler = dojo.connect(document, "onkeyup", function(e) {
+     var code = (e.keyCode ? e.keyCode : e.which);
+     if (code == 9 ) {
+      selfckScanBox.focus();
+     }
+   });
+   //always focus back on scan box after a click, so we are always ready to scan.
+   htmlClickHandler = dojo.connect(dojo.byId('html'), "onclick", function() { selfckScanBox.focus(); });
+}
+
+//Enable tab by removing onkeyup event handler.
+function enableTab() {
+  dojo.disconnect(tabEventHandler);
+  dojo.disconnect(htmlClickHandler);
+}
+
 function SelfCheckManager() {
 
     this.cgi = new openils.CGI();
@@ -196,6 +217,7 @@ SelfCheckManager.prototype.init = function() {
                         function() {
                             self.updateFinesSummary();
                             self.drawFinesPage();
+                            disableTab(); //Disable tab once done
                         }
                     );
                 }
@@ -210,6 +232,8 @@ SelfCheckManager.prototype.init = function() {
     for(var id in linkHandlers) 
         dojo.connect(dojo.byId(id), 'onclick', linkHandlers[id]);
 
+    //Disable tab focus change to prevent errors.
+    disableTab();
 
     if(this.cgi.param('patron')) {
         
@@ -565,6 +589,7 @@ SelfCheckManager.prototype.drawCircPage = function() {
     openils.Util.show('oils-selfck-bottom-div');
     openils.Util.show('oils-selfck-circ-tbody', 'table-row-group');
     this.goToTab('checkout');
+    selfckScanBox.focus();
 
     while(this.itemsOutTbody.childNodes[0])
         this.itemsOutTbody.removeChild(this.itemsOutTbody.childNodes[0]);
@@ -624,6 +649,7 @@ SelfCheckManager.prototype.drawItemsOutPage = function() {
     openils.Util.hide('oils-selfck-circ-tbody');
 
     this.goToTab('items_out');
+    selfckScanBox.focus();
 
     while(this.itemsOutTbody.childNodes[0])
         this.itemsOutTbody.removeChild(this.itemsOutTbody.childNodes[0]);
@@ -694,6 +720,8 @@ SelfCheckManager.prototype.goToTab = function(name) {
             break;
         case 'payment':
             openils.Util.show('oils-selfck-payment-page');
+            enableTab();
+            dojo.byId("dijit_form_TextBox_1").focus(); //Focus on first payment field.
             break;
     }
 }
@@ -791,6 +819,7 @@ SelfCheckManager.prototype.drawHoldsPage = function() {
     // this.updateScanBox(...)
 
     this.goToTab('holds');
+    selfckScanBox.focus();
 
     this.holdTbody = dojo.byId('oils-selfck-hold-tbody');
     if(!this.holdTemplate)
@@ -1505,7 +1534,7 @@ SelfCheckManager.prototype.printHoldsReceipt = function(callback) {
 
             //get pickup library info
             var pu = fieldmapper.standardRequest(['open-ils.actor','open-ils.actor.org_unit.retrieve'],[null,data.hold.pickup_lib()]);
-            
+
             if(data.status == 4) {
                 holdData.push({
                     ready : true,