From e74f433418e4494c68e996c6d1061d485d67c49e Mon Sep 17 00:00:00 2001
From: Ere Maijala <ere.maijala@helsinki.fi>
Date: Fri, 13 Oct 2017 14:07:21 +0300
Subject: [PATCH] Bug 21362: Advanced editor: Fix tab navigation in fixed
 fields

Also minor tweaks to how the fields look.

Test plan:

1. Try moving from field to field and inside control fields with tab/shift-tab.
2. Make sure focus doesn't get stuck in any position.

Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
(cherry picked from commit 024643f51c4e0ca1803dd5013bb857e98cd924e5)
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../lib/koha/cateditor/widget.js              | 37 ++++++++++++++-----
 .../intranet-tmpl/prog/css/cateditor.css      |  5 ++-
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/lib/koha/cateditor/widget.js b/koha-tmpl/intranet-tmpl/lib/koha/cateditor/widget.js
index 7ea3fc8489..bfb1ea1697 100644
--- a/koha-tmpl/intranet-tmpl/lib/koha/cateditor/widget.js
+++ b/koha-tmpl/intranet-tmpl/lib/koha/cateditor/widget.js
@@ -61,10 +61,11 @@ define( [ 'resources' ], function( Resources ) {
             // Fixed field utils
             bindFixed: function( sel, start, end ) {
                 var $node = $( this.node ).find( sel );
-                $node.val( this.getFixed( start, end ) );
+                var val = this.getFixed( start, end );
+                $node.val( val );
 
                 var widget = this;
-                var $collapsed = $( '<span class="fixed-collapsed" title="' + $node.attr('title') + '">' + $node.val() + '</span>' ).insertAfter( $node );
+                var $collapsed = $( '<span class="fixed-collapsed" title="' + $node.attr('title') + '">' + val + '</span>' ).insertAfter( $node );
 
                 function show() {
                     $collapsed.hide();
@@ -75,7 +76,8 @@ define( [ 'resources' ], function( Resources ) {
 
                 function hide() {
                     $node.hide();
-                    $collapsed.text( Widget.PadStringRight( $node.val(), end - start ) ).show();
+                    var val = $node.val();
+                    $collapsed.text( Widget.PadStringRight( val === null ? '' : val, end - start ) ).show();
                 }
 
                 $node.on( 'change keyup', function() {
@@ -92,6 +94,9 @@ define( [ 'resources' ], function( Resources ) {
             },
 
             setFixed: function( start, end, value, source ) {
+                if ( null === value ) {
+                    value = '';
+                }
                 this.setText( this.text.substring( 0, start ) + Widget.PadStringRight( value.toString().substr( 0, end - start ), end - start ) + this.text.substring( end ), source );
             },
 
@@ -118,6 +123,7 @@ define( [ 'resources' ], function( Resources ) {
 
                     $matSelect.change( function() {
                         widget.loadXMLMaterial( materialInfo[ $matSelect.val() ] );
+                        widget.nodeChanged();
                     } ).change();
                 } );
             },
@@ -169,11 +175,12 @@ define( [ 'resources' ], function( Resources ) {
 
                 $inputs.each( function( i ) {
                     $(this).on( 'keydown.marc-tab', function( e ) {
-                        // Cheap hack to disable backspace and special keys
-                        if ( ( this.nodeName.toLowerCase() == 'select' && e.which == 9 ) || e.ctrlKey ) {
-                            e.preventDefault();
-                            return;
-                        } else if ( e.which != 9 ) { // Tab
+                        // Handle tab/shift-tab
+                        if ( e.which != 9 ) { // 9 = Tab
+                            // Cheap hack to disable backspace and special keys
+                            if ( e.ctrlKey ) {
+                                e.preventDefault();
+                            }
                             return;
                         }
 
@@ -182,7 +189,12 @@ define( [ 'resources' ], function( Resources ) {
 
                         if ( e.shiftKey ) {
                             if ( i > 0 ) {
-                                $inputs.eq(i - 1).trigger( 'focus' );
+                                var $input = $inputs.eq( i - 1 );
+                                if ( $input.is( ':visible' ) ) {
+                                    $input.focus();
+                                } else {
+                                    $input.next('span').click();
+                                }
                             } else {
                                 editor.cm.setCursor( span.from );
                                 // FIXME: ugly hack
@@ -191,7 +203,12 @@ define( [ 'resources' ], function( Resources ) {
                             }
                         } else {
                             if ( i < $inputs.length - 1 ) {
-                                $inputs.eq(i + 1).trigger( 'focus' );
+                                var $input = $inputs.eq( i + 1 );
+                                if ( $input.is( ':visible' ) ) {
+                                    $input.focus();
+                                } else {
+                                    $input.next('span').click();
+                                }
                             } else {
                                 editor.cm.setCursor( span.to );
                                 editor.focus();
diff --git a/koha-tmpl/intranet-tmpl/prog/css/cateditor.css b/koha-tmpl/intranet-tmpl/prog/css/cateditor.css
index 6840d0c6a1..a691390bb6 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/cateditor.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/cateditor.css
@@ -125,7 +125,7 @@ body {
     font-family: inherit;
     line-height: 2.75;
     margin: 3px 0;
-    padding: 4px;
+    padding: 2px;
 }
 
 #editor .subfield-widget select, #editor .subfield-widget input {
@@ -139,6 +139,9 @@ body {
 
 #editor .fixed-widget input {
     width: 4em;
+    padding: 0;
+    border-radius: 2px;
+    border-width: 1px;
 }
 
 #editor .fixed-widget select {
-- 
2.39.5