diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js index c7ad2fd..c213b59 100644 --- a/core/misc/vertical-tabs.js +++ b/core/misc/vertical-tabs.js @@ -114,13 +114,21 @@ */ Drupal.verticalTab = function (settings) { var self = this; + // Get the ID of the tab pane element. + var detailsId = settings.details.attr('id'); + var currentUrl = window.location.href.split('#')[0]; $.extend(this, settings, Drupal.theme('verticalTab', settings)); - this.link.attr('href', '#' + settings.details.attr('id')); + this.link.attr('href', '#' + detailsId); this.link.on('click', function (e) { e.preventDefault(); self.focus(); + var yScroll = document.body.scrollTop; + // Update the URL bar with the hash. + window.location.replace(currentUrl + '#' + detailsId); + // Prevent the page from scrolling when the URL is replaced. + document.body.scrollTop = yScroll; }); // Keyboard events added: @@ -129,6 +137,11 @@ if (event.keyCode === 13) { event.preventDefault(); self.focus(); + var yScroll = document.body.scrollTop; + // Update the URL bar with the hash. + window.location.replace(currentUrl + '#' + detailsId); + // Prevent the page from scrolling when the URL is replaced. + document.body.scrollTop = yScroll; // Set focus on the first input field of the visible details/tab pane. $('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus'); } diff --git a/core/modules/node/node.js b/core/modules/node/node.js index 98af6fd..9a795be 100644 --- a/core/modules/node/node.js +++ b/core/modules/node/node.js @@ -83,4 +83,38 @@ } }; + /** + * Updates the URL to have the ID of a details element on click/keydown. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Attaches the behavior for URL hash updates for tabs in the node edit form. + */ + Drupal.behaviors.nodeDetailsUpdateHash = { + attach: function (context) { + var details = $(context).find('details'); + var detailsId = details.attr('id'); + var currentUrl = window.location.href.split('#')[0]; + + details.on('click', function (e) { + var yScroll = document.body.scrollTop; + // Update the URL bar with the hash. + window.location.replace(currentUrl + '#' + detailsId); + // Prevent the page from scrolling when the URL is replaced. + document.body.scrollTop = yScroll; + }); + + details.on('keydown', function (event) { + // Pressing the Enter key will open the tab pane. + if (event.keyCode === 13) { + var yScroll = document.body.scrollTop; + // Update the URL bar with the hash. + window.location.replace(currentUrl + '#' + detailsId); + // Prevent the page from scrolling when the URL is replaced. + document.body.scrollTop = yScroll; + }); + } + }; + })(jQuery, Drupal, drupalSettings);