MoegirlPediaInterfaceCodes icon indicating copy to clipboard operation
MoegirlPediaInterfaceCodes copied to clipboard

feat:更新参考文献提示工具

Open ljlofficial opened this issue 3 months ago • 27 comments

跟随上游版本更新,未经过完整测试,需要测试后再进行merge。

Sourcery 总结

将 ReferenceTooltips 小工具更新到最新的上游版本,重构 JavaScript 和 CSS,以实现现代主题、可配置性和可维护性。

增强功能:

  • 通过全局 window.rt_* 覆盖暴露选择器和类,以便于自定义
  • 将工具提示逻辑重构为功能模块,采用专用的覆盖容器并简化事件处理
  • 使用 OOUI 重新设计设置对话框,包括启用切换、激活模式、延迟输入和评论切换
  • 现代化 CSS,使用变量、em 单位大小、新的 BEM 风格结构(rt-overlay, rt-hoverArea, rt-scroll, rt-content, rt-tail),并支持深色/夜间主题
  • 改进触控和移动设备检测及默认行为
Original summary in English

Sourcery 总结

将 ReferenceTooltips 小工具同步到最新的上游版本,并重构其 JavaScript 和 CSS,以提高可配置性、主题化和可维护性。

新功能:

  • 通过全局 window.rt_* 覆盖暴露关键选择器和类名
  • 使用 OOUI 重新设计设置对话框,包含启用开关、激活模式、延迟输入和评论工具提示开关

改进:

  • 将工具提示逻辑模块化为专用的覆盖容器,并简化事件处理
  • 使用 BEM 风格的类、CSS 变量、em 单位现代化 CSS,并支持深色/夜间主题
  • 增强触摸和移动设备检测及默认行为

杂项任务:

  • 更新源链接以匹配最新的上游版本
Original summary in English

Sourcery 总结

将 ReferenceTooltips 小工具与最新上游版本同步,重构其 JavaScript 和 CSS 以提高模块化和主题化能力,通过全局覆盖添加可配置性,使用 OOUI 重新设计设置对话框,并引入深色主题支持。

新功能:

  • 通过全局 window.rt_* 覆盖公开引用选择器和类名
  • 使用 OOUI 重新设计设置对话框,包括启用开关、激活模式、延迟输入和评论工具提示开关
  • 通过现代 CSS 变量支持深色/夜间主题

改进:

  • 将工具提示逻辑模块化并重构为功能构造函数,带有专用的覆盖层容器和简化的事件处理
  • 使用 BEM 风格类、基于 em 的尺寸和 CSS 变量使 CSS 现代化
  • 改进触摸屏和移动设备检测及默认行为

杂项:

  • 将 ReferencesTooltips 小工具同步到上游版本并更新源 oldid 链接
Original summary in English

Sourcery 总结

同步 ReferenceTooltips 小工具到最新的上游版本,并重构其实现,以提高可配置性、主题化和可维护性。

新功能:

  • 通过全局 window.rt_* 覆盖暴露关键选择器和类名
  • 添加一个基于 OOUI 的设置对话框,包含启用开关、激活模式、延迟输入和评论工具提示切换功能

改进:

  • 将工具提示逻辑模块化为 TooltippedElement 和 Tooltip 模块,并带有专用的覆盖容器和简化的事件处理
  • 现代化 CSS,使用变量、em 单位和 BEM 风格结构 (rt-overlay, rt-hoverArea, rt-scroll, rt-content, rt-tail),并增加深色/夜间主题支持
  • 改进触摸屏和移动设备的检测和默认行为

杂项:

  • 更新 JS 和 CSS 中的源 oldid 链接以匹配最新的上游版本
Original summary in English

Sourcery 摘要

将 ReferenceTooltips 小工具同步到最新的上游版本,并重构其 JavaScript 和 CSS,以提高可配置性、主题化能力和可维护性。

新功能:

  • 通过全局 window.rt_* 覆盖暴露关键选择器和类名,以便于自定义
  • 添加基于 OOUI 的设置对话框,包含启用开关、激活模式、延迟输入和评论提示开关
  • 使用 CSS 变量启用深色/夜间主题支持

改进:

  • 将提示逻辑模块化为 TooltippedElementTooltip,带有专用的覆盖容器和简化的事件处理
  • 使用 em 单位、新的 BEM 风格类(rt-overlayrt-hoverAreart-scrollrt-contentrt-tail)和 CSS 变量来现代化 CSS
  • 改进触摸和移动设备检测以及默认提示行为

杂项:

  • 更新 JavaScript 和 CSS 中的源 oldid 链接以匹配最新的上游版本
Original summary in English

Summary by Sourcery

Sync ReferenceTooltips gadget to the latest upstream version and refactor its JavaScript and CSS to improve configurability, theming, and maintainability.

New Features:

  • Expose key selectors and class names via global window.rt_* overrides for easy customization
  • Add an OOUI-based settings dialog with enable toggle, activation mode, delay input, and comment‐tooltip switch
  • Enable dark/night theme support using CSS variables

Enhancements:

  • Modularize tooltip logic into TooltippedElement and Tooltip with a dedicated overlay container and simplified event handling
  • Modernize CSS with em units, new BEM-style classes (rt-overlay, rt-hoverArea, rt-scroll, rt-content, rt-tail), and CSS variables
  • Improve touch and mobile device detection and default tooltip behavior

Chores:

  • Update source oldid links in JavaScript and CSS to match the latest upstream versions

ljlofficial avatar Sep 16 '25 12:09 ljlofficial

审阅者指南

此 PR 通过重构 ReferenceTooltips 小工具的 JavaScript 和 CSS,使其与最新的上游版本同步,从而提高了模块化、可配置性、主题化(包括暗模式)和可维护性。

重构后的 ReferenceTooltips 模块的类图

classDiagram
    class TooltippedElement {
        +$element
        +$originalElement
        +type
        +comment
        +noRef
        +showRef($element, ePageX, ePageY)
        +hideRef(immediately)
        +onBodyClick(e)
        +onWindowResize()
    }
    class Tooltip {
        +te : TooltippedElement
        +id
        +$content
        +$element
        +$tail
        +parent
        +isPresent
        +disappearing
        +show()
        +hide()
        +calculatePosition(ePageX, ePageY)
        +upToTopParent(func, parameters, stopAtTrue)
    }
    TooltippedElement --> Tooltip : creates
    Tooltip --> TooltippedElement : references
    class SettingsDialog {
        +enableCheckbox
        +activationMethodSelect
        +delayInput
        +tooltipsForCommentsCheckbox
        +panelSettings
        +panelDisabled
        +stackLayout
        +getSetupProcess(data)
        +getActionProcess(action)
        +getBodyHeight()
    }
    class OO.ui.WindowManager
    SettingsDialog --> OO.ui.WindowManager : uses
    Tooltip --> SettingsDialog : opens

文件级更改

更改 详情 文件
通过全局覆盖暴露选择器和类
  • 引入 window.rt_REF_LINK_SELECTOR, window.rt_COMMENTED_TEXT_CLASS, window.rt_COMMENTED_TEXT_SELECTOR
  • 如果未提供全局覆盖,则回退到默认值
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
将工具提示逻辑重构为模块化函数
  • 将 TooltippedElement 和 Tooltip 转换为独立的构造函数
  • 使用专用的覆盖容器来渲染工具提示
  • 简化显示/隐藏行为的事件绑定和委托
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
使用 OOUI 对话框重新设计设置 UI
  • 将自定义页脚链接替换为基于 OOUI 的 ProcessDialog
  • 添加启用开关、激活模式单选按钮、延迟输入和评论复选框
  • 通过 mw.cookie 持久化设置并在保存时响应式地重建工具提示
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
使用 BEM、变量和暗模式支持现代化 CSS
  • 采用 BEM 风格的类名 (rt-overlay, rt-hoverArea, rt-scroll, rt-content, rt-tail)
  • 切换到 CSS 变量、em 单位和新的关键帧动画
  • 添加暗/夜间主题覆盖
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.css
更新上游源链接
  • 将 JS 和 CSS 头文件中的 @source oldid URL 更新到最新版本
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.css

提示和命令

与 Sourcery 交互

  • 触发新审阅: 在拉取请求上评论 @sourcery-ai review
  • 继续讨论: 直接回复 Sourcery 的审阅评论。
  • 从审阅评论生成 GitHub issue: 通过回复审阅评论,要求 Sourcery 从中创建 issue。你也可以回复审阅评论并加上 @sourcery-ai issue 来创建 issue。
  • 生成拉取请求标题: 在拉取请求标题的任意位置写入 @sourcery-ai,即可随时生成标题。你也可以在拉取请求上评论 @sourcery-ai title 来随时(重新)生成标题。
  • 生成拉取请求摘要: 在拉取请求正文的任意位置写入 @sourcery-ai summary,即可随时在所需位置生成 PR 摘要。你也可以在拉取请求上评论 @sourcery-ai summary 来随时(重新)生成摘要。
  • 生成审阅者指南: 在拉取请求上评论 @sourcery-ai guide,即可随时(重新)生成审阅者指南。
  • 解决所有 Sourcery 评论: 在拉取请求上评论 @sourcery-ai resolve,以解决所有 Sourcery 评论。如果你已经处理了所有评论并且不想再看到它们,这会很有用。
  • 驳回所有 Sourcery 审阅: 在拉取请求上评论 @sourcery-ai dismiss,以驳回所有现有的 Sourcery 审阅。如果你想从头开始一次新的审阅,这尤其有用——别忘了评论 @sourcery-ai review 来触发新的审阅!

自定义你的体验

访问你的仪表板以:

  • 启用或禁用审阅功能,例如 Sourcery 生成的拉取请求摘要、审阅者指南等。
  • 更改审阅语言。
  • 添加、删除或编辑自定义审阅说明。
  • 调整其他审阅设置。

获取帮助

  • 联系我们的支持团队获取问题或反馈。
  • 访问我们的文档获取详细指南和信息。
  • 通过在 X/TwitterLinkedInGitHub 上关注我们,与 Sourcery 团队保持联系。
Original review guide in English

Reviewer's Guide

This PR syncs the ReferenceTooltips gadget to the latest upstream version by refactoring its JavaScript and CSS for improved modularity, configurability, theming (including dark mode), and maintainability.

Class diagram for refactored ReferenceTooltips modules

classDiagram
    class TooltippedElement {
        +$element
        +$originalElement
        +type
        +comment
        +noRef
        +showRef($element, ePageX, ePageY)
        +hideRef(immediately)
        +onBodyClick(e)
        +onWindowResize()
    }
    class Tooltip {
        +te : TooltippedElement
        +id
        +$content
        +$element
        +$tail
        +parent
        +isPresent
        +disappearing
        +show()
        +hide()
        +calculatePosition(ePageX, ePageY)
        +upToTopParent(func, parameters, stopAtTrue)
    }
    TooltippedElement --> Tooltip : creates
    Tooltip --> TooltippedElement : references
    class SettingsDialog {
        +enableCheckbox
        +activationMethodSelect
        +delayInput
        +tooltipsForCommentsCheckbox
        +panelSettings
        +panelDisabled
        +stackLayout
        +getSetupProcess(data)
        +getActionProcess(action)
        +getBodyHeight()
    }
    class OO.ui.WindowManager
    SettingsDialog --> OO.ui.WindowManager : uses
    Tooltip --> SettingsDialog : opens

File-Level Changes

Change Details Files
Expose selectors and classes via global overrides
  • Introduce window.rt_REF_LINK_SELECTOR, window.rt_COMMENTED_TEXT_CLASS, window.rt_COMMENTED_TEXT_SELECTOR
  • Fallback to defaults if global overrides are not provided
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
Restructure tooltip logic into modular functions
  • Convert TooltippedElement and Tooltip into standalone constructor functions
  • Use a dedicated overlay container for rendering tooltips
  • Simplify event binding and delegation for show/hide behavior
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
Redesign settings UI with OOUI dialog
  • Replace custom footer link with an OOUI-based ProcessDialog
  • Add enable toggle, activation mode radios, delay input, and comments checkbox
  • Persist settings via mw.cookie and reactively rebuild tooltips on save
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
Modernize CSS using BEM, variables, and dark mode support
  • Adopt BEM-style class names (rt-overlay, rt-hoverArea, rt-scroll, rt-content, rt-tail)
  • Switch to CSS variables, em units, and new keyframe animations
  • Add dark/night theme overrides
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.css
Update upstream source links
  • Bump @source oldid URLs in both JS and CSS headers to latest versions
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js
src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.css

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an issue from a review comment by replying to it. You can also reply to a review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull request title to generate a title at any time. You can also comment @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in the pull request body to generate a PR summary at any time exactly where you want it. You can also comment @sourcery-ai summary on the pull request to (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the pull request to resolve all Sourcery comments. Useful if you've already addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull request to dismiss all existing Sourcery reviews. Especially useful if you want to start fresh with a new review - don't forget to comment @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

  • Contact our support team for questions or feedback.
  • Visit our documentation for detailed guides and information.
  • Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

sourcery-ai[bot] avatar Sep 16 '25 12:09 sourcery-ai[bot]

好像css里面的有些类是用不上的,比如tail,我们这边没有公式,但是我不大敢删太多()

ljlofficial avatar Sep 16 '25 15:09 ljlofficial

诶我怎么rerequest了()

ljlofficial avatar Sep 18 '25 10:09 ljlofficial

用 https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/workflows/auto_fix.yaml 先 auto fix 下吧

https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/runs/17826502222 别的小工具和依赖拦着我跑autofix了(

ljlofficial avatar Sep 18 '25 11:09 ljlofficial

用 https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/workflows/auto_fix.yaml 先 auto fix 下吧

https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/runs/17826502222 别的小工具和依赖拦着我跑autofix了(

本地。

lovelyCARDINAL avatar Sep 18 '25 14:09 lovelyCARDINAL

用 https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/workflows/auto_fix.yaml 先 auto fix 下吧

https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/runs/17826502222 别的小工具和依赖拦着我跑autofix了(

本地。

行吧,晚点试试。

ljlofficial avatar Sep 18 '25 14:09 ljlofficial

好像css里面的有些类是用不上的,比如tail,我们这边没有公式,但是我不大敢删太多()

有的吧

Saoutax avatar Sep 18 '25 15:09 Saoutax

用 https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/workflows/auto_fix.yaml 先 auto fix 下吧

https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/actions/runs/17826502222 别的小工具和依赖拦着我跑autofix了(

本地。

本地跑了一下,好像不太符合预期,测试commit:https://github.com/ljlofficial/MoegirlPediaInterfaceCodes/commit/60cb183ef7e6d16a6ae860f7145b01ec224cde4d 不知道是不是我的问题,我这边是这样autofix的:

  1. 在Windows安装最新LTS版本的nodejs
  2. 在项目目录内运行npm ci
  3. 在项目目录内运行npm run format

ljlofficial avatar Sep 19 '25 04:09 ljlofficial

好像css里面的有些类是用不上的,比如tail,我们这边没有公式,但是我不大敢删太多()

有的吧

111真的吗()

ljlofficial avatar Sep 19 '25 04:09 ljlofficial

本地跑了一下,好像不太符合预期,测试commit:ljlofficial@60cb183 不知道是不是我的问题,我这边是这样autofix的:

  1. 在Windows安装最新LTS版本的nodejs
  2. 在项目目录内运行npm ci
  3. 在项目目录内运行npm run format

请勿使用 Windows(

顺便 src/gadgets/libJQuery/Gadget-libJQuery.js 是不是也应该加个忽略? @AnnAngela

gui-ying233 avatar Sep 19 '25 05:09 gui-ying233

本地跑了一下,好像不太符合预期,测试commit:ljlofficial@60cb183 不知道是不是我的问题,我这边是这样autofix的:

  1. 在Windows安装最新LTS版本的nodejs
  2. 在项目目录内运行npm ci
  3. 在项目目录内运行npm run format

请勿使用 Windows(

顺便 src/gadgets/libJQuery/Gadget-libJQuery.js 是不是也应该加个忽略? @AnnAngela

斯,那我还是拿我的fedora试试吧(

总感觉没啥区别啊(x)

ljlofficial avatar Sep 19 '25 08:09 ljlofficial

本地跑了一下,好像不太符合预期,测试commit:ljlofficial@60cb183 不知道是不是我的问题,我这边是这样autofix的:

  1. 在Windows安装最新LTS版本的nodejs
  2. 在项目目录内运行npm ci
  3. 在项目目录内运行npm run format

请勿使用 Windows(

顺便 src/gadgets/libJQuery/Gadget-libJQuery.js 是不是也应该加个忽略? @AnnAngela

好吧不行 npm run format

format eslint src --fix && stylelint src/**/*.css --fix

/run/media/ljl/Data/DEV/MoegirlPediaInterfaceCodes/src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js  933:2  error  Parsing error: Unexpected token (

/run/media/ljl/Data/DEV/MoegirlPediaInterfaceCodes/src/gadgets/libJQuery/Gadget-libJQuery.js  87:2  error  Parsing error: Unexpected token (

✖ 2 problems (2 errors, 0 warnings)

ljlofficial avatar Sep 19 '25 09:09 ljlofficial

好吧不行 npm run format

format eslint src --fix && stylelint src/**/*.css --fix

/run/media/ljl/Data/DEV/MoegirlPediaInterfaceCodes/src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js  933:2  error  Parsing error: Unexpected token (

/run/media/ljl/Data/DEV/MoegirlPediaInterfaceCodes/src/gadgets/libJQuery/Gadget-libJQuery.js  87:2  error  Parsing error: Unexpected token (

✖ 2 problems (2 errors, 0 warnings)

对的,手动修一下括号位置就行了

gui-ying233 avatar Sep 19 '25 09:09 gui-ying233

好吧不行 npm run format format eslint src --fix && stylelint src/**/*.css --fix /run/media/ljl/Data/DEV/MoegirlPediaInterfaceCodes/src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js  933:2  error  Parsing error: Unexpected token ( /run/media/ljl/Data/DEV/MoegirlPediaInterfaceCodes/src/gadgets/libJQuery/Gadget-libJQuery.js  87:2  error  Parsing error: Unexpected token ( ✖ 2 problems (2 errors, 0 warnings)

对的,手动修一下括号位置就行了

OK,让AI审查一下)

ljlofficial avatar Sep 19 '25 09:09 ljlofficial

@sourcery-ai review

ljlofficial avatar Sep 19 '25 09:09 ljlofficial

@sourcery-ai review

ljlofficial avatar Sep 19 '25 10:09 ljlofficial

我的意思是lint修一下就好了,剩下的就不动他了,避免出问题

AnnAngela avatar Sep 19 '25 14:09 AnnAngela

一般而言,像这种为了过lint修改过的,只需要在源站进行比较(例如css:https://en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-ReferenceTooltips.css&diff=cur&oldid=1099886701)然后手动把差异写到repo里就行了

AnnAngela avatar Sep 19 '25 14:09 AnnAngela

好吧,差异有点大

AnnAngela avatar Sep 19 '25 14:09 AnnAngela

好吧,差异有点大

诶哟我…… 唉,我提交一个commit把一些东西加回来先(

ljlofficial avatar Sep 19 '25 15:09 ljlofficial

@ljlofficial 记得改下lint

有空我看一下

ljlofficial avatar Sep 26 '25 00:09 ljlofficial

Assignment to constant

怎么把let改成const

eslint要求改用const……等会我回滚一下。

ljlofficial avatar Oct 01 '25 02:10 ljlofficial

@sourcery-ai review

ljlofficial avatar Oct 01 '25 05:10 ljlofficial

还是一样啊,lint问题没解决

我已经鸽了好久了,我看一下。

ljlofficial avatar Nov 11 '25 12:11 ljlofficial

请重点检查对移动端的检测和重复窗口的检测是否异常。 仍有variable类型不清晰,部分fuction仍未进行现代化修改。

ljlofficial avatar Nov 11 '25 14:11 ljlofficial

请重点检查对移动端的检测和重复窗口的检测是否异常。 仍有variable类型不清晰,部分fuction仍未进行现代化修改。

cc: @AnnAngela @lovelyCARDINAL @gui-ying233

ljlofficial avatar Nov 11 '25 14:11 ljlofficial