@lancercomet/utils/dist/element.js

My personal utils lib.

/**
 * 向目标节点添加 Class.
 *
 * @export
 * @param {HTMLElement} element
 * @param {string} className
 */
function addClass(element, className) {
    var classNameList = element.className.split(' ');
    if (classNameList.indexOf(className) < 0) {
        var name_1 = (element.className + ' ' + className).trim();
        element.className = name_1;
    }
}
/**
 * 检查目标节点是否包含目标类名.
 *
 * @param {HTMLElement} element 目标节点.
 * @param {string} className 目标类名.
 * @returns {boolean}
 */
function hasClass(element, className) {
    return element.className.indexOf(className) > -1;
}
/**
 * 移除一个 ClassName.
 *
 * @param {HTMLElement} element
 * @param {string} className
 */
function removeClass(element, className) {
    element.className = element.className
        .replace(new RegExp(" ?\\b".concat(className, "\\b"), 'g'), '')
        .trim();
}
/**
 * 检测元素是否在页面中被完全展示.
 *
 * @param {(HTMLElement | Node)} target 目标元素节点.
 * @param {boolean} [isDoVisualCheck=true] 检测元素是否被其他元素视觉上遮挡.
 * @returns
 */
function checkIsFullyVisible(target, isDoVisualCheck) {
    if (isDoVisualCheck === void 0) { isDoVisualCheck = true; }
    var element = null;
    if (target) {
        if (target.nodeType === 3) {
            element = target.parentElement;
        }
        else if (target.nodeType === 1) {
            element = target;
        }
    }
    if (!element) {
        return false;
    }
    var viewportWidth = document.documentElement.clientWidth || window.innerWidth;
    var viewportHeight = document.documentElement.clientHeight || window.innerHeight;
    var rect = element.getBoundingClientRect();
    var top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right;
    if (top < 0 || left < 0 || bottom > viewportHeight || right > viewportWidth) {
        return false;
    }
    if (isDoVisualCheck) {
        // 使用坐标再次验证检测元素是否被遮挡或隐藏.
        var checkpoints = [
            { x: left, y: top },
            { x: right - 1, y: bottom - 1 } // 这里需要减一个像素否则会获取到别的元素, 浏览器边界判断问题.
        ];
        for (var _i = 0, checkpoints_1 = checkpoints; _i < checkpoints_1.length; _i++) {
            var point = checkpoints_1[_i];
            var x = point.x, y = point.y;
            var pointElement = document.elementFromPoint(x, y);
            if (pointElement === element) {
                continue;
            }
            while (true) {
                if (!pointElement || !pointElement.parentElement) {
                    return false;
                }
                if (pointElement === element) {
                    break;
                }
                pointElement = pointElement.parentElement;
            }
        }
    }
    return true;
}
export { addClass, removeClass, hasClass, checkIsFullyVisible };