ph-utils 0.7.0 → 0.8.0

package/lib/dom.d.ts

@@ -90,3 +90,12 @@ export declare function queryHideNodeSize(hideNode: string | HTMLElement, parent
     width: number;
     height: number;
 };
+/**
+ * 判断元素是否在父元素的可视区域内。
+ *
+ * @param el 要检查的元素
+ * @param parent 元素的父元素，默认为document.body
+ * @param direction 检查的方向，默认为"horizontal"
+ * @returns 如果元素在父元素的可视区域内，则返回true；否则返回false。
+ */
+export declare function isVisible(el: HTMLElement, parent?: HTMLElement, direction?: string): boolean;

package/lib/dom.js

@@ -3,13 +3,13 @@
  * 现今不推荐在使用这种方式，现在开发前端的时候，推荐使用一些成熟的框架例如：React、Preact、Vue、Angular、Svelte、Ember、Knockout等
  * 在使用这些框架的时候额外的一些不可避免的 dom 操作时才使用这个工具；如果确实需要使用原生开发推荐使用 jquery 或者想要更精简的话可以使用 https://github.com/finom/bala 封装
  */
-const vendorPrefix = ['', '-webkit', '-moz-'];
+const vendorPrefix = ["", "-webkit", "-moz-"];
 /**
  * 根据选择器获取节点
  * @param {string} selector 选择器
  */
 export function elem(selector, dom) {
-    if (typeof selector === 'string') {
+    if (typeof selector === "string") {
         return (dom || document).querySelectorAll(selector);
     }
     else {
@@ -48,7 +48,7 @@ export function hasClass(elem, clazz) {
  */
 export function transition(element, value) {
     vendorPrefix.forEach((prefix) => {
-        let t = prefix === '' ? 'transition' : prefix + 'Transition';
+        let t = prefix === "" ? "transition" : prefix + "Transition";
         element.style[t] = value;
     });
 }
@@ -59,7 +59,7 @@ export function transition(element, value) {
  */
 export function transform(element, value) {
     vendorPrefix.forEach((prefix) => {
-        let t = prefix === '' ? 'transform' : prefix + 'Transform';
+        let t = prefix === "" ? "transform" : prefix + "Transform";
         element.style[t] = value;
     });
 }
@@ -72,24 +72,24 @@ export function transform(element, value) {
  */
 export function on(element, listener, fn, once = false) {
     let eventExtra = { eventStop: false };
-    if (typeof once === 'boolean') {
+    if (typeof once === "boolean") {
         eventExtra.once = once;
     }
     else {
         eventExtra = once;
     }
     if (eventExtra.eventFlag != null) {
-        element.setAttribute(eventExtra.eventFlag, '__stop__');
+        element.setAttribute(eventExtra.eventFlag, "__stop__");
         element.addEventListener(listener, (e) => {
             let target = e.target;
-            let flag = '';
+            let flag = "";
             do {
-                flag = target.getAttribute(eventExtra.eventFlag) || '';
-                if (flag === '') {
+                flag = target.getAttribute(eventExtra.eventFlag) || "";
+                if (flag === "") {
                     target = target.parentNode;
                 }
-            } while (flag === '');
-            if (flag !== '__stop__' || eventExtra.eventStop) {
+            } while (flag === "");
+            if (flag !== "__stop__" || eventExtra.eventStop) {
                 fn(e, target, flag);
             }
         }, eventExtra);
@@ -150,10 +150,10 @@ export function iterate(elems, fn) {
  */
 export function attr(elem, key, value) {
     if (value != null) {
-        elem.setAttribute('data-' + key, value);
+        elem.setAttribute("data-" + key, value);
     }
     else {
-        return elem.getAttribute('data-' + key);
+        return elem.getAttribute("data-" + key);
     }
 }
 /**
@@ -172,11 +172,11 @@ export function parent(el) {
  */
 export function queryHideNodeSize(hideNode, parent = document.body) {
     // 计算折叠菜单的高度
-    let $tmp = document.createElement('div');
-    $tmp.style.cssText = 'position:fixed;left:-1000px;top:-1000px;opacity:0;';
-    let $tmpInner = document.createElement('div');
-    $tmpInner.style.cssText = 'position:relative;';
-    if (typeof hideNode === 'string') {
+    let $tmp = document.createElement("div");
+    $tmp.style.cssText = "position:fixed;left:-1000px;top:-1000px;opacity:0;";
+    let $tmpInner = document.createElement("div");
+    $tmpInner.style.cssText = "position:relative;";
+    if (typeof hideNode === "string") {
         $tmpInner.innerHTML = hideNode;
     }
     else {
@@ -188,3 +188,28 @@ export function queryHideNodeSize(hideNode, parent = document.body) {
     parent.removeChild($tmp);
     return { width: rect.width, height: rect.height };
 }
+/**
+ * 判断元素是否在父元素的可视区域内。
+ *
+ * @param el 要检查的元素
+ * @param parent 元素的父元素，默认为document.body
+ * @param direction 检查的方向，默认为"horizontal"
+ * @returns 如果元素在父元素的可视区域内，则返回true；否则返回false。
+ */
+export function isVisible(el, parent = document.body, direction = "horizontal") {
+    // 获取父元素的边界信息
+    const containerRect = parent.getBoundingClientRect();
+    // 获取元素的边界信息
+    const elementRect = el.getBoundingClientRect();
+    // 根据检查方向，确定元素的起始和结束位置
+    // 元素的上、下边界
+    let elStart = direction === "horizontal" ? elementRect.left : elementRect.top;
+    let elEnd = direction === "horizontal" ? elementRect.right : elementRect.bottom;
+    // 根据检查方向，确定父元素的起始和结束位置
+    // 容器的可视区域的上、下边界
+    let containerStart = direction === "horizontal" ? containerRect.left : containerRect.top;
+    let containerEnd = direction === "horizontal" ? containerRect.right : containerRect.bottom;
+    // 判断元素是否在父元素的可视区域内
+    // 判断元素是否完全在容器的可视区域内
+    return elStart >= containerStart && elEnd <= containerEnd;
+}

package/package.json

@@ -52,7 +52,7 @@
     },
     "./*": "./lib/*"
   },
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "repository": {
     "type": "git",