重构 ehentai 相关

Author: hymbz

src/helper/useStyle.ts

@@ -17,13 +17,17 @@ const useStyleSheet = (e?: Element) => {
   return styleSheet;
 };
 
+const addedCss = new Set<string>();
 export const useStyle = (css: string | Accessor<string>, e?: Element) => {
   const styleSheet = useStyleSheet(e);
-  if (typeof css === 'string') styleSheet.replaceSync(css);
-  else
-    createEffectOn(createRootMemo(css), (style) =>
+  if (typeof css !== 'string')
+    return createEffectOn(createRootMemo(css), (style) =>
       styleSheet.replaceSync(style),
     );
+
+  if (addedCss.has(css)) return;
+  styleSheet.replaceSync(css);
+  addedCss.add(css);
 };
 
 export type StyleMap = {

src/site/ehentai/colorizeTag.ts

@@ -1,7 +1,7 @@
 import { debounce, getGmValue, hijackFn } from 'helper';
 
 import { updateMyTags, handleMyTagsChange, type Tag } from './myTags';
-import { type EhContext } from './context';
+import { type EhContext } from './helper';
 
 // 为每个标签单独生成 css。用于方便调试时排查和修改样式时使用
 // const buildTagColorCss = (
@@ -79,10 +79,10 @@ export const updateTagColor = async (tagList: Tag[]) => {
 };
 
 /** 标签染色 */
-export const colorizeTag = async (context: EhContext) => {
+export const colorizeTag = async (contextType: EhContext['type']) => {
   handleMyTagsChange.add(updateTagColor);
 
-  switch (context.type) {
+  switch (contextType) {
     case 'gallery': {
       let css =
         location.origin === 'https://exhentai.org'

src/site/ehentai/crossSiteLink.tsx

@@ -11,7 +11,7 @@ import { For, Show, type Component, type JSX } from 'solid-js';
 import { render } from 'solid-js/web';
 import { createStore } from 'solid-js/store';
 
-import { type GalleryContext } from './context';
+import { type GalleryContext } from './helper';
 
 type ItemData = {
   id: string;

src/site/ehentai/detectAd.ts

@@ -2,7 +2,7 @@ import { ReactiveSet } from 'main';
 import { getAdPageByFileName, getAdPageByContent } from 'userscript/detectAd';
 import { querySelectorAll, useStyle, createRootMemo } from 'helper';
 
-import type { GalleryContext } from './context';
+import type { GalleryContext } from './helper';
 
 /** 识别广告 */
 export const detectAd = async ({

src/site/ehentai/floatTagList.tsx

@@ -13,8 +13,7 @@ import {
   hijackFn,
 } from 'helper';
 
-import { setEscHandler } from './helper';
-import type { GalleryContext } from './context';
+import { setEscHandler, type GalleryContext } from './helper';
 
 const getDomPosition = (dom: HTMLElement) => {
   const rect = dom.getBoundingClientRect();

src/site/ehentai/context.tsx src/site/ehentai/helper/context.tsxsrc/site/ehentai/context.tsx renamed to src/site/ehentai/helper/context.tsx

@@ -58,3 +58,5 @@ export const getTagNameFull = (tag: string) => {
     if (target.includes(namespace)) return `${target[0]}:${name}`;
   return tag;
 };
+
+export * from './context';

src/site/ehentai/helper.ts src/site/ehentai/helper/index.tssrc/site/ehentai/helper.ts renamed to src/site/ehentai/helper/index.ts

@@ -1,7 +1,6 @@
 import { linstenKeydown, querySelector } from 'helper';
 
-import { setEscHandler } from './helper';
-import { type EhContext } from './context';
+import { setEscHandler, type EhContext } from './helper';
 
 /** 快捷键翻页 */
 export const hotkeysPageTurn = (context: EhContext) => {

src/site/ehentai/hotkeys.ts

@@ -22,8 +22,7 @@ import {
   sleep,
 } from 'helper';
 
-import { createEhContext } from './context';
-import { escHandler } from './helper';
+import { escHandler, createEhContext } from './helper';
 import { quickFavorite } from './quickFavorite';
 import { crossSiteLink } from './crossSiteLink';
 import { hotkeysPageTurn } from './hotkeys';
@@ -111,7 +110,7 @@ import { detectAd } from './detectAd';
 
   // 标签染色
   if (options.colorize_tag) {
-    colorizeTag(context);
+    colorizeTag(context.type);
     sortTags(context);
   }
   // 快捷收藏。必须处于登录状态

src/site/ehentai/index.tsx

@@ -1,20 +1,18 @@
 import { type Accessor, For, createSignal, Show } from 'solid-js';
 import { render } from 'solid-js/web';
 import { request, toast } from 'main';
-import { t, domParse, querySelector, querySelectorAll } from 'helper';
+import { t, domParse, querySelector, querySelectorAll, useStyle } from 'helper';
 
-import type { EhContext } from './context';
+import type { EhContext } from './helper';
 
-let hasStyle = false;
 const addQuickFavorite = (
   favoriteButton: HTMLElement,
   root: HTMLElement,
   apiUrl: string,
-  position: [number, number],
+  height: number,
+  top = 0,
 ) => {
-  if (!hasStyle) {
-    hasStyle = true;
-    GM_addStyle(`
+  useStyle(`
       .comidread-favorites {
         position: absolute;
         z-index: 75;
@@ -31,42 +29,40 @@ const addQuickFavorite = (
         border-radius: 0;
       }
 
-      .comidread-favorites-item {
-        cursor: pointer;
+    .comidread-favorites-item {
+      cursor: pointer;
 
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
 
-        width: 100%;
-        margin: 1em 0;
+      width: 100%;
+      margin: 1em 0;
 
-        text-align: left;
-        overflow-wrap: anywhere;
-      }
+      text-align: left;
+      overflow-wrap: anywhere;
+    }
 
-      .comidread-favorites-item > input {
-        pointer-events: none;
-        margin: 0 0.5em 0 0;
-      }
+    .comidread-favorites-item > input {
+      pointer-events: none;
+      margin: 0 0.5em 0 0;
+    }
 
-      .comidread-favorites-item > div {
-        flex-shrink: 0;
+    .comidread-favorites-item > div {
+      flex-shrink: 0;
 
-        width: 15px;
-        height: 15px;
-        margin: 0 0.5em 0 0;
+      width: 15px;
+      height: 15px;
+      margin: 0 0.5em 0 0;
 
-        background-image: url("https://ehgt.org/g/fav.png");
-        background-repeat: no-repeat;
-      }
+      background-image: url("https://ehgt.org/g/fav.png");
+      background-repeat: no-repeat;
+    }
 
       .gl1t > .comidread-favorites {
         padding: 1em 1.5em;
       }
-    `);
-  }
+  `);
   root.style.position = 'relative';
-  root.style.height = '100%';
 
   const [show, setShow] = createSignal(false);
 
@@ -155,8 +151,8 @@ const addQuickFavorite = (
             class="comidread-favorites"
             style={{
               background,
-              height: `${position[1] - position[0]}px`,
-              top: `${position[0]}px`,
+              height: `${height}px`,
+              top: `${top}px`,
             }}
           >
             <For
@@ -195,10 +191,8 @@ export const quickFavorite = (context: EhContext) => {
     case 'gallery': {
       const button = querySelector('#gdf')!;
       const root = querySelector('#gd3')!;
-      addQuickFavorite(button, root, `${unsafeWindow.popbase}addfav`, [
-        0,
-        (button.firstElementChild as HTMLElement).offsetTop,
-      ]);
+      const height = (button.firstElementChild as HTMLElement).offsetTop;
+      addQuickFavorite(button, root, `${unsafeWindow.popbase}addfav`, height);
       break;
     }
 
@@ -212,7 +206,7 @@ export const quickFavorite = (context: EhContext) => {
           item.lastElementChild!.getBoundingClientRect().top -
           item.getBoundingClientRect().top;
         const apiUrl = /http.+?(?=')/.exec(button.getAttribute('onclick')!)![0];
-        addQuickFavorite(button, item, apiUrl, [top, bottom]);
+        addQuickFavorite(button, item, apiUrl, bottom - top, top);
       }
       break;
     }
@@ -221,9 +215,9 @@ export const quickFavorite = (context: EhContext) => {
       for (const item of querySelectorAll('.gl1e')) {
         const button =
           item.nextElementSibling!.querySelector<HTMLElement>('[id^=posted_]')!;
-        const bottom = Number.parseInt(getComputedStyle(item).height, 10);
+        const height = Number.parseInt(getComputedStyle(item).height, 10);
         const apiUrl = /http.+?(?=')/.exec(button.getAttribute('onclick')!)![0];
-        addQuickFavorite(button, item, apiUrl, [0, bottom]);
+        addQuickFavorite(button, item, apiUrl, height);
       }
       break;
     }