Bug 26039: Focus and Scroll to ShelfBrowser on load

When the shelf browser link is clicked we perform a full page reload
which results in a reset in the context. We should immediately focus the
shelf browser and scroll to that region to highlight the change of
content.

Test plan
1/ Enable shelf browser
2/ Search for an item in the open and navigate to the detail page
3/ Click the 'Browse shelf' link
4/ Note that upon page reload the screen scrolls to the 'Browsing...'
location of the screen.
5/ Note that the 'Browsing...' title is  'focused'
6/ Signoff.

Signed-off-by: Stina Hallin <stina.hallin@ub.lu.se>

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

JD amended patch: correctly align JS code

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Martin Renvoize 2020-08-13 13:17:59 +01:00 committed by Jonathan Druart
parent 392a7e1a1f
commit 9708bbe276
2 changed files with 13 additions and 4 deletions

View file

@ -1,13 +1,13 @@
[% BLOCK shelfbrowser %]
[% IF OpenOPACShelfBrowser %]
<div id="shelfbrowser">
<h5 style="text-align: center;">
<h5 style="text-align: center;" tabindex="-1">
[%- IF ( starting_homebranch ) %]Browsing [% starting_homebranch | html %] shelves[% END -%]
[%- IF ( starting_homebranch && starting_location ) %], [% END %]
[%- IF ( starting_location ) %]Shelving location: [%- starting_location | html -%][% END -%]
[%- IF ( starting_homebranch && starting_ccode ) %], [% END %]
[%- IF ( starting_ccode ) %]Collection: [%- starting_ccode | html -%][% END -%]
<a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]" class="close_shelf" >Close shelf browser</a>
<a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]" class="close_shelf" >Close shelf browser<span class="hidden"> (Hides shelfbrowers)</span></a>
</h5>
<table class="table">

View file

@ -1249,9 +1249,9 @@
[% ITEM_RESULT.itemcallnumber | html %]
[% IF ( OPACShelfBrowser ) %]
[% IF ( ITEM_RESULT.itemnumber == starting_itemnumber ) %]
(<a class="close_shelf" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | html %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | html %]#[% tab | html %]">Browse shelf</a>)
(<a class="close_shelf" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | html %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | html %]#[% tab | html %]">Browse shelf<span class="hidden"> (Opens below)</span></a>)
[% ELSE %]
(<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | uri %]#[% tab | uri %]">Browse shelf</a>)
(<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber | uri %]#[% tab | uri %]">Browse shelf<span class="hidden"> (Opens below)</span></a>)
[% END %]
[% END %]
[% END %]
@ -1578,6 +1578,15 @@
[% END %]
[% IF ( OPACShelfBrowser ) %]
// Focus on shelf browser if present
var shelfbrowser = $("#shelfbrowser");
if (shelfbrowser.length > 0) {
$('html,body').animate({
scrollTop: shelfbrowser.first().offset().top
},
'slow');
shelfbrowser.first().find(':focusable').eq(0).focus();
}
(function prepareShelfBrowser(){