@whitesev/pops 2.5.3 → 2.5.5

package/dist/types/src/components/rightClickMenu/types/index.d.ts

@@ -30,7 +30,7 @@ export interface PopsRightClickMenuDataDetails {
      * + false 不关闭菜单
      *
      */
-    callback?: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: HTMLElement) => boolean | void | Promise<boolean | void>;
+    callback?: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>) => boolean | void | Promise<boolean | void>;
     /**
      * 子项配置
      */
@@ -47,8 +47,14 @@ export interface PopsRightClickMenuDetails extends Pick<PopsCommonConfig, "useSh
     target?: HTMLElement | Window | EventTarget | Node;
     /**
      * 目标的子元素选择器，默认为空
+     * @default null
      */
     targetSelector?: string | null;
+    /**
+     * 位置
+     * @default "fixed"
+     */
+    position?: "absolute" | "fixed";
     /**
      * 右键菜单数据
      */
@@ -87,4 +93,14 @@ export interface PopsRightClickMenuDetails extends Pick<PopsCommonConfig, "useSh
      * @default false
      */
     preventDefault?: boolean;
+    /**
+     * 限制x位置在当前视窗内
+     * @default true
+     */
+    limitPositionXInView?: boolean;
+    /**
+     * 限制y位置在当前视窗内
+     * @default true
+     */
+    limitPositionYInView?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "description": "弹窗库",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",
@@ -41,28 +41,28 @@
   "license": "MIT",
   "dependencies": {
     "any-touch": "^2.2.0",
-    "worker-timers": "^8.0.23"
+    "worker-timers": "^8.0.25"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@eslint/js": "^9.37.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "12.1.4",
-    "browserslist": "^4.26.2",
-    "caniuse-lite": "^1.0.30001743",
-    "eslint": "^9.36.0",
+    "browserslist": "^4.26.3",
+    "caniuse-lite": "^1.0.30001751",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.4.0",
-    "rollup": "^4.45.0",
+    "rollup": "^4.52.4",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-import-css": "^4.0.1",
+    "rollup-plugin-import-css": "^4.0.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.44.0"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.1"
   },
   "scripts": {
     "lint": "eslint .",

package/src/components/panel/config.ts

@@ -490,42 +490,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         },
       },
     ],
-    bottomContentConfig: [
-      {
-        text: "Github",
-        position: "left",
-        className: "user-home",
-        attributes: {
-          "data-url": "https://github.com/whitesevs",
-        },
-        props: {
-          "data-test": 1,
-        },
-        disableHoverCSS: false,
-        clickCallback() {
-          const userHomeUrl = (this.attributes as { [key: string]: any })["data-url"];
-          console.log("打开个人主页：" + userHomeUrl);
-          window.open(userHomeUrl, "_blank");
-        },
-        afterRender(config) {
-          console.log(config);
-        },
-      },
-      {
-        text: "0.0.1",
-        position: "right",
-        className: "script-version",
-        attributes: {},
-        props: {},
-        disableHoverCSS: true,
-        clickCallback() {
-          console.log("当前版本：" + this.text);
-        },
-        afterRender(config) {
-          console.log(config);
-        },
-      },
-    ],
+    bottomContentConfig: [],
     btn: {
       close: {
         enable: true,

package/src/components/panel/index.ts

@@ -19,8 +19,18 @@ export const PopsPanel = {
     let config: Required<PopsPanelDetails> = PopsPanelConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, details);
-    if (details && Array.isArray(details.content)) {
-      config.content = details.content;
+    if (details) {
+      if (Array.isArray(details.content)) {
+        // 存在内容配置
+        config.content = details.content;
+      }
+      if (Array.isArray(details.bottomContentConfig)) {
+        // 存在底部配置
+        config.bottomContentConfig = details.bottomContentConfig;
+      } else {
+        // 不存在底部配置 清空默认的
+        config.bottomContentConfig = [];
+      }
     }
     config = PopsHandler.handleOnly(popsType, config);
 

package/src/components/rightClickMenu/config.ts

@@ -5,6 +5,7 @@ export const rightClickMenuConfig = (): DeepRequired<PopsRightClickMenuDetails>
   return {
     target: document.documentElement,
     targetSelector: null,
+    position: "fixed",
     data: [
       {
         icon: PopsIcon.getIcon("search")!,
@@ -94,5 +95,7 @@ export const rightClickMenuConfig = (): DeepRequired<PopsRightClickMenuDetails>
     preventDefault: true,
     style: null,
     beforeAppendToPageCallBack() {},
+    limitPositionXInView: true,
+    limitPositionYInView: true,
   };
 };

package/src/components/rightClickMenu/index.css

@@ -30,6 +30,9 @@
   -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);
   backdrop-filter: var(--pops-right-context-backdrop-filter);
 }
+.pops-rightClickMenu[data-position="absolute"] {
+  position: absolute;
+}
 /* scale动画 */
 .pops-rightClickMenu-anim-scale {
   transition:

package/src/components/rightClickMenu/index.ts

@@ -47,7 +47,7 @@ export const PopsRightClickMenu = {
     ]);
 
     if (config.style != null) {
-      const cssNode = popsDOMUtils.createElement(
+      const $css = popsDOMUtils.createElement(
         "style",
         {
           innerHTML: config.style,
@@ -56,7 +56,7 @@ export const PopsRightClickMenu = {
           type: "text/css",
         }
       );
-      $shadowRoot.appendChild(cssNode);
+      $shadowRoot.appendChild($css);
     }
 
     const PopsContextMenu = {
@@ -132,7 +132,7 @@ export const PopsRightClickMenu = {
        * @param event
        * @param selectorTarget
        */
-      contextMenuEvent(event: PointerEvent, selectorTarget: HTMLElement) {
+      contextMenuEvent(event: PointerEvent, selectorTarget: NonNullable<PopsRightClickMenuDetails["target"]>) {
         if (config.preventDefault) {
           popsDOMUtils.preventEvent(event);
         }
@@ -140,6 +140,7 @@ export const PopsRightClickMenu = {
         if (PopsContextMenu.rootElement) {
           PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
         }
+        selectorTarget = selectorTarget ?? config.target;
         const rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
         PopsContextMenu.rootElement = rootElement;
         if (config.only) {
@@ -186,7 +187,6 @@ export const PopsRightClickMenu = {
           });
           $menu.remove();
         };
-        popsDOMUtils.containsClassName;
         if (popsDOMUtils.containsClassName($menu, `pops-${popsType}-anim-show`)) {
           /* 有动画 */
           popsDOMUtils.on($menu, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
@@ -233,10 +233,16 @@ export const PopsRightClickMenu = {
        * @param isChildren 是否是rightClickMenu的某一项的子菜单
        */
       createMenuContainerElement(isChildren: boolean) {
-        const $menu = popsDOMUtils.createElement("div", {
-          className: `pops-${popsType}`,
-          innerHTML: /*html*/ `<ul class="pops-${popsType}-wrapper"></ul>`,
-        });
+        const $menu = popsDOMUtils.createElement(
+          "div",
+          {
+            className: `pops-${popsType}`,
+            innerHTML: /*html*/ `<ul class="pops-${popsType}-wrapper"></ul>`,
+          },
+          {
+            "data-position": config.position,
+          }
+        );
         const zIndex = this.getMenuZIndex();
         if (zIndex > 10000) {
           $menu.style.zIndex = zIndex.toString();
@@ -287,8 +293,13 @@ export const PopsRightClickMenu = {
          * 限制的间隙距离
          */
         const limitDistance = 1;
-        const maxPageLeftOffset = popsDOMUtils.width(globalThis) - limitDistance;
-        const maxPageTopOffset = popsDOMUtils.height(globalThis) - limitDistance;
+        let maxPageLeftOffset = popsDOMUtils.width(globalThis) - limitDistance;
+        let maxPageTopOffset = popsDOMUtils.height(globalThis) - limitDistance;
+        if (config.position === "absolute") {
+          // 添加滚动距离
+          maxPageLeftOffset += globalThis.scrollX;
+          maxPageTopOffset += globalThis.scrollY;
+        }
         /* left最大偏移 */
         const maxLeftOffset = maxPageLeftOffset - menuElementWidth;
         /* top最大偏移 */
@@ -299,8 +310,10 @@ export const PopsRightClickMenu = {
         let currentLeftOffset = mousePosition.x;
         let currentTopOffset = mousePosition.y;
         currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
+        currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
+
         // 不允许超出left最大值
-        if (currentLeftOffset + chileMenuLeftOrRightDistance >= maxLeftOffset) {
+        if (config.limitPositionXInView && currentLeftOffset + chileMenuLeftOrRightDistance >= maxLeftOffset) {
           // 超过，那么子菜单将会在放在左边
           // 偏移计算方式就是父菜单的右偏移+父菜单的宽度
           if (parentInfo) {
@@ -326,8 +339,7 @@ export const PopsRightClickMenu = {
           Reflect.deleteProperty(result, "right");
         }
         // 不允许超出top最大值
-        currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
-        if (currentTopOffset + childMenuTopOrBottomDistance >= maxTopOffset) {
+        if (config.limitPositionYInView && currentTopOffset + childMenuTopOrBottomDistance >= maxTopOffset) {
           // 超过，那么子菜单将会在放在上面
           if (parentInfo) {
             // 以项的top偏移为基准
@@ -347,6 +359,7 @@ export const PopsRightClickMenu = {
           Reflect.deleteProperty(result, "top");
         } else {
           currentTopOffset = currentTopOffset + childMenuTopOrBottomDistance;
+          // 底部偏移
           result.top = currentTopOffset;
           Reflect.deleteProperty(result, "bottom");
         }
@@ -358,7 +371,11 @@ export const PopsRightClickMenu = {
        * @param _config_
        * @param menuListenerRootNode 右键菜单监听的元素
        */
-      showMenu(menuEvent: PointerEvent, _config_: PopsRightClickMenuDataDetails[], menuListenerRootNode: HTMLElement) {
+      showMenu(
+        menuEvent: PointerEvent,
+        _config_: PopsRightClickMenuDataDetails[],
+        menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
+      ) {
         const menuElement = this.createMenuContainerElement(false);
         Reflect.set(menuElement, "__menuData__", {
           child: [],
@@ -395,7 +412,7 @@ export const PopsRightClickMenu = {
         _config_: PopsRightClickMenuDataDetails[],
         rootElement: HTMLDivElement,
         targetLiElement: HTMLLIElement,
-        menuListenerRootNode: HTMLElement
+        menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
       ) {
         const menuElement = this.createMenuContainerElement(true);
         Reflect.set(menuElement, "__menuData__", {
@@ -467,7 +484,7 @@ export const PopsRightClickMenu = {
         rootElement: HTMLDivElement,
         menuElement: HTMLDivElement,
         _config_: PopsRightClickMenuDataDetails[],
-        menuListenerRootNode: HTMLElement
+        menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
       ) {
         const menuEventTarget = menuEvent.target;
         const menuULElement = menuElement.querySelector<HTMLUListElement>("ul")!;
@@ -592,11 +609,26 @@ export const PopsRightClickMenu = {
     PopsContextMenu.addWindowCheckClickListener();
     return {
       guid: guid,
-      config: config,
-      removeWindowCheckClickListener: PopsContextMenu.removeWindowCheckClickListener,
+      config: config as DeepRequired<PopsRightClickMenuDetails>,
       addWindowCheckClickListener: PopsContextMenu.addWindowCheckClickListener,
-      removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
+      removeWindowCheckClickListener: PopsContextMenu.removeWindowCheckClickListener,
       addContextMenuEvent: PopsContextMenu.addContextMenuEvent,
+      removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
+      /**
+       * 移除初始化时的添加的监听事件
+       */
+      removeInitEventListener: {
+        contextMenu() {
+          PopsContextMenu.removeContextMenuEvent(config.target as Window, config.targetSelector!);
+        },
+        windowClick() {
+          PopsContextMenu.removeWindowCheckClickListener();
+        },
+      },
+      /**
+       * 操作弹出菜单的对象
+       */
+      PopsContextMenu: PopsContextMenu,
     };
   },
 };

package/src/components/rightClickMenu/types/index.ts

@@ -35,7 +35,7 @@ export interface PopsRightClickMenuDataDetails {
     clickEvent: PointerEvent,
     contextMenuEvent: PointerEvent,
     liElement: HTMLLIElement,
-    menuListenerRootNode: HTMLElement
+    menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
   ) => boolean | void | Promise<boolean | void>;
   /**
    * 子项配置
@@ -55,8 +55,14 @@ export interface PopsRightClickMenuDetails
   target?: HTMLElement | Window | EventTarget | Node;
   /**
    * 目标的子元素选择器，默认为空
+   * @default null
    */
   targetSelector?: string | null;
+  /**
+   * 位置
+   * @default "fixed"
+   */
+  position?: "absolute" | "fixed";
   /**
    * 右键菜单数据
    */
@@ -95,4 +101,14 @@ export interface PopsRightClickMenuDetails
    * @default false
    */
   preventDefault?: boolean;
+  /**
+   * 限制x位置在当前视窗内
+   * @default true
+   */
+  limitPositionXInView?: boolean;
+  /**
+   * 限制y位置在当前视窗内
+   * @default true
+   */
+  limitPositionYInView?: boolean;
 }