diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 5da51e8ae5..1dfdeb9fa6 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -215,10 +215,13 @@ drupal.form: version: VERSION js: misc/form.js: {} + misc/offset/fragment.js: {} + misc/offset/html5forms.js: {} dependencies: - core/jquery - core/drupal - core/drupal.debounce + - core/drupal.displace - core/jquery.cookie - core/jquery.once diff --git a/core/misc/offset/fragment.es6.js b/core/misc/offset/fragment.es6.js new file mode 100644 index 0000000000..b2aac4f862 --- /dev/null +++ b/core/misc/offset/fragment.es6.js @@ -0,0 +1,26 @@ +/** + * @file + * Offsets the window to allow fragments navigation with fixed positioning elements. + */ +(function ($, Drupal, displace) { + + "use strict"; + + function adjustOffset () { + var hash = window.location.hash; + if (hash) { + var element = document.getElementById(hash.replace('#', '')); + if (element) { + // Display the element in the viewport. + setTimeout(function () { + window.scrollTo(0, $(element).offset().top - displace.offsets.top); + }, 5); + } + } + } + + // Checks for a fragment on page load, outside Drupal behaviors. + Drupal.behaviors.adjustOffset = { attach: adjustOffset }; + $(window).on('hashchange', adjustOffset); + +})(jQuery, Drupal, Drupal.displace); diff --git a/core/misc/offset/fragment.js b/core/misc/offset/fragment.js new file mode 100644 index 0000000000..53e6984732 --- /dev/null +++ b/core/misc/offset/fragment.js @@ -0,0 +1,26 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ + +(function ($, Drupal, displace) { + + "use strict"; + + function adjustOffset() { + var hash = window.location.hash; + if (hash) { + var element = document.getElementById(hash.replace('#', '')); + if (element) { + setTimeout(function () { + window.scrollTo(0, $(element).offset().top - displace.offsets.top); + }, 5); + } + } + } + + Drupal.behaviors.adjustOffset = { attach: adjustOffset }; + $(window).on('hashchange', adjustOffset); +})(jQuery, Drupal, Drupal.displace); \ No newline at end of file diff --git a/core/misc/offset/html5forms.es6.js b/core/misc/offset/html5forms.es6.js new file mode 100644 index 0000000000..32e0d33154 --- /dev/null +++ b/core/misc/offset/html5forms.es6.js @@ -0,0 +1,13 @@ +/** + * @file + * Focus the HTML5 validation error in view. + */ +(function (displace) { + + "use strict"; + + document.addEventListener('invalid', function (event) { + setTimeout(function () { window.scrollBy(0, -displace.offsets.top); }, 5); + }, true); + +})(Drupal.displace); diff --git a/core/misc/offset/html5forms.js b/core/misc/offset/html5forms.js new file mode 100644 index 0000000000..2e985e18eb --- /dev/null +++ b/core/misc/offset/html5forms.js @@ -0,0 +1,17 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ + +(function (displace) { + + "use strict"; + + document.addEventListener('invalid', function (event) { + setTimeout(function () { + window.scrollBy(0, -displace.offsets.top); + }, 5); + }, true); +})(Drupal.displace); \ No newline at end of file