ts-useful/lib/es2020/eclipticHTML.js

Functions for animation, color transitions, ecliptic, bezier, decasteljau, curves, three dimensional curves, smooth scrolling, random range, randomItem, mobius index, vectors, physics vectors, and easing.

import { Ecliptic } from "./ecliptic";
export class EclipticHTML {
}
/**
 *
 * @param item
 * @returns coordinate
 */
EclipticHTML.htmlCenter = (item) => {
    if (item.style.transform) {
        return { x: 0, y: 0 };
    }
    const bounds = item.getBoundingClientRect();
    return { x: (bounds.width / 2), y: (bounds.height / 2) };
};
/**
 *
 * @param item
 * @returns coordinate
 */
EclipticHTML.itemLocation = (item) => {
    if (item.style.transform) {
        return EclipticHTML.TransformCoordinates(item);
    }
    const bounds = item.getBoundingClientRect();
    return { x: bounds.left, y: bounds.top };
};
/**
 *
 * @param item
 * @param distance
 * @returns number
 */
EclipticHTML.calcRadius = (item, distance) => {
    const bounds = item.getBoundingClientRect();
    return distance === 0 ? Math.max(bounds.width, bounds.height) : distance;
};
/**
 * Extracts a set transform coordinates
 * @param elm HTMLElement
 * @returns coordinate
 */
EclipticHTML.TransformCoordinates = (elm) => {
    const coordRx = /(-?[\d\.]+)/g;
    const result = elm.style.transform.match(coordRx);
    return result ? { x: +result[0], y: +result[1] } : { x: 0, y: 0 };
};
EclipticHTML.htmlCollectionToArray = (items) => {
    return Array.apply(null, new Array(items.length)).map((e, i) => {
        return items[i];
    });
};
/**
*
* @param item HTMLElement
* @param withItems HTMLElement[] | HTMLCollection
* @param options surroundOptions
*/
EclipticHTML.SurroundHTML = (item, withItems, options) => {
    const toPx = (val) => `${Math.floor(val)}px`;
    if (withItems instanceof HTMLCollection) {
        withItems = EclipticHTML.htmlCollectionToArray(withItems);
    }
    Ecliptic.Surround(EclipticHTML.htmlCenter(item), withItems.length, options).forEach((c, i) => {
        withItems[i].style.transform = `translate(${toPx(c.x)}, ${toPx(c.y)})`;
    });
};
//# sourceMappingURL=eclipticHTML.js.map