website/modules/contrib/webform/js/webform.scrolldfb4.js

93 lines
2.9 KiB
JavaScript
Raw Normal View History

2023-09-30 09:40:37 +02:00
/**
* @file
* JavaScript behaviors for webform scroll top.
*/
(function ($, Drupal) {
'use strict';
Drupal.webform = Drupal.webform || {};
// Allow scrollTopOffset to be custom defined or based on whether there is a
// floating toolbar.
Drupal.webform.scrollTopOffset = Drupal.webform.scrollTopOffset || ($('#toolbar-administration').length ? 140 : 10);
/**
* Scroll to top ajax command.
*
* @param {Element} element
* The element to scroll to.
* @param {string} target
* Scroll to target. (form or page)
*/
Drupal.webformScrollTop = function (element, target) {
if (!target) {
return;
}
var $element = $(element);
// Scroll to the top of the view. This will allow users
// to browse newly loaded content after e.g. clicking a pager
// link.
var offset = $element.offset();
// We can't guarantee that the scrollable object should be
// the body, as the view could be embedded in something
// more complex such as a modal popup. Recurse up the DOM
// and scroll the first element that has a non-zero top.
var $scrollTarget = $element;
while ($scrollTarget.scrollTop() === 0 && $($scrollTarget).parent()) {
$scrollTarget = $scrollTarget.parent();
}
if (target === 'page' && $scrollTarget.length && $scrollTarget[0].tagName === 'HTML') {
// Scroll to top when scroll target is the entire page.
// @see https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
var rect = $($scrollTarget)[0].getBoundingClientRect();
if (!(rect.top >= 0 && rect.left >= 0 && rect.bottom <= $(window).height() && rect.right <= $(window).width())) {
$scrollTarget.animate({scrollTop: 0}, 500);
}
}
else {
// Only scroll upward.
if (offset.top - Drupal.webform.scrollTopOffset < $scrollTarget.scrollTop()) {
$scrollTarget.animate({scrollTop: (offset.top - Drupal.webform.scrollTopOffset)}, 500);
}
}
};
/**
* Scroll element into view.
*
* @param {jQuery} $element
* An element.
*/
Drupal.webformScrolledIntoView = function ($element) {
if (!Drupal.webformIsScrolledIntoView($element)) {
$('html, body').animate({scrollTop: $element.offset().top - Drupal.webform.scrollTopOffset}, 500);
}
};
/**
* Determine if element is visible in the viewport.
*
* @param {Element} element
* An element.
*
* @return {boolean}
* TRUE if element is visible in the viewport.
*
* @see https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
*/
Drupal.webformIsScrolledIntoView = function (element) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(element).offset().top;
var elemBottom = elemTop + $(element).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};
})(jQuery, Drupal);