├── README.md
└── copymanga-helper.js


/README.md:
--------------------------------------------------------------------------------
 1 | # ☄️拷贝漫画增强☄️@Greasy Fork
 2 | 
 3 | 拷贝漫画去广告🚫，对日漫版漫画页进行增强：并排布局📖、图片高度自适应↕️、辅助翻页↔️、页码显示⏱、侧边目录栏📑、暗夜模式🌙，请设置即时注入模式以避免页面闪烁⚠️
 4 | 
 5 | https://greasyfork.org/zh-CN/scripts/421371
 6 | 
 7 | ## 功能列表
 8 | 
 9 | - 去除全站所有页面的广告和二维码
10 | 
11 | - 漫画图片并排布局，智能切换单列和双列展示
12 | 
13 | - 图片高度自适应，显示高度和浏览器高度相同
14 | 
15 | - 上下方向键滚动页面，图片和浏览器边缘自动对齐
16 | 
17 | - 点击窗口上下部分滚动页面
18 | 
19 | - 左右方向键切换章节，回车键切换全屏，退格键回到目录
20 | 
21 | - 页面左侧添加目录栏，指针靠近浏览器边缘触发
22 | 
23 | - 页面右下角添加悬浮框，显示当前页码
24 | 
25 | - 指针放在悬浮框上会弹出菜单，可以更改跨页、调节日夜间模式、切换单双页排布
26 | 
27 | - 目录页面添加批量下载按钮
28 | 
29 | ## 兼容性
30 | 
31 | 浏览器：Chrome✅、Edge（Chromium）✅、Safari（iOS）✅
32 | 
33 | 扩展：Violentmonkey✅、Tampermonkey✅、Stay 2✅
34 | 
35 | ## Star History
36 | 
37 | <a href="https://star-history.com/#Byaidu/copymanga-helper&Date">
38 |  <picture>
39 |    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Byaidu/copymanga-helper&type=Date&theme=dark" />
40 |    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Byaidu/copymanga-helper&type=Date" />
41 |    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Byaidu/copymanga-helper&type=Date" />
42 |  </picture>
43 | </a>
44 | 


--------------------------------------------------------------------------------
/copymanga-helper.js:
--------------------------------------------------------------------------------
  1 | // ==UserScript==
  2 | // @name         ☄️拷贝漫画增强☄️
  3 | // @namespace    http://tampermonkey.net/
  4 | // @version      11.4
  5 | // @description  拷贝漫画去广告🚫、加速访问🚀、并排布局📖、图片高度自适应↕️、辅助翻页↔️、页码显示⏱、侧边目录栏📑、暗夜模式🌙、章节评论💬
  6 | // @author       Byaidu
  7 | // @match        *://*.copymanga.com/*
  8 | // @match        *://*.copymanga.org/*
  9 | // @match        *://*.copymanga.net/*
 10 | // @match        *://*.copymanga.info/*
 11 | // @match        *://*.copymanga.site/*
 12 | // @match        *://*.copymanga.tv/*
 13 | // @match        *://*.mangacopy.com/*
 14 | // @match        *://copymanga.com/*
 15 | // @match        *://copymanga.org/*
 16 | // @match        *://copymanga.net/*
 17 | // @match        *://copymanga.info/*
 18 | // @match        *://copymanga.site/*
 19 | // @match        *://copymanga.tv/*
 20 | // @match        *://mangacopy.com/*
 21 | // @license      GNU General Public License v3.0 or later
 22 | // @resource     element_css https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css
 23 | // @resource     animate_css https://unpkg.com/animate.css@4.1.1/animate.min.css
 24 | // @require      https://unpkg.com/vue@2.7.14/dist/vue.min.js
 25 | // @require      https://unpkg.com/element-ui@2.15.13/lib/index.js
 26 | // @require      https://unpkg.com/axios@1.3.6/dist/axios.min.js
 27 | // @require      https://unpkg.com/store.js@1.0.4/store.js
 28 | // @require      https://unpkg.com/jquery@3.6.4/dist/jquery.min.js
 29 | // @require      https://unpkg.com/jszip@3.1.5/dist/jszip.min.js
 30 | // @require      https://unpkg.com/file-saver@2.0.5/dist/FileSaver.min.js
 31 | // @require      https://unpkg.com/crypto-js@4.1.1/crypto-js.js
 32 | // @grant        GM_addStyle
 33 | // @grant        GM_getResourceText
 34 | // @grant        GM_xmlhttpRequest
 35 | // @run-at       document-start
 36 | // ==/UserScript==
 37 | 
 38 | var largeMode = 1;
 39 | var enableDownload = 0;
 40 | 
 41 | // retry
 42 | axios.interceptors.response.use(undefined, (err) => {
 43 |     return new Promise((resolve) => { setTimeout(() => { resolve() }, 1000) }).then(() => axios(err.config));
 44 | });
 45 | 
 46 | function route() {
 47 |     if (document.getElementsByClassName('ban').length) banPage();
 48 |     else if (/^\/comic\/.*\/.*$/.test(location.pathname)) comicPage(1);
 49 |     else if (/^\/comic\/[^\/]*$/.test(location.pathname)) tablePage(1);
 50 |     else if (/^\/$/.test(location.pathname)) homePage();
 51 |     else if (/^\/h5\/details\/comic\/[^\/]*$/.test(location.pathname)) tablePage(0);
 52 |     else if (/^\/h5\/comicContent\/.*$/.test(location.pathname)) comicPage(0);
 53 | }
 54 | 
 55 | route();
 56 | 
 57 | if (/^\/h5.*$/.test(location.pathname)) {
 58 |     let previousUrl = location.href;
 59 |     const observer = new MutationObserver(function (mutations) {
 60 |         if (location.href !== previousUrl) {
 61 |             previousUrl = location.href;
 62 |             route();
 63 |         }
 64 |     });
 65 |     const config = { subtree: true, childList: true };
 66 |     observer.observe(document, config);
 67 | }
 68 | 
 69 | async function loadCSS() {
 70 |     var element_css, animate_css;
 71 |     if (typeof (GM_getResourceText) == 'undefined') {
 72 |         await axios.get('https://unpkg.com/element-ui@2.15.0/lib/theme-chalk/index.css')
 73 |             .then(function (response) {
 74 |                 element_css = response.data;
 75 |             })
 76 |         await axios.get('https://unpkg.com/animate.css@4.1.1/animate.min.css')
 77 |             .then(function (response) {
 78 |                 animate_css = response.data;
 79 |             })
 80 |     } else {
 81 |         element_css = GM_getResourceText("element_css");
 82 |         animate_css = GM_getResourceText("animate_css");
 83 |     }
 84 |     GM_addStyle(element_css);
 85 |     GM_addStyle(animate_css);
 86 | }
 87 | 
 88 | function banPage() {
 89 |     window.stop();
 90 | 
 91 |     document.querySelectorAll('main')[0].innerHTML = `
 92 | <p class="ban"><img class="banIcon" src="https://hi.est152.com/static/websitefree/jpg/logo.png" alt=""></p>
 93 | <p class="textItem">来自 ☄️拷贝漫画增强☄️ 的消息：</p>
 94 | <p class="textItem">请安装 <a href="https://chrome.google.com/webstore/detail/user-agent-switcher-and-m/bhchdcejhohfmigjafbampogmaanbfkg">User-Agent Switcher and Manager</a> 插件并切换浏览器 UA</p>
 95 | `
 96 | }
 97 | 
 98 | function homePage() {
 99 |     GM_addStyle('.header-jum {display:none;}');
100 | }
101 | 
102 | function makeRequest(url,isPC) {
103 |     if (isPC) {
104 |         // axios
105 |         return axios.get(url)
106 |     } else {
107 |         // gm绕过ua
108 |         return new Promise((resolve, reject) => {
109 |           GM_xmlhttpRequest({
110 |             url: url,
111 |             headers:{'User-Agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0'},
112 |             responseType:'json',
113 |             onload: function(response) {
114 |               resolve({data:response.response});
115 |             },
116 |             onerror: function(error) {
117 |               reject(error);
118 |             }
119 |           });
120 |         });
121 |     }
122 | }
123 | 
124 | function apiChapters(comic,isPC) {
125 |     return makeRequest('https://www.mangacopy.com/comicdetail/' + comic + '/chapters',isPC)
126 |         .then((response) => {
127 |             let iv = response.data.results.substring(0, 16),
128 |                 cipher = response.data.results.substring(16),
129 |                 result = JSON.parse(CryptoJS.AES.decrypt(
130 |                     CryptoJS.enc.Base64.stringify(
131 |                         CryptoJS.enc.Hex.parse(cipher)
132 |                     ),
133 |                     CryptoJS.enc.Utf8.parse('xxxmanga.woo.key'),
134 |                     {
135 |                         'iv': CryptoJS.enc.Utf8.parse(iv),
136 |                         'mode': CryptoJS.mode.CBC,
137 |                         'padding': CryptoJS.pad.Pkcs7
138 |                     }
139 |                 ).toString(CryptoJS.enc.Utf8));
140 |             let type_map = new Map();
141 |             result.build.type.forEach((v, index) => {
142 |                 type_map.set(v.id, v.name);
143 |             });
144 |             result.groups.default.chapters.forEach((v, index) => {
145 |                 v.index = index;
146 |                 let type_name = type_map.get(v.type);
147 |                 v.name = "【" + type_name + "】" + v.name;
148 |                 v.type_name = type_name;
149 |             });
150 |             return result;
151 |         })
152 | }
153 | 
154 | function tablePage(isPC) {
155 |     loadCSS();
156 |     var collect, save,
157 |         comic,
158 |         content_comic = [],
159 |         app;
160 |     if (isPC)
161 |         comic = window.location.pathname.split('/')[2];
162 |     else
163 |         comic = window.location.pathname.split('/')[4];
164 |     $(() => {
165 |         if (enableDownload) {
166 |           GM_addStyle('.comicParticulars-botton:nth-of-type(4) {background: lightskyblue;}');
167 |           if (isPC)
168 |               collect = document.getElementsByClassName('collect')[0];
169 |           else
170 |               collect = document.getElementsByTagName('button')[2];
171 |           save = collect.cloneNode();
172 |           save.innerHTML = '批量下载';
173 |           save.onclick = saveComic;
174 |           collect.after(save);
175 |           var app_html = document.createElement("div");
176 |           app_html.innerHTML = `
177 |   <div id="app_save">
178 |     下载范围：
179 |     <el-select v-model="begin" placeholder="起始话" size="mini" style="width:150px;">
180 |       <el-option
181 |         v-for="item in content_comic"
182 |         :key="item.index"
183 |         :label="item.name"
184 |         :value="item.index">
185 |       </el-option>
186 |     </el-select>
187 |     至
188 |     <el-select v-model="end" placeholder="终止话" size="mini" style="width:150px;margin-right:20px;">
189 |       <el-option
190 |         v-for="item in content_comic"
191 |         :key="item.index"
192 |         :label="item.name"
193 |         :value="item.index">
194 |       </el-option>
195 |     </el-select>
196 |   </div>
197 |   `
198 |           collect.after(app_html);
199 |           if (isPC)
200 |               document.getElementById('app_save').setAttribute('style', 'margin-top:18px;');
201 |           else
202 |               document.getElementsByClassName('detailsTextContentItem')[0].setAttribute('style', 'flex-wrap:wrap;');
203 |           app = new Vue({
204 |               el: '#app_save',
205 |               data: {
206 |                   content_comic: [],
207 |                   begin: '',
208 |                   end: '',
209 |               },
210 |           })
211 |           GM_addStyle('.el-input__suffix {display:none !important;}');
212 |           apiChapters(comic,isPC)
213 |               .then(function (response) {
214 |                   content_comic = response.groups.default.chapters;
215 |                   app.content_comic = content_comic;
216 |                   app.begin = content_comic.at(0).index;
217 |                   app.end = content_comic.at(-1).index;
218 |               }).catch(function (error) {
219 |                   save.innerHTML = '下载失败';
220 |               })
221 |         }
222 |         cookieStore.get('token')
223 |             .then(function (token) {
224 |                 if (token) {
225 |                     axios.get('https://api.mangacopy.com/api/v3/comic2/query/' + comic, {
226 |                         headers: {
227 |                             'authorization': 'Token ' + token.value
228 |                         }
229 |                     }).then(function (response) {
230 |                         if (response.data.results.browse != null) {
231 |                             var read = document.getElementsByClassName('comicParticulars-botton')[0];
232 |                             read.innerHTML = response.data.results.browse.chapter_name;
233 |                             read.href = 'https://mangacopy.com/comic/' + comic + '/chapter/' + response.data.results.browse.chapter_uuid;
234 |                             GM_addStyle('.comicParticulars-botton {max-width:80px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}');
235 |                         }
236 |                     });
237 |                 }
238 |             })
239 |     })
240 |     let sleep = function (time) {
241 |         return new Promise((resolve) => {
242 |             setTimeout(resolve, time)
243 |         })
244 |     }
245 |     async function saveComic() {
246 |         let zip = new JSZip();
247 |         let task_cnt = 0;
248 |         let date_created_chapter_map = new Map();
249 |         let comic_name = null;
250 |         for (let idx = app.begin; idx <= app.end; idx++) {
251 |             let c = content_comic[idx];
252 |             task_cnt++;
253 |             save.innerHTML = task_cnt + '/' + (app.end - app.begin + 1);
254 |             await axios.get('https://api.mangacopy.com/api/v3/comic/' + comic + '/chapter/' + c.id)
255 |                 .then(async function (response) {
256 |                     let task_chapter = [];
257 |                     var chpt_index = Number(response.data.results.chapter.index) + 1
258 |                     let dir_chpt_name = response.data.results.chapter.name
259 |                     if (c.type_name !== undefined) {
260 |                         dir_chpt_name = "【" + chpt_index + "】【" + c.type_name + "】" + dir_chpt_name;
261 |                     }
262 |                     let dir_comic = zip.folder(response.data.results.comic.name)
263 |                     let content = response.data.results.chapter.contents,
264 |                         size = content.length,
265 |                         dict = {};
266 |                     comic_name = response.data.results.comic.name;
267 |                     let date_created_chapter = new Date(response.data.results.chapter.datetime_created);
268 |                     if (idx != app.begin && date_created_chapter.getTime() <= date_created_chapter_map.get(idx - 1).getTime()) {
269 |                         date_created_chapter = new Date(date_created_chapter_map.get(idx - 1).getTime() + 2000);
270 |                     }
271 |                     date_created_chapter_map.set(idx, date_created_chapter);
272 |                     dir_comic.file(dir_chpt_name, null, {
273 |                         dir: true,
274 |                         date: date_created_chapter,
275 |                     });
276 |                     let dir_chpt = dir_comic.folder(dir_chpt_name);
277 |                     for (let i = 0; i < size; i++) {
278 |                         (() => {
279 |                             let self = i;
280 |                             let img_url = content[i].url;
281 |                             if (largeMode) img_url = img_url.replace('c800x.jpg', 'c1500x.jpg');
282 |                             task_chapter.push(axios.get(img_url, { responseType: 'arraybuffer' })
283 |                                 .then(function (response) {
284 |                                     let date_created_file = new Date(date_created_chapter.getTime() + 2000 * self);
285 |                                     dir_chpt.file((self + 1) + '.jpg', response.data, { date: date_created_file });
286 |                                 }).catch(function (error) {
287 |                                     save.innerHTML = '下载失败';
288 |                                 }))
289 |                         })()
290 |                     }
291 |                     await axios.all(task_chapter);
292 |                 }).catch(function (error) {
293 |                     save.innerHTML = '下载失败';
294 |                 })
295 |             await sleep(1000);
296 |         }
297 |         zip.generateAsync({ type: "blob" }, function (metadata) {
298 |             save.innerHTML = metadata.percent.toFixed(0) + '%';
299 |         }).then(function (blob) {
300 |             saveAs(blob, comic_name + ".zip");
301 |             save.innerHTML = '下载完成';
302 |         })
303 |     }
304 | }
305 | 
306 | async function comicPage(isPC) {
307 |     // 停止加载原生网页
308 |     window.stop();
309 | 
310 |     // 解析 URL
311 |     if (isPC) {
312 |         comic = window.location.pathname.split('/')[2];
313 |         chapter = window.location.pathname.split('/')[4];
314 |     } else {
315 |         comic = window.location.pathname.split('/')[3];
316 |         chapter = window.location.pathname.split('/')[4];
317 |     }
318 | 
319 |     // 加载 HTML
320 |     document.querySelectorAll('html')[0].innerHTML = `
321 | <head></head>
322 | <body>
323 |   <div id="app">
324 |     <div @mouseleave="drawer=false">
325 |       <div @mouseover="drawer=true" style="top:0px;left:0px;height:100vh;width:10vw;position: fixed;"></div>
326 |       <el-drawer
327 |         id="sidebar"
328 |         :size="size"
329 |         :modal="modal"
330 |         :visible="drawer"
331 |         :with-header="false"
332 |         :direction="direction"
333 |         @open="handleOpen">
334 |         <el-menu
335 |           background-color="transparent"
336 |           text-color="#fff"
337 |           active-text-color="#ffd04b"
338 |           @select="handleSelect">
339 |           <template v-for="(item, index) in sidebar_data">
340 |             <el-menu-item v-bind:index="index">{{item.title}}</el-menu-item>
341 |           </template>
342 |         </el-menu>
343 |       </el-drawer>
344 |     </div>
345 |     <div id="matrix">
346 |       <template v-for="(item, index) in comic_data">
347 |         <img class="inner_img" v-bind:src="item.url">
348 |       </template>
349 |     </div>
350 |     <ul style="margin-top:20px;">
351 |       <template v-for="(item, index) in comment_data">
352 |         <li style="display:inline-block;">
353 |           <p class="comment" v-bind:index="index">{{item.user_name}} : {{item.comment}}</p>
354 |         </li>
355 |       </template>
356 |     <ul>
357 |     <el-input v-model="comment_input" placeholder="吐槽" style="width:300px;margin:20px;" @keyup.enter.native="send_comment" @focus="is_input=1" @blur="is_input=0">
358 |       <el-button slot="append" type="primary" @click="send_comment">发表</el-button>
359 |     </el-input>
360 |     <ul style="margin-bottom:20px;">
361 |       <el-button type="primary" @click="prev_chapter">上一章</el-button>
362 |       <el-button type="primary" @click="next_chapter">下一章</el-button>
363 |     </ul>
364 |     <div id="info" @mouseover="show=1" @mouseleave="show=0">
365 |       <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
366 |       <template v-if="show"><div id="info_scroll" class="info_item" @click="switch_scroll" style="cursor:pointer;">{{message_scroll}}</div></template></transition>
367 |       <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
368 |       <template v-if="show"><div id="info_page" class="info_item" @click="switch_page" style="cursor:pointer;">{{message_page}}</div></template></transition>
369 |       <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
370 |       <template v-if="show"><div id="info_skip" class="info_item" @click="switch_skip" style="cursor:pointer;">{{message_skip}}</div></template></transition>
371 |       <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
372 |       <template v-if="show"><div id="info_switch" class="info_item" @click="switch_night" style="cursor:pointer;">{{message_switch}}</div></template></transition>
373 |       <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
374 |       <template v-if="show"><div id="info_full" class="info_item" @click="switch_full" style="cursor:pointer;">{{message_full}}</div></template></transition>
375 |       <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
376 |       <template v-if="show"><div id="info_home" class="info_item" @click="switch_home" style="cursor:pointer;">{{message_home}}</div></template></transition>
377 |       <template><div id="info_count" class="info_item">{{message_count}}</div></template>
378 |     </div>
379 |   </div>
380 |   <style>
381 |     body {
382 |       text-align: center;
383 |       font-size: 12px;
384 |       line-height: normal;
385 |       background: #edecea;
386 |       margin: unset !important;
387 |     }
388 |     body.dark {
389 |       background: #212121;
390 |     }
391 |     ::-webkit-scrollbar {
392 |       width: 4px;height: 0px;
393 |     }
394 |     ::-webkit-scrollbar-thumb {
395 |       background-color: rgb(48,48,48);
396 |       border-radius: 2px;
397 |     }
398 |     #matrix {
399 |       display: grid;
400 |       justify-items: center;
401 |       justify-content: center;
402 |       overflow-x: hidden;
403 |       user-select: none;
404 |       margin: 0 auto;
405 |       max-width: 190vh;
406 |     }
407 |     .page #matrix {
408 |       display: flex;
409 |       flex-direction: row-reverse;
410 |       flex-wrap: wrap;
411 |     }
412 |     .scroll #matrix {
413 |       display: flex;
414 |       flex-direction: row-reverse;
415 |       flex-wrap: wrap;
416 |       justify-content: unset;
417 |       flex-wrap: unset;
418 |       overflow-x: scroll;
419 |     }
420 |     .scroll .inner_img {
421 |       height: 100vh;
422 |       object-fit: contain;
423 |     }
424 |     .page .inner_img {
425 |       height: 100vh;
426 |       object-fit: contain;
427 |     }
428 |     .inner_img {
429 |       max-width: 100%;
430 |     }
431 |     .el-menu {
432 |       border-right: 0px;
433 |     }
434 |     .el-drawer__wrapper {
435 |       width: 20%;
436 |     }
437 |     .el-drawer {
438 |       background: transparent;
439 |     }
440 |     .el-drawer__body {
441 |       background: rgba(0,0,0,.8);
442 |       overflow-y: auto
443 |     }
444 |     #info {
445 |         bottom: 2%;
446 |         right: 2%;
447 |         padding: 5px 5px;
448 |         background: rgba(48,48,48,.7);
449 |         position: fixed;
450 |         color: rgba(255,255,255,.7);
451 |         border-radius: 3px;
452 |     }
453 |     .info_item {
454 |         padding:5px 0px;
455 |         width:120px;
456 |     }
457 |     .skip .blank {
458 |       display:none;
459 |     }
460 |     .dark .comment {
461 |         color: rgba(255,255,255,.7);
462 |     }
463 |     .dark .el-input__inner {
464 |         background-color:rgba(255,255,255,.05);
465 |         color: rgba(255,255,255,.7);
466 |     }
467 |     .dark .el-input-group__append {
468 |         background-color:rgba(255,255,255,.2);
469 |         color: rgba(255,255,255,.7);
470 |     }
471 |     .dark .el-button {
472 |         background-color:rgba(255,255,255,.2);
473 |         color: rgba(255,255,255,.7);
474 |         border: 1px solid #DCDFE6;
475 |     }
476 |     .comment {
477 |       padding: 10px 13px;
478 |       margin:5px 5px;
479 |       font-size:14px;
480 |       background-color:rgb(127,127,127,.15);
481 |     }
482 |     ul {
483 |       margin: 5px;
484 |       padding: unset;
485 |     }
486 |   </style>
487 | </body>
488 | `;
489 | 
490 |     loadCSS();
491 | 
492 |     // 加载 LocalStorage
493 |     let dark = store.get('dark');
494 |     let skip = store.get('skip');
495 |     let page = store.get('page');
496 |     let scroll = store.get('scroll');
497 |     if (dark == undefined)
498 |         dark = true;
499 |     if (skip == undefined)
500 |         skip = true;
501 |     if (page == undefined)
502 |         page = true;
503 |     if (scroll == undefined)
504 |         scroll = false;
505 |     if (dark) {
506 |         document.body.classList.add('dark');
507 |     }
508 |     if (skip) {
509 |         document.body.classList.add('skip');
510 |     }
511 |     if (page) {
512 |         document.body.classList.add('page');
513 |     }
514 |     if (scroll) {
515 |         document.body.classList.add('scroll');
516 |     }
517 | 
518 |     // 加载 Vue
519 |     var app = new Vue({
520 |         el: '#app',
521 |         data: {
522 |             drawer: false,
523 |             size: '100%',
524 |             modal: false,
525 |             direction: 'ltr',
526 |             sidebar_data: [], // 章节数据源
527 |             comic_data: [],   // 图片数据源
528 |             comment_data: [], // 评论数据源
529 |             comment_input: '',
530 |             is_input: 0,
531 |             cur_lock: 0,
532 |             cur_id: 0,
533 |             cur_ch: 0,
534 |             dark: dark,
535 |             page: page,
536 |             skip: skip,
537 |             scroll: scroll,
538 |             show: 0,
539 |             full: 0,
540 |         },
541 |         computed: {
542 |             message_home: function () {
543 |                 return '⬅️返回目录';
544 |             },
545 |             message_full: function () {
546 |                 return this.full ? '↩️退出全屏' : '↕️进入全屏';
547 |             },
548 |             message_switch: function () {
549 |                 return this.dark ? '☀️日间模式' : '🌙夜间模式';
550 |             },
551 |             message_page: function () {
552 |                 return this.page ? '1️⃣单页排布' : '2️⃣双页排布';
553 |             },
554 |             message_skip: function () {
555 |                 return this.skip ? '📑添加空页' : '📄移除空页';
556 |             },
557 |             message_scroll: function () {
558 |                 return this.scroll ? '⏬纵向滚动' : '⏪横向滚动';
559 |             },
560 |             message_count: function () {
561 |                 return (this.skip ? (this.cur_id <= 1 ? this.cur_id : this.cur_id - 1) : this.cur_id) + '/' + (this.comic_data.length + 1 - this.skip);
562 |             }
563 |         },
564 |         methods: {
565 |             handleSelect(key) {
566 |                 location.href = this.sidebar_data[key].href;
567 |             },
568 |             handleOpen() {
569 |                 setTimeout(() => {
570 |                     let sidebar = document.getElementsByClassName('el-drawer__body')[0],
571 |                         ch_list = sidebar.children[0].children;
572 |                     sidebar.scrollTop = ch_list[Math.max(app.cur_ch - 2, 0)].offsetTop;
573 |                 }, 0);
574 |             },
575 |             switch_home: function () {
576 |                 location.href = 'https://mangacopy.com/comic/' + comic;
577 |             },
578 |             switch_full: function () {
579 |                 this.full = !this.full;
580 |                 if (this.full) {
581 |                     document.documentElement.requestFullscreen();
582 |                 } else {
583 |                     document.exitFullscreen();
584 |                 }
585 |             },
586 |             switch_night: function () {
587 |                 this.dark = !this.dark;
588 |                 store.set('dark', this.dark);
589 |                 document.body.classList.toggle('dark');
590 |             },
591 |             switch_skip: function () {
592 |                 this.skip = !this.skip;
593 |                 store.set('skip', this.skip);
594 |                 document.body.classList.toggle('skip');
595 |             },
596 |             switch_page: function () {
597 |                 this.page = !this.page;
598 |                 store.set('page', this.page);
599 |                 document.body.classList.toggle('page');
600 |             },
601 |             switch_scroll: function () {
602 |                 this.scroll = !this.scroll;
603 |                 store.set('scroll', this.scroll);
604 |                 document.body.classList.toggle('scroll');
605 |             },
606 |             send_comment: async function () {
607 |                 let token = await cookieStore.get('token');
608 |                 await axios.post('https://api.mangacopy.com/api/v3/member/roast', 'chapter_id=' + chapter + '&roast=' + this.comment_input + '&_update=true', {
609 |                     headers: {
610 |                         'authorization': 'Token ' + token.value
611 |                     }
612 |                 }).then(function (response) {
613 |                     app.comment_input = response.data.message;
614 |                 });
615 |                 await this.load_comment();
616 |             },
617 |             load_comment: async function () {
618 |                 await axios.get('https://api.mangacopy.com/api/v3/roasts?chapter_id=' + chapter + '&limit=100&offset=0&_update=true')
619 |                     .then(function (response) {
620 |                         app.comment_data = response.data.results.list;
621 |                     })
622 |             },
623 |             prev_chapter: function () {
624 |                 location.href = app.sidebar_data[app.cur_ch - 1].href;
625 |             },
626 |             next_chapter: function () {
627 |                 location.href = app.sidebar_data[app.cur_ch + 1].href;
628 |             },
629 |         }
630 |     });
631 | 
632 |     // 加载图片
633 |     makeRequest('https://api.mangacopy.com/api/v3/comic/' + comic + '/chapter/' + chapter,isPC)
634 |         .then(function (response) {
635 |             document.title = response.data.results.comic.name + ' - ' + response.data.results.chapter.name;
636 |             var content = response.data.results.chapter.contents,
637 |                 matrix = document.getElementById('matrix'),
638 |                 size = content.length,
639 |                 dict = {};
640 |             for (var i = 0; i < size; i++) {
641 |                 var img_url = content[i].url;
642 |                 if (largeMode) img_url = img_url.replace('c800x.jpg', 'c1500x.jpg');
643 |                 app.comic_data.push({
644 |                     url: img_url
645 |                 })
646 |             }
647 |             // TODO
648 |             setTimeout(() => {
649 |                 let $blank = $('.inner_img:eq(0)').clone();
650 |                 $blank.addClass('blank');
651 |                 $blank.css('filter', 'brightness(0) invert(1)');
652 |                 $('#matrix').prepend($blank);
653 |             }, 0);
654 |         })
655 | 
656 |     // 加载章节
657 |     apiChapters(comic,isPC)
658 |         .then(function (response) {
659 |             // var content = response.groups.default.chapters;
660 |             var content = Object.values(response.groups).flatMap(obj => obj.chapters);
661 |             content.forEach((i,index) => {
662 |                 if (location.href.indexOf(i.id) >= 0) {
663 |                     app.cur_ch = index;
664 |                     GM_addStyle('.el-menu>li:nth-child(' + (index + 1) + '){background:rgba(255,165,0,.5) !important}');
665 |                 }
666 |                 app.sidebar_data.push({
667 |                     title: i.name,
668 |                     href: 'https://mangacopy.com/comic/' + comic + '/chapter/' + i.id
669 |                 })
670 |             })
671 |         })
672 | 
673 |     // 加载评论
674 |     app.load_comment();
675 | 
676 |     //上下方向键滚动页面，左右方向键切换章节
677 |     function scrollUp() {
678 |         let img_list = document.querySelectorAll('.inner_img'),
679 |             first_img = img_list[app.skip ? 1 : 0],
680 |             last_img = img_list[img_list.length - 1];
681 |         if (app.cur_id == 0) return;
682 |         var id = img_list.length + 1;
683 |         for (var i = (app.skip ? 1 : 0) + 1; i <= Math.min(app.cur_id, img_list.length); i++) {
684 |             if (((app.cur_lock && app.cur_id >= 1 && app.cur_id <= img_list.length) ? img_list[app.cur_id - 1].offsetTop : pageYOffset) < img_list[i - 1].offsetTop + img_list[i - 1].offsetHeight + 5) {
685 |                 id = i;
686 |                 break;
687 |             }
688 |         }
689 |         if (((app.cur_lock && app.cur_id >= 1 && app.cur_id <= img_list.length) ? img_list[app.cur_id - 1].offsetTop : pageYOffset) < first_img.offsetTop + 5) {
690 |             id = 0;
691 |         }
692 |         app.cur_lock++;
693 |         app.cur_id = id;
694 |         setTimeout(function () { app.cur_lock--; }, 500);
695 |         // TODO
696 |         $("html").stop();
697 |         if (id == 0) {
698 |             $("html").animate({ scrollTop: 0 }, 500);
699 |         } else {
700 |             $("html").animate({ scrollTop: img_list[id - 1].offsetTop }, 500);
701 |         }
702 |     }
703 |     function scrollDown() {
704 |         let img_list = document.querySelectorAll('.inner_img'),
705 |             first_img = img_list[app.skip ? 1 : 0],
706 |             last_img = img_list[img_list.length - 1];
707 |         if (app.cur_id == img_list.length + 1) return;
708 |         var id = img_list.length + 1;
709 |         for (var i = Math.max(app.cur_id, (app.skip ? 1 : 0) + 1); i <= img_list.length; i++) {
710 |             if (((app.cur_lock && app.cur_id >= 1 && app.cur_id <= img_list.length) ? img_list[app.cur_id - 1].offsetTop : pageYOffset) < img_list[i - 1].offsetTop - 5) {
711 |                 id = i;
712 |                 break;
713 |             }
714 |         }
715 |         app.cur_lock++;
716 |         app.cur_id = id;
717 |         setTimeout(function () { app.cur_lock--; }, 500);
718 |         // TODO
719 |         $("html").stop();
720 |         if (id == img_list.length + 1) {
721 |             $("html").animate({ scrollTop: last_img.offsetTop + last_img.offsetHeight }, 500);
722 |         } else {
723 |             $("html").animate({ scrollTop: img_list[id - 1].offsetTop }, 500);
724 |         }
725 |     }
726 |     document.getElementById('matrix').onclick = function (event) {
727 |         if (event.clientY > $(window).height() / 2) {
728 |             if (app.page) scrollDown();
729 |         } else {
730 |             if (app.page) scrollUp();
731 |         }
732 |     }
733 |     document.body.onkeydown = function (event) {
734 |         if (!app.is_input) {
735 |             if (event.keyCode == 38) {
736 |                 if (app.page) scrollUp();
737 |             } else if (event.keyCode == 40) {
738 |                 if (app.page) scrollDown();
739 |             }
740 |             if (!app.scroll) {
741 |                 if (event.keyCode == 37) {
742 |                     app.prev_chapter();
743 |                 } else if (event.keyCode == 39) {
744 |                     app.next_chapter();
745 |                 }
746 |             }
747 |             if (event.keyCode == 13) {
748 |                 app.switch_full();
749 |             } else if (event.keyCode == 8) {
750 |                 location.href = 'https://mangacopy.com/comic/' + comic;
751 |             }
752 |         }
753 |     }
754 | 
755 |     // 加载当前页码
756 |     function getID() {
757 |         let cur_id = 0,
758 |             img_list = document.querySelectorAll('.inner_img'),
759 |             first_img = img_list[app.skip ? 1 : 0],
760 |             last_img = img_list[img_list.length - 1];
761 |         if (img_list.length > 0) {
762 |             img_list.forEach((i, index) => {
763 |                 if (pageYOffset > i.offsetTop - 5 && pageYOffset < i.offsetTop + i.offsetHeight - 5 && cur_id == 0) {
764 |                     cur_id = index + 1;
765 |                 }
766 |             });
767 |             if (pageYOffset > last_img.offsetTop + last_img.offsetHeight - 5)
768 |                 cur_id = img_list.length + 1;
769 |             if (app.cur_lock == 0) app.cur_id = cur_id;
770 |         }
771 |     }
772 |     setInterval(getID, 100);
773 |     window.addEventListener('mousewheel', getID);
774 |     window.addEventListener('error', event => {
775 |         let target = event.target || event.srcElement;
776 |         let isElementTarget = target instanceof HTMLImageElement;
777 |         if (!isElementTarget) return false;
778 |         let url = target.src;
779 |         setTimeout(() => {
780 |             target.src = url;
781 |         }, Math.floor(Math.random() * 2000) + 1);
782 |     }, true);
783 | }
784 | 


--------------------------------------------------------------------------------