${data.title || ''}
\n${data.msg}
\n \n `;\r\n theme.register(wrap);\r\n lang.register(wrap);\r\n const btn = wrap.querySelector('.btn');\r\n if (btn) {\r\n wrap.addEventListener('click', (ev) => {\r\n ev.stopPropagation();\r\n });\r\n btn.addEventListener('click', () => {\r\n this.remove(wrap);\r\n });\r\n window.addEventListener(EVT.list.closeCenterPanel, () => {\r\n this.remove(wrap);\r\n });\r\n }\r\n document.body.append(wrap);\r\n btn.focus();\r\n bg.useBG(wrap);\r\n }\r\n remove(el) {\r\n el && el.parentNode && el.parentNode.removeChild(el);\r\n }\r\n}\r\nconst msgBox = new MsgBox();\r\nexport { msgBox };\r\n","import { WorkThumbnail } from './WorkThumbnail';\r\nimport { pageType } from './PageType';\r\nimport { Tools } from './Tools';\r\n// 查找小说作品的缩略图，当鼠标进入、移出时等动作触发时执行回调函数\r\nclass NovelThumbnail extends WorkThumbnail {\r\n constructor() {\r\n super();\r\n this.selectors = [\r\n 'li[size=\"1\"]>div',\r\n 'section li>div',\r\n 'nav>div>div',\r\n 'div.gtm-novel-work-recommend-link',\r\n 'section ul>div',\r\n 'section ul>li',\r\n 'div._ranking-item',\r\n 'div[size=\"496\"]',\r\n 'li',\r\n ];\r\n this.findThumbnail(document.body);\r\n this.createObserver(document.body);\r\n }\r\n findThumbnail(parent) {\r\n if (!parent.querySelectorAll) {\r\n return;\r\n }\r\n // 遍历所有的选择器，为找到的元素绑定事件\r\n // 注意：有时候一个节点里会含有多种尺寸的缩略图，为了全部查找到它们，必须遍历所有的选择器。\r\n // 如果在查找到某个选择器之后，不再查找剩余的选择器，就可能会遗漏一部分缩略图。\r\n // 但是，这有可能会导致事件的重复绑定，所以下载器添加了 dataset.mouseover 标记以减少重复绑定\r\n for (const selector of this.selectors) {\r\n // 处理特殊的选择器\r\n // 在用户主页只使用指定的选择器，避免其他选择器导致顶部“精选”的小说作品被重复绑定事件\r\n if (pageType.type === pageType.list.UserHome &&\r\n selector !== 'section ul>li' &&\r\n selector !== 'li[size=\"1\"]>div') {\r\n continue;\r\n }\r\n // 在小说排行榜里只使用 div._ranking-item\r\n if (pageType.type === pageType.list.NovelRanking &&\r\n selector !== 'div._ranking-item') {\r\n continue;\r\n }\r\n // 在小说系列页面里只使用 section ul>li\r\n if (pageType.type === pageType.list.NovelSeries &&\r\n selector !== 'section ul>li') {\r\n continue;\r\n }\r\n // div.gtm-novel-work-recommend-link 只能在小说页面里使用\r\n if (selector === 'div.gtm-novel-work-recommend-link' &&\r\n pageType.type !== pageType.list.Novel) {\r\n continue;\r\n }\r\n let elements = parent.querySelectorAll(selector);\r\n // 处理特殊的动态添加的元素\r\n // 有些动态添加的元素不能被选择器选中\r\n // 小说系列页面里动态添加的就是 li 元素，并且这个 li 元素必须整个使用，不能再细分\r\n if (pageType.type === pageType.list.NovelSeries &&\r\n parent.nodeName === 'LI') {\r\n elements = [parent];\r\n }\r\n for (const el of elements) {\r\n const id = Tools.findWorkIdFromElement(el, 'novels');\r\n // 只有查找到作品 id 时才会执行回调函数\r\n if (id) {\r\n this.bindEvents(el, id);\r\n }\r\n }\r\n }\r\n }\r\n}\r\nconst novelThumbnail = new NovelThumbnail();\r\nexport { novelThumbnail };\r\n","import { EVT } from './EVT';\r\nimport { lang } from './Lang';\r\n// 页面右侧的按钮，点击可以打开中间面板\r\nclass OpenCenterPanel {\r\n constructor() {\r\n this.btn = document.createElement('button');\r\n this.addBtn();\r\n this.show();\r\n this.bindEvents();\r\n }\r\n addBtn() {\r\n this.btn = document.createElement('button');\r\n this.btn.classList.add('rightButton');\r\n this.btn.id = 'openCenterPanelBtn';\r\n this.btn.setAttribute('data-xztitle', '_显示下载面板');\r\n this.btn.innerHTML = ``;\r\n document.body.append(this.btn);\r\n lang.register(this.btn);\r\n }\r\n bindEvents() {\r\n // 这里阻止事件冒泡是为了配合 CenterPanel 的“点击页面其他部分隐藏 CenterPanel”的效果\r\n this.btn.addEventListener('click', (e) => {\r\n const ev = e || window.event;\r\n ev.stopPropagation();\r\n EVT.fire('openCenterPanel');\r\n });\r\n window.addEventListener(EVT.list.centerPanelClosed, () => {\r\n this.show();\r\n });\r\n window.addEventListener(EVT.list.centerPanelOpened, () => {\r\n this.hide();\r\n });\r\n }\r\n show() {\r\n this.btn.style.display = 'flex';\r\n }\r\n hide() {\r\n this.btn.style.display = 'none';\r\n }\r\n}\r\nnew OpenCenterPanel();\r\n","import { EVT } from './EVT';\r\n// 所有页面类型及对应的数字编号\r\n// 可以通过 pageType.list 使用\r\nvar PageName;\r\n(function (PageName) {\r\n PageName[PageName[\"Unsupported\"] = -1] = \"Unsupported\";\r\n PageName[PageName[\"Home\"] = 0] = \"Home\";\r\n PageName[PageName[\"Artwork\"] = 1] = \"Artwork\";\r\n PageName[PageName[\"UserHome\"] = 2] = \"UserHome\";\r\n PageName[PageName[\"BookmarkLegacy\"] = 3] = \"BookmarkLegacy\";\r\n PageName[PageName[\"Bookmark\"] = 4] = \"Bookmark\";\r\n PageName[PageName[\"ArtworkSearch\"] = 5] = \"ArtworkSearch\";\r\n PageName[PageName[\"AreaRanking\"] = 6] = \"AreaRanking\";\r\n PageName[PageName[\"ArtworkRanking\"] = 7] = \"ArtworkRanking\";\r\n PageName[PageName[\"Pixivision\"] = 8] = \"Pixivision\";\r\n PageName[PageName[\"BookmarkDetail\"] = 9] = \"BookmarkDetail\";\r\n PageName[PageName[\"NewArtworkBookmark\"] = 10] = \"NewArtworkBookmark\";\r\n PageName[PageName[\"Discover\"] = 11] = \"Discover\";\r\n PageName[PageName[\"NewArtwork\"] = 12] = \"NewArtwork\";\r\n PageName[PageName[\"Novel\"] = 13] = \"Novel\";\r\n PageName[PageName[\"NovelSeries\"] = 14] = \"NovelSeries\";\r\n PageName[PageName[\"NovelSearch\"] = 15] = \"NovelSearch\";\r\n PageName[PageName[\"NovelRanking\"] = 16] = \"NovelRanking\";\r\n PageName[PageName[\"NewNovelBookmark\"] = 17] = \"NewNovelBookmark\";\r\n PageName[PageName[\"NewNovel\"] = 18] = \"NewNovel\";\r\n PageName[PageName[\"ArtworkSeries\"] = 19] = \"ArtworkSeries\";\r\n PageName[PageName[\"Following\"] = 20] = \"Following\";\r\n PageName[PageName[\"Request\"] = 21] = \"Request\";\r\n PageName[PageName[\"Unlisted\"] = 22] = \"Unlisted\";\r\n})(PageName || (PageName = {}));\r\n// 获取页面类型\r\nclass PageType {\r\n constructor() {\r\n // 当前页面类型\r\n this.type = PageName.Unsupported;\r\n // 所有页面类型\r\n this.list = PageName;\r\n this.type = this.getType();\r\n window.addEventListener(EVT.list.pageSwitch, () => {\r\n this.checkTypeChange();\r\n });\r\n }\r\n getType() {\r\n const url = window.location.href;\r\n const pathname = window.location.pathname;\r\n if (window.location.hostname === 'www.pixiv.net' &&\r\n ['/', '/manga', '/novel/', '/en/'].includes(pathname)) {\r\n return PageName.Home;\r\n }\r\n else if ((pathname.startsWith('/artworks') ||\r\n pathname.startsWith('/en/artworks')) &&\r\n /\\/artworks\\/\\d{1,10}/.test(url)) {\r\n return PageName.Artwork;\r\n }\r\n else if (/\\/users\\/\\d+/.test(url) && !url.includes('/bookmarks')) {\r\n if (pathname.includes('/following') ||\r\n pathname.includes('/mypixiv') ||\r\n pathname.includes('/followers')) {\r\n return PageName.Following;\r\n }\r\n else {\r\n return PageName.UserHome;\r\n }\r\n }\r\n else if (pathname.endsWith('bookmark.php')) {\r\n return PageName.BookmarkLegacy;\r\n }\r\n else if (pathname.includes('/bookmarks/')) {\r\n return PageName.Bookmark;\r\n }\r\n else if (url.includes('/tags/')) {\r\n return pathname.endsWith('/novels')\r\n ? PageName.NovelSearch\r\n : PageName.ArtworkSearch;\r\n }\r\n else if (pathname === '/ranking_area.php' && location.search !== '') {\r\n return PageName.AreaRanking;\r\n }\r\n else if (pathname === '/ranking.php') {\r\n return PageName.ArtworkRanking;\r\n }\r\n else if (url.includes('https://www.pixivision.net') &&\r\n url.includes('/a/')) {\r\n return PageName.Pixivision;\r\n }\r\n else if (url.includes('/bookmark_add.php?id=') ||\r\n url.includes('/bookmark_detail.php?illust_id=')) {\r\n return PageName.BookmarkDetail;\r\n }\r\n else if (url.includes('/bookmark_new_illust.php') ||\r\n url.includes('/bookmark_new_illust_r18.php')) {\r\n return PageName.NewArtworkBookmark;\r\n }\r\n else if (pathname === '/discovery' ||\r\n pathname.startsWith('/novel/discovery')) {\r\n return PageName.Discover;\r\n }\r\n else if (url.includes('/new_illust.php') ||\r\n url.includes('/new_illust_r18.php')) {\r\n return PageName.NewArtwork;\r\n }\r\n else if (pathname === '/novel/show.php') {\r\n return PageName.Novel;\r\n }\r\n else if (pathname.startsWith('/novel/series/')) {\r\n return PageName.NovelSeries;\r\n }\r\n else if (pathname === '/novel/ranking.php') {\r\n return PageName.NovelRanking;\r\n }\r\n else if (pathname.startsWith('/novel/bookmark_new')) {\r\n return PageName.NewNovelBookmark;\r\n }\r\n else if (pathname.startsWith('/novel/new')) {\r\n return PageName.NewNovel;\r\n }\r\n else if (pathname.startsWith('/user/') && pathname.includes('/series/')) {\r\n return PageName.ArtworkSeries;\r\n }\r\n else if (pathname.startsWith('/request')) {\r\n return PageName.Request;\r\n }\r\n else if (pathname.includes('/unlisted')) {\r\n return PageName.Unlisted;\r\n }\r\n else {\r\n // 没有匹配到可用的页面类型\r\n return PageName.Unsupported;\r\n }\r\n }\r\n // 页面切换时，检查页面类型是否变化\r\n checkTypeChange() {\r\n const old = this.type;\r\n this.type = this.getType();\r\n if (this.type !== old) {\r\n EVT.fire('pageSwitchedTypeChange', this.type);\r\n }\r\n else {\r\n EVT.fire('pageSwitchedTypeNotChange', this.type);\r\n }\r\n }\r\n}\r\nconst pageType = new PageType();\r\nexport { pageType };\r\n","import { API } from './API';\r\nimport { log } from './Log';\r\nimport { settings } from './setting/Settings';\r\nimport { Tools } from './Tools';\r\n// 预览动图\r\nclass PreviewUgoira {\r\n constructor(id, canvasWrap, prevSize, wrapWidth, wrapHeight) {\r\n this.prevSize = 'regular';\r\n /**完整的 zip 文件的字节数 */\r\n this.zipLength = 0;\r\n /** 用固定的字节数分割出多个文件片段 */\r\n this.rangeSize = 500000;\r\n /**保存每个文件片段的请求头的值\r\n * 字符串格式如 'bytes=0-499999'\r\n */\r\n this.rangeList = [];\r\n /**把分段加载的 zip 文件合并，保存到这个容器 */\r\n this.zipContent = new ArrayBuffer(0);\r\n /**所有文件片段是否都加载完毕 */\r\n this.loadend = false;\r\n /**每个 jpg 文件内容的开始位置 */\r\n this.jpgContentIndexList = [];\r\n /**每个 jpg 文件的数据。按照图片在压缩包里的顺序，储存对应的数据 */\r\n this.jpgFileList = [];\r\n // jpg 文件名的长度固定为 10 个字节 000000.jpg\r\n this.jpgNameLength = 10;\r\n this.wrapWidth = 0;\r\n this.wrapHeight = 0;\r\n this.canvas = document.createElement('canvas');\r\n this.canvasCon = this.canvas.getContext('2d');\r\n this.canvasIsAppend = false;\r\n this.width = 0;\r\n this.height = 0;\r\n this.destroyed = false;\r\n this.playIndex = 0;\r\n this.playDelay = 0;\r\n this.lastPlayTime = 0;\r\n this.animationID = 0;\r\n this.play = (timestamp) => {\r\n if (this.lastPlayTime === 0) {\r\n this.lastPlayTime = timestamp;\r\n }\r\n // 计算自上次执行之后，是否到了该执行下一次动画的时间\r\n if (timestamp - this.lastPlayTime >= this.playDelay) {\r\n // 如果要播放的图片尚未加载完成，则等到下一次动画帧再执行\r\n const img = this.jpgFileList[this.playIndex].img;\r\n if (!img.complete) {\r\n return (this.animationID = window.requestAnimationFrame(this.play));\r\n }\r\n this.canvasCon.drawImage(img, 0, 0, this.width, this.height);\r\n // 绘制出第一张图片之后，才能显示 canvas 并隐藏之前的 img\r\n // 如果过早的隐藏 img 并显示 canvas，会导致闪烁（因为 img 先隐藏，此时 canvas 还没有绘制图像）\r\n if (this.playIndex === 0) {\r\n this.canvas.style.display = 'inline-block';\r\n const img = this.canvasWrap.querySelector('img');\r\n if (img) {\r\n img.style.display = 'none';\r\n }\r\n }\r\n this.playDelay = this.jpgFileList[this.playIndex].delay;\r\n this.playIndex++;\r\n if (this.playIndex > this.jpgFileList.length - 1) {\r\n this.playIndex = 0;\r\n }\r\n // 记录最后一次执行动画的时间\r\n this.lastPlayTime = timestamp;\r\n }\r\n this.animationID = window.requestAnimationFrame(this.play);\r\n };\r\n if (!settings.previewUgoira) {\r\n return;\r\n }\r\n this.id = id;\r\n this.canvasWrap = canvasWrap;\r\n this.prevSize = prevSize;\r\n wrapWidth && (this.wrapWidth = wrapWidth);\r\n wrapHeight && (this.wrapHeight = wrapHeight);\r\n this.start();\r\n }\r\n async start() {\r\n // 获取这个动图的 meta 数据\r\n this.meta = await this.getMeta(this.id);\r\n // 目前只支持提取 jpg 图片\r\n if (this.meta.mime_type !== 'image/jpeg') {\r\n const msg = 'Preview ugoira error: mime type unsupport: ' + this.meta.mime_type;\r\n log.warning(msg);\r\n console.warn(msg);\r\n return;\r\n }\r\n // 设置要使用的 URL\r\n if (this.prevSize === 'regular') {\r\n this.zipURL = this.meta.src;\r\n }\r\n else {\r\n this.zipURL = this.meta.originalSrc;\r\n }\r\n // 获取动图体积\r\n this.zipLength = await this.getFileLength();\r\n // 生成区间\r\n this.rangeList = this.setRangeList(this.zipLength, this.rangeSize);\r\n for (const range of this.rangeList) {\r\n // 加载文件片段\r\n const buff = await this.loadRangeFileAsBuff(range);\r\n if (this.destroyed) {\r\n return;\r\n }\r\n // 把这个文件片段追加到文件容器里\r\n this.zipContent = this.appendBuff(this.zipContent, buff);\r\n // 判断整个压缩包是否全部加载完毕\r\n this.loadend = this.zipContent.byteLength === this.zipLength;\r\n // 提取出每个 jpg 图片的数据\r\n // 由于我之前使用的 zip 库无法解析不完整的 zip 文件，所以我需要自己提取 jpg 图片的数据\r\n this.jpgContentIndexList = Tools.getJPGContentIndex(this.zipContent, this.jpgContentIndexList);\r\n this.extractJPGData(this.zipContent, this.jpgContentIndexList);\r\n // 设置画布的宽高\r\n if (this.jpgFileList.length > 0 && this.width === 0) {\r\n // 画布的宽高不能超过外部 wrap 的宽高\r\n // 本来我是打算从 wrap 宽度和动图宽度中取比较小的值\r\n // const size = await this.getImageSize(this.jpgFileList[0].blobURL)\r\n // this.width = Math.min(size.width, wrapWidth)\r\n // this.height = Math.min(size.height, wrapHeight)\r\n // 但是当预览作品的尺寸为“普通”时，动图的尺寸可能比 wrap 的尺寸小\r\n // 因为 wrap 显示的普通尺寸是 1200px，但是动图的普通尺寸是 600px\r\n // 所以我直接让画布使用 wrap 的尺寸了。如果动图比 wrap 小，就会放大到 wrap 的尺寸\r\n this.width =\r\n this.wrapWidth || Number.parseInt(this.canvasWrap.style.width);\r\n this.height =\r\n this.wrapHeight || Number.parseInt(this.canvasWrap.style.height);\r\n }\r\n // 检查是否应该开始播放动画\r\n // 如果动画的图片总量达到了 30 帧，则等到至少加载了 10 帧之后再开始播放\r\n // 这样可以减少在刚开始播放时，因可用帧数太少而导致画面看起来抖动（快速循环）的诡异情况\r\n if (this.meta.frames.length >= 30) {\r\n this.jpgFileList.length >= 10 && this.startPlay();\r\n }\r\n else if (this.meta.frames.length >= 20) {\r\n this.jpgFileList.length >= 5 && this.startPlay();\r\n }\r\n else if (this.meta.frames.length >= 10) {\r\n this.jpgFileList.length >= 4 && this.startPlay();\r\n }\r\n else {\r\n this.jpgFileList.length >= 1 && this.startPlay();\r\n }\r\n }\r\n // 保存整个压缩包（debug 用）\r\n // const newFile = new Blob([this.zipContent])\r\n // const url = URL.createObjectURL(newFile)\r\n // Utils.downloadFile(url, `${this.id}.zip`)\r\n }\r\n /**获取该作品的 meta 数据 */\r\n getMeta(id) {\r\n return new Promise(async (resolve, reject) => {\r\n const meta = await API.getUgoiraMeta(id);\r\n if (meta.error) {\r\n throw reject(meta.message);\r\n }\r\n resolve(meta.body);\r\n });\r\n }\r\n /** 发送 HEAD 请求，获取 zip 压缩包的体积 */\r\n getFileLength() {\r\n return new Promise(async (resolve, reject) => {\r\n const response = await fetch(this.zipURL, {\r\n method: 'head',\r\n credentials: 'same-origin',\r\n });\r\n const length = response.headers.get('content-length');\r\n if (!length) {\r\n throw reject('getFileLength error: get length failed');\r\n }\r\n resolve(Number.parseInt(length));\r\n });\r\n }\r\n /** 根据 zip 文件的体积分割出数个区间，生成对应的标记文本 */\r\n setRangeList(total, rangeSize) {\r\n const result = [];\r\n // total 是 length，但 start 和 end 是下标\r\n let start = 0;\r\n let end = 0;\r\n const max = total - 1;\r\n while (end < max) {\r\n if (start > 0) {\r\n start++;\r\n }\r\n end = start + rangeSize - 1;\r\n if (end > max) {\r\n end = max;\r\n }\r\n const str = `bytes=${start}-${end}`;\r\n result.push(str);\r\n start = end;\r\n }\r\n return result;\r\n }\r\n loadRangeFileAsBuff(range) {\r\n return new Promise(async (resolve, reject) => {\r\n const res = await fetch(this.zipURL, {\r\n method: 'get',\r\n headers: {\r\n range: range,\r\n },\r\n });\r\n const buff = await res.arrayBuffer();\r\n resolve(buff);\r\n });\r\n }\r\n /**把 ArrayBuffer 追加到已存在的 ArrayBuffer 容器里 */\r\n appendBuff(target, newBuff) {\r\n const totalLength = target.byteLength + newBuff.byteLength;\r\n const uint8 = new Uint8Array(totalLength);\r\n uint8.set(new Uint8Array(target));\r\n uint8.set(new Uint8Array(newBuff), target.byteLength);\r\n return uint8.buffer;\r\n }\r\n /** 从 zip 文件里提取出所有 jpg 图片的数据 */\r\n extractJPGData(file, indexList) {\r\n indexList.forEach((number, index, array) => {\r\n // 如果这是最后一个标记，并且压缩包没有整个加载完成，则不提取最后一个文件的数据\r\n // 因为此时最后一个文件的数据很可能是破损的\r\n if (index === array.length - 1 && !this.loadend) {\r\n return;\r\n }\r\n // 如果这张图片没有被保存，才会提取它\r\n // 如果已经有这个图片的数据，就不再提取它，以提高性能\r\n if (this.jpgFileList[index] === undefined) {\r\n // 确定要提取的文件的起始位置\r\n // 从当前文件名之后开始\r\n const start = number;\r\n // 截止下一个文件名之前\r\n // 删除不需要的数据：\r\n // 30 字节的是 zip 文件的数据，虽然没有实际影响，但还是去掉\r\n // 10 字节的是下一个 jpg 的文件名\r\n let end = array[index + 1] - 30 - this.jpgNameLength;\r\n if (index === array.length - 1) {\r\n // 如果是最后一个 jpg 文件，则截止到 zip 文件的结尾\r\n // 这导致它会包含 zip 的目录数据，但是不会影响图片的显示\r\n end = file.byteLength;\r\n }\r\n // slice 方法的 end 不会包含在结果里\r\n const buffer = file.slice(start, end);\r\n const blob = new Blob([buffer], {\r\n type: 'image/jpeg',\r\n });\r\n const url = URL.createObjectURL(blob);\r\n // 下载这张图片（debug 用）\r\n // Utils.downloadFile(url, `${index}.jpg`)\r\n const img = new Image(this.width, this.height);\r\n img.src = url;\r\n this.jpgFileList[index] = {\r\n img: img,\r\n delay: this.meta.frames[index].delay,\r\n };\r\n }\r\n });\r\n }\r\n startPlay() {\r\n if (this.jpgFileList.length > 0 && !this.canvasIsAppend) {\r\n this.addCanvas();\r\n this.canvasIsAppend = true;\r\n this.animationID = window.requestAnimationFrame(this.play);\r\n }\r\n }\r\n addCanvas() {\r\n const oldCanvas = this.canvasWrap.querySelector('canvas');\r\n if (oldCanvas) {\r\n oldCanvas.remove();\r\n }\r\n this.canvas.style.display = 'none';\r\n this.canvasWrap.append(this.canvas);\r\n this.canvas.width = this.width;\r\n this.canvas.height = this.height;\r\n }\r\n destroy() {\r\n this.destroyed = true;\r\n window.cancelAnimationFrame(this.animationID);\r\n this.canvas.remove();\r\n this.zipContent = new ArrayBuffer(0);\r\n this.jpgFileList = [];\r\n this.jpgContentIndexList = [];\r\n }\r\n}\r\nexport { PreviewUgoira };\r\n","import { API } from './API';\r\nimport { EVT } from './EVT';\r\nimport { artworkThumbnail } from './ArtworkThumbnail';\r\nimport { settings, setSetting } from './setting/Settings';\r\nimport { showOriginSizeImage } from './ShowOriginSizeImage';\r\nimport { cacheWorkData } from './store/CacheWorkData';\r\nimport { states } from './store/States';\r\nimport { Utils } from './utils/Utils';\r\nimport { PreviewUgoira } from './PreviewUgoira';\r\nimport { toast } from './Toast';\r\nimport { lang } from './Lang';\r\nimport { Colors } from './Colors';\r\nimport { DateFormat } from './utils/DateFormat';\r\n// 鼠标停留在作品的缩略图上时，预览作品\r\nclass PreviewWork {\r\n constructor() {\r\n // 预览作品的容器的元素\r\n this.wrapId = 'previewWorkWrap';\r\n this.img = document.createElement('img');\r\n this.border = 4; // border 占据的空间\r\n this.tipId = 'previewWorkTip';\r\n this.tipHeight = 22;\r\n // 保存当前鼠标经过的缩略图的数据\r\n this.workId = '';\r\n // 显示作品中的第几张图片\r\n this.index = 0;\r\n // 延迟显示预览区域的定时器\r\n // 鼠标进入缩略图时，本模块会立即请求作品数据，但在请求完成后不会立即加载图片，这是为了避免浪费网络资源\r\n this.delayShowTimer = undefined;\r\n // 延迟隐藏预览区域的定时器\r\n this.delayHiddenTimer = undefined;\r\n // 当用户点击预览图使预览图隐藏时，不再显示这个作品的预览图（切换作品可以解除限制）\r\n this.dontShowAgain = false;\r\n // 是否允许预览区域遮挡作品缩略图\r\n this.allowOverThumb = true;\r\n // 当前预览图是否遮挡了作品缩略图\r\n this.overThumb = false;\r\n this._show = false;\r\n // 当鼠标滚轮滚动时，切换显示的图片\r\n // 此事件必须使用节流，因为有时候鼠标滚轮短暂的滚动一下就会触发 2 次 mousewheel 事件\r\n this.swicthImage = Utils.throttle(() => {\r\n const count = this.workData.body.pageCount;\r\n const up = this.wheelEvent.deltaY < 0;\r\n if (up) {\r\n if (this.index > 0) {\r\n this.index--;\r\n }\r\n else {\r\n this.index = count - 1;\r\n }\r\n }\r\n else {\r\n if (this.index < count - 1) {\r\n this.index++;\r\n }\r\n else {\r\n this.index = 0;\r\n }\r\n }\r\n this.showWrap();\r\n }, 100);\r\n this.onWheelScroll = (ev) => {\r\n if (this.show &&\r\n settings.wheelScrollSwitchImageOnPreviewWork &&\r\n this.workData.body.pageCount > 1) {\r\n ev.preventDefault();\r\n this.wheelEvent = ev;\r\n this.swicthImage();\r\n }\r\n };\r\n this.createElements();\r\n this.bindEvents();\r\n }\r\n get show() {\r\n return this._show;\r\n }\r\n set show(val) {\r\n if (val) {\r\n this.workData = cacheWorkData.get(this.workId);\r\n // 如果保存的作品数据不是最后一个鼠标经过的作品，可能是请求尚未完成，此时延长等待时间\r\n if (!this.workData || this.workData.body.id !== this.workId) {\r\n this.readyShow();\r\n }\r\n else {\r\n this.sendUrls();\r\n if (settings.PreviewWork) {\r\n this._show = true;\r\n this.showWrap();\r\n window.clearTimeout(this.delayHiddenTimer);\r\n }\r\n }\r\n }\r\n else {\r\n // 隐藏时重置一些变量\r\n window.clearTimeout(this.delayShowTimer);\r\n window.clearTimeout(this.delayHiddenTimer);\r\n this.overThumb = false;\r\n this._show = false;\r\n this.dontShowAgain = false;\r\n this.wrap.style.display = 'none';\r\n // 隐藏 wrap 时，把 img 的 src 设置为空\r\n // 这样图片会停止加载，避免浪费网络资源\r\n this.img.src = '';\r\n // 销毁预览动图的模块\r\n if (this.previewUgoira) {\r\n this.previewUgoira.destroy();\r\n this.previewUgoira = null;\r\n }\r\n }\r\n }\r\n createElements() {\r\n this.wrap = document.createElement('div');\r\n this.wrap.id = this.wrapId;\r\n this.tip = document.createElement('div');\r\n this.tip.id = this.tipId;\r\n this.wrap.appendChild(this.tip);\r\n document.body.appendChild(this.wrap);\r\n }\r\n bindEvents() {\r\n artworkThumbnail.onEnter((el, id) => {\r\n if (this.dontShowAgain) {\r\n return;\r\n }\r\n // 当鼠标进入到不同作品时\r\n // 隐藏之前的预览图\r\n // 重置 index\r\n if (this.workId !== id) {\r\n this.show = false;\r\n this.index = 0;\r\n }\r\n this.workId = id;\r\n this.workEL = el;\r\n if (!cacheWorkData.has(id)) {\r\n // 如果在缓存中没有找到这个作品的数据，则发起请求\r\n this.fetchWorkData();\r\n }\r\n else {\r\n this.workData = cacheWorkData.get(id);\r\n }\r\n this.readyShow();\r\n el.addEventListener('mousewheel', this.onWheelScroll);\r\n });\r\n artworkThumbnail.onLeave((el) => {\r\n if (this.overThumb) {\r\n // 如果预览图遮挡了作品缩略图，就需要延迟隐藏预览图。\r\n // 因为预览图显示之后，鼠标可能处于预览图上，这会触发此事件。\r\n // 如果不延迟隐藏，预览图就会马上消失，无法查看\r\n this.delayHiddenTimer = window.setTimeout(() => {\r\n this.show = false;\r\n el.removeEventListener('mousewheel', this.onWheelScroll);\r\n }, 100);\r\n }\r\n else {\r\n this.show = false;\r\n el.removeEventListener('mousewheel', this.onWheelScroll);\r\n }\r\n });\r\n // 可以使用 Alt + P 快捷键来启用/禁用此功能\r\n // 预览作品时，可以使用快捷键 D 下载这个作品\r\n window.addEventListener('keydown', (ev) => {\r\n if (ev.altKey && ev.code === 'KeyP') {\r\n setSetting('PreviewWork', !settings.PreviewWork);\r\n }\r\n if (ev.code === 'KeyD' && this.show) {\r\n EVT.fire('crawlIdList', [\r\n {\r\n type: 'illusts',\r\n id: this.workData.body.id,\r\n },\r\n ]);\r\n // 下载时不显示下载面板\r\n states.quickCrawl = true;\r\n toast.show(lang.transl('_已发送下载请求'), {\r\n bgColor: Colors.bgBlue,\r\n position: 'center',\r\n });\r\n }\r\n });\r\n const hiddenEvtList = [\r\n EVT.list.pageSwitch,\r\n EVT.list.centerPanelOpened,\r\n EVT.list.showOriginSizeImage,\r\n ];\r\n hiddenEvtList.forEach((evt) => {\r\n window.addEventListener(evt, () => {\r\n this.show = false;\r\n });\r\n });\r\n this.wrap.addEventListener('mouseenter', () => {\r\n window.clearTimeout(this.delayHiddenTimer);\r\n });\r\n this.wrap.addEventListener('mousemove', (ev) => {\r\n // 鼠标在预览图上移动出缩略图区域时，隐藏预览图\r\n if (this.mouseInElementArea(this.workEL, ev.clientX, ev.clientY) === false) {\r\n this.show = false;\r\n }\r\n });\r\n this.wrap.addEventListener('click', (ev) => {\r\n this.show = false;\r\n // 点击预览图使预览图消失时，如果鼠标仍处于缩略图区域内，则不再显示这个作品的预览图\r\n // 当鼠标移出这个作品的缩略图之后取消此限制\r\n if (this.mouseInElementArea(this.workEL, ev.clientX, ev.clientY)) {\r\n this.dontShowAgain = true;\r\n }\r\n });\r\n this.wrap.addEventListener('mousewheel', (ev) => {\r\n this.overThumb && this.onWheelScroll(ev);\r\n });\r\n }\r\n // 判断鼠标是否处于某个元素的范围内\r\n mouseInElementArea(el, x, y) {\r\n if (!el) {\r\n return false;\r\n }\r\n const rect = el.getBoundingClientRect();\r\n return x > rect.left && x < rect.right && y > rect.top && y < rect.bottom;\r\n }\r\n preload() {\r\n // 如果下载器正在下载文件，则不预加载\r\n if (this.show && !states.downloading) {\r\n const count = this.workData.body.pageCount;\r\n if (count > this.index + 1) {\r\n let url = this.workData.body.urls[settings.prevWorkSize];\r\n url = url.replace('p0', `p${this.index + 1}`);\r\n let img = new Image();\r\n // 在预加载过程中，如果查看的图片变化了，或者不显示预览区域了，则立即中断预加载\r\n const nowIndex = this.index;\r\n const timer = window.setInterval(() => {\r\n if (this.index !== nowIndex || !this.show) {\r\n window.clearInterval(timer);\r\n img && (img.src = '');\r\n img = null;\r\n }\r\n }, 50);\r\n img.onload = () => {\r\n window.clearInterval(timer);\r\n img && (img = null);\r\n };\r\n img.src = url;\r\n }\r\n }\r\n }\r\n async fetchWorkData() {\r\n const data = await API.getArtworkData(this.workId);\r\n cacheWorkData.set(data);\r\n }\r\n readyShow() {\r\n this.delayShowTimer = window.setTimeout(() => {\r\n this.show = true;\r\n }, settings.previewWorkWait);\r\n }\r\n // 通过 img 元素加载图片，获取图片的原始尺寸\r\n async getImageSize(url) {\r\n return new Promise((resolve) => {\r\n // 鼠标滚轮滚动时，此方法可能会在短时间内触发多次。通过 index 判断当前请求是否应该继续\r\n let testImg = new Image();\r\n testImg.src = url;\r\n const bindIndex = this.index;\r\n const timer = window.setInterval(() => {\r\n if (this.index !== bindIndex) {\r\n // 如果要显示的图片发生了变化，则立即停止加载当前图片，避免浪费网络流量\r\n window.clearInterval(timer);\r\n testImg.src = '';\r\n testImg = null;\r\n // 本来这里应该 reject 的，但是那样就需要在 await 的地方处理这个错误\r\n // 我不想处理错误，所以用 available 标记来偷懒\r\n return resolve({\r\n width: 0,\r\n height: 0,\r\n available: false,\r\n });\r\n }\r\n else {\r\n // 如果获取到了图片的宽高，也立即停止加载当前图片，并返回结果\r\n if (testImg.naturalWidth > 0) {\r\n const width = testImg.naturalWidth;\r\n const height = testImg.naturalHeight;\r\n window.clearInterval(timer);\r\n testImg.src = '';\r\n testImg = null;\r\n return resolve({\r\n width,\r\n height,\r\n available: true,\r\n });\r\n }\r\n }\r\n }, 50);\r\n });\r\n }\r\n // 显示预览 wrap\r\n async showWrap() {\r\n if (!this.workEL || !this.workData) {\r\n return;\r\n }\r\n const url = this.replaceUrl(this.workData.body.urls[settings.prevWorkSize]);\r\n const size = await this.getImageSize(url);\r\n // getImageSize 可能需要花费比较长的时间。有时候在 getImageSize 之前是要显示 wrap 的，但是之后鼠标移出，需要隐藏 wrap，再之后 getImageSize 才执行完毕。\r\n // 所以此时需要再次判断是否要显示 wrap。如果不再次判断的话，可能有时候需要隐藏预览图，但是预览图却显示出来了\r\n if (!size.available || !this.show) {\r\n return;\r\n }\r\n const w = size.width;\r\n const h = size.height;\r\n const cfg = {\r\n width: w,\r\n height: h,\r\n left: 0,\r\n top: 0,\r\n };\r\n // 每次显示图片时，都销毁旧的 img 元素，然后重新生成一个 img 元素，而不是修改之前的 img 元素的 src\r\n // 因为修改 src 的方式存在严重的问题：虽然 src 已经变化了，但是 img 元素显示的还是上一张图片（不管上一张图片是否加载完成）。等到新的图片完全加载完成后，img 才会变化。\r\n // 这会导致一些问题：\r\n // 1. 在新图片的加载过程中，用户无法看到加载进度。只能等到图片加载完成后瞬间完全显示出来。\r\n // 2. 在新图片的加载过程中，图片的宽高是新图片的宽高，但是显示的内容还是旧的图片。如果这两张图片的尺寸不一致，此时显示的（旧）图片看上去是变形的\r\n // 只有生成新的 img 元素，才能解决上面的问题\r\n this.img.src = '';\r\n this.img.remove();\r\n this.img = document.createElement('img');\r\n // 当图片加载完成时，预加载下一张图片\r\n this.img.onload = () => this.preload();\r\n this.img.src = url;\r\n this.wrap.appendChild(this.img);\r\n // 1. 计算图片显示的尺寸\r\n const rect = this.workEL.getBoundingClientRect();\r\n // 不显示摘要信息时，也不显示边框，所以此时把 border 设置为 0\r\n this.border = settings.showPreviewWorkTip ? 4 : 0;\r\n // 计算各个可用区域的尺寸，提前减去了 border、tip 等元素占据的空间\r\n const innerWidth = window.innerWidth - 17;\r\n const leftSpace = rect.left - this.border;\r\n const rightSpace = innerWidth - rect.right - this.border;\r\n const xSpace = Math.max(leftSpace, rightSpace);\r\n const tipHeight = settings.showPreviewWorkTip ? this.tipHeight : 0;\r\n const scrollBarHeight = window.innerHeight - document.documentElement.clientHeight;\r\n const ySpace = window.innerHeight - scrollBarHeight - this.border - tipHeight;\r\n // 宽高从图片宽高、可用区域的宽高中取最小值，使图片不会超出可视区域外\r\n // 竖图\r\n if (w < h) {\r\n cfg.height = Math.min(ySpace, h);\r\n cfg.width = (cfg.height / h) * w;\r\n // 此时宽度可能会超过水平方向上的可用区域，则需要再次调整宽高\r\n if (cfg.width > xSpace) {\r\n cfg.height = (xSpace / cfg.width) * cfg.height;\r\n cfg.width = xSpace;\r\n }\r\n }\r\n else if (w > h) {\r\n // 横图\r\n if (this.allowOverThumb) {\r\n // 如果允许预览图覆盖在作品缩略图上，则预览图的最大宽度可以等于视口宽度\r\n if (w > innerWidth) {\r\n cfg.width = innerWidth;\r\n }\r\n }\r\n else {\r\n // 否则，预览图的宽度不可以超过图片两侧的空白区域的宽度\r\n cfg.width = Math.min(xSpace, w);\r\n }\r\n cfg.height = (cfg.width / w) * h;\r\n // 此时高度可能会超过垂直方向上的可用区域，则需要再次调整宽高\r\n if (cfg.height > ySpace) {\r\n cfg.width = (ySpace / cfg.height) * cfg.width;\r\n cfg.height = ySpace;\r\n }\r\n }\r\n else {\r\n // 正方形图片\r\n cfg.height = Math.min(ySpace, xSpace, h);\r\n cfg.width = cfg.height;\r\n }\r\n // 上面计算的高度是图片的高度，现在计算 wrap 的宽高，需要加上内部其他元素的高度\r\n cfg.height = cfg.height + tipHeight;\r\n // 2. 计算位置\r\n // 在页面可视区域内，比较缩略图左侧和右侧空间，把 wrap 显示在空间比较大的那一侧\r\n if (leftSpace >= rightSpace) {\r\n // 左侧空间大\r\n // 先让预览图的右侧贴着图片左侧边缘显示\r\n cfg.left = rect.left - cfg.width - this.border + window.scrollX;\r\n // 如果预览图超出可视范围，则向右移动\r\n if (cfg.left < 0) {\r\n this.overThumb = true;\r\n cfg.left = 0;\r\n }\r\n }\r\n else {\r\n // 右侧空间大\r\n // 先让预览图的左侧贴着图片右侧边缘显示\r\n cfg.left = rect.right + window.scrollX;\r\n // 如果预览图超出可视范围，则向左移动\r\n if (cfg.width > rightSpace) {\r\n this.overThumb = true;\r\n cfg.left = cfg.left - (cfg.left + cfg.width - innerWidth) - this.border;\r\n }\r\n }\r\n // 然后设置 top\r\n // 让 wrap 和缩略图在垂直方向上居中对齐\r\n cfg.top = rect.top;\r\n const wrapHalfHeight = (cfg.height + this.border) / 2;\r\n const workHalfHeight = rect.height / 2;\r\n cfg.top = cfg.top - wrapHalfHeight + workHalfHeight;\r\n // 检查 wrap 顶端是否超出了窗口可视区域\r\n if (cfg.top < 0) {\r\n cfg.top = 0;\r\n }\r\n // 检查 wrap 底部是否超出了窗口可视区域\r\n const bottomOver = cfg.top + cfg.height + this.border - window.innerHeight;\r\n if (bottomOver > 0) {\r\n // 如果底部超出了窗口可视区域，则计算顶部是否还有可用空间\r\n if (cfg.top > 0) {\r\n // 如果顶部还有空间可用，就尽量向上移动，但不会导致顶端超出可视区域\r\n cfg.top = cfg.top - Math.min(bottomOver, cfg.top) - scrollBarHeight;\r\n }\r\n }\r\n // 3. 设置顶部提示区域的内容\r\n if (settings.showPreviewWorkTip) {\r\n const text = [];\r\n const body = this.workData.body;\r\n if (body.pageCount > 1) {\r\n text.push(`${this.index + 1}/${body.pageCount}`);\r\n }\r\n text.push(body.bookmarkCount.toString());\r\n // 加载原图时，可以获取到每张图片的真实尺寸\r\n if (settings.prevWorkSize === 'original') {\r\n text.push(`${w}x${h}`);\r\n }\r\n else {\r\n // 如果加载的是普通尺寸，则永远显示第一张图的原始尺寸\r\n // 因为此时获取不到后续图片的原始尺寸\r\n text.push(`${this.workData.body.width}x${this.workData.body.height}`);\r\n }\r\n text.push(DateFormat.format(body.createDate, 'YYYY/MM/DD'));\r\n text.push(body.title);\r\n text.push(body.description);\r\n this.tip.innerHTML = text\r\n .map((str) => {\r\n return `${str}`;\r\n })\r\n .join('');\r\n this.tip.style.display = 'block';\r\n }\r\n else {\r\n this.tip.style.display = 'none';\r\n }\r\n // 4. 显示 wrap\r\n this.img.style.height = cfg.height - tipHeight + 'px';\r\n const styleArray = [];\r\n for (const [key, value] of Object.entries(cfg)) {\r\n styleArray.push(`${key}:${value}px;`);\r\n }\r\n styleArray.push('display:block;');\r\n // 如果不显示摘要信息，覆写一些样式\r\n if (!settings.showPreviewWorkTip) {\r\n styleArray.push('border:none;');\r\n styleArray.push('box-shadow:none;');\r\n }\r\n this.wrap.setAttribute('style', styleArray.join(''));\r\n // 每次显示图片后，传递图片的 url\r\n this.sendUrls();\r\n // 预览动图\r\n if (settings.previewUgoira && this.workData.body.illustType === 2) {\r\n this.previewUgoira = new PreviewUgoira(this.workData.body.id, this.wrap, settings.prevWorkSize, cfg.width, cfg.height - tipHeight);\r\n // 需要显式传递 wrap 的宽高，特别是高度。因为需要减去顶部提示区域的高度\r\n }\r\n }\r\n replaceUrl(url) {\r\n return url.replace('p0', `p${this.index}`);\r\n }\r\n sendUrls() {\r\n const data = this.workData;\r\n if (!data) {\r\n return;\r\n }\r\n // 传递图片的 url，但是不传递尺寸。\r\n // 因为预览图片默认加载“普通”尺寸的图片，但是 showOriginSizeImage 默认显示“原图”尺寸。\r\n // 而且对于第一张之后的图片，加载“普通”尺寸的图片时，无法获取“原图”的尺寸。\r\n showOriginSizeImage.setData({\r\n original: this.replaceUrl(data.body.urls.original),\r\n regular: this.replaceUrl(data.body.urls.regular),\r\n }, data);\r\n }\r\n}\r\nnew PreviewWork();\r\n","import { EVT } from './EVT';\r\nimport { pageType } from './PageType';\r\nimport { settings } from './setting/Settings';\r\nimport { Tools } from './Tools';\r\nclass ReplaceSquareThumb {\r\n constructor() {\r\n this.bindEvents();\r\n this.observer();\r\n }\r\n isDisable() {\r\n return window.location.pathname.startsWith('/group');\r\n }\r\n bindEvents() {\r\n window.addEventListener(EVT.list.settingChange, (ev) => {\r\n const data = ev.detail.data;\r\n if (data.name === 'replaceSquareThumb') {\r\n if (data.value) {\r\n this.replaceAllImage();\r\n }\r\n }\r\n });\r\n }\r\n replaceAllImage() {\r\n if (settings.replaceSquareThumb ||\r\n pageType.type == pageType.list.ArtworkRanking) {\r\n const allImage = document.querySelectorAll('img');\r\n allImage.forEach((img) => this.replace(img));\r\n }\r\n }\r\n replace(img) {\r\n if (!img.src || img.dataset.index || this.isDisable()) {\r\n return;\r\n }\r\n const src = img.src;\r\n if (!src.endsWith('square1200.jpg') && !src.endsWith('custom1200.jpg')) {\r\n if (pageType.type === pageType.list.ArtworkRanking &&\r\n settings.showLargerThumbnails) {\r\n // 排行榜里的缩略图本来就是保持了比例的，不需要替换其缩略图。\r\n // 但是排行榜里的缩略图原本尺寸较小，当用户启用了“显示更大的缩略图”之后，缩略图被放大后显得模糊，此时需要替换成更大尺寸的缩略图。\r\n // 排行榜页面的图片 URL 比较特别，末尾是 master1200，如下：\r\n // 'https://i.pximg.net/c/240x480/img-master/img/2022/08/01/17/59/39/100156836_p0_master1200.jpg'\r\n if (!src.includes('240x480')) {\r\n return;\r\n }\r\n }\r\n else {\r\n return;\r\n }\r\n }\r\n img.src = Tools.convertThumbURLTo540px(src);\r\n img.style.objectFit = 'contain';\r\n }\r\n observer() {\r\n const observer = new MutationObserver((records) => {\r\n if (!settings.replaceSquareThumb) {\r\n if (pageType.type !== pageType.list.ArtworkRanking) {\r\n // 在排行榜页面里，即使用户未启用“替换方形缩略图以显示图片比例”功能，也依然执行替换缩略图的动作\r\n return;\r\n }\r\n }\r\n records.forEach((record) => {\r\n if (record.type === 'childList') {\r\n record.addedNodes.forEach((node) => {\r\n if (node.nodeName === 'IMG') {\r\n this.replace(node);\r\n }\r\n });\r\n }\r\n if (record.type === 'attributes') {\r\n if (record.attributeName === 'src' &&\r\n record.target.nodeName === 'IMG') {\r\n this.replace(record.target);\r\n }\r\n }\r\n });\r\n });\r\n observer.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n attributeFilter: ['src'],\r\n });\r\n }\r\n}\r\nnew ReplaceSquareThumb();\r\n","import { Tools } from './Tools';\r\nimport { Colors } from './Colors';\r\nimport { lang } from './Lang';\r\nimport { EVT } from './EVT';\r\nimport { states } from './store/States';\r\nimport { toast } from './Toast';\r\nimport { msgBox } from './MsgBox';\r\nimport { Utils } from './utils/Utils';\r\nimport { artworkThumbnail } from './ArtworkThumbnail';\r\nimport { novelThumbnail } from './NovelThumbnail';\r\nimport { pageType } from './PageType';\r\n// 手动选择作品，图片作品和小说都可以选择\r\nclass SelectWork {\r\n constructor() {\r\n this.created = false;\r\n this.selectorId = 'selectWorkEl';\r\n this.left = 0;\r\n this.top = 0;\r\n this.half = 10; // 指示器的一半宽度（用于设置位置）\r\n this._start = false;\r\n this._pause = false;\r\n this._tempHide = false; // 打开下载面板时临时隐藏。这个变量只会影响选择器的 display\r\n this.controlBtn = document.createElement('button'); // 启动、暂停、继续选择的按钮\r\n this.crawlBtn = document.createElement('button'); // 抓取选择的作品的按钮，并且会退出选择模式\r\n this.clearBtn = document.createElement('button'); // 清空选择的作品的按钮\r\n this.selectedWorkFlagClass = 'selectedWorkFlag'; // 给已选择的作品添加标记时使用的 class\r\n this.positionValue = ['relative', 'absolute', 'fixed']; // 标记元素需要父元素拥有这些定位属性\r\n // 不同页面里的作品列表容器的选择器可能不同，这里储存所有页面里会使用到的的选择器\r\n // root 是大部分页面通用的; js-mount-point-discovery 是发现页面使用的\r\n this.worksWrapperSelectorList = [\r\n '#root',\r\n '#js-mount-point-discovery',\r\n ];\r\n // 储存当前页面使用的选择器\r\n this.usedWorksWrapperSelector = this.worksWrapperSelectorList[0];\r\n // 储存当前页面的作品列表容器\r\n this.worksWrapper = document.body;\r\n this.ob = undefined;\r\n this.idList = [];\r\n this.sendCrawl = false; // 它用来判断抓取的是不是选择的作品。抓取选择的作品时激活此标记；当触发下一次的抓取完成事件时，表示已经抓取了选择的作品。\r\n this.crawled = false; // 是否已经抓取了选择的作品\r\n this.svg = ``;\r\n const unlisted = pageType.type === pageType.list.Unlisted;\r\n if (!this.created && Utils.isPixiv() && !unlisted) {\r\n this.created = true;\r\n this.selector = this.createSelectorEl();\r\n this.addBtn();\r\n this.bindEvents();\r\n }\r\n }\r\n get start() {\r\n return this._start;\r\n }\r\n set start(bool) {\r\n this._start = bool;\r\n states.selectWork = bool;\r\n this.updateSelectorEl();\r\n this.updateControlBtn();\r\n }\r\n get pause() {\r\n return this._pause;\r\n }\r\n set pause(bool) {\r\n this._pause = bool;\r\n if (bool) {\r\n states.selectWork = false;\r\n }\r\n this.updateSelectorEl();\r\n this.updateControlBtn();\r\n }\r\n get tempHide() {\r\n return this._tempHide;\r\n }\r\n set tempHide(bool) {\r\n this._tempHide = bool;\r\n this.updateSelectorEl();\r\n }\r\n bindEvents() {\r\n artworkThumbnail.onClick((el, id, ev) => {\r\n this.clickThumbnail(el, id, ev, 'illusts');\r\n });\r\n novelThumbnail.onClick((el, id, ev) => {\r\n this.clickThumbnail(el, id, ev, 'novels');\r\n });\r\n document.body.addEventListener('click', (ev) => {\r\n this.clickElement(ev.target, ev);\r\n }, true);\r\n window.addEventListener(EVT.list.openCenterPanel, () => {\r\n this.tempHide = true;\r\n });\r\n window.addEventListener(EVT.list.closeCenterPanel, () => {\r\n this.tempHide = false;\r\n });\r\n window.addEventListener(EVT.list.crawlComplete, () => {\r\n if (this.sendCrawl) {\r\n this.sendCrawl = false;\r\n this.crawled = true;\r\n }\r\n });\r\n // 可以使用 Alt + S 快捷键来模拟点击控制按钮\r\n window.addEventListener('keydown', (ev) => {\r\n if (ev.altKey && ev.code === 'KeyS') {\r\n this.controlBtn.click();\r\n }\r\n });\r\n // 鼠标移动时保存鼠标的坐标\r\n window.addEventListener('mousemove', (ev) => {\r\n this.moveEvent(ev);\r\n }, true);\r\n // 离开页面前提示用户\r\n // 如果把此处的 window.onbeforeunload 换成 window.addEventListener('beforeunload') 会出现问题\r\n // 浏览器不会弹出询问对话框，而是直接关闭页面\r\n window.onbeforeunload = () => {\r\n // 如果存在选择的作品，并且选择的作品（全部或部分）没有被抓取，则进行提示\r\n if (this.idList.length > 0 && !this.crawled) {\r\n msgBox.error(lang.transl('_离开页面前提示选择的作品未抓取'), {\r\n btn: lang.transl('_我知道了'),\r\n });\r\n return false;\r\n }\r\n };\r\n // 每次页面切换之后，查找新的作品列表容器并保存\r\n window.addEventListener(EVT.list.pageSwitch, () => {\r\n let worksWrapper = null;\r\n for (const selector of this.worksWrapperSelectorList) {\r\n worksWrapper = document.querySelector(selector);\r\n if (worksWrapper) {\r\n this.usedWorksWrapperSelector = selector;\r\n break;\r\n }\r\n }\r\n this.worksWrapper = worksWrapper || document.body;\r\n });\r\n // 每次页面切换之后，查找新显示的作品里是否有之前被选择的作品，如果有则为其添加标记\r\n // 因为 pixiv 的页面切换会导致作品列表变化，之前添加的标记也就没有了，需要重新添加\r\n window.addEventListener(EVT.list.pageSwitch, () => {\r\n // 每次触发时都要断开之前绑定的观察器，否则会导致事件重复绑定\r\n // 因为 pageSwitch 事件可能会触发多次，如果不断开之前的观察器，那么每切换一次页面就会多绑定和执行一个回调\r\n this.ob && this.ob.disconnect();\r\n this.ob = new MutationObserver(Utils.debounce(() => {\r\n this.reAddAllFlag();\r\n }, 300));\r\n this.ob.observe(this.worksWrapper, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n });\r\n }\r\n clearIdList() {\r\n // 清空标记需要使用 id 数据，所以需要执行之后才能清空 id\r\n this.removeAllSelectedFlag();\r\n this.idList = [];\r\n this.updateCrawlBtn();\r\n }\r\n createSelectorEl() {\r\n const el = document.createElement('div');\r\n el.id = this.selectorId;\r\n document.body.appendChild(el);\r\n return el;\r\n }\r\n updateSelectorEl() {\r\n if (!this.selector) {\r\n return;\r\n }\r\n const show = this.canSelect() && !this.tempHide;\r\n this.selector.style.display = show ? 'block' : 'none';\r\n // 设置元素的 style 时，如果新的值和旧的值相同（例如：每次都设置 display 为 none），Chrome 会自动优化，此时不会导致节点发生变化。\r\n // 如果选择器处于隐藏状态，就不会更新其坐标。这样可以优化性能\r\n if (show) {\r\n this.selector.style.left = this.left - this.half + 'px';\r\n this.selector.style.top = this.top - this.half + 'px';\r\n }\r\n }\r\n addBtn() {\r\n this.controlBtn = Tools.addBtn('selectWorkBtns', Colors.bgGreen, '_手动选择作品');\r\n this.controlBtn.setAttribute('title', 'Alt + S');\r\n this.updateControlBtn();\r\n this.clearBtn = Tools.addBtn('selectWorkBtns', Colors.bgRed, '_清空选择的作品');\r\n this.clearBtn.style.display = 'none';\r\n this.clearBtn.addEventListener('click', () => {\r\n this.clearIdList();\r\n });\r\n this.crawlBtn = Tools.addBtn('selectWorkBtns', Colors.bgBlue, '_抓取选择的作品');\r\n this.crawlBtn.style.display = 'none';\r\n this.crawlBtn.addEventListener('click', (ev) => {\r\n this.sendDownload();\r\n });\r\n }\r\n // 切换控制按钮的文字和点击事件\r\n updateControlBtn() {\r\n if (!this.start) {\r\n lang.updateText(this.controlBtn, '_手动选择作品');\r\n this.controlBtn.onclick = (ev) => {\r\n this.startSelect(ev);\r\n this.clearBtn.style.display = 'block';\r\n };\r\n }\r\n else {\r\n if (!this.pause) {\r\n lang.updateText(this.controlBtn, '_暂停选择');\r\n this.controlBtn.onclick = (ev) => {\r\n this.pauseSelect();\r\n };\r\n }\r\n else {\r\n lang.updateText(this.controlBtn, '_继续选择');\r\n this.controlBtn.onclick = (ev) => {\r\n this.startSelect(ev);\r\n };\r\n }\r\n }\r\n }\r\n // 在选择作品的数量改变时，在抓取按钮上显示作品数量\r\n updateCrawlBtn() {\r\n this.crawlBtn.style.display = this.start ? 'block' : 'none';\r\n if (this.idList.length > 0) {\r\n lang.updateText(this.crawlBtn, '_抓取选择的作品2', this.idList.length.toString());\r\n }\r\n else {\r\n lang.updateText(this.crawlBtn, '_抓取选择的作品');\r\n }\r\n }\r\n addId(el, id, type) {\r\n const index = this.idList.findIndex((item) => {\r\n return item.id === id && item.type === type;\r\n });\r\n // 添加这个 id\r\n if (index === -1) {\r\n this.idList.push({\r\n id,\r\n type,\r\n });\r\n this.crawled = false;\r\n this.addSelectedFlag(el, id);\r\n }\r\n else {\r\n // id 已存在，则删除\r\n this.idList.splice(index, 1);\r\n this.removeSelectedFlag(id);\r\n }\r\n this.updateCrawlBtn();\r\n }\r\n clickThumbnail(el, id, ev, type) {\r\n if (!this.canSelect()) {\r\n return;\r\n }\r\n // 阻止默认事件，否则会进入作品页面，导致无法在当前页面继续选择\r\n ev.preventDefault();\r\n this.addId(el, id, type);\r\n }\r\n clickElement(el, ev) {\r\n if (!this.canSelect()) {\r\n return;\r\n }\r\n if (!el || el.nodeName !== 'A') {\r\n return;\r\n }\r\n const href = el.href;\r\n const artworkId = Tools.getIllustId(href);\r\n if (artworkId) {\r\n ev.preventDefault();\r\n // 如果查找到了作品 id，必须阻止冒泡，否则会执行 clickThumbnail\r\n ev.stopPropagation();\r\n this.addId(el.parentElement, artworkId, 'illusts');\r\n return;\r\n }\r\n const novelId = Tools.getNovelId(href);\r\n if (novelId) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n this.addId(el.parentElement, novelId, 'novels');\r\n return;\r\n }\r\n }\r\n // 监听鼠标移动\r\n // 鼠标移动时，由于事件触发频率很高，所以这里的代码也会执行很多次，但是这没有导致明显的性能问题，所以没有使用节流等加以限制\r\n moveEvent(ev) {\r\n this.left = ev.x;\r\n this.top = ev.y;\r\n this.updateSelectorEl();\r\n }\r\n // esc 暂停选择\r\n escEvent(ev) {\r\n if (ev.code === 'Escape') {\r\n this.pauseSelect();\r\n }\r\n }\r\n // 开始或继续选择\r\n startSelect(ev) {\r\n this.start = true;\r\n if (this.pause) {\r\n // 如果之前暂停了，则继续选择。不清空之前的结果\r\n this.pause = false;\r\n }\r\n else {\r\n // 如果是全新开始的选择，则清空之前的结果\r\n this.clearIdList();\r\n }\r\n this.bindEscEvent = this.escEvent.bind(this);\r\n document.addEventListener('keyup', this.bindEscEvent);\r\n EVT.fire('closeCenterPanel');\r\n }\r\n pauseSelect() {\r\n this.pause = true;\r\n this.bindEscEvent &&\r\n document.removeEventListener('keyup', this.bindEscEvent);\r\n }\r\n canSelect() {\r\n return this.start && !this.pause;\r\n }\r\n // 抓取选择的作品，这会自动暂停手动选择作品\r\n sendDownload() {\r\n this.pauseSelect();\r\n if (this.idList.length > 0) {\r\n // 传递 id 列表时，将其转换成一个新的数组。否则传递的是引用，外部的一些操作可能会影响内部的 id 列表\r\n EVT.fire('crawlIdList', Array.from(this.idList));\r\n this.sendCrawl = true;\r\n this.crawled = false;\r\n states.quickCrawl = true;\r\n toast.show(lang.transl('_已发送下载请求'), {\r\n bgColor: Colors.bgBlue,\r\n });\r\n }\r\n else {\r\n toast.error(lang.transl('_没有数据可供使用'));\r\n }\r\n }\r\n // 给这个作品添加标记\r\n addSelectedFlag(wrap, id) {\r\n const i = document.createElement('i');\r\n i.classList.add(this.selectedWorkFlagClass);\r\n i.dataset.id = id;\r\n i.innerHTML = this.svg;\r\n wrap.insertAdjacentElement('afterbegin', i);\r\n // 如果容器没有某些定位，可能会导致下载器添加的标记的位置异常。修复此问题\r\n const position = window.getComputedStyle(wrap)['position'];\r\n if (!this.positionValue.includes(position)) {\r\n wrap.style.position = 'relative';\r\n }\r\n }\r\n // 重新添加被选择的作品上的标记\r\n reAddAllFlag() {\r\n if (this.idList.length === 0) {\r\n return;\r\n }\r\n for (const { id, type } of this.idList) {\r\n if (this.getSelectedFlag(id)) {\r\n // 如果这个作品的标记依旧存在，就不需要重新添加\r\n /**\r\n * 示例：从作品列表 https://www.pixiv.net/users/18095070/illustrations\r\n * 进入 tag 列表页 https://www.pixiv.net/users/18095070/illustrations/%E5%A5%B3%E3%81%AE%E5%AD%90\r\n * pixiv 会复用可用的作品，所以这些作品上的标记也依然存在，不需要重新添加\r\n */\r\n return;\r\n }\r\n let el;\r\n if (type === 'novels') {\r\n el = document.querySelector(`${this.usedWorksWrapperSelector} a[href=\"/novel/show.php?id=${id}\"]`);\r\n }\r\n else {\r\n el = document.querySelector(`${this.usedWorksWrapperSelector} a[href=\"/artworks/${id}\"]`);\r\n }\r\n if (el) {\r\n // 如果在当前页面查找到了选择的作品，就给它添加标记\r\n this.addSelectedFlag(el, id);\r\n }\r\n }\r\n }\r\n getSelectedFlag(id) {\r\n return document.querySelector(`.${this.selectedWorkFlagClass}[data-id='${id}']`);\r\n }\r\n // 清空指定作品的标记\r\n removeSelectedFlag(id) {\r\n const el = this.getSelectedFlag(id);\r\n el && el.remove();\r\n }\r\n // 清空所有标记\r\n removeAllSelectedFlag() {\r\n for (const item of this.idList) {\r\n this.removeSelectedFlag(item.id);\r\n }\r\n }\r\n}\r\nnew SelectWork();\r\n","class SetTimeoutWorker {\r\n constructor() {\r\n // 因为 worker 的代码很短，所以直接储存在这里，避免从网络加载导致的延迟问题\r\n this.workerCode = `onmessage = (ev) => {\n setTimeout(() => {\n postMessage({\n id: ev.data.id\n })\n }, ev.data.time)\n }`;\r\n this.list = [];\r\n this.timerId = 0;\r\n this.createWorker();\r\n }\r\n createWorker() {\r\n const blob = new Blob([this.workerCode]);\r\n this.worker = new Worker(URL.createObjectURL(blob));\r\n this.worker.addEventListener('message', (ev) => {\r\n const id = ev.data.id;\r\n if (this.list[id].callback !== null) {\r\n this.list[id].callback();\r\n this.clear(id);\r\n }\r\n });\r\n }\r\n set(callback, time) {\r\n const data = {\r\n id: this.timerId,\r\n time,\r\n callback,\r\n };\r\n this.list.push(data);\r\n this.timerId++;\r\n this.worker.postMessage({\r\n id: data.id,\r\n time,\r\n });\r\n return data.id;\r\n }\r\n clear(id) {\r\n this.list[id].callback = null;\r\n }\r\n}\r\nconst setTimeoutWorker = new SetTimeoutWorker();\r\nexport { setTimeoutWorker };\r\n","import { Tools } from './Tools';\r\nimport { EVT } from './EVT';\r\nimport { lang } from './Lang';\r\nimport { settings, setSetting } from './setting/Settings';\r\nimport { theme } from './Theme';\r\nimport { toast } from './Toast';\r\nimport { msgBox } from './MsgBox';\r\n// 为某些用户设置固定的用户名，或者别名\r\nclass SetUserName {\r\n constructor() {\r\n this.slotName = 'setUserNameSlot';\r\n this._addWrapShow = false;\r\n this.wrapHTML = `\n \n\n \n 0\n \n \n \n\n${defaultName}: ${fullNameHtml}
`;\r\n resultArr.push(nowResult);\r\n }\r\n else {\r\n // 小说作品不显示原文件名（因为没有此数据）\r\n const nowResult = `${fullNameHtml}
`;\r\n resultArr.push(nowResult);\r\n }\r\n }\r\n result = resultArr.join('');\r\n }\r\n else {\r\n // 不生成 html 标签，只生成纯文本，保存为 txt 文件\r\n for (let i = 0; i < length; i++) {\r\n const data = store.result[i];\r\n const fullName = fileName.createFileName(data);\r\n if (data.type !== 3) {\r\n // 图片作品，在文件名前面显示文件 url 里的文件名\r\n let defaultName = data.original.replace(/.*\\//, '');\r\n resultArr.push(`${defaultName}: ${fullName}`);\r\n }\r\n else {\r\n // 小说作品不显示原文件名（因为没有此数据）\r\n resultArr.push(fullName);\r\n }\r\n }\r\n result = resultArr.join('\\n');\r\n }\r\n EVT.fire('output', {\r\n content: result,\r\n title: '_预览文件名',\r\n });\r\n }\r\n}\r\nnew PreviewFileName();\r\n","import { store } from '../store/Store';\r\nimport { EVT } from '../EVT';\r\nimport { lang } from '../Lang';\r\nimport { settings } from '../setting/Settings';\r\nimport { toast } from '../Toast';\r\nimport { Config } from '../Config';\r\n// 显示 url\r\nclass ShowURLs {\r\n constructor() {\r\n this.bindEvents();\r\n }\r\n bindEvents() {\r\n window.addEventListener(EVT.list.showURLs, () => {\r\n this.showURLs();\r\n });\r\n }\r\n showURLs() {\r\n const urls = [];\r\n const size = settings.imageSize;\r\n for (const data of store.result) {\r\n // 只输出图片文件的 url\r\n // 小说文件没有固定的 url 所以不输出\r\n if (data.type !== 3) {\r\n urls.push(data[size]);\r\n }\r\n }\r\n if (store.result.length === 0 || urls.length === 0) {\r\n return toast.error(lang.transl('_没有可用的抓取结果'));\r\n }\r\n let result = '';\r\n if (store.result.length < Config.outputMax) {\r\n result = urls.join('${data.title || ''}
\n${data.msg}
\n \n `;\r\n theme.register(wrap);\r\n lang.register(wrap);\r\n const btn = wrap.querySelector('.btn');\r\n if (btn) {\r\n wrap.addEventListener('click', (ev) => {\r\n ev.stopPropagation();\r\n });\r\n btn.addEventListener('click', () => {\r\n this.remove(wrap);\r\n });\r\n window.addEventListener(EVT.list.closeCenterPanel, () => {\r\n this.remove(wrap);\r\n });\r\n }\r\n document.body.append(wrap);\r\n btn.focus();\r\n bg.useBG(wrap);\r\n }\r\n remove(el) {\r\n el && el.parentNode && el.parentNode.removeChild(el);\r\n }\r\n}\r\nconst msgBox = new MsgBox();\r\nexport { msgBox };\r\n","import { WorkThumbnail } from './WorkThumbnail';\r\nimport { pageType } from './PageType';\r\nimport { Tools } from './Tools';\r\n// 查找小说作品的缩略图，当鼠标进入、移出时等动作触发时执行回调函数\r\nclass NovelThumbnail extends WorkThumbnail {\r\n constructor() {\r\n super();\r\n this.selectors = [\r\n 'li[size=\"1\"]>div',\r\n 'section li>div',\r\n 'nav>div>div',\r\n 'div.gtm-novel-work-recommend-link',\r\n 'section ul>div',\r\n 'section ul>li',\r\n 'div._ranking-item',\r\n 'div[size=\"496\"]',\r\n 'li',\r\n ];\r\n this.findThumbnail(document.body);\r\n this.createObserver(document.body);\r\n }\r\n findThumbnail(parent) {\r\n if (!parent.querySelectorAll) {\r\n return;\r\n }\r\n // 遍历所有的选择器，为找到的元素绑定事件\r\n // 注意：有时候一个节点里会含有多种尺寸的缩略图，为了全部查找到它们，必须遍历所有的选择器。\r\n // 如果在查找到某个选择器之后，不再查找剩余的选择器，就可能会遗漏一部分缩略图。\r\n // 但是，这有可能会导致事件的重复绑定，所以下载器添加了 dataset.mouseover 标记以减少重复绑定\r\n for (const selector of this.selectors) {\r\n // 处理特殊的选择器\r\n // 在用户主页只使用指定的选择器，避免其他选择器导致顶部“精选”的小说作品被重复绑定事件\r\n if (pageType.type === pageType.list.UserHome &&\r\n selector !== 'section ul>li' &&\r\n selector !== 'li[size=\"1\"]>div') {\r\n continue;\r\n }\r\n // 在小说排行榜里只使用 div._ranking-item\r\n if (pageType.type === pageType.list.NovelRanking &&\r\n selector !== 'div._ranking-item') {\r\n continue;\r\n }\r\n // 在小说系列页面里只使用 section ul>li\r\n if (pageType.type === pageType.list.NovelSeries &&\r\n selector !== 'section ul>li') {\r\n continue;\r\n }\r\n // div.gtm-novel-work-recommend-link 只能在小说页面里使用\r\n if (selector === 'div.gtm-novel-work-recommend-link' &&\r\n pageType.type !== pageType.list.Novel) {\r\n continue;\r\n }\r\n let elements = parent.querySelectorAll(selector);\r\n // 处理特殊的动态添加的元素\r\n // 有些动态添加的元素不能被选择器选中\r\n // 小说系列页面里动态添加的就是 li 元素，并且这个 li 元素必须整个使用，不能再细分\r\n if (pageType.type === pageType.list.NovelSeries &&\r\n parent.nodeName === 'LI') {\r\n elements = [parent];\r\n }\r\n for (const el of elements) {\r\n const id = Tools.findWorkIdFromElement(el, 'novels');\r\n // 只有查找到作品 id 时才会执行回调函数\r\n if (id) {\r\n this.bindEvents(el, id);\r\n }\r\n }\r\n }\r\n }\r\n}\r\nconst novelThumbnail = new NovelThumbnail();\r\nexport { novelThumbnail };\r\n","import { EVT } from './EVT';\r\nimport { lang } from './Lang';\r\n// 页面右侧的按钮，点击可以打开中间面板\r\nclass OpenCenterPanel {\r\n constructor() {\r\n this.btn = document.createElement('button');\r\n this.addBtn();\r\n this.show();\r\n this.bindEvents();\r\n }\r\n addBtn() {\r\n this.btn = document.createElement('button');\r\n this.btn.classList.add('rightButton');\r\n this.btn.id = 'openCenterPanelBtn';\r\n this.btn.setAttribute('data-xztitle', '_显示下载面板');\r\n this.btn.innerHTML = ``;\r\n document.body.append(this.btn);\r\n lang.register(this.btn);\r\n }\r\n bindEvents() {\r\n // 这里阻止事件冒泡是为了配合 CenterPanel 的“点击页面其他部分隐藏 CenterPanel”的效果\r\n this.btn.addEventListener('click', (e) => {\r\n const ev = e || window.event;\r\n ev.stopPropagation();\r\n EVT.fire('openCenterPanel');\r\n });\r\n window.addEventListener(EVT.list.centerPanelClosed, () => {\r\n this.show();\r\n });\r\n window.addEventListener(EVT.list.centerPanelOpened, () => {\r\n this.hide();\r\n });\r\n }\r\n show() {\r\n this.btn.style.display = 'flex';\r\n }\r\n hide() {\r\n this.btn.style.display = 'none';\r\n }\r\n}\r\nnew OpenCenterPanel();\r\n","import { EVT } from './EVT';\r\n// 所有页面类型及对应的数字编号\r\n// 可以通过 pageType.list 使用\r\nvar PageName;\r\n(function (PageName) {\r\n PageName[PageName[\"Unsupported\"] = -1] = \"Unsupported\";\r\n PageName[PageName[\"Home\"] = 0] = \"Home\";\r\n PageName[PageName[\"Artwork\"] = 1] = \"Artwork\";\r\n PageName[PageName[\"UserHome\"] = 2] = \"UserHome\";\r\n PageName[PageName[\"BookmarkLegacy\"] = 3] = \"BookmarkLegacy\";\r\n PageName[PageName[\"Bookmark\"] = 4] = \"Bookmark\";\r\n PageName[PageName[\"ArtworkSearch\"] = 5] = \"ArtworkSearch\";\r\n PageName[PageName[\"AreaRanking\"] = 6] = \"AreaRanking\";\r\n PageName[PageName[\"ArtworkRanking\"] = 7] = \"ArtworkRanking\";\r\n PageName[PageName[\"Pixivision\"] = 8] = \"Pixivision\";\r\n PageName[PageName[\"BookmarkDetail\"] = 9] = \"BookmarkDetail\";\r\n PageName[PageName[\"NewArtworkBookmark\"] = 10] = \"NewArtworkBookmark\";\r\n PageName[PageName[\"Discover\"] = 11] = \"Discover\";\r\n PageName[PageName[\"NewArtwork\"] = 12] = \"NewArtwork\";\r\n PageName[PageName[\"Novel\"] = 13] = \"Novel\";\r\n PageName[PageName[\"NovelSeries\"] = 14] = \"NovelSeries\";\r\n PageName[PageName[\"NovelSearch\"] = 15] = \"NovelSearch\";\r\n PageName[PageName[\"NovelRanking\"] = 16] = \"NovelRanking\";\r\n PageName[PageName[\"NewNovelBookmark\"] = 17] = \"NewNovelBookmark\";\r\n PageName[PageName[\"NewNovel\"] = 18] = \"NewNovel\";\r\n PageName[PageName[\"ArtworkSeries\"] = 19] = \"ArtworkSeries\";\r\n PageName[PageName[\"Following\"] = 20] = \"Following\";\r\n PageName[PageName[\"Request\"] = 21] = \"Request\";\r\n PageName[PageName[\"Unlisted\"] = 22] = \"Unlisted\";\r\n})(PageName || (PageName = {}));\r\n// 获取页面类型\r\nclass PageType {\r\n constructor() {\r\n // 当前页面类型\r\n this.type = PageName.Unsupported;\r\n // 所有页面类型\r\n this.list = PageName;\r\n this.type = this.getType();\r\n window.addEventListener(EVT.list.pageSwitch, () => {\r\n this.checkTypeChange();\r\n });\r\n }\r\n getType() {\r\n const url = window.location.href;\r\n const pathname = window.location.pathname;\r\n if (window.location.hostname === 'www.pixiv.net' &&\r\n ['/', '/manga', '/novel/', '/en/'].includes(pathname)) {\r\n return PageName.Home;\r\n }\r\n else if ((pathname.startsWith('/artworks') ||\r\n pathname.startsWith('/en/artworks')) &&\r\n /\\/artworks\\/\\d{1,10}/.test(url)) {\r\n return PageName.Artwork;\r\n }\r\n else if (/\\/users\\/\\d+/.test(url) && !url.includes('/bookmarks')) {\r\n if (pathname.includes('/following') ||\r\n pathname.includes('/mypixiv') ||\r\n pathname.includes('/followers')) {\r\n return PageName.Following;\r\n }\r\n else {\r\n return PageName.UserHome;\r\n }\r\n }\r\n else if (pathname.endsWith('bookmark.php')) {\r\n return PageName.BookmarkLegacy;\r\n }\r\n else if (pathname.includes('/bookmarks/')) {\r\n return PageName.Bookmark;\r\n }\r\n else if (url.includes('/tags/')) {\r\n return pathname.endsWith('/novels')\r\n ? PageName.NovelSearch\r\n : PageName.ArtworkSearch;\r\n }\r\n else if (pathname === '/ranking_area.php' && location.search !== '') {\r\n return PageName.AreaRanking;\r\n }\r\n else if (pathname === '/ranking.php') {\r\n return PageName.ArtworkRanking;\r\n }\r\n else if (url.includes('https://www.pixivision.net') &&\r\n url.includes('/a/')) {\r\n return PageName.Pixivision;\r\n }\r\n else if (url.includes('/bookmark_add.php?id=') ||\r\n url.includes('/bookmark_detail.php?illust_id=')) {\r\n return PageName.BookmarkDetail;\r\n }\r\n else if (url.includes('/bookmark_new_illust.php') ||\r\n url.includes('/bookmark_new_illust_r18.php')) {\r\n return PageName.NewArtworkBookmark;\r\n }\r\n else if (pathname === '/discovery' ||\r\n pathname.startsWith('/novel/discovery')) {\r\n return PageName.Discover;\r\n }\r\n else if (url.includes('/new_illust.php') ||\r\n url.includes('/new_illust_r18.php')) {\r\n return PageName.NewArtwork;\r\n }\r\n else if (pathname === '/novel/show.php') {\r\n return PageName.Novel;\r\n }\r\n else if (pathname.startsWith('/novel/series/')) {\r\n return PageName.NovelSeries;\r\n }\r\n else if (pathname === '/novel/ranking.php') {\r\n return PageName.NovelRanking;\r\n }\r\n else if (pathname.startsWith('/novel/bookmark_new')) {\r\n return PageName.NewNovelBookmark;\r\n }\r\n else if (pathname.startsWith('/novel/new')) {\r\n return PageName.NewNovel;\r\n }\r\n else if (pathname.startsWith('/user/') && pathname.includes('/series/')) {\r\n return PageName.ArtworkSeries;\r\n }\r\n else if (pathname.startsWith('/request')) {\r\n return PageName.Request;\r\n }\r\n else if (pathname.includes('/unlisted')) {\r\n return PageName.Unlisted;\r\n }\r\n else {\r\n // 没有匹配到可用的页面类型\r\n return PageName.Unsupported;\r\n }\r\n }\r\n // 页面切换时，检查页面类型是否变化\r\n checkTypeChange() {\r\n const old = this.type;\r\n this.type = this.getType();\r\n if (this.type !== old) {\r\n EVT.fire('pageSwitchedTypeChange', this.type);\r\n }\r\n else {\r\n EVT.fire('pageSwitchedTypeNotChange', this.type);\r\n }\r\n }\r\n}\r\nconst pageType = new PageType();\r\nexport { pageType };\r\n","import { API } from './API';\r\nimport { log } from './Log';\r\nimport { settings } from './setting/Settings';\r\nimport { Tools } from './Tools';\r\n// 预览动图\r\nclass PreviewUgoira {\r\n constructor(id, canvasWrap, prevSize, wrapWidth, wrapHeight) {\r\n this.prevSize = 'regular';\r\n /**完整的 zip 文件的字节数 */\r\n this.zipLength = 0;\r\n /** 用固定的字节数分割出多个文件片段 */\r\n this.rangeSize = 500000;\r\n /**保存每个文件片段的请求头的值\r\n * 字符串格式如 'bytes=0-499999'\r\n */\r\n this.rangeList = [];\r\n /**把分段加载的 zip 文件合并，保存到这个容器 */\r\n this.zipContent = new ArrayBuffer(0);\r\n /**所有文件片段是否都加载完毕 */\r\n this.loadend = false;\r\n /**每个 jpg 文件内容的开始位置 */\r\n this.jpgContentIndexList = [];\r\n /**每个 jpg 文件的数据。按照图片在压缩包里的顺序，储存对应的数据 */\r\n this.jpgFileList = [];\r\n // jpg 文件名的长度固定为 10 个字节 000000.jpg\r\n this.jpgNameLength = 10;\r\n this.wrapWidth = 0;\r\n this.wrapHeight = 0;\r\n this.canvas = document.createElement('canvas');\r\n this.canvasCon = this.canvas.getContext('2d');\r\n this.canvasIsAppend = false;\r\n this.width = 0;\r\n this.height = 0;\r\n this.destroyed = false;\r\n this.playIndex = 0;\r\n this.playDelay = 0;\r\n this.lastPlayTime = 0;\r\n this.animationID = 0;\r\n this.play = (timestamp) => {\r\n if (this.lastPlayTime === 0) {\r\n this.lastPlayTime = timestamp;\r\n }\r\n // 计算自上次执行之后，是否到了该执行下一次动画的时间\r\n if (timestamp - this.lastPlayTime >= this.playDelay) {\r\n // 如果要播放的图片尚未加载完成，则等到下一次动画帧再执行\r\n const img = this.jpgFileList[this.playIndex].img;\r\n if (!img.complete) {\r\n return (this.animationID = window.requestAnimationFrame(this.play));\r\n }\r\n this.canvasCon.drawImage(img, 0, 0, this.width, this.height);\r\n // 绘制出第一张图片之后，才能显示 canvas 并隐藏之前的 img\r\n // 如果过早的隐藏 img 并显示 canvas，会导致闪烁（因为 img 先隐藏，此时 canvas 还没有绘制图像）\r\n if (this.playIndex === 0) {\r\n this.canvas.style.display = 'inline-block';\r\n const img = this.canvasWrap.querySelector('img');\r\n if (img) {\r\n img.style.display = 'none';\r\n }\r\n }\r\n this.playDelay = this.jpgFileList[this.playIndex].delay;\r\n this.playIndex++;\r\n if (this.playIndex > this.jpgFileList.length - 1) {\r\n this.playIndex = 0;\r\n }\r\n // 记录最后一次执行动画的时间\r\n this.lastPlayTime = timestamp;\r\n }\r\n this.animationID = window.requestAnimationFrame(this.play);\r\n };\r\n if (!settings.previewUgoira) {\r\n return;\r\n }\r\n this.id = id;\r\n this.canvasWrap = canvasWrap;\r\n this.prevSize = prevSize;\r\n wrapWidth && (this.wrapWidth = wrapWidth);\r\n wrapHeight && (this.wrapHeight = wrapHeight);\r\n this.start();\r\n }\r\n async start() {\r\n // 获取这个动图的 meta 数据\r\n this.meta = await this.getMeta(this.id);\r\n // 目前只支持提取 jpg 图片\r\n if (this.meta.mime_type !== 'image/jpeg') {\r\n const msg = 'Preview ugoira error: mime type unsupport: ' + this.meta.mime_type;\r\n log.warning(msg);\r\n console.warn(msg);\r\n return;\r\n }\r\n // 设置要使用的 URL\r\n if (this.prevSize === 'regular') {\r\n this.zipURL = this.meta.src;\r\n }\r\n else {\r\n this.zipURL = this.meta.originalSrc;\r\n }\r\n // 获取动图体积\r\n this.zipLength = await this.getFileLength();\r\n // 生成区间\r\n this.rangeList = this.setRangeList(this.zipLength, this.rangeSize);\r\n for (const range of this.rangeList) {\r\n // 加载文件片段\r\n const buff = await this.loadRangeFileAsBuff(range);\r\n if (this.destroyed) {\r\n return;\r\n }\r\n // 把这个文件片段追加到文件容器里\r\n this.zipContent = this.appendBuff(this.zipContent, buff);\r\n // 判断整个压缩包是否全部加载完毕\r\n this.loadend = this.zipContent.byteLength === this.zipLength;\r\n // 提取出每个 jpg 图片的数据\r\n // 由于我之前使用的 zip 库无法解析不完整的 zip 文件，所以我需要自己提取 jpg 图片的数据\r\n this.jpgContentIndexList = Tools.getJPGContentIndex(this.zipContent, this.jpgContentIndexList);\r\n this.extractJPGData(this.zipContent, this.jpgContentIndexList);\r\n // 设置画布的宽高\r\n if (this.jpgFileList.length > 0 && this.width === 0) {\r\n // 画布的宽高不能超过外部 wrap 的宽高\r\n // 本来我是打算从 wrap 宽度和动图宽度中取比较小的值\r\n // const size = await this.getImageSize(this.jpgFileList[0].blobURL)\r\n // this.width = Math.min(size.width, wrapWidth)\r\n // this.height = Math.min(size.height, wrapHeight)\r\n // 但是当预览作品的尺寸为“普通”时，动图的尺寸可能比 wrap 的尺寸小\r\n // 因为 wrap 显示的普通尺寸是 1200px，但是动图的普通尺寸是 600px\r\n // 所以我直接让画布使用 wrap 的尺寸了。如果动图比 wrap 小，就会放大到 wrap 的尺寸\r\n this.width =\r\n this.wrapWidth || Number.parseInt(this.canvasWrap.style.width);\r\n this.height =\r\n this.wrapHeight || Number.parseInt(this.canvasWrap.style.height);\r\n }\r\n // 检查是否应该开始播放动画\r\n // 如果动画的图片总量达到了 30 帧，则等到至少加载了 10 帧之后再开始播放\r\n // 这样可以减少在刚开始播放时，因可用帧数太少而导致画面看起来抖动（快速循环）的诡异情况\r\n if (this.meta.frames.length >= 30) {\r\n this.jpgFileList.length >= 10 && this.startPlay();\r\n }\r\n else if (this.meta.frames.length >= 20) {\r\n this.jpgFileList.length >= 5 && this.startPlay();\r\n }\r\n else if (this.meta.frames.length >= 10) {\r\n this.jpgFileList.length >= 4 && this.startPlay();\r\n }\r\n else {\r\n this.jpgFileList.length >= 1 && this.startPlay();\r\n }\r\n }\r\n // 保存整个压缩包（debug 用）\r\n // const newFile = new Blob([this.zipContent])\r\n // const url = URL.createObjectURL(newFile)\r\n // Utils.downloadFile(url, `${this.id}.zip`)\r\n }\r\n /**获取该作品的 meta 数据 */\r\n getMeta(id) {\r\n return new Promise(async (resolve, reject) => {\r\n const meta = await API.getUgoiraMeta(id);\r\n if (meta.error) {\r\n throw reject(meta.message);\r\n }\r\n resolve(meta.body);\r\n });\r\n }\r\n /** 发送 HEAD 请求，获取 zip 压缩包的体积 */\r\n getFileLength() {\r\n return new Promise(async (resolve, reject) => {\r\n const response = await fetch(this.zipURL, {\r\n method: 'head',\r\n credentials: 'same-origin',\r\n });\r\n const length = response.headers.get('content-length');\r\n if (!length) {\r\n throw reject('getFileLength error: get length failed');\r\n }\r\n resolve(Number.parseInt(length));\r\n });\r\n }\r\n /** 根据 zip 文件的体积分割出数个区间，生成对应的标记文本 */\r\n setRangeList(total, rangeSize) {\r\n const result = [];\r\n // total 是 length，但 start 和 end 是下标\r\n let start = 0;\r\n let end = 0;\r\n const max = total - 1;\r\n while (end < max) {\r\n if (start > 0) {\r\n start++;\r\n }\r\n end = start + rangeSize - 1;\r\n if (end > max) {\r\n end = max;\r\n }\r\n const str = `bytes=${start}-${end}`;\r\n result.push(str);\r\n start = end;\r\n }\r\n return result;\r\n }\r\n loadRangeFileAsBuff(range) {\r\n return new Promise(async (resolve, reject) => {\r\n const res = await fetch(this.zipURL, {\r\n method: 'get',\r\n headers: {\r\n range: range,\r\n },\r\n });\r\n const buff = await res.arrayBuffer();\r\n resolve(buff);\r\n });\r\n }\r\n /**把 ArrayBuffer 追加到已存在的 ArrayBuffer 容器里 */\r\n appendBuff(target, newBuff) {\r\n const totalLength = target.byteLength + newBuff.byteLength;\r\n const uint8 = new Uint8Array(totalLength);\r\n uint8.set(new Uint8Array(target));\r\n uint8.set(new Uint8Array(newBuff), target.byteLength);\r\n return uint8.buffer;\r\n }\r\n /** 从 zip 文件里提取出所有 jpg 图片的数据 */\r\n extractJPGData(file, indexList) {\r\n indexList.forEach((number, index, array) => {\r\n // 如果这是最后一个标记，并且压缩包没有整个加载完成，则不提取最后一个文件的数据\r\n // 因为此时最后一个文件的数据很可能是破损的\r\n if (index === array.length - 1 && !this.loadend) {\r\n return;\r\n }\r\n // 如果这张图片没有被保存，才会提取它\r\n // 如果已经有这个图片的数据，就不再提取它，以提高性能\r\n if (this.jpgFileList[index] === undefined) {\r\n // 确定要提取的文件的起始位置\r\n // 从当前文件名之后开始\r\n const start = number;\r\n // 截止下一个文件名之前\r\n // 删除不需要的数据：\r\n // 30 字节的是 zip 文件的数据，虽然没有实际影响，但还是去掉\r\n // 10 字节的是下一个 jpg 的文件名\r\n let end = array[index + 1] - 30 - this.jpgNameLength;\r\n if (index === array.length - 1) {\r\n // 如果是最后一个 jpg 文件，则截止到 zip 文件的结尾\r\n // 这导致它会包含 zip 的目录数据，但是不会影响图片的显示\r\n end = file.byteLength;\r\n }\r\n // slice 方法的 end 不会包含在结果里\r\n const buffer = file.slice(start, end);\r\n const blob = new Blob([buffer], {\r\n type: 'image/jpeg',\r\n });\r\n const url = URL.createObjectURL(blob);\r\n // 下载这张图片（debug 用）\r\n // Utils.downloadFile(url, `${index}.jpg`)\r\n const img = new Image(this.width, this.height);\r\n img.src = url;\r\n this.jpgFileList[index] = {\r\n img: img,\r\n delay: this.meta.frames[index].delay,\r\n };\r\n }\r\n });\r\n }\r\n startPlay() {\r\n if (this.jpgFileList.length > 0 && !this.canvasIsAppend) {\r\n this.addCanvas();\r\n this.canvasIsAppend = true;\r\n this.animationID = window.requestAnimationFrame(this.play);\r\n }\r\n }\r\n addCanvas() {\r\n const oldCanvas = this.canvasWrap.querySelector('canvas');\r\n if (oldCanvas) {\r\n oldCanvas.remove();\r\n }\r\n this.canvas.style.display = 'none';\r\n this.canvasWrap.append(this.canvas);\r\n this.canvas.width = this.width;\r\n this.canvas.height = this.height;\r\n }\r\n destroy() {\r\n this.destroyed = true;\r\n window.cancelAnimationFrame(this.animationID);\r\n this.canvas.remove();\r\n this.zipContent = new ArrayBuffer(0);\r\n this.jpgFileList = [];\r\n this.jpgContentIndexList = [];\r\n }\r\n}\r\nexport { PreviewUgoira };\r\n","import { API } from './API';\r\nimport { EVT } from './EVT';\r\nimport { artworkThumbnail } from './ArtworkThumbnail';\r\nimport { settings, setSetting } from './setting/Settings';\r\nimport { showOriginSizeImage } from './ShowOriginSizeImage';\r\nimport { cacheWorkData } from './store/CacheWorkData';\r\nimport { states } from './store/States';\r\nimport { Utils } from './utils/Utils';\r\nimport { PreviewUgoira } from './PreviewUgoira';\r\nimport { toast } from './Toast';\r\nimport { lang } from './Lang';\r\nimport { Colors } from './Colors';\r\nimport { DateFormat } from './utils/DateFormat';\r\n// 鼠标停留在作品的缩略图上时，预览作品\r\nclass PreviewWork {\r\n constructor() {\r\n // 预览作品的容器的元素\r\n this.wrapId = 'previewWorkWrap';\r\n this.img = document.createElement('img');\r\n this.border = 4; // border 占据的空间\r\n this.tipId = 'previewWorkTip';\r\n this.tipHeight = 22;\r\n // 保存当前鼠标经过的缩略图的数据\r\n this.workId = '';\r\n // 显示作品中的第几张图片\r\n this.index = 0;\r\n // 延迟显示预览区域的定时器\r\n // 鼠标进入缩略图时，本模块会立即请求作品数据，但在请求完成后不会立即加载图片，这是为了避免浪费网络资源\r\n this.delayShowTimer = undefined;\r\n // 延迟隐藏预览区域的定时器\r\n this.delayHiddenTimer = undefined;\r\n // 当用户点击预览图使预览图隐藏时，不再显示这个作品的预览图（切换作品可以解除限制）\r\n this.dontShowAgain = false;\r\n // 是否允许预览区域遮挡作品缩略图\r\n this.allowOverThumb = true;\r\n // 当前预览图是否遮挡了作品缩略图\r\n this.overThumb = false;\r\n this._show = false;\r\n // 当鼠标滚轮滚动时，切换显示的图片\r\n // 此事件必须使用节流，因为有时候鼠标滚轮短暂的滚动一下就会触发 2 次 mousewheel 事件\r\n this.swicthImage = Utils.throttle(() => {\r\n const count = this.workData.body.pageCount;\r\n const up = this.wheelEvent.deltaY < 0;\r\n if (up) {\r\n if (this.index > 0) {\r\n this.index--;\r\n }\r\n else {\r\n this.index = count - 1;\r\n }\r\n }\r\n else {\r\n if (this.index < count - 1) {\r\n this.index++;\r\n }\r\n else {\r\n this.index = 0;\r\n }\r\n }\r\n this.showWrap();\r\n }, 100);\r\n this.onWheelScroll = (ev) => {\r\n if (this.show &&\r\n settings.wheelScrollSwitchImageOnPreviewWork &&\r\n this.workData.body.pageCount > 1) {\r\n ev.preventDefault();\r\n this.wheelEvent = ev;\r\n this.swicthImage();\r\n }\r\n };\r\n this.createElements();\r\n this.bindEvents();\r\n }\r\n get show() {\r\n return this._show;\r\n }\r\n set show(val) {\r\n if (val) {\r\n this.workData = cacheWorkData.get(this.workId);\r\n // 如果保存的作品数据不是最后一个鼠标经过的作品，可能是请求尚未完成，此时延长等待时间\r\n if (!this.workData || this.workData.body.id !== this.workId) {\r\n this.readyShow();\r\n }\r\n else {\r\n this.sendUrls();\r\n if (settings.PreviewWork) {\r\n this._show = true;\r\n this.showWrap();\r\n window.clearTimeout(this.delayHiddenTimer);\r\n }\r\n }\r\n }\r\n else {\r\n // 隐藏时重置一些变量\r\n window.clearTimeout(this.delayShowTimer);\r\n window.clearTimeout(this.delayHiddenTimer);\r\n this.overThumb = false;\r\n this._show = false;\r\n this.dontShowAgain = false;\r\n this.wrap.style.display = 'none';\r\n // 隐藏 wrap 时，把 img 的 src 设置为空\r\n // 这样图片会停止加载，避免浪费网络资源\r\n this.img.src = '';\r\n // 销毁预览动图的模块\r\n if (this.previewUgoira) {\r\n this.previewUgoira.destroy();\r\n this.previewUgoira = null;\r\n }\r\n }\r\n }\r\n createElements() {\r\n this.wrap = document.createElement('div');\r\n this.wrap.id = this.wrapId;\r\n this.tip = document.createElement('div');\r\n this.tip.id = this.tipId;\r\n this.wrap.appendChild(this.tip);\r\n document.body.appendChild(this.wrap);\r\n }\r\n bindEvents() {\r\n artworkThumbnail.onEnter((el, id) => {\r\n if (this.dontShowAgain) {\r\n return;\r\n }\r\n // 当鼠标进入到不同作品时\r\n // 隐藏之前的预览图\r\n // 重置 index\r\n if (this.workId !== id) {\r\n this.show = false;\r\n this.index = 0;\r\n }\r\n this.workId = id;\r\n this.workEL = el;\r\n if (!cacheWorkData.has(id)) {\r\n // 如果在缓存中没有找到这个作品的数据，则发起请求\r\n this.fetchWorkData();\r\n }\r\n else {\r\n this.workData = cacheWorkData.get(id);\r\n }\r\n this.readyShow();\r\n el.addEventListener('mousewheel', this.onWheelScroll);\r\n });\r\n artworkThumbnail.onLeave((el) => {\r\n if (this.overThumb) {\r\n // 如果预览图遮挡了作品缩略图，就需要延迟隐藏预览图。\r\n // 因为预览图显示之后，鼠标可能处于预览图上，这会触发此事件。\r\n // 如果不延迟隐藏，预览图就会马上消失，无法查看\r\n this.delayHiddenTimer = window.setTimeout(() => {\r\n this.show = false;\r\n el.removeEventListener('mousewheel', this.onWheelScroll);\r\n }, 100);\r\n }\r\n else {\r\n this.show = false;\r\n el.removeEventListener('mousewheel', this.onWheelScroll);\r\n }\r\n });\r\n // 可以使用 Alt + P 快捷键来启用/禁用此功能\r\n // 预览作品时，可以使用快捷键 D 下载这个作品\r\n window.addEventListener('keydown', (ev) => {\r\n if (ev.altKey && ev.code === 'KeyP') {\r\n setSetting('PreviewWork', !settings.PreviewWork);\r\n }\r\n if (ev.code === 'KeyD' && this.show) {\r\n EVT.fire('crawlIdList', [\r\n {\r\n type: 'illusts',\r\n id: this.workData.body.id,\r\n },\r\n ]);\r\n // 下载时不显示下载面板\r\n states.quickCrawl = true;\r\n toast.show(lang.transl('_已发送下载请求'), {\r\n bgColor: Colors.bgBlue,\r\n position: 'center',\r\n });\r\n }\r\n });\r\n const hiddenEvtList = [\r\n EVT.list.pageSwitch,\r\n EVT.list.centerPanelOpened,\r\n EVT.list.showOriginSizeImage,\r\n ];\r\n hiddenEvtList.forEach((evt) => {\r\n window.addEventListener(evt, () => {\r\n this.show = false;\r\n });\r\n });\r\n this.wrap.addEventListener('mouseenter', () => {\r\n window.clearTimeout(this.delayHiddenTimer);\r\n });\r\n this.wrap.addEventListener('mousemove', (ev) => {\r\n // 鼠标在预览图上移动出缩略图区域时，隐藏预览图\r\n if (this.mouseInElementArea(this.workEL, ev.clientX, ev.clientY) === false) {\r\n this.show = false;\r\n }\r\n });\r\n this.wrap.addEventListener('click', (ev) => {\r\n this.show = false;\r\n // 点击预览图使预览图消失时，如果鼠标仍处于缩略图区域内，则不再显示这个作品的预览图\r\n // 当鼠标移出这个作品的缩略图之后取消此限制\r\n if (this.mouseInElementArea(this.workEL, ev.clientX, ev.clientY)) {\r\n this.dontShowAgain = true;\r\n }\r\n });\r\n this.wrap.addEventListener('mousewheel', (ev) => {\r\n this.overThumb && this.onWheelScroll(ev);\r\n });\r\n }\r\n // 判断鼠标是否处于某个元素的范围内\r\n mouseInElementArea(el, x, y) {\r\n if (!el) {\r\n return false;\r\n }\r\n const rect = el.getBoundingClientRect();\r\n return x > rect.left && x < rect.right && y > rect.top && y < rect.bottom;\r\n }\r\n preload() {\r\n // 如果下载器正在下载文件，则不预加载\r\n if (this.show && !states.downloading) {\r\n const count = this.workData.body.pageCount;\r\n if (count > this.index + 1) {\r\n let url = this.workData.body.urls[settings.prevWorkSize];\r\n url = url.replace('p0', `p${this.index + 1}`);\r\n let img = new Image();\r\n // 在预加载过程中，如果查看的图片变化了，或者不显示预览区域了，则立即中断预加载\r\n const nowIndex = this.index;\r\n const timer = window.setInterval(() => {\r\n if (this.index !== nowIndex || !this.show) {\r\n window.clearInterval(timer);\r\n img && (img.src = '');\r\n img = null;\r\n }\r\n }, 50);\r\n img.onload = () => {\r\n window.clearInterval(timer);\r\n img && (img = null);\r\n };\r\n img.src = url;\r\n }\r\n }\r\n }\r\n async fetchWorkData() {\r\n const data = await API.getArtworkData(this.workId);\r\n cacheWorkData.set(data);\r\n }\r\n readyShow() {\r\n this.delayShowTimer = window.setTimeout(() => {\r\n this.show = true;\r\n }, settings.previewWorkWait);\r\n }\r\n // 通过 img 元素加载图片，获取图片的原始尺寸\r\n async getImageSize(url) {\r\n return new Promise((resolve) => {\r\n // 鼠标滚轮滚动时，此方法可能会在短时间内触发多次。通过 index 判断当前请求是否应该继续\r\n let testImg = new Image();\r\n testImg.src = url;\r\n const bindIndex = this.index;\r\n const timer = window.setInterval(() => {\r\n if (this.index !== bindIndex) {\r\n // 如果要显示的图片发生了变化，则立即停止加载当前图片，避免浪费网络流量\r\n window.clearInterval(timer);\r\n testImg.src = '';\r\n testImg = null;\r\n // 本来这里应该 reject 的，但是那样就需要在 await 的地方处理这个错误\r\n // 我不想处理错误，所以用 available 标记来偷懒\r\n return resolve({\r\n width: 0,\r\n height: 0,\r\n available: false,\r\n });\r\n }\r\n else {\r\n // 如果获取到了图片的宽高，也立即停止加载当前图片，并返回结果\r\n if (testImg.naturalWidth > 0) {\r\n const width = testImg.naturalWidth;\r\n const height = testImg.naturalHeight;\r\n window.clearInterval(timer);\r\n testImg.src = '';\r\n testImg = null;\r\n return resolve({\r\n width,\r\n height,\r\n available: true,\r\n });\r\n }\r\n }\r\n }, 50);\r\n });\r\n }\r\n // 显示预览 wrap\r\n async showWrap() {\r\n if (!this.workEL || !this.workData) {\r\n return;\r\n }\r\n const url = this.replaceUrl(this.workData.body.urls[settings.prevWorkSize]);\r\n const size = await this.getImageSize(url);\r\n // getImageSize 可能需要花费比较长的时间。有时候在 getImageSize 之前是要显示 wrap 的，但是之后鼠标移出，需要隐藏 wrap，再之后 getImageSize 才执行完毕。\r\n // 所以此时需要再次判断是否要显示 wrap。如果不再次判断的话，可能有时候需要隐藏预览图，但是预览图却显示出来了\r\n if (!size.available || !this.show) {\r\n return;\r\n }\r\n const w = size.width;\r\n const h = size.height;\r\n const cfg = {\r\n width: w,\r\n height: h,\r\n left: 0,\r\n top: 0,\r\n };\r\n // 每次显示图片时，都销毁旧的 img 元素，然后重新生成一个 img 元素，而不是修改之前的 img 元素的 src\r\n // 因为修改 src 的方式存在严重的问题：虽然 src 已经变化了，但是 img 元素显示的还是上一张图片（不管上一张图片是否加载完成）。等到新的图片完全加载完成后，img 才会变化。\r\n // 这会导致一些问题：\r\n // 1. 在新图片的加载过程中，用户无法看到加载进度。只能等到图片加载完成后瞬间完全显示出来。\r\n // 2. 在新图片的加载过程中，图片的宽高是新图片的宽高，但是显示的内容还是旧的图片。如果这两张图片的尺寸不一致，此时显示的（旧）图片看上去是变形的\r\n // 只有生成新的 img 元素，才能解决上面的问题\r\n this.img.src = '';\r\n this.img.remove();\r\n this.img = document.createElement('img');\r\n // 当图片加载完成时，预加载下一张图片\r\n this.img.onload = () => this.preload();\r\n this.img.src = url;\r\n this.wrap.appendChild(this.img);\r\n // 1. 计算图片显示的尺寸\r\n const rect = this.workEL.getBoundingClientRect();\r\n // 不显示摘要信息时，也不显示边框，所以此时把 border 设置为 0\r\n this.border = settings.showPreviewWorkTip ? 4 : 0;\r\n // 计算各个可用区域的尺寸，提前减去了 border、tip 等元素占据的空间\r\n const innerWidth = window.innerWidth - 17;\r\n const leftSpace = rect.left - this.border;\r\n const rightSpace = innerWidth - rect.right - this.border;\r\n const xSpace = Math.max(leftSpace, rightSpace);\r\n const tipHeight = settings.showPreviewWorkTip ? this.tipHeight : 0;\r\n const scrollBarHeight = window.innerHeight - document.documentElement.clientHeight;\r\n const ySpace = window.innerHeight - scrollBarHeight - this.border - tipHeight;\r\n // 宽高从图片宽高、可用区域的宽高中取最小值，使图片不会超出可视区域外\r\n // 竖图\r\n if (w < h) {\r\n cfg.height = Math.min(ySpace, h);\r\n cfg.width = (cfg.height / h) * w;\r\n // 此时宽度可能会超过水平方向上的可用区域，则需要再次调整宽高\r\n if (cfg.width > xSpace) {\r\n cfg.height = (xSpace / cfg.width) * cfg.height;\r\n cfg.width = xSpace;\r\n }\r\n }\r\n else if (w > h) {\r\n // 横图\r\n if (this.allowOverThumb) {\r\n // 如果允许预览图覆盖在作品缩略图上，则预览图的最大宽度可以等于视口宽度\r\n if (w > innerWidth) {\r\n cfg.width = innerWidth;\r\n }\r\n }\r\n else {\r\n // 否则，预览图的宽度不可以超过图片两侧的空白区域的宽度\r\n cfg.width = Math.min(xSpace, w);\r\n }\r\n cfg.height = (cfg.width / w) * h;\r\n // 此时高度可能会超过垂直方向上的可用区域，则需要再次调整宽高\r\n if (cfg.height > ySpace) {\r\n cfg.width = (ySpace / cfg.height) * cfg.width;\r\n cfg.height = ySpace;\r\n }\r\n }\r\n else {\r\n // 正方形图片\r\n cfg.height = Math.min(ySpace, xSpace, h);\r\n cfg.width = cfg.height;\r\n }\r\n // 上面计算的高度是图片的高度，现在计算 wrap 的宽高，需要加上内部其他元素的高度\r\n cfg.height = cfg.height + tipHeight;\r\n // 2. 计算位置\r\n // 在页面可视区域内，比较缩略图左侧和右侧空间，把 wrap 显示在空间比较大的那一侧\r\n if (leftSpace >= rightSpace) {\r\n // 左侧空间大\r\n // 先让预览图的右侧贴着图片左侧边缘显示\r\n cfg.left = rect.left - cfg.width - this.border + window.scrollX;\r\n // 如果预览图超出可视范围，则向右移动\r\n if (cfg.left < 0) {\r\n this.overThumb = true;\r\n cfg.left = 0;\r\n }\r\n }\r\n else {\r\n // 右侧空间大\r\n // 先让预览图的左侧贴着图片右侧边缘显示\r\n cfg.left = rect.right + window.scrollX;\r\n // 如果预览图超出可视范围，则向左移动\r\n if (cfg.width > rightSpace) {\r\n this.overThumb = true;\r\n cfg.left = cfg.left - (cfg.left + cfg.width - innerWidth) - this.border;\r\n }\r\n }\r\n // 然后设置 top\r\n // 让 wrap 和缩略图在垂直方向上居中对齐\r\n cfg.top = rect.top;\r\n const wrapHalfHeight = (cfg.height + this.border) / 2;\r\n const workHalfHeight = rect.height / 2;\r\n cfg.top = cfg.top - wrapHalfHeight + workHalfHeight;\r\n // 检查 wrap 顶端是否超出了窗口可视区域\r\n if (cfg.top < 0) {\r\n cfg.top = 0;\r\n }\r\n // 检查 wrap 底部是否超出了窗口可视区域\r\n const bottomOver = cfg.top + cfg.height + this.border - window.innerHeight;\r\n if (bottomOver > 0) {\r\n // 如果底部超出了窗口可视区域，则计算顶部是否还有可用空间\r\n if (cfg.top > 0) {\r\n // 如果顶部还有空间可用，就尽量向上移动，但不会导致顶端超出可视区域\r\n cfg.top = cfg.top - Math.min(bottomOver, cfg.top) - scrollBarHeight;\r\n }\r\n }\r\n // 3. 设置顶部提示区域的内容\r\n if (settings.showPreviewWorkTip) {\r\n const text = [];\r\n const body = this.workData.body;\r\n if (body.pageCount > 1) {\r\n text.push(`${this.index + 1}/${body.pageCount}`);\r\n }\r\n text.push(body.bookmarkCount.toString());\r\n // 加载原图时，可以获取到每张图片的真实尺寸\r\n if (settings.prevWorkSize === 'original') {\r\n text.push(`${w}x${h}`);\r\n }\r\n else {\r\n // 如果加载的是普通尺寸，则永远显示第一张图的原始尺寸\r\n // 因为此时获取不到后续图片的原始尺寸\r\n text.push(`${this.workData.body.width}x${this.workData.body.height}`);\r\n }\r\n text.push(DateFormat.format(body.createDate, 'YYYY/MM/DD'));\r\n text.push(body.title);\r\n text.push(body.description);\r\n this.tip.innerHTML = text\r\n .map((str) => {\r\n return `${str}`;\r\n })\r\n .join('');\r\n this.tip.style.display = 'block';\r\n }\r\n else {\r\n this.tip.style.display = 'none';\r\n }\r\n // 4. 显示 wrap\r\n this.img.style.height = cfg.height - tipHeight + 'px';\r\n const styleArray = [];\r\n for (const [key, value] of Object.entries(cfg)) {\r\n styleArray.push(`${key}:${value}px;`);\r\n }\r\n styleArray.push('display:block;');\r\n // 如果不显示摘要信息，覆写一些样式\r\n if (!settings.showPreviewWorkTip) {\r\n styleArray.push('border:none;');\r\n styleArray.push('box-shadow:none;');\r\n }\r\n this.wrap.setAttribute('style', styleArray.join(''));\r\n // 每次显示图片后，传递图片的 url\r\n this.sendUrls();\r\n // 预览动图\r\n if (settings.previewUgoira && this.workData.body.illustType === 2) {\r\n this.previewUgoira = new PreviewUgoira(this.workData.body.id, this.wrap, settings.prevWorkSize, cfg.width, cfg.height - tipHeight);\r\n // 需要显式传递 wrap 的宽高，特别是高度。因为需要减去顶部提示区域的高度\r\n }\r\n }\r\n replaceUrl(url) {\r\n return url.replace('p0', `p${this.index}`);\r\n }\r\n sendUrls() {\r\n const data = this.workData;\r\n if (!data) {\r\n return;\r\n }\r\n // 传递图片的 url，但是不传递尺寸。\r\n // 因为预览图片默认加载“普通”尺寸的图片，但是 showOriginSizeImage 默认显示“原图”尺寸。\r\n // 而且对于第一张之后的图片，加载“普通”尺寸的图片时，无法获取“原图”的尺寸。\r\n showOriginSizeImage.setData({\r\n original: this.replaceUrl(data.body.urls.original),\r\n regular: this.replaceUrl(data.body.urls.regular),\r\n }, data);\r\n }\r\n}\r\nnew PreviewWork();\r\n","import { EVT } from './EVT';\r\nimport { pageType } from './PageType';\r\nimport { settings } from './setting/Settings';\r\nimport { Tools } from './Tools';\r\nclass ReplaceSquareThumb {\r\n constructor() {\r\n this.bindEvents();\r\n this.observer();\r\n }\r\n isDisable() {\r\n return window.location.pathname.startsWith('/group');\r\n }\r\n bindEvents() {\r\n window.addEventListener(EVT.list.settingChange, (ev) => {\r\n const data = ev.detail.data;\r\n if (data.name === 'replaceSquareThumb') {\r\n if (data.value) {\r\n this.replaceAllImage();\r\n }\r\n }\r\n });\r\n }\r\n replaceAllImage() {\r\n if (settings.replaceSquareThumb ||\r\n pageType.type == pageType.list.ArtworkRanking) {\r\n const allImage = document.querySelectorAll('img');\r\n allImage.forEach((img) => this.replace(img));\r\n }\r\n }\r\n replace(img) {\r\n if (!img.src || img.dataset.index || this.isDisable()) {\r\n return;\r\n }\r\n const src = img.src;\r\n if (!src.endsWith('square1200.jpg') && !src.endsWith('custom1200.jpg')) {\r\n if (pageType.type === pageType.list.ArtworkRanking &&\r\n settings.showLargerThumbnails) {\r\n // 排行榜里的缩略图本来就是保持了比例的，不需要替换其缩略图。\r\n // 但是排行榜里的缩略图原本尺寸较小，当用户启用了“显示更大的缩略图”之后，缩略图被放大后显得模糊，此时需要替换成更大尺寸的缩略图。\r\n // 排行榜页面的图片 URL 比较特别，末尾是 master1200，如下：\r\n // 'https://i.pximg.net/c/240x480/img-master/img/2022/08/01/17/59/39/100156836_p0_master1200.jpg'\r\n if (!src.includes('240x480')) {\r\n return;\r\n }\r\n }\r\n else {\r\n return;\r\n }\r\n }\r\n img.src = Tools.convertThumbURLTo540px(src);\r\n img.style.objectFit = 'contain';\r\n }\r\n observer() {\r\n const observer = new MutationObserver((records) => {\r\n if (!settings.replaceSquareThumb) {\r\n if (pageType.type !== pageType.list.ArtworkRanking) {\r\n // 在排行榜页面里，即使用户未启用“替换方形缩略图以显示图片比例”功能，也依然执行替换缩略图的动作\r\n return;\r\n }\r\n }\r\n records.forEach((record) => {\r\n if (record.type === 'childList') {\r\n record.addedNodes.forEach((node) => {\r\n if (node.nodeName === 'IMG') {\r\n this.replace(node);\r\n }\r\n });\r\n }\r\n if (record.type === 'attributes') {\r\n if (record.attributeName === 'src' &&\r\n record.target.nodeName === 'IMG') {\r\n this.replace(record.target);\r\n }\r\n }\r\n });\r\n });\r\n observer.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n attributeFilter: ['src'],\r\n });\r\n }\r\n}\r\nnew ReplaceSquareThumb();\r\n","import { Tools } from './Tools';\r\nimport { Colors } from './Colors';\r\nimport { lang } from './Lang';\r\nimport { EVT } from './EVT';\r\nimport { states } from './store/States';\r\nimport { toast } from './Toast';\r\nimport { msgBox } from './MsgBox';\r\nimport { Utils } from './utils/Utils';\r\nimport { artworkThumbnail } from './ArtworkThumbnail';\r\nimport { novelThumbnail } from './NovelThumbnail';\r\nimport { pageType } from './PageType';\r\n// 手动选择作品，图片作品和小说都可以选择\r\nclass SelectWork {\r\n constructor() {\r\n this.created = false;\r\n this.selectorId = 'selectWorkEl';\r\n this.left = 0;\r\n this.top = 0;\r\n this.half = 10; // 指示器的一半宽度（用于设置位置）\r\n this._start = false;\r\n this._pause = false;\r\n this._tempHide = false; // 打开下载面板时临时隐藏。这个变量只会影响选择器的 display\r\n this.controlBtn = document.createElement('button'); // 启动、暂停、继续选择的按钮\r\n this.crawlBtn = document.createElement('button'); // 抓取选择的作品的按钮，并且会退出选择模式\r\n this.clearBtn = document.createElement('button'); // 清空选择的作品的按钮\r\n this.selectedWorkFlagClass = 'selectedWorkFlag'; // 给已选择的作品添加标记时使用的 class\r\n this.positionValue = ['relative', 'absolute', 'fixed']; // 标记元素需要父元素拥有这些定位属性\r\n // 不同页面里的作品列表容器的选择器可能不同，这里储存所有页面里会使用到的的选择器\r\n // root 是大部分页面通用的; js-mount-point-discovery 是发现页面使用的\r\n this.worksWrapperSelectorList = [\r\n '#root',\r\n '#js-mount-point-discovery',\r\n ];\r\n // 储存当前页面使用的选择器\r\n this.usedWorksWrapperSelector = this.worksWrapperSelectorList[0];\r\n // 储存当前页面的作品列表容器\r\n this.worksWrapper = document.body;\r\n this.ob = undefined;\r\n this.idList = [];\r\n this.sendCrawl = false; // 它用来判断抓取的是不是选择的作品。抓取选择的作品时激活此标记；当触发下一次的抓取完成事件时，表示已经抓取了选择的作品。\r\n this.crawled = false; // 是否已经抓取了选择的作品\r\n this.svg = ``;\r\n const unlisted = pageType.type === pageType.list.Unlisted;\r\n if (!this.created && Utils.isPixiv() && !unlisted) {\r\n this.created = true;\r\n this.selector = this.createSelectorEl();\r\n this.addBtn();\r\n this.bindEvents();\r\n }\r\n }\r\n get start() {\r\n return this._start;\r\n }\r\n set start(bool) {\r\n this._start = bool;\r\n states.selectWork = bool;\r\n this.updateSelectorEl();\r\n this.updateControlBtn();\r\n }\r\n get pause() {\r\n return this._pause;\r\n }\r\n set pause(bool) {\r\n this._pause = bool;\r\n if (bool) {\r\n states.selectWork = false;\r\n }\r\n this.updateSelectorEl();\r\n this.updateControlBtn();\r\n }\r\n get tempHide() {\r\n return this._tempHide;\r\n }\r\n set tempHide(bool) {\r\n this._tempHide = bool;\r\n this.updateSelectorEl();\r\n }\r\n bindEvents() {\r\n artworkThumbnail.onClick((el, id, ev) => {\r\n this.clickThumbnail(el, id, ev, 'illusts');\r\n });\r\n novelThumbnail.onClick((el, id, ev) => {\r\n this.clickThumbnail(el, id, ev, 'novels');\r\n });\r\n document.body.addEventListener('click', (ev) => {\r\n this.clickElement(ev.target, ev);\r\n }, true);\r\n window.addEventListener(EVT.list.openCenterPanel, () => {\r\n this.tempHide = true;\r\n });\r\n window.addEventListener(EVT.list.closeCenterPanel, () => {\r\n this.tempHide = false;\r\n });\r\n window.addEventListener(EVT.list.crawlComplete, () => {\r\n if (this.sendCrawl) {\r\n this.sendCrawl = false;\r\n this.crawled = true;\r\n }\r\n });\r\n // 可以使用 Alt + S 快捷键来模拟点击控制按钮\r\n window.addEventListener('keydown', (ev) => {\r\n if (ev.altKey && ev.code === 'KeyS') {\r\n this.controlBtn.click();\r\n }\r\n });\r\n // 鼠标移动时保存鼠标的坐标\r\n window.addEventListener('mousemove', (ev) => {\r\n this.moveEvent(ev);\r\n }, true);\r\n // 离开页面前提示用户\r\n // 如果把此处的 window.onbeforeunload 换成 window.addEventListener('beforeunload') 会出现问题\r\n // 浏览器不会弹出询问对话框，而是直接关闭页面\r\n window.onbeforeunload = () => {\r\n // 如果存在选择的作品，并且选择的作品（全部或部分）没有被抓取，则进行提示\r\n if (this.idList.length > 0 && !this.crawled) {\r\n msgBox.error(lang.transl('_离开页面前提示选择的作品未抓取'), {\r\n btn: lang.transl('_我知道了'),\r\n });\r\n return false;\r\n }\r\n };\r\n // 每次页面切换之后，查找新的作品列表容器并保存\r\n window.addEventListener(EVT.list.pageSwitch, () => {\r\n let worksWrapper = null;\r\n for (const selector of this.worksWrapperSelectorList) {\r\n worksWrapper = document.querySelector(selector);\r\n if (worksWrapper) {\r\n this.usedWorksWrapperSelector = selector;\r\n break;\r\n }\r\n }\r\n this.worksWrapper = worksWrapper || document.body;\r\n });\r\n // 每次页面切换之后，查找新显示的作品里是否有之前被选择的作品，如果有则为其添加标记\r\n // 因为 pixiv 的页面切换会导致作品列表变化，之前添加的标记也就没有了，需要重新添加\r\n window.addEventListener(EVT.list.pageSwitch, () => {\r\n // 每次触发时都要断开之前绑定的观察器，否则会导致事件重复绑定\r\n // 因为 pageSwitch 事件可能会触发多次，如果不断开之前的观察器，那么每切换一次页面就会多绑定和执行一个回调\r\n this.ob && this.ob.disconnect();\r\n this.ob = new MutationObserver(Utils.debounce(() => {\r\n this.reAddAllFlag();\r\n }, 300));\r\n this.ob.observe(this.worksWrapper, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n });\r\n }\r\n clearIdList() {\r\n // 清空标记需要使用 id 数据，所以需要执行之后才能清空 id\r\n this.removeAllSelectedFlag();\r\n this.idList = [];\r\n this.updateCrawlBtn();\r\n }\r\n createSelectorEl() {\r\n const el = document.createElement('div');\r\n el.id = this.selectorId;\r\n document.body.appendChild(el);\r\n return el;\r\n }\r\n updateSelectorEl() {\r\n if (!this.selector) {\r\n return;\r\n }\r\n const show = this.canSelect() && !this.tempHide;\r\n this.selector.style.display = show ? 'block' : 'none';\r\n // 设置元素的 style 时，如果新的值和旧的值相同（例如：每次都设置 display 为 none），Chrome 会自动优化，此时不会导致节点发生变化。\r\n // 如果选择器处于隐藏状态，就不会更新其坐标。这样可以优化性能\r\n if (show) {\r\n this.selector.style.left = this.left - this.half + 'px';\r\n this.selector.style.top = this.top - this.half + 'px';\r\n }\r\n }\r\n addBtn() {\r\n this.controlBtn = Tools.addBtn('selectWorkBtns', Colors.bgGreen, '_手动选择作品');\r\n this.controlBtn.setAttribute('title', 'Alt + S');\r\n this.updateControlBtn();\r\n this.clearBtn = Tools.addBtn('selectWorkBtns', Colors.bgRed, '_清空选择的作品');\r\n this.clearBtn.style.display = 'none';\r\n this.clearBtn.addEventListener('click', () => {\r\n this.clearIdList();\r\n });\r\n this.crawlBtn = Tools.addBtn('selectWorkBtns', Colors.bgBlue, '_抓取选择的作品');\r\n this.crawlBtn.style.display = 'none';\r\n this.crawlBtn.addEventListener('click', (ev) => {\r\n this.sendDownload();\r\n });\r\n }\r\n // 切换控制按钮的文字和点击事件\r\n updateControlBtn() {\r\n if (!this.start) {\r\n lang.updateText(this.controlBtn, '_手动选择作品');\r\n this.controlBtn.onclick = (ev) => {\r\n this.startSelect(ev);\r\n this.clearBtn.style.display = 'block';\r\n };\r\n }\r\n else {\r\n if (!this.pause) {\r\n lang.updateText(this.controlBtn, '_暂停选择');\r\n this.controlBtn.onclick = (ev) => {\r\n this.pauseSelect();\r\n };\r\n }\r\n else {\r\n lang.updateText(this.controlBtn, '_继续选择');\r\n this.controlBtn.onclick = (ev) => {\r\n this.startSelect(ev);\r\n };\r\n }\r\n }\r\n }\r\n // 在选择作品的数量改变时，在抓取按钮上显示作品数量\r\n updateCrawlBtn() {\r\n this.crawlBtn.style.display = this.start ? 'block' : 'none';\r\n if (this.idList.length > 0) {\r\n lang.updateText(this.crawlBtn, '_抓取选择的作品2', this.idList.length.toString());\r\n }\r\n else {\r\n lang.updateText(this.crawlBtn, '_抓取选择的作品');\r\n }\r\n }\r\n addId(el, id, type) {\r\n const index = this.idList.findIndex((item) => {\r\n return item.id === id && item.type === type;\r\n });\r\n // 添加这个 id\r\n if (index === -1) {\r\n this.idList.push({\r\n id,\r\n type,\r\n });\r\n this.crawled = false;\r\n this.addSelectedFlag(el, id);\r\n }\r\n else {\r\n // id 已存在，则删除\r\n this.idList.splice(index, 1);\r\n this.removeSelectedFlag(id);\r\n }\r\n this.updateCrawlBtn();\r\n }\r\n clickThumbnail(el, id, ev, type) {\r\n if (!this.canSelect()) {\r\n return;\r\n }\r\n // 阻止默认事件，否则会进入作品页面，导致无法在当前页面继续选择\r\n ev.preventDefault();\r\n this.addId(el, id, type);\r\n }\r\n clickElement(el, ev) {\r\n if (!this.canSelect()) {\r\n return;\r\n }\r\n if (!el || el.nodeName !== 'A') {\r\n return;\r\n }\r\n const href = el.href;\r\n const artworkId = Tools.getIllustId(href);\r\n if (artworkId) {\r\n ev.preventDefault();\r\n // 如果查找到了作品 id，必须阻止冒泡，否则会执行 clickThumbnail\r\n ev.stopPropagation();\r\n this.addId(el.parentElement, artworkId, 'illusts');\r\n return;\r\n }\r\n const novelId = Tools.getNovelId(href);\r\n if (novelId) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n this.addId(el.parentElement, novelId, 'novels');\r\n return;\r\n }\r\n }\r\n // 监听鼠标移动\r\n // 鼠标移动时，由于事件触发频率很高，所以这里的代码也会执行很多次，但是这没有导致明显的性能问题，所以没有使用节流等加以限制\r\n moveEvent(ev) {\r\n this.left = ev.x;\r\n this.top = ev.y;\r\n this.updateSelectorEl();\r\n }\r\n // esc 暂停选择\r\n escEvent(ev) {\r\n if (ev.code === 'Escape') {\r\n this.pauseSelect();\r\n }\r\n }\r\n // 开始或继续选择\r\n startSelect(ev) {\r\n this.start = true;\r\n if (this.pause) {\r\n // 如果之前暂停了，则继续选择。不清空之前的结果\r\n this.pause = false;\r\n }\r\n else {\r\n // 如果是全新开始的选择，则清空之前的结果\r\n this.clearIdList();\r\n }\r\n this.bindEscEvent = this.escEvent.bind(this);\r\n document.addEventListener('keyup', this.bindEscEvent);\r\n EVT.fire('closeCenterPanel');\r\n }\r\n pauseSelect() {\r\n this.pause = true;\r\n this.bindEscEvent &&\r\n document.removeEventListener('keyup', this.bindEscEvent);\r\n }\r\n canSelect() {\r\n return this.start && !this.pause;\r\n }\r\n // 抓取选择的作品，这会自动暂停手动选择作品\r\n sendDownload() {\r\n this.pauseSelect();\r\n if (this.idList.length > 0) {\r\n // 传递 id 列表时，将其转换成一个新的数组。否则传递的是引用，外部的一些操作可能会影响内部的 id 列表\r\n EVT.fire('crawlIdList', Array.from(this.idList));\r\n this.sendCrawl = true;\r\n this.crawled = false;\r\n states.quickCrawl = true;\r\n toast.show(lang.transl('_已发送下载请求'), {\r\n bgColor: Colors.bgBlue,\r\n });\r\n }\r\n else {\r\n toast.error(lang.transl('_没有数据可供使用'));\r\n }\r\n }\r\n // 给这个作品添加标记\r\n addSelectedFlag(wrap, id) {\r\n const i = document.createElement('i');\r\n i.classList.add(this.selectedWorkFlagClass);\r\n i.dataset.id = id;\r\n i.innerHTML = this.svg;\r\n wrap.insertAdjacentElement('afterbegin', i);\r\n // 如果容器没有某些定位，可能会导致下载器添加的标记的位置异常。修复此问题\r\n const position = window.getComputedStyle(wrap)['position'];\r\n if (!this.positionValue.includes(position)) {\r\n wrap.style.position = 'relative';\r\n }\r\n }\r\n // 重新添加被选择的作品上的标记\r\n reAddAllFlag() {\r\n if (this.idList.length === 0) {\r\n return;\r\n }\r\n for (const { id, type } of this.idList) {\r\n if (this.getSelectedFlag(id)) {\r\n // 如果这个作品的标记依旧存在，就不需要重新添加\r\n /**\r\n * 示例：从作品列表 https://www.pixiv.net/users/18095070/illustrations\r\n * 进入 tag 列表页 https://www.pixiv.net/users/18095070/illustrations/%E5%A5%B3%E3%81%AE%E5%AD%90\r\n * pixiv 会复用可用的作品，所以这些作品上的标记也依然存在，不需要重新添加\r\n */\r\n return;\r\n }\r\n let el;\r\n if (type === 'novels') {\r\n el = document.querySelector(`${this.usedWorksWrapperSelector} a[href=\"/novel/show.php?id=${id}\"]`);\r\n }\r\n else {\r\n el = document.querySelector(`${this.usedWorksWrapperSelector} a[href=\"/artworks/${id}\"]`);\r\n }\r\n if (el) {\r\n // 如果在当前页面查找到了选择的作品，就给它添加标记\r\n this.addSelectedFlag(el, id);\r\n }\r\n }\r\n }\r\n getSelectedFlag(id) {\r\n return document.querySelector(`.${this.selectedWorkFlagClass}[data-id='${id}']`);\r\n }\r\n // 清空指定作品的标记\r\n removeSelectedFlag(id) {\r\n const el = this.getSelectedFlag(id);\r\n el && el.remove();\r\n }\r\n // 清空所有标记\r\n removeAllSelectedFlag() {\r\n for (const item of this.idList) {\r\n this.removeSelectedFlag(item.id);\r\n }\r\n }\r\n}\r\nnew SelectWork();\r\n","class SetTimeoutWorker {\r\n constructor() {\r\n // 因为 worker 的代码很短，所以直接储存在这里，避免从网络加载导致的延迟问题\r\n this.workerCode = `onmessage = (ev) => {\n setTimeout(() => {\n postMessage({\n id: ev.data.id\n })\n }, ev.data.time)\n }`;\r\n this.list = [];\r\n this.timerId = 0;\r\n this.createWorker();\r\n }\r\n createWorker() {\r\n const blob = new Blob([this.workerCode]);\r\n this.worker = new Worker(URL.createObjectURL(blob));\r\n this.worker.addEventListener('message', (ev) => {\r\n const id = ev.data.id;\r\n if (this.list[id].callback !== null) {\r\n this.list[id].callback();\r\n this.clear(id);\r\n }\r\n });\r\n }\r\n set(callback, time) {\r\n const data = {\r\n id: this.timerId,\r\n time,\r\n callback,\r\n };\r\n this.list.push(data);\r\n this.timerId++;\r\n this.worker.postMessage({\r\n id: data.id,\r\n time,\r\n });\r\n return data.id;\r\n }\r\n clear(id) {\r\n this.list[id].callback = null;\r\n }\r\n}\r\nconst setTimeoutWorker = new SetTimeoutWorker();\r\nexport { setTimeoutWorker };\r\n","import { Tools } from './Tools';\r\nimport { EVT } from './EVT';\r\nimport { lang } from './Lang';\r\nimport { settings, setSetting } from './setting/Settings';\r\nimport { theme } from './Theme';\r\nimport { toast } from './Toast';\r\nimport { msgBox } from './MsgBox';\r\n// 为某些用户设置固定的用户名，或者别名\r\nclass SetUserName {\r\n constructor() {\r\n this.slotName = 'setUserNameSlot';\r\n this._addWrapShow = false;\r\n this.wrapHTML = `\n \n\n \n 0\n \n \n \n\n${defaultName}: ${fullNameHtml}
`;\r\n resultArr.push(nowResult);\r\n }\r\n else {\r\n // 小说作品不显示原文件名（因为没有此数据）\r\n const nowResult = `${fullNameHtml}
`;\r\n resultArr.push(nowResult);\r\n }\r\n }\r\n result = resultArr.join('');\r\n }\r\n else {\r\n // 不生成 html 标签，只生成纯文本，保存为 txt 文件\r\n for (let i = 0; i < length; i++) {\r\n const data = store.result[i];\r\n const fullName = fileName.createFileName(data);\r\n if (data.type !== 3) {\r\n // 图片作品，在文件名前面显示文件 url 里的文件名\r\n let defaultName = data.original.replace(/.*\\//, '');\r\n resultArr.push(`${defaultName}: ${fullName}`);\r\n }\r\n else {\r\n // 小说作品不显示原文件名（因为没有此数据）\r\n resultArr.push(fullName);\r\n }\r\n }\r\n result = resultArr.join('\\n');\r\n }\r\n EVT.fire('output', {\r\n content: result,\r\n title: '_预览文件名',\r\n });\r\n }\r\n}\r\nnew PreviewFileName();\r\n","import { store } from '../store/Store';\r\nimport { EVT } from '../EVT';\r\nimport { lang } from '../Lang';\r\nimport { settings } from '../setting/Settings';\r\nimport { toast } from '../Toast';\r\nimport { Config } from '../Config';\r\n// 显示 url\r\nclass ShowURLs {\r\n constructor() {\r\n this.bindEvents();\r\n }\r\n bindEvents() {\r\n window.addEventListener(EVT.list.showURLs, () => {\r\n this.showURLs();\r\n });\r\n }\r\n showURLs() {\r\n const urls = [];\r\n const size = settings.imageSize;\r\n for (const data of store.result) {\r\n // 只输出图片文件的 url\r\n // 小说文件没有固定的 url 所以不输出\r\n if (data.type !== 3) {\r\n urls.push(data[size]);\r\n }\r\n }\r\n if (store.result.length === 0 || urls.length === 0) {\r\n return toast.error(lang.transl('_没有可用的抓取结果'));\r\n }\r\n let result = '';\r\n if (store.result.length < Config.outputMax) {\r\n result = urls.join('