diff --git a/js/misc/vertical-tabs.js b/js/misc/vertical-tabs.js index 0085c4db7f95a117c69aaeb38edb91ec4b0c83ab..83cfec446da94836d42af3c0dcf6c3b8ffb9b477 100644 --- a/js/misc/vertical-tabs.js +++ b/js/misc/vertical-tabs.js @@ -6,6 +6,23 @@ (function ($, window, Drupal, drupalSettings) { "use strict"; + /** + * Show the parent vertical tab pane of a targeted page fragment. + * + * In order to make sure a targeted element inside a vertical tab pane is + * visible on a hash change or fragment link click, show all parent panes. + * + * @param {jQuery.Event} e + * The event triggered. + * @param {jQuery} $target + * The targeted node as a jQuery object. + */ + var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) { + $target.parents('.vertical-tabs-pane').each(function (index, pane) { + $(pane).data('verticalTab').focus(); + }); + }; + /** * This script transforms a set of details into a stack of vertical * tabs. Another tab pane can be selected by clicking on the respective @@ -26,6 +43,11 @@ return; } + /** + * Binds a listener to handle fragment link clicks and URL hash changes. + */ + $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange); + $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () { var $this = $(this).addClass('tab-content vertical-tabs-panes');