93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
|
/**
|
||
|
|
* @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);
|