更新

2022-12-06 10:39:18 +08:00 · 2022-12-06 10:39:18 +08:00 · 975f9f2e80
commit 975f9f2e80
parent e756cb190e
7 changed files with 169 additions and 126 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,14 @@

 # CHANGE

+## 0.7.5
+
+2022年12月6日
+
+### 修改
+
+- 可记录上次图标的位置，调整了拖动逻辑
+
 ## 0.7.4

 2022年12月5日
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "wuhu-torn-helper",
-  "version": "0.7.4",
+  "version": "0.7.5",
  "description": "芜湖助手",
  "dependencies": {},
  "scripts": {
--- a/release.min.user.js
+++ b/release.min.user.js
--- a/src/class/WuhuConfig.ts
+++ b/src/class/WuhuConfig.ts
@ -30,7 +30,7 @@ export default class WuhuConfig extends WuhuBase {

        if (isNotify) new Alert('已保存设置')
        new Promise(() => callback()).then();
-        Log.info(`值变更：[${ key }] ${ prev } -> ${ val }`);
+        Log.info(`值变更：[${ key }] ${ JSON.stringify({ from: prev, to: val }) }`);
        return val;
    }

@ -117,6 +117,10 @@ export default class WuhuConfig extends WuhuBase {
            { key: 'SearchPagePlaceholder', val: true },
            // 解决一直转圈(加载中)的问题
            { key: 'SolveGoogleScriptPendingIssue', val: false },
+            // 图标坐标
+            { key: 'IconPosition', val: {} },
+            // 记住图标位置
+            { key: 'SaveIconPosition', val: false },

            /**
             * 危险行为⚠️
--- a/src/class/ZhongIcon.ts
+++ b/src/class/ZhongIcon.ts
@ -21,6 +21,7 @@ import QuickLinksHandler from "./handler/QuickLinksHandler";
 import ItemPriceWatcherHandler from "./handler/ItemPriceWatcherHandler";
 import ChangeLogHandler from "./handler/ChangeLogHandler";
 import SettingsHandler from "./handler/SettingsHandler";
+import WuhuConfig from "./WuhuConfig";

 export default class ZhongIcon extends WuhuBase {
    className = 'ZhongIcon';
@ -41,110 +42,14 @@ export default class ZhongIcon extends WuhuBase {
        Log.info('设置图标结束, ZhongIcon初始化结束');
    }

-    /**
-     * 添加左侧图标
-     */
-    private insert2Dom(): ZhongIcon {
-        let zhongNode: MyHTMLElement = document.querySelector('div#wh-trans-icon');
-        let settings = this.menuItemList;
-        let { version } = WuhuBase.glob;
-        if ((self !== top) || !!zhongNode) return null;
-        zhongNode = document.createElement('div');
-        ZhongIcon.ZhongNode = zhongNode;
-        zhongNode.id = 'wh-trans-icon';
-        zhongNode.classList.add('cont-gray');
-        zhongNode.innerHTML = ZHONG_MENU_HTML.replace('{{}}', version.slice(-1) === '$' ? 'DEV' : version);
-        // 助手菜单
-        const menu_cont = zhongNode.querySelector('#wh-gSettings');
-        // 遍历菜单node设置、生成node、插入dom
-        this.menuItemList.forEach(setting => CommonUtils.getInstance().elemGenerator(setting, menu_cont));
-        Log.info('生成元素插入完成');
-        // 计时node
-        zhongNode.initTimer = zhongNode.querySelector('#wh-inittimer');
-        // 芜湖助手图标点击事件
-        (<MyHTMLElement>zhongNode.querySelector('#wh-trans-icon-btn')).onclick = () => {
-            zhongNode.classList.toggle('wh-icon-expanded');
-            const click_func = e => {
-                Log.info(e.target);
-                if (e.target === zhongNode.querySelector('#wh-trans-icon-btn')) return;
-                if (!zhongNode.contains(e.target)) {
-                    Log.info('移除事件监听器');
-                    document.body.removeEventListener('click', click_func);
-                    zhongNode.classList.remove('wh-icon-expanded');
+    private static setPosition(x: number, y: number) {
+        if (!(x && y)) return;
+        if (x > 0 && x < document.documentElement.offsetWidth - 100) {
+            ZhongIcon.ZhongNode.style.left = x + "px";
        }
-            };
-            if (zhongNode.classList.contains('wh-icon-expanded')) {
-                Log.info('芜湖助手图标点击->添加监听');
-                document.body.addEventListener('click', click_func);
-            } else {
-                Log.info('芜湖助手图标->移除监听');
-                document.body.removeEventListener('click', click_func);
+        if (y > 0 && y < document.documentElement.offsetHeight - 60) {
+            ZhongIcon.ZhongNode.style.top = y + "px";
        }
-        };
-        // 更新按钮点击事件
-        (<MyHTMLElement>zhongNode.querySelector('#wh-update-btn')).onclick = e => {
-            (<HTMLButtonElement>e.target).blur();
-            const innerHtml = ZHONG_UPDATE_HTML;
-            // 直接复制的按钮
-            new Popup(innerHtml, '如何更新')
-                .getElement()
-                .querySelector('button').onclick = async (e) => {
-                let target = e.target as HTMLButtonElement;
-                target.innerHTML = '加载中';
-                const js_text = await CommonUtils.COFetch(`https://jjins.github.io/fyfuzhi/release.min.user.js?${ performance.now() }`);
-                target.innerHTML = '点击复制到剪切板';
-                target.onclick = () => {
-                    const textarea_node = document.createElement('textarea');
-                    textarea_node.innerHTML = js_text;
-                    target.parentElement.append(textarea_node);
-                    textarea_node.focus();
-                    textarea_node.select();
-                    document.execCommand('Copy');
-                    textarea_node.remove();
-                    target.innerHTML = '已复制';
-                    target.onclick = null;
-                    new Alert('脚本已复制，请前往粘贴');
-                };
-            };
-        };
-        // 节日
-        zhongNode.querySelectorAll('#wh-trans-fest-date button').forEach((el, i) => i === 0
-            ? el.addEventListener('click', () => {
-                let html = '<table>';
-                settings.fest_date_list.sort().forEach(date =>
-                    html += `<tr><td>${ 1 + ((<any>date.slice(0, 2)) | 0) }月${ date.slice(2) }日</td><td>${ settings.fest_date_dict[date].name }</td><td>${ settings.fest_date_dict[date].eff }</td></tr>`
-                );
-                new Popup(html += '</table>', '节日');
-            })
-            : el.addEventListener('click', null));
-        // 活动
-        zhongNode.querySelectorAll('#wh-trans-event-cont button').forEach((el, i) => i === 0
-            ? el.addEventListener('click', () => {
-                let html = '<table>';
-                settings.events.forEach(el =>
-                    html += `<tr><td><b>${ el.name }</b></td><td>${ el.start[0] + 1 }月${ el.start[1] }日${ el.start[2] }:00~${ el.end[0] + 1 }月${ el.end[1] }日${ el.end[2] }:00</td></tr><tr><td colspan="2">${ el.eff }</td></tr>`);
-                new Popup(html += '</table><p>更多信息请关注群聊和公众号</p>', '活动');
-            })
-            : el.addEventListener('click', null));
-        document.body.append(zhongNode);
-        // 引入torn自带浮动提示
-        Log.info('引入torn自带浮动提示');
-        (window.initializeTooltip) && (window.initializeTooltip('.wh-container', 'white-tooltip'));
-        // 加载torn mini profile
-        Log.info('加载torn mini profile');
-        let miniProfileInterval = {
-            id: window.setInterval(() => {
-                miniProfileInterval.counter++;
-                if (window.$ || (window.unsafeWindow && window.unsafeWindow.$)) {
-                    initMiniProf('#wh-trans-icon');
-                    window.clearInterval(miniProfileInterval.id);
-                }
-                if (miniProfileInterval.counter > 30) window.clearInterval(miniProfileInterval.id);
-            }, 1000),
-            counter: 0
-        };
-        Log.info('图标加入文档树完成');
-        return this;
    }

    // 菜单
@ -370,8 +275,124 @@ export default class ZhongIcon extends WuhuBase {
        return this;
    }

+    /**
+     * 添加左侧图标
+     */
+    private insert2Dom(): ZhongIcon {
+        let zhongNode: MyHTMLElement = document.querySelector('div#wh-trans-icon');
+        let settings = this.menuItemList;
+        let { version } = WuhuBase.glob;
+        if ((self !== top) || !!zhongNode) return null;
+        zhongNode = document.createElement('div');
+        ZhongIcon.ZhongNode = zhongNode;
+        zhongNode.id = 'wh-trans-icon';
+        zhongNode.classList.add('cont-gray');
+        zhongNode.innerHTML = ZHONG_MENU_HTML.replace('{{}}', version.slice(-1) === '$' ? 'DEV' : version);
+        // 助手菜单
+        const menu_cont = zhongNode.querySelector('#wh-gSettings');
+        // 遍历菜单node设置、生成node、插入dom
+        this.menuItemList.forEach(setting => CommonUtils.getInstance().elemGenerator(setting, menu_cont));
+        Log.info('生成元素插入完成');
+        // 计时node
+        zhongNode.initTimer = zhongNode.querySelector('#wh-inittimer');
+        // 芜湖助手图标点击事件
+        (<MyHTMLElement>zhongNode.querySelector('#wh-trans-icon-btn')).onclick = () => {
+            zhongNode.classList.toggle('wh-icon-expanded');
+            const click_func = e => {
+                Log.info(e.target);
+                if (e.target === zhongNode.querySelector('#wh-trans-icon-btn')) return;
+                if (!zhongNode.contains(e.target)) {
+                    Log.info('移除事件监听器');
+                    document.body.removeEventListener('click', click_func);
+                    zhongNode.classList.remove('wh-icon-expanded');
+                }
+            };
+            if (zhongNode.classList.contains('wh-icon-expanded')) {
+                Log.info('芜湖助手图标点击->添加监听');
+                document.body.addEventListener('click', click_func);
+            } else {
+                Log.info('芜湖助手图标->移除监听');
+                document.body.removeEventListener('click', click_func);
+            }
+        };
+        // 更新按钮点击事件
+        (<MyHTMLElement>zhongNode.querySelector('#wh-update-btn')).onclick = e => {
+            (<HTMLButtonElement>e.target).blur();
+            const innerHtml = ZHONG_UPDATE_HTML;
+            // 直接复制的按钮
+            new Popup(innerHtml, '如何更新')
+                .getElement()
+                .querySelector('button').onclick = async (e) => {
+                let target = e.target as HTMLButtonElement;
+                target.innerHTML = '加载中';
+                const js_text = await CommonUtils.COFetch(`https://jjins.github.io/fyfuzhi/release.min.user.js?${ performance.now() }`);
+                target.innerHTML = '点击复制到剪切板';
+                target.onclick = () => {
+                    const textarea_node = document.createElement('textarea');
+                    textarea_node.innerHTML = js_text;
+                    target.parentElement.append(textarea_node);
+                    textarea_node.focus();
+                    textarea_node.select();
+                    document.execCommand('Copy');
+                    textarea_node.remove();
+                    target.innerHTML = '已复制';
+                    target.onclick = null;
+                    new Alert('脚本已复制，请前往粘贴');
+                };
+            };
+        };
+        // 节日
+        zhongNode.querySelectorAll('#wh-trans-fest-date button').forEach((el, i) => i === 0
+            ? el.addEventListener('click', () => {
+                let html = '<table>';
+                settings.fest_date_list.sort().forEach(date =>
+                    html += `<tr><td>${ 1 + ((<any>date.slice(0, 2)) | 0) }月${ date.slice(2) }日</td><td>${ settings.fest_date_dict[date].name }</td><td>${ settings.fest_date_dict[date].eff }</td></tr>`
+                );
+                new Popup(html += '</table>', '节日');
+            })
+            : el.addEventListener('click', null));
+        // 活动
+        zhongNode.querySelectorAll('#wh-trans-event-cont button').forEach((el, i) => i === 0
+            ? el.addEventListener('click', () => {
+                let html = '<table>';
+                settings.events.forEach(el =>
+                    html += `<tr><td><b>${ el.name }</b></td><td>${ el.start[0] + 1 }月${ el.start[1] }日${ el.start[2] }:00~${ el.end[0] + 1 }月${ el.end[1] }日${ el.end[2] }:00</td></tr><tr><td colspan="2">${ el.eff }</td></tr>`);
+                new Popup(html += '</table><p>更多信息请关注群聊和公众号</p>', '活动');
+            })
+            : el.addEventListener('click', null));
+        // 调整图标至有记录的位置
+        if (WuhuConfig.get("SaveIconPosition")) {
+            let iconPosition = WuhuConfig.get("IconPosition");
+            let documentSize = { x: document.documentElement.offsetWidth, y: document.documentElement.offsetHeight };
+            ZhongIcon.setPosition(
+                iconPosition.x > documentSize.x ? documentSize.x * 0.9 | 0 : iconPosition.x,
+                iconPosition.y > documentSize.y ? documentSize.y * 0.9 | 0 : iconPosition.y
+            );
+        }
+        document.body.append(zhongNode);
+        // 引入torn自带浮动提示
+        Log.info('引入torn自带浮动提示');
+        (window.initializeTooltip) && (window.initializeTooltip('.wh-container', 'white-tooltip'));
+        // 加载torn mini profile
+        Log.info('加载torn mini profile');
+        let miniProfileInterval = {
+            id: window.setInterval(() => {
+                miniProfileInterval.counter++;
+                if (window.$ || (window.unsafeWindow && window.unsafeWindow.$)) {
+                    initMiniProf('#wh-trans-icon');
+                    window.clearInterval(miniProfileInterval.id);
+                }
+                if (miniProfileInterval.counter > 30) window.clearInterval(miniProfileInterval.id);
+            }, 1000),
+            counter: 0
+        };
+        Log.info('图标加入文档树完成');
+        return this;
+    }
+
    private dragHandler(): ZhongIcon {
        let isMouseDown = false;
+        let isMouseMoved = false;
        let offsetXY = { x: 0, y: 0 };
        ZhongIcon.ZhongNode.addEventListener('mousedown', (e) => {
            if (e.button === 0) {
@ -382,26 +403,24 @@ export default class ZhongIcon extends WuhuBase {
                offsetXY.y = e.y - nodeXY.y;
            }
        });
-        document.addEventListener('mouseup', () => isMouseDown = false);
+        document.addEventListener('mouseup', () => {
+            isMouseDown = false;
+            if (isMouseMoved) {
+                isMouseMoved = false;
+                if (WuhuConfig.get("SaveIconPosition")) {
+                    WuhuConfig.set("IconPosition", ZhongIcon.getPosition());
+                }
+            }
+        });
        document.addEventListener('mousemove', (e) => {
            if (isMouseDown) {
                ZhongIcon.setPosition(e.x - offsetXY.x, e.y - offsetXY.y);
+                isMouseMoved = true;
            }
        });
        return this;
    }

-    private static setPosition(x: number, y: number) {
-        if (!(x && y)) return;
-        if (x < 0
-            || y < 0
-            || x > document.documentElement.offsetWidth - 100
-            || y > document.documentElement.offsetHeight - 60
-        ) return;
-        ZhongIcon.ZhongNode.style.left = x + "px";
-        ZhongIcon.ZhongNode.style.top = y + "px";
-    }
-
    private static getPosition(): { x: number, y: number } {
        return {
            x: ZhongIcon.ZhongNode.style.left ? parseInt(ZhongIcon.ZhongNode.style.left.slice(0, -2)) : ZhongIcon.ZhongNode.offsetLeft,
--- a/src/class/handler/SettingsHandler.ts
+++ b/src/class/handler/SettingsHandler.ts
@ -482,6 +482,14 @@ export default class SettingsHandler extends WuhuBase {
            dictName: 'SolveGoogleScriptPendingIssue',
            tip: 'Torn引入Google登陆后可能会出现这种问题<br/>启用功能影响:<br/>页面加载速度变慢，与其他插件冲突，如遇到问题请关闭<br/>并使用其他更科学的方法解决'
        });
+        // 记住图标位置
+        list.push({
+            domType: 'checkbox',
+            domId: null,
+            domText: ' 记住图标位置',
+            dictName: 'SaveIconPosition',
+            tip: '记住图标移动后的位置'
+        });
        // 清除多余的脚本
        // list.push({
        //     domType: 'checkbox',
--- a/src/static/css/common.css
+++ b/src/static/css/common.css
@ -83,6 +83,10 @@ div#effectiveness-wrap {
    word-break: break-all;
 }

+.wh-icon-expanded {
+    min-width: 200px;
+}
+
 #wh-latest-version {
    display: inline-block;
    background-image: url("https://jjins.github.io/t2i/version.png?{{}}");