@sad-systems/frigate-core/scroll/core.js

Frontend core library by MrDigger

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getElementCenterOffsetAgainstWindowCenter = void 0;

/**
 * Core functions to create animations on scroll.
 *
 * @namespace core.scroll
 * @class     Core
 */

/**
 * The function to calculate the element's center current position in the window
 * against the center of the window
 * and returns the offset value (in percentages) and moving direction (up/down).
 *
 * @method getElementCenterOffsetAgainstWindowCenter
 *
 * @param {DOMElement} element The DOM element is moving inside the window.
 *
 * @return {Object} The object of structure: { value: number, direction: number }
 * ```
 * `value`     The element's center offset from the center of the window (in percentages).
 *             = range of: [0 .. 1];
 *              1 - the element's center is in the middle of the window
 *              0 - the element's center is out of the window (upper or lower)
 *
 * `direction` The element's moving direction (up/down from the window center)
 *             = set of: 0 | 1 | -1
 *              0 - the element is out of the window,
 *              1 - the element is moving up from center,
 *             -1 - the element is moving down from center
 * ```
 */
var getElementCenterOffsetAgainstWindowCenter = function getElementCenterOffsetAgainstWindowCenter(element) {
  var value = 0;
  var direction = 0; // const scrollTop   = window.pageYOffset || document.documentElement.scrollTop;
  // event.target.body.scrollTop; //event.srcElement.body.scrollTop;
  // const elOffsetTop = element.offsetTop;

  var windowHeight = document.documentElement.clientHeight;
  var elHeight = element.offsetHeight;
  var elWindowOffsetTop = element.getBoundingClientRect().top;

  if (elWindowOffsetTop <= windowHeight && elWindowOffsetTop >= -elHeight) {
    var percent = (windowHeight - elWindowOffsetTop) / (windowHeight / 2 + elHeight / 2);
    direction = percent <= 1 ? 1 : -1;
    value = percent <= 1 ? percent : 2 - percent;
  }

  return {
    value: value,
    direction: direction
  };
};

exports.getElementCenterOffsetAgainstWindowCenter = getElementCenterOffsetAgainstWindowCenter;