tiny-essentials/dist/v1/basics/html_deprecated.cjs

Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.

'use strict';

var TinyHtml = require('../libs/TinyHtml.cjs');

/**
 * Checks if two DOM elements are colliding on the screen.
 *
 * @param {Element} elem1 - First DOM element.
 * @param {Element} elem2 - Second DOM element.
 * @returns {boolean} - Returns true if the elements are colliding.
 * @deprecated - Use TinyHtml.isCollWith instead.
 */
function areHtmlElsColliding(elem1, elem2) {
  return TinyHtml.isCollWith(elem1, elem2);
}

/**
 * Checks if two DOM elements are colliding on the screen.
 *
 * @param {Element} elem1 - First DOM element.
 * @param {Element} elem2 - Second DOM element.
 * @returns {boolean} - Returns true if the elements are colliding.
 * @deprecated - Use TinyHtml.isCollPerfWith instead.
 */
function areHtmlElsPerfColliding(elem1, elem2) {
  return TinyHtml.isCollPerfWith(elem1, elem2);
}

///////////////////////////////////////////////////////////////////////////

/**
 * @typedef {import('../libs/TinyHtml.mjs').HtmlElBoxSides} HtmlElBoxSides
 */

/**
 * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
 *
 * @param {Element} el - The target DOM element.
 * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border widths, and each side individually.
 * @deprecated - Use TinyHtml.borderWidth instead.
 */
const getHtmlElBordersWidth = (el) => {
  return TinyHtml.borderWidth(el);
};

/**
 * Returns the total border size and individual sides from `border{Side}` CSS properties.
 *
 * @param {Element} el - The target DOM element.
 * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border sizes, and each side individually.
 * @deprecated - Use TinyHtml.border instead.
 */
const getHtmlElBorders = (el) => {
  return TinyHtml.border(el);
};

/**
 * Returns the total margin and individual sides from `margin{Side}` CSS properties.
 *
 * @param {Element} el - The target DOM element.
 * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) margins, and each side individually.
 * @deprecated - Use TinyHtml.margin instead.
 */
const getHtmlElMargin = (el) => {
  return TinyHtml.margin(el);
};

/**
 * Returns the total padding and individual sides from `padding{Side}` CSS properties.
 *
 * @param {Element} el - The target DOM element.
 * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
 * @deprecated - Use TinyHtml.padding instead.
 */
const getHtmlElPadding = (el) => {
  return TinyHtml.padding(el);
};

/////////////////////////////////////////////////////////////

// The new version will receive great modifications, the deprecated code has been preserved for non-glitch designs that are using the original code.

/**
 * Checks if the given element is at least partially visible in the viewport.
 *
 * @param {HTMLElement} element - The DOM element to check.
 * @returns {boolean} True if the element is partially in the viewport, false otherwise.
 * @deprecated - Use TinyHtml.isInViewport instead.
 */
function isInViewport(element) {
  const elementTop = element.offsetTop;
  const elementBottom = elementTop + element.offsetHeight;

  const viewportTop = window.scrollY;
  const viewportBottom = viewportTop + window.innerHeight;

  return elementBottom > viewportTop && elementTop < viewportBottom;
}

/**
 * Checks if the given element is fully visible in the viewport (top and bottom).
 *
 * @param {HTMLElement} element - The DOM element to check.
 * @returns {boolean} True if the element is fully visible in the viewport, false otherwise.
 * @deprecated - Use TinyHtml.isScrolledIntoView instead.
 */
function isScrolledIntoView(element) {
  const viewportTop = window.scrollY;
  const viewportBottom = viewportTop + window.innerHeight;

  const elemTop = element.offsetTop;
  const elemBottom = elemTop + element.offsetHeight;

  return elemBottom <= viewportBottom && elemTop >= viewportTop;
}

exports.areHtmlElsColliding = areHtmlElsColliding;
exports.areHtmlElsPerfColliding = areHtmlElsPerfColliding;
exports.getHtmlElBorders = getHtmlElBorders;
exports.getHtmlElBordersWidth = getHtmlElBordersWidth;
exports.getHtmlElMargin = getHtmlElMargin;
exports.getHtmlElPadding = getHtmlElPadding;
exports.isInViewport = isInViewport;
exports.isScrolledIntoView = isScrolledIntoView;