☰

Kemono zip download

Download kemono post in a zip file

  1. // ==UserScript==
  2. // @name               Kemono zip download
  3. // @name:zh-CN         Kemono 下载为ZIP文件
  4. // @namespace          https://greasyfork.org/users/667968-pyudng
  5. // @version            0.11
  6. // @description        Download kemono post in a zip file
  7. // @description:zh-CN  下载Kemono的内容为ZIP压缩文档
  8. // @author             PY-DNG
  9. // @license            MIT
  10. // @match              http*://*.kemono.su/*
  11. // @match              http*://*.kemono.party/*
  12. // @require            data:application/javascript,window.setImmediate%20%3D%20window.setImmediate%20%7C%7C%20((f%2C%20...args)%20%3D%3E%20window.setTimeout(()%20%3D%3E%20f(args)%2C%200))%3B
  13. // @require            https://update.greasyfork.org/scripts/456034/1558509/Basic%20Functions%20%28For%20userscripts%29.js
  14. // @require            https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js
  15. // @require            https://update.greasyfork.org/scripts/458132/1138364/ItemSelector.js
  16. // @resource           vue-js      https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js
  17. // @resource           quasar-icon https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons
  18. // @resource           quasar-css  https://cdn.jsdelivr.net/npm/quasar@2.15.1/dist/quasar.prod.css
  19. // @resource           quasar-js   https://cdn.jsdelivr.net/npm/quasar@2.15.1/dist/quasar.umd.prod.js
  20. // @connect            kemono.su
  21. // @connect            kemono.party
  22. // @icon               https://kemono.su/favicon.ico
  23. // @grant              GM_xmlhttpRequest
  24. // @grant              GM_registerMenuCommand
  25. // @grant              GM_addElement
  26. // @grant              GM_getResourceText
  27. // @grant              GM_setValue
  28. // @grant              GM_getValue
  29. // @grant              GM_addValueChangeListener
  30. // @run-at             document-start
  31. // ==/UserScript==
  32.  
  33. /* eslint-disable no-multi-spaces */
  34. /* eslint-disable no-return-assign */
  35.  
  36. /* global LogLevel DoLog Err Assert $ $All $CrE $AEL $$CrE addStyle detectDom destroyEvent copyProp copyProps parseArgs escJsStr replaceText getUrlArgv dl_browser dl_GM AsyncManager queueTask FunctionLoader loadFuncs require isLoaded */
  37. /* global setImmediate JSZip ItemSelector Vue Quasar */
  38.  
  39. (function __MAIN__() {
  40.     'use strict';
  41.  
  42. 	const CONST = {
  43. 		TextAllLang: {
  44. 			DEFAULT: 'en-US',
  45. 			'zh-CN': {
  46.                 DownloadZip: '下载为ZIP文件',
  47.                 DownloadPost: '下载当前作品为ZIP文件',
  48.                 DownloadCreator: '下载当前创作者为ZIP文件',
  49.                 DownloadCustom: '自定义下载',
  50.                 Downloading: '正在下载...',
  51.                 FetchingCreatorPosts: '正在获取创作者作品列表...',
  52.                 SelectAll: '全选',
  53.                 TotalProgress: '总进度',
  54.                 ProgressBoardTitle: '下载进度',
  55.                 Settings: '设置',
  56.                 SaveContent: '保存文字内容到html文件',
  57.                 SaveApijson: '保存api结果到json文件',
  58.                 NoPrefix: '保存文件时不添加文件名前缀',
  59.                 FlattenFiles: '保存主文件和附件到同一级文件夹',
  60.                 FlattenFilesCaption: '主文件一般是封面图',
  61.                 CustomDownload: {
  62.                     PopupTitle: '自定义下载',
  63.                     TypeLabel: '下载...',
  64.                     ServiceLabel: '发布平台',
  65.                     CreatorLabel: '创作者ID',
  66.                     PostLabel: '内容ID',
  67.                     Type: {
  68.                         Post: '单篇内容',
  69.                         Creator: '创作者的多篇内容'
  70.                     },
  71.                     Cancel: '取消',
  72.                     Download: '开始下载',
  73.                 },
  74.             },
  75.             'en-US': {
  76.                 DownloadZip: 'Download as ZIP file',
  77.                 DownloadPost: 'Download post as ZIP file',
  78.                 DownloadCreator: 'Download creator as ZIP file',
  79.                 DownloadCustom: 'Custom download',
  80.                 Downloading: 'Downloading...',
  81.                 FetchingCreatorPosts: 'Fetching creator posts list...',
  82.                 SelectAll: 'Select All',
  83.                 TotalProgress: 'Total Progress',
  84.                 ProgressBoardTitle: 'Download Progress',
  85.                 Settings: 'Settings',
  86.                 SaveContent: 'Save text content',
  87.                 SaveApijson: 'Save api result',
  88.                 NoPrefix: 'Do not add filename prefix',
  89.                 FlattenFiles: 'Save main file and attachments to same folder',
  90.                 FlattenFilesCaption: '"Main file" is usually the cover image',
  91.                 CustomDownload: {
  92.                     PopupTitle: 'Custom download',
  93.                     TypeLabel: 'Download ...',
  94.                     ServiceLabel: 'Service Name',
  95.                     CreatorLabel: 'Creator ID',
  96.                     PostLabel: '内容',
  97.                     Type: {
  98.                         Post: 'single post',
  99.                         Creator: 'creator posts'
  100.                     },
  101.                     Cancel: 'Cancel',
  102.                     Download: 'Download',
  103.                 },
  104.             }
  105. 		}
  106. 	};
  107.  
  108. 	// Init language
  109. 	const i18n = Object.keys(CONST.TextAllLang).includes(navigator.language) ? navigator.language : CONST.TextAllLang.DEFAULT;
  110. 	CONST.Text = CONST.TextAllLang[i18n];
  111.  
  112.     loadFuncs([{
  113.         id: 'utils',
  114.         async func() {
  115.             const win = typeof unsafeWindow !== 'undefined' ? unsafeWindow : window;
  116.  
  117.             function fillNumber(number, length) {
  118.                 const str = number.toString();
  119.                 return '0'.repeat(length - str.length) + str;
  120.             }
  121.  
  122.             /**
  123.              * Async task progress manager \
  124.              * when awaiting async tasks, replace `await task` with `await manager.progress(task)` \
  125.              * suppoerts sub-tasks, just `manager.sub(sub_steps, sub_callback)`
  126.              */
  127.             class ProgressManager {
  128.                 /** @type {*} */
  129.                 info;
  130.                 /** @type {number} */
  131.                 steps;
  132.                 /** @type {progressCallback} */
  133.                 callback;
  134.                 /** @type {number} */
  135.                 finished;
  136.                 /** @type {ProgressManager[]} */
  137.                 #children;
  138.                 /** @type {ProgressManager} */
  139.                 #parent;
  140.  
  141.                 /**
  142.                  * This callback is called each time a promise resolves
  143.                  * @callback progressCallback
  144.                  * @param {number} resolved_count
  145.                  * @param {number} total_count
  146.                  * @param {ProgressManager} manager
  147.                  */
  148.  
  149.                 /**
  150.                  * @param {number} [steps=0] - total steps count of the task
  151.                  * @param {progressCallback} [callback] - callback each time progress updates
  152.                  * @param {*} [info] - attach any data about this manager if need
  153.                  */
  154.                 constructor(steps=0, callback=function() {}, info=undefined) {
  155.                     this.steps = steps;
  156.                     this.callback = callback;
  157.                     this.info = info;
  158.                     this.finished = 0;
  159.  
  160.                     this.#children = [];
  161.                     this.#callCallback();
  162.                 }
  163.  
  164.                 add() { this.steps++; }
  165.  
  166.                 /**
  167.                  * @template {Promise | null} task
  168.                  * @param {task} [promise] - task to await, null is acceptable if no task to await
  169.                  * @param {number} [finished] - set this.finished to this value, defaults to this.finished+1
  170.                  * @returns {Awaited<task>}
  171.                  */
  172.                 async progress(promise, finished) {
  173.                     const val = await Promise.resolve(promise);
  174.                     try {
  175.                         this.finished = typeof finished === 'number' ? finished : this.finished + 1;
  176.                         this.#callCallback();
  177.                         //this.finished === this.steps && this.#parent && this.#parent.progress();
  178.                     } finally {
  179.                         return val;
  180.                     }
  181.                 }
  182.  
  183.                 /**
  184.                  * Creates a new ProgressManager as a sub-progress of this
  185.                  * @param {number} [steps=0] - total steps count of the task
  186.                  * @param {progressCallback} [callback] - callback each time progress updates, defaulting to parent.callback
  187.                  * @param {*} [info] - attach any data about the sub-manager if need
  188.                  */
  189.                 sub(steps, callback, info) {
  190.                     const manager = new ProgressManager(steps ?? 0, callback ?? this.callback, info);
  191.                     manager.#parent = this;
  192.                     this.#children.push(manager);
  193.                     return manager;
  194.                 }
  195.  
  196.                 #callCallback() {
  197.                     this.callback(this.finished, this.steps, this);
  198.                 }
  199.  
  200.                 get children() {
  201.                     return [...this.#children];
  202.                 }
  203.  
  204.                 get parent() {
  205.                     return this.#parent;
  206.                 }
  207.  
  208.                 /**
  209.                  * Resolves after all promise resolved, and callback each time one of them resolves
  210.                  * @param {Array<Promise>} promises
  211.                  * @param {progressCallback} callback
  212.                  */
  213.                 static async all(promises, callback) {
  214.                     const manager = new ProgressManager(promises.length, callback);
  215.                     await Promise.all(promises.map(promise => manager.progress(promise, callback)));
  216.                 }
  217.             }
  218.  
  219.             const PerformanceManager = (function() {
  220.                 class RunRecord {
  221.                     static #id = 0;
  222.  
  223.                     /** @typedef {'initialized' | 'running' | 'finished'} run_status */
  224.                     /** @type {number} */
  225.                     id;
  226.                     /** @type {number} */
  227.                     start;
  228.                     /** @type {number} */
  229.                     end;
  230.                     /** @type {number} */
  231.                     duration;
  232.                     /** @type {run_status} */
  233.                     status;
  234.                     /**
  235.                      * Anything for programmers to mark and read, uses as a description for this run
  236.                      * @type {*}
  237.                      */
  238.                     info;
  239.  
  240.                     /**
  241.                      * @param {*} [info] - Anything for programmers to mark and read, uses as a description for this run
  242.                      */
  243.                     constructor(info) {
  244.                         this.id = RunRecord.#id++;
  245.                         this.status = 'initialized';
  246.                         this.info = info;
  247.                     }
  248.  
  249.                     run() {
  250.                         const time = performance.now();
  251.                         this.start = time;
  252.                         this.status = 'running';
  253.                         return this;
  254.                     }
  255.  
  256.                     stop() {
  257.                         const time = performance.now();
  258.                         this.end = time;
  259.                         this.duration = this.end - this.start;
  260.                         this.status = 'finished';
  261.                         return this;
  262.                     }
  263.                 }
  264.                 class Task {
  265.                     /** @typedef {number | string | symbol} task_id */
  266.                     /** @type {task_id} */
  267.                     id;
  268.                     /** @type {RunRecord[]} */
  269.                     runs;
  270.  
  271.                     /**
  272.                      * @param {task_id} id
  273.                      */
  274.                     constructor(id) {
  275.                         this.id = id;
  276.                         this.runs = [];
  277.                     }
  278.  
  279.                     run(info) {
  280.                         const record = new RunRecord(info);
  281.                         record.run();
  282.                         this.runs.push(record);
  283.                         return record;
  284.                     }
  285.  
  286.                     get time() {
  287.                         return this.runs.reduce((time, record) => {
  288.                             if (record.status === 'finished') {
  289.                                 time += record.duration;
  290.                             }
  291.                             return time;
  292.                         }, 0)
  293.                     }
  294.                 }
  295.                 class PerformanceManager {
  296.                     /** @type {Task[]} */
  297.                     tasks;
  298.  
  299.                     constructor() {
  300.                         this.tasks = [];
  301.                     }
  302.  
  303.                     /**
  304.                      * @param {task_id} id
  305.                      * @returns {Task | null}
  306.                      */
  307.                     getTask(id) {
  308.                         return this.tasks.find(task => task.id === id);
  309.                     }
  310.  
  311.                     /**
  312.                      * Creates a new task
  313.                      * @param {task_id} id
  314.                      * @returns {Task}
  315.                      */
  316.                     newTask(id) {
  317.                         Assert(!this.getTask(id), `given task id ${escJsStr(id)} is already in use`, TypeError);
  318.  
  319.                         const task = new Task(id);
  320.                         this.tasks.push(task);
  321.                         return task;
  322.                     }
  323.  
  324.                     /**
  325.                      * Runs a task
  326.                      * @param {task_id} id
  327.                      * @param {*} run_info - Anything for programmers to mark and read, uses as a description for this run
  328.                      * @returns {RunRecord}
  329.                      */
  330.                     run(task_id, run_info) {
  331.                         const task = this.getTask(task_id);
  332.                         Assert(task, `task of id ${escJsStr(task_id)} not found`, TypeError);
  333.  
  334.                         return task.run(run_info);
  335.                     }
  336.  
  337.                     totalTime(id) {
  338.                         if (id) {
  339.                             return this.getTask(id).time;
  340.                         } else {
  341.                             return this.tasks.reduce((timetable, task) => {
  342.                                 timetable[task.id] = task.time;
  343.                                 return timetable;
  344.                             }, {});
  345.                         }
  346.                     }
  347.  
  348.                     meanTime(id) {
  349.                         if (id) {
  350.                             const task = this.getTask(id);
  351.                             return task.time / task.runs.length;
  352.                         } else {
  353.                             return this.tasks.reduce((timetable, task) => {
  354.                                 timetable[task.id] = task.time / task.runs.length;
  355.                                 return timetable;
  356.                             }, {});
  357.                         }
  358.                     }
  359.                 }
  360.  
  361.                 return PerformanceManager;
  362.             }) ();
  363.  
  364.             return {
  365.                 window: win,
  366.                 fillNumber, ProgressManager, PerformanceManager
  367.             }
  368.         }
  369.     }, {
  370.         id: 'dependencies',
  371.         desc: 'load dependencies like vue into the page',
  372.         detectDom: ['head', 'body'],
  373.         async func() {
  374.             const deps = [{
  375.                 name: 'vue-js',
  376.                 type: 'script',
  377.             }, {
  378.                 name: 'quasar-icon',
  379.                 type: 'style'
  380.             }, {
  381.                 name: 'quasar-css',
  382.                 type: 'style'
  383.             }, {
  384.                 name: 'quasar-js',
  385.                 type: 'script'
  386.             }];
  387.  
  388.             await Promise.all(deps.map(dep => {
  389.                 return new Promise((resolve, reject) => {
  390.                     switch (dep.type) {
  391.                         case 'script': {
  392.                             // Once load, dispatch load event on messager
  393.                             const evt_name = `load:${dep.name};${Date.now()}`;
  394.                             const rand = Math.random().toString();
  395.                             const messager = new EventTarget();
  396.                             const load_code = [
  397.                                 '\n;',
  398.                                 `window[${escJsStr(rand)}].dispatchEvent(new Event(${escJsStr(evt_name)}));`,
  399.                                 `delete window[${escJsStr(rand)}];\n`
  400.                             ].join('\n');
  401.                             unsafeWindow[rand] = messager;
  402.                             $AEL(messager, evt_name, resolve);
  403.                             GM_addElement(document.head, 'script', {
  404.                                 textContent: GM_getResourceText(dep.name) + load_code,
  405.                             });
  406.                             break;
  407.                         }
  408.                         case 'style': {
  409.                             GM_addElement(document.head, 'style', {
  410.                                 textContent: GM_getResourceText(dep.name),
  411.                             });
  412.                             resolve();
  413.                             break;
  414.                         }
  415.                     }
  416.                 });
  417.             }));
  418.         }
  419.     }, {
  420.         id: 'api',
  421.         desc: 'api for kemono',
  422.         async func() {
  423.             let api_key = null;
  424.  
  425.             const Posts = {
  426.                 /**
  427.                  * Get a list of creator posts
  428.                  * @param {string} service - The service where the post is located
  429.                  * @param {number | string} creator_id - The ID of the creator
  430.                  * @param {string} [q] - Search query
  431.                  * @param {number} [o] - Result offset, stepping of 50 is enforced
  432.                  */
  433.                 posts(service, creator_id, q, o) {
  434.                     const search = {};
  435.                     q && (search.q = q);
  436.                     o && (search.o = o);
  437.                     return callApi({
  438.                         endpoint: `/${service}/user/${creator_id}`,
  439.                         search
  440.                     });
  441.                 },
  442.  
  443.                 /**
  444.                  * Get a specific post
  445.                  * @param {string} service
  446.                  * @param {number | string} creator_id
  447.                  * @param {number | string} post_id
  448.                  * @returns {Promise<Object>}
  449.                  */
  450.                 post(service, creator_id, post_id) {
  451.                     return callApi({
  452.                         endpoint: `/${service}/user/${creator_id}/post/${post_id}`
  453.                     });
  454.                 }
  455.             };
  456.             const Creators = {
  457.                 /**
  458.                  * Get a creator
  459.                  * @param {string} service - The service where the creator is located
  460.                  * @param {number | string} creator_id - The ID of the creator
  461.                  * @returns
  462.                  */
  463.                 profile(service, creator_id) {
  464.                     return callApi({
  465.                         endpoint: `/${service}/user/${creator_id}/profile`
  466.                     });
  467.                 }
  468.             };
  469.             const Custom = {
  470.                 /**
  471.                  * Get a list of creator's ALL posts, calling Post.posts for multiple times and joins the results
  472.                  * @param {string} service - The service where the post is located
  473.                  * @param {number | string} creator_id - The ID of the creator
  474.                  * @param {string} [q] - Search query
  475.                  */
  476.                 async all_posts(service, creator_id, q) {
  477.                     const posts = [];
  478.                     let offset = 0;
  479.                     let api_result = null;
  480.                     while (!api_result || api_result.length === 50) {
  481.                         api_result = await Posts.posts(service, creator_id, q, offset);
  482.                         posts.push(...api_result);
  483.                         offset += 50;
  484.                     }
  485.                     return posts;
  486.                 }
  487.             };
  488.             const API = {
  489.                 get key() { return api_key; },
  490.                 set key(val) { api_key = val; },
  491.                 Posts, Creators,
  492.                 Custom,
  493.                 callApi
  494.             };
  495.             return API;
  496.  
  497.             /**
  498.              * callApi detail object
  499.              * @typedef {Object} api_detail
  500.              * @property {string} endpoint - api endpoint
  501.              * @property {Object} [search] - search params
  502.              * @property {string} [method='GET']
  503.              * @property {boolean | string} [auth=false] - whether to use api-key in this request; true for send, false for not, and string for sending a specific key (instead of pre-configured `api_key`); defaults to false
  504.              */
  505.  
  506.             /**
  507.              * Do basic kemono api request
  508.              * This is the queued version of _callApi
  509.              * @param {api_detail} detail
  510.              * @returns
  511.              */
  512.             function callApi(...args) {
  513.                 return queueTask(() => _callApi(...args), 'callApi');
  514.             }
  515.  
  516.             /**
  517.              * Do basic kemono api request
  518.              * @param {api_detail} detail
  519.              * @returns
  520.              */
  521.             function _callApi(detail) {
  522.                 const search_string = new URLSearchParams(detail.search).toString();
  523.                 const url = `https://kemono.su/api/v1/${detail.endpoint.replace(/^\//, '')}` + (search_string ? '?' + search_string : '');
  524.                 const method = detail.method ?? 'GET';
  525.                 const auth = detail.auth ?? false;
  526.  
  527.                 return new Promise((resolve, reject) => {
  528.                     auth && api_key === null && reject('api key not found');
  529.  
  530.                     const options = {
  531.                         method, url,
  532.                         headers: {
  533.                             accept: 'application/json'
  534.                         },
  535.                         onload(e) {
  536.                             try {
  537.                                 e.status === 200 ? resolve(JSON.parse(e.responseText)) : reject(e.responseText);
  538.                             } catch(err) {
  539.                                 reject(err);
  540.                             }
  541.                         },
  542.                         onerror: err => reject(err)
  543.                     }
  544.                     if (typeof auth === 'string') {
  545.                         options.headers.Cookie = auth;
  546.                     } else if (auth === true) {
  547.                         options.headers.Cookie = api_key;
  548.                     }
  549.                     GM_xmlhttpRequest(options);
  550.                 });
  551.             }
  552.         }
  553.     }, {
  554.         id: 'gui',
  555.         desc: 'reusable GUI components',
  556.         dependencies: 'dependencies',
  557.         async func() {
  558.             class ProgressBoard {
  559.                 /** @type {Vue} */
  560.                 app;
  561.  
  562.                 /** Vue component instance */
  563.                 instance;
  564.  
  565.                 /** @typedef {{ finished: number, total: number }} progress */
  566.                 /** @typedef {{ name: string, progress: progress }} item */
  567.                 /** @type {item[]} */
  568.                 items;
  569.  
  570.                 constructor() {
  571.                     const that = this;
  572.                     this.items = [];
  573.                     
  574.                     // GUI
  575.                     const container = $$CrE({ tagName: 'div', styles: { position: 'fixed', zIndex: '-1' } });
  576.                     const board = $$CrE({
  577.                         tagName: 'div',
  578.                         classes: 'board'
  579.                     });
  580.                     board.innerHTML = `
  581.                         <q-layout view="hhh lpr fff">
  582.                             <q-dialog v-model="show" :class="{ mobile: $q.platform.is.mobile }" :position="$q.platform.is.mobile ? 'standard' : 'bottom'" seamless :full-width="$q.platform.is.mobile" :full-height="$q.platform.is.mobile">
  583.                                 <q-card class="container-card">
  584.                                     <q-card-section class="header row">
  585.                                         <div class="text-h6">${ CONST.Text.ProgressBoardTitle }</div>
  586.                                         <q-space></q-space>
  587.                                         <q-btn :icon="minimized ? 'expand_less' : 'expand_more'" flat round dense @click="minimized = !minimized"></q-btn>
  588.                                         <q-btn icon="close" flat round dense v-close-popup></q-btn>
  589.                                     </q-card-section>
  590.                                     <q-slide-transition>
  591.                                         <q-card-section class="body" v-show="!minimized">
  592.                                             <q-list class="list" :class="{ minimized: minimized }">
  593.                                                 <q-item tag="div" v-for="item of items">
  594.                                                     <q-item-section>
  595.                                                         <q-item-label>{{ item.name }}</q-item-label>
  596.                                                     </q-item-section>
  597.                                                     <q-item-section>
  598.                                                         <q-linear-progress animation-speed="500" :indeterminate="item.progress.total === 0" :value="item.progress.total > 0 ? item.progress.finished / item.progress.total : 0" :color="item.progress.total > 0 && item.progress.total === item.progress.finished ? 'green' : 'blue'"></q-linear-progress>
  599.                                                     </q-item-section>
  600.                                                 </q-item>
  601.                                             </q-list>
  602.                                         </q-card-section>
  603.                                     </q-slide-transition>
  604.                                 </q-card>
  605.                             </q-dialog>
  606.                         </q-layout>
  607.                     `;
  608.                     container.append(board);
  609.                     detectDom('html').then(html => html.append(container));
  610.  
  611.                     detectDom('head').then(head => addStyle(`
  612.                         :is(.container-card):not(.mobile *) {
  613.                             max-width: 45vw;
  614.                         }
  615.                         .container-card :is(.header, .body):not(.mobile *) {
  616.                             width: 40vw;
  617.                         }
  618.                         .container-card :is(.body .list):not(.mobile *) {
  619.                             height: 40vh;
  620.                             overflow-y: auto;
  621.                         }
  622.                         .container-card :is(.body .list.minimized):not(.mobile *) {
  623.                             overflow-y: hidden;
  624.                         }
  625.                     `, 'progress-board-style'));
  626.  
  627.                     this.app = Vue.createApp({
  628.                         data() {
  629.                             return {
  630.                                 items: that.items,
  631.                                 minimized: false,
  632.                                 show: false
  633.                             }
  634.                         },
  635.                         methods: {
  636.                             debug() {
  637.                                 debugger;
  638.                             }
  639.                         },
  640.                         mounted() {
  641.                             that.instance = this;
  642.                         }
  643.                     });
  644.                     this.app.use(Quasar);
  645.                     this.app.mount(board);
  646.                     Quasar.Dark.set(true);
  647.                 }
  648.  
  649.                 /**
  650.                  * update item's progress display on progress_board
  651.                  * @param {string} name - must be unique among all items
  652.                  * @param {progress} progress
  653.                  */
  654.                 update(name, progress) {
  655.                     let item = this.instance.items.find(item => item.name === name);
  656.                     if (!item) {
  657.                         item = { name, progress };
  658.                         this.instance.items.push(item);
  659.                     }
  660.                     item.progress = progress;
  661.                 }
  662.  
  663.                 /**
  664.                  * remove an item
  665.                  * @param {string} name
  666.                  */
  667.                 remove(name) {
  668.                     let item_index = this.instance.items.findIndex(item => item.name === name);
  669.                     if (item_index === -1) { return null; }
  670.                     return this.instance.items.splice(item_index, 1)[0];
  671.                 }
  672.  
  673.                 /**
  674.                  * remove all existing items
  675.                  */
  676.                 clear() {
  677.                    this.instance.items.splice(0, this.instance.items.length);
  678.                 }
  679.  
  680.                 get minimized() {
  681.                     return this.instance.minimized;
  682.                 }
  683.  
  684.                 set minimized(val) {
  685.                     this.instance.minimized = !!val;
  686.                 }
  687.  
  688.                 get closed() {
  689.                     return !this.instance.show;
  690.                 }
  691.  
  692.                 set closed(val) {
  693.                     this.instance.show = !val;
  694.                 }
  695.             }
  696.  
  697.             const board = new ProgressBoard();
  698.  
  699.             class CustomDownloadPanel {
  700.                 app;
  701.                 instance;
  702.                 #promise; // Promise to be created on show() call, and resolved on user submit
  703.                 #resolve; // resolve function for the promise above
  704.  
  705.                 constructor() {
  706.                     const that = this;
  707.                     
  708.                     // GUI
  709.                     const container = $$CrE({ tagName: 'div', styles: { position: 'fixed', zIndex: '-1' } });
  710.                     const panel = $$CrE({
  711.                         tagName: 'div',
  712.                         classes: 'panel'
  713.                     });
  714.                     panel.innerHTML = `
  715.                         <q-layout view="hhh lpr fff">
  716.                             <q-dialog v-model="show" :class="{ mobile: $q.platform.is.mobile }" :full-width="$q.platform.is.mobile" :full-height="$q.platform.is.mobile" @hide="cancel">
  717.                                 <q-card class="container-card-custom-dl">
  718.                                     <q-card-section class="header row">
  719.                                         <div class="text-h6">${ CONST.Text.CustomDownload.PopupTitle }</div>
  720.                                         <q-space></q-space>
  721.                                         <q-btn icon="close" flat round dense v-close-popup></q-btn>
  722.                                     </q-card-section>
  723.                                     <q-card-section class="body q-gutter-y-md">
  724.                                         <q-select filled v-model="download_type" :options="avail_dl_types" label="${ CONST.Text.CustomDownload.TypeLabel }"></q-select>
  725.                                         <q-select filled v-model="service" :options="avail_services" label="${ CONST.Text.CustomDownload.ServiceLabel }"></q-select>
  726.                                         <q-input filled type="number" v-model.number="creator_id" label="${ CONST.Text.CustomDownload.CreatorLabel }"></q-input>
  727.                                         <q-input filled type="number" v-model.number="post_id" label="${ CONST.Text.CustomDownload.PostLabel }" v-if="download_type.value === 'post'"></q-input>
  728.                                     </q-card-section>
  729.                                     <q-card-actions :align="$q.platform.is.mobile ? 'center' : 'right'">
  730.                                         <q-btn flat v-close-popup>${ CONST.Text.CustomDownload.Cancel }</q-btn>
  731.                                         <q-btn flat @click="submit" :loading="loading">${ CONST.Text.CustomDownload.Download }</q-btn>
  732.                                     </q-card-action>
  733.                                 </q-card>
  734.                             </q-dialog>
  735.                         </q-layout>
  736.                     `;
  737.                     container.append(panel);
  738.                     detectDom('html').then(html => html.append(container));
  739.                     detectDom('head').then(head => addStyle(`
  740.                         .container-card-custom-dl :is([type=text], input[type=password], input[type=number]) {
  741.                             box-shadow: unset;
  742.                             background: unset;
  743.                         }
  744.                         .container-card-custom-dl :is(.header, .body):not(.mobile *) {
  745.                             width: 30vw;
  746.                             min-width: 175px;
  747.                         }
  748.                     `))
  749.  
  750.                     this.app = Vue.createApp({
  751.                         data() {
  752.                             return {
  753.                                 panel: that,
  754.                                 show: false,
  755.                                 autoclose: true,
  756.                                 download_type: null,
  757.                                 service: '',
  758.                                 creator_id: 0,
  759.                                 post_id: 0,
  760.                                 loading: false,
  761.                                 avail_dl_types: [{
  762.                                     label: CONST.Text.CustomDownload.Type.Post,
  763.                                     value: 'post'
  764.                                 }, {
  765.                                     label: CONST.Text.CustomDownload.Type.Creator,
  766.                                     value: 'creator'
  767.                                 }],
  768.                                 avail_services: [{
  769.                                     "label": "Patreon",
  770.                                     "value": "patreon"
  771.                                 }, {
  772.                                     "label": "Pixiv Fanbox",
  773.                                     "value": "fanbox"
  774.                                 }, {
  775.                                     "label": "Discord",
  776.                                     "value": "discord"
  777.                                 }, {
  778.                                     "label": "Fantia",
  779.                                     "value": "fantia"
  780.                                 }, {
  781.                                     "label": "Afdian",
  782.                                     "value": "afdian"
  783.                                 }, {
  784.                                     "label": "Boosty",
  785.                                     "value": "boosty"
  786.                                 }, {
  787.                                     "label": "Gumroad",
  788.                                     "value": "gumroad"
  789.                                 }, {
  790.                                     "label": "SubscribeStar",
  791.                                     "value": "subscribestar"
  792.                                 }, {
  793.                                     "label": "DLsite",
  794.                                     "value": "dlsite"
  795.                                 }]
  796.                             }
  797.                         },
  798.                         methods: {
  799.                             submit() {
  800.                                 this.show = !this.autoclose;
  801.                                 this.resolve({
  802.                                     download_type: this.download_type.value,
  803.                                     service: this.service.value,
  804.                                     creator_id: this.creator_id,
  805.                                     post_id: this.post_id
  806.                                 });
  807.                             },
  808.                             cancel() {
  809.                                 // This will also be invoked after download button clicked
  810.                                 // Because the dialog popup will be closed after download button clicked
  811.                                 // Since only the first call to the resolve function takes effect to the promise
  812.                                 // This does not make anything wrong
  813.                                 this.resolve(null);
  814.                             }
  815.                         },
  816.                         mounted() {
  817.                             that.instance = this;
  818.                         }
  819.                     });
  820.                     this.app.use(Quasar);
  821.                     this.app.mount(panel);
  822.                     Quasar.Dark.set(true);
  823.                 }
  824.  
  825.                 get loading() {
  826.                     return this.instance.loading;
  827.                 }
  828.  
  829.                 set loading(val) {
  830.                     this.instance.loading = !!val;
  831.                 }
  832.  
  833.                 get showing() {
  834.                     return this.instance.show;
  835.                 }
  836.                 
  837.                 /** @typedef {'post' | 'creator'} download_type */
  838.                 /** @typedef {'patreon' | 'fanbox' | 'discord' | 'fantia' | 'afdian' | 'boosty' | 'gumroad' | 'subscribestar' | 'dlsite'} kemono_service */
  839.                 /**
  840.                  * Display and wait for user submit
  841.                  * @param {Object} defaultValue
  842.                  * @param {download_type} defaultValue.download_type
  843.                  * @param {kemono_service} defaultValue.service
  844.                  * @param {number | string} defaultValue.creator_id
  845.                  * @param {number | string} [defaultValue.post_id]
  846.                  * @returns {Promise<null | { download_type: download_type, service: kemono_service, creator_id: number, post_id?: number, autoclose: boolean }>}
  847.                  */
  848.                 show({ download_type = 'post', service = 'patreon', creator_id = null, post_id = null, autoclose = true } = {}) {
  849.                     if (this.showing) { return this.#promise; }
  850.                     ({ promise: this.#promise, resolve: this.#resolve } = Promise.withResolvers());
  851.                     this.instance.resolve = this.#resolve;
  852.                     this.instance.download_type = this.instance.avail_dl_types.find(obj => obj.value === download_type);
  853.                     this.instance.service = this.instance.avail_services.find(obj => obj.value === service);
  854.                     this.instance.creator_id = parseInt(creator_id, 10);
  855.                     this.instance.post_id = parseInt(post_id, 10);
  856.                     this.instance.autoclose = autoclose;
  857.                     this.instance.show = true;
  858.  
  859.                     return this.#promise;
  860.                 }
  861.  
  862.                 close() {
  863.                     this.instance.show = false;
  864.                 }
  865.             }
  866.  
  867.             const panel = new CustomDownloadPanel();
  868.  
  869.             return { ProgressBoard, board, CustomDownloadPanel, panel };
  870.         }
  871.     }, {
  872.         id: 'downloader',
  873.         desc: 'core zip download utils',
  874.         dependencies: ['utils', 'api', 'settings'],
  875.         async func() {
  876.             const utils = require('utils');
  877.             const API = require('api');
  878.             const settings = require('settings');
  879.  
  880.             // Performance record
  881.             const perfmon = new utils.PerformanceManager();
  882.             perfmon.newTask('fetchPost');
  883.             perfmon.newTask('saveAs');
  884.             perfmon.newTask('_fetchBlob');
  885.  
  886.  
  887.             class DownloaderItem {
  888.                 /** @typedef {'file' | 'folder'} downloader_item_type */
  889.                 /**
  890.                  * Name of the item, CANNOT BE PATH
  891.                  * @type {string}
  892.                  */
  893.                 name;
  894.                 /** @type {downloader_item_type} */
  895.                 type;
  896.  
  897.                 /**
  898.                  * @param {string} name
  899.                  * @param {downloader_item_type} type
  900.                  */
  901.                 constructor(name, type) {
  902.                     this.name = name;
  903.                     this.type = type;
  904.                 }
  905.             }
  906.  
  907.             class DownloaderFile extends DownloaderItem{
  908.                 /** @type {Blob} */
  909.                 data;
  910.                 /** @type {Date} */
  911.                 date;
  912.                 /** @type {string} */
  913.                 comment;
  914.  
  915.                 /**
  916.                  * @param {string} name - name only, CANNOT BE PATH
  917.                  * @param {Blob} data
  918.                  * @param {Object} detail
  919.                  * @property {Date} [date]
  920.                  * @property {string} [comment]
  921.                  */
  922.                 constructor(name, data, detail) {
  923.                     super(name, 'file');
  924.                     this.data = data;
  925.                     Object.assign(this, detail);
  926.                 }
  927.  
  928.                 zip(jszip_instance) {
  929.                     const z = jszip_instance ?? new JSZip();
  930.                     const options = {};
  931.                     this.date && (options.date = this.date);
  932.                     this.comment && (options.comment = this.comment);
  933.                     z.file(this.name, this.data, options);
  934.                     return z;
  935.                 }
  936.             }
  937.  
  938.             class DownloaderFolder extends DownloaderItem {
  939.                 /** @type {Array<DownloaderFile | DownloaderFolder>} */
  940.                 children;
  941.  
  942.                 /**
  943.                  * @param {string} name - name only, CANNOT BE PATH
  944.                  * @param {Array<DownloaderFile | DownloaderFolder>} [children]
  945.                  */
  946.                 constructor(name, children) {
  947.                     super(name, 'folder');
  948.                     this.children = children && children.length ? children : [];
  949.                 }
  950.  
  951.                 zip(jszip_instance) {
  952.                     const z = jszip_instance ?? new JSZip();
  953.                     for (const child of this.children) {
  954.                         switch (child.type) {
  955.                             case 'file': {
  956.                                 child.zip(z);
  957.                                 break;
  958.                             }
  959.                             case 'folder': {
  960.                                 const sub_z = z.folder(child.name);
  961.                                 child.zip(sub_z);
  962.                             }
  963.                         }
  964.                     }
  965.                     return z;
  966.                 }
  967.             }
  968.  
  969.             /**
  970.              * @typedef {Object} JSZip
  971.              */
  972.             /**
  973.              * @typedef {Object} zipObject
  974.              */
  975.  
  976.             /**
  977.              * Download one post in zip file
  978.              * @param {string} service
  979.              * @param {number | string} creator_id
  980.              * @param {number | string} post_id
  981.              * @param {function} [callback] - called each time made some progress, with two numeric arguments: finished_steps and total_steps
  982.              */
  983.             async function downloadPost(service, creator_id, post_id, callback = function() {}) {
  984.                 const manager = new utils.ProgressManager(3, callback, {
  985.                     layer: 'root', service, creator_id, post_id
  986.                 });
  987.                 const data = await manager.progress(API.Posts.post(service, creator_id, post_id));
  988.                 const folder = await manager.progress(fetchPost(data, manager));
  989.                 const zip = folder.zip();
  990.                 const filename = `${data.post.title}.zip`;
  991.                 manager.progress(await saveAs(filename, zip, manager));
  992.             }
  993.  
  994.             /**
  995.              * @typedef {Object} PostInfo
  996.              * @property {string} service,
  997.              * @property {number} creator_id
  998.              * @property {number} post_id
  999.              */
  1000.  
  1001.             /**
  1002.              * Download one or multiple posts in zip file, one folder for each post
  1003.              * @param {PostInfo | PostInfo[]} posts
  1004.              * @param {string} filename - file name of final zip file to be delivered to the user
  1005.              * @param {*} callback - Progress callback, like downloadPost's callback param
  1006.              */
  1007.             async function downloadPosts(posts, filename, callback = function() {}) {
  1008.                 Array.isArray(posts) || (posts = [posts]);
  1009.                 const manager = new utils.ProgressManager(posts.length + 1, callback, {
  1010.                     layer: 'root', posts, filename
  1011.                 });
  1012.  
  1013.                 // Fetch posts
  1014.                 const post_folders = await Promise.all(
  1015.                     posts.map(async post => {
  1016.                         const data = await API.Posts.post(post.service, post.creator_id, post.post_id);
  1017.                         const folder = await fetchPost(data, manager);
  1018.                         await manager.progress();
  1019.                         return folder;
  1020.                     })
  1021.                 );
  1022.  
  1023.                 // Merge all post's folders into one
  1024.                 const folder = new DownloaderFolder(filename);
  1025.                 post_folders.map(async post_folder => {
  1026.                     folder.children.push(post_folder);
  1027.                 })
  1028.  
  1029.                 // Convert folder to zip
  1030.                 const zip = folder.zip();
  1031.  
  1032.                 // Deliver to user
  1033.                 await manager.progress(saveAs(filename, zip, manager));
  1034.             }
  1035.  
  1036.             /**
  1037.              * Fetch one post
  1038.              * @param {Object} api_data - kemono post api returned data object
  1039.              * @param {utils.ProgressManager} [manager]
  1040.              * @returns {Promise<DownloaderFolder>}
  1041.              */
  1042.             async function fetchPost(api_data, manager) {
  1043.                 const perfmon_run = perfmon.run('fetchPost', api_data);
  1044.                 const sub_manager = manager.sub(0, manager.callback, {
  1045.                     layer: 'post', data: api_data
  1046.                 });
  1047.  
  1048.                 const date = new Date(api_data.post.edited);
  1049.                 const folder = new DownloaderFolder(escapePath(api_data.post.title), [
  1050.                     ...settings.save_apijson ? [new DownloaderFile('data.json', JSON.stringify(api_data))] : [],
  1051.                     ...settings.save_content ? [new DownloaderFile('content.html', api_data.post.content, { date })] : []
  1052.                 ]);
  1053.  
  1054.                 let attachments_folder = folder;
  1055.                 if (api_data.post.attachments.length && !settings.flatten_files) {
  1056.                     attachments_folder = new DownloaderFolder('attachments');
  1057.                     folder.children.push(attachments_folder);
  1058.                 }
  1059.                 const tasks = [
  1060.                     // api_data.post.file
  1061.                     (async function(file) {
  1062.                         if (!file.path) { return; }
  1063.                         sub_manager.add();
  1064.                         const prefix = settings.no_prefix ? '' : 'file-';
  1065.                         const ori_name = getFileName(file);
  1066.                         const name = escapePath(prefix + ori_name);
  1067.                         const url = getFileUrl(file);
  1068.                         const blob = await sub_manager.progress(fetchBlob(url, sub_manager));
  1069.                         folder.children.push(new DownloaderFile(
  1070.                             name, blob, {
  1071.                                 date,
  1072.                                 comment: JSON.stringify(file)
  1073.                             }
  1074.                         ));
  1075.                     }) (api_data.post.file),
  1076.  
  1077.                     // api_data.post.attachments
  1078.                     ...api_data.post.attachments.map(async (attachment, i) => {
  1079.                         if (!attachment.path) { return; }
  1080.                         sub_manager.add();
  1081.                         const prefix = settings.no_prefix ? '' : `${ utils.fillNumber(i+1, api_data.post.attachments.length.toString().length) }-`;
  1082.                         const ori_name = getFileName(attachment);
  1083.                         const name = escapePath(prefix + ori_name);
  1084.                         const url = getFileUrl(attachment);
  1085.                         const blob = await sub_manager.progress(fetchBlob(url, sub_manager));
  1086.                         attachments_folder.children.push(new DownloaderFile(
  1087.                             name, blob, {
  1088.                                 date,
  1089.                                 comment: JSON.stringify(attachment)
  1090.                             }
  1091.                         ));
  1092.                     }),
  1093.                 ];
  1094.                 await Promise.all(tasks);
  1095.  
  1096.                 // Make sure sub_manager finishes even when no async tasks
  1097.                 if (sub_manager.steps === 0) {
  1098.                     sub_manager.steps = 1;
  1099.                     await sub_manager.progress();
  1100.                 }
  1101.  
  1102.                 perfmon_run.stop();
  1103.  
  1104.                 return folder;
  1105.  
  1106.                 function getFileName(file) {
  1107.                     return file.name || file.path.slice(file.path.lastIndexOf('/')+1);
  1108.                 }
  1109.  
  1110.                 function getFileUrl(file) {
  1111.                     return (file.server ?? 'https://n1.kemono.su') + '/data' + file.path;
  1112.                 }
  1113.             }
  1114.  
  1115.             /**
  1116.              * Deliver zip file to user
  1117.              * @param {string} filename - filename (with extension, e.g. "file.zip")
  1118.              * @param {JSZip} zip,
  1119.              * @param {string | null} comment - zip file comment
  1120.              */
  1121.             async function saveAs(filename, zip, manager, comment=null) {
  1122.                 const perfmon_run = perfmon.run('saveAs', filename);
  1123.                 const sub_manager = manager.sub(100, manager.callback, {
  1124.                     layer: 'zip', filename, zip
  1125.                 });
  1126.  
  1127.                 const options = { type: 'blob' };
  1128.                 comment !== null && (options.comment = comment);
  1129.                 const blob = await zip.generateAsync(options, metadata => sub_manager.progress(null, metadata.percent));
  1130.                 const url = URL.createObjectURL(blob);
  1131.                 const a = $$CrE({
  1132.                     tagName: 'a',
  1133.                     attrs: {
  1134.                         download: filename,
  1135.                         href: url
  1136.                     }
  1137.                 });
  1138.                 a.click();
  1139.  
  1140.                 perfmon_run.stop();
  1141.             }
  1142.  
  1143.             /**
  1144.              * Fetch blob data from given url \
  1145.              * Queued function of _fetchBlob
  1146.              * @param {string} url
  1147.              * @param {utils.ProgressManager} [manager]
  1148.              * @returns {Promise<Blob>}
  1149.              */
  1150.             function fetchBlob(...args) {
  1151.                 if (!fetchBlob.initialized) {
  1152.                     queueTask.fetchBlob = {
  1153.                         max: 3,
  1154.                         sleep: 0
  1155.                     };
  1156.                     fetchBlob.initialized = true;
  1157.                 }
  1158.  
  1159.                 return queueTask(() => _fetchBlob(...args), 'fetchBlob');
  1160.             }
  1161.  
  1162.             /**
  1163.              * Fetch blob data from given url
  1164.              * @param {string} url
  1165.              * @param {utils.ProgressManager} [manager]
  1166.              * @param {number} [retry=3] - times to retry before throwing an error
  1167.              * @returns {Promise<Blob>}
  1168.              */
  1169.             async function _fetchBlob(url, manager, retry = 3) {
  1170.                 const perfmon_run = perfmon.run('_fetchBlob', url);
  1171.                 const sub_manager = manager.sub(0, manager.callback, {
  1172.                     layer: 'file', url
  1173.                 });
  1174.  
  1175.                 const blob = await new Promise((resolve, reject) => {
  1176.                     GM_xmlhttpRequest({
  1177.                         method: 'GET', url,
  1178.                         responseType: 'blob',
  1179.                         async onprogress(e) {
  1180.                             sub_manager.steps = e.total;
  1181.                             await sub_manager.progress(null, e.loaded);
  1182.                         },
  1183.                         onload(e) {
  1184.                             e.status === 200 ? resolve(e.response) : onerror(e)
  1185.                         },
  1186.                         onerror
  1187.                     });
  1188.  
  1189.                     async function onerror(err) {
  1190.                         if (retry) {
  1191.                             await sub_manager.progress(null, -1);
  1192.                             const result = await _fetchBlob(url, manager, retry - 1);
  1193.                             resolve(result);
  1194.                         } else {
  1195.                             reject(err)
  1196.                         }
  1197.                     }
  1198.                 });
  1199.  
  1200.                 perfmon_run.stop();
  1201.  
  1202.                 return blob;
  1203.             }
  1204.  
  1205.             /**
  1206.              * Replace unallowed special characters in a path part
  1207.              * @param {string} path - a part of path, such as a folder name / file name
  1208.              */
  1209.             function escapePath(path) {
  1210.                 // Replace special characters
  1211.                 const chars_bank = {
  1212.                     '\\': '＼',
  1213.                     '/': '／',
  1214.                     ':': '：',
  1215.                     '*': '＊',
  1216.                     '?': '？',
  1217.                     '"': "'",
  1218.                     '<': '＜',
  1219.                     '>': '＞',
  1220.                     '|': '｜'
  1221.                 };
  1222.                 for (const [char, replacement] of Object.entries(chars_bank)) {
  1223.                     path = path.replaceAll(char, replacement);
  1224.                 }
  1225.  
  1226.                 // Disallow ending with dots
  1227.                 path.endsWith('.') && (path += '_');
  1228.                 return path;
  1229.             }
  1230.  
  1231.             return {
  1232.                 downloadPost, downloadPosts,
  1233.                 fetchPost, saveAs,
  1234.                 perfmon
  1235.             };
  1236.         }
  1237.     }, {
  1238.         id: 'settings',
  1239.         detectDom: 'html',
  1240.         dependencies: 'dependencies',
  1241.         params: ['GM_setValue', 'GM_getValue'],
  1242.         async func(GM_setValue, GM_getValue) {
  1243.             // settings 数据，所有设置项在这里配置
  1244.             /**
  1245.              * @typedef {Object} setting
  1246.              * @property {string} title - 设置项名称
  1247.              * @property {string | null} [caption] - 设置项副标题，可以省略；为假值时不渲染副标题元素
  1248.              * @property {string} key - 用作settings 读/写对象的prop名称，也用作v-model值
  1249.              * @property {string} storage - GM存储key
  1250.              * @property {*} default - 用户未设置过时的默认值（初始值）
  1251.              */
  1252.             /** @type {setting[]} */
  1253.             const settings_data = [{
  1254.                 title: CONST.Text.SaveContent,
  1255.                 caption: 'content.html',
  1256.                 key: 'save_content',
  1257.                 storage: 'save_content',
  1258.                 default: true,
  1259.             }, {
  1260.                 title: CONST.Text.SaveApijson,
  1261.                 caption: 'data.json',
  1262.                 key: 'save_apijson',
  1263.                 storage: 'save_apijson',
  1264.                 default: true,
  1265.             }, {
  1266.                 title: CONST.Text.NoPrefix,
  1267.                 key: 'no_prefix',
  1268.                 storage: 'no_prefix',
  1269.                 default: false,
  1270.             }, {
  1271.                 title: CONST.Text.FlattenFiles,
  1272.                 caption: CONST.Text.FlattenFilesCaption,
  1273.                 key: 'flatten_files',
  1274.                 storage: 'flatten_files',
  1275.                 default: false
  1276.             }];
  1277.  
  1278.             // settings 读/写对象，既用于oFunc内读写，也直接作为oFunc返回值提供给其他功能函数
  1279.             const settings = {};
  1280.             settings_data.forEach(setting => {
  1281.                 Object.defineProperty(settings, setting.key, {
  1282.                     get() {
  1283.                         return GM_getValue(setting.storage, setting.default);
  1284.                     },
  1285.                     set(val) {
  1286.                         GM_setValue(setting.storage, !!val);
  1287.                     }
  1288.                 });
  1289.             });
  1290.  
  1291.             // 创建设置界面
  1292.             const container = $$CrE({
  1293.                 tagName: 'div',
  1294.                 styles: { all: 'initial', position: 'fixed' }
  1295.             })
  1296.             const app_elm = $CrE('div');
  1297.             app_elm.innerHTML = `
  1298.                 <q-layout view="hhh lpr fff">
  1299.                     <q-dialog v-model="show">
  1300.                         <q-card>
  1301.                             <q-card-section>
  1302.                                 <div class="text-h6">${ CONST.Text.Settings }</div>
  1303.                             </q-card-section>
  1304.                             <q-card-section>
  1305.                                 <q-list>
  1306.                                     <q-item tag="label" v-for="setting of settings_data" v-ripple>
  1307.                                         <q-item-section>
  1308.                                             <q-item-label>{{ setting.title }}</q-item-label>
  1309.                                             <q-item-label caption v-if="setting.caption">{{ setting.caption }}</q-item-label>
  1310.                                         </q-item-section>
  1311.                                         <q-item-section avatar>
  1312.                                             <q-toggle color="orange" v-model="settings[setting.key]" @update:model-value="val => settings[setting.key] = val"></q-toggle>
  1313.                                         </q-item-section>
  1314.                                     </q-item>
  1315.                                 </q-list>
  1316.                             </q-card-section>
  1317.                         </q-card>
  1318.                     </q-dialog>
  1319.                 </q-layout>
  1320.             `;
  1321.             container.append(app_elm);
  1322.             $('html').append(container);
  1323.             const app = Vue.createApp({
  1324.                 data() {
  1325.                     return {
  1326.                         show: false,
  1327.                         settings_data,
  1328.                         settings
  1329.                     };
  1330.                 },
  1331.                 mounted() {
  1332.                     GM_registerMenuCommand(CONST.Text.Settings, e => this.show = true);
  1333.                     GM_addValueChangeListener('settings', () => {
  1334.                         this.save_content = settings.save_content;
  1335.                         this.save_apijson = settings.save_apijson;
  1336.                     });
  1337.                 }
  1338.             });
  1339.             app.use(Quasar);
  1340.             app.mount(app_elm);
  1341.             Quasar.Dark.set(true);
  1342.  
  1343.             return settings;
  1344.         }
  1345.     }, {
  1346.         id: 'user-interface',
  1347.         dependencies: ['utils', 'api', 'downloader', 'gui'],
  1348.         async func() {
  1349.             const utils = require('utils');
  1350.             const api = require('api');
  1351.             const downloader = require('downloader');
  1352.             const gui = require('gui');
  1353.  
  1354.             let downloading = false;
  1355.             let selector = null;
  1356.  
  1357.             // Console User Interface
  1358.             const ConsoleUI = utils.window.ZIP = {
  1359.                 version: GM_info.script.version,
  1360.                 require,
  1361.  
  1362.                 api, downloader,
  1363.                 get ui() { return require('user-interface') },
  1364.  
  1365.                 downloadCurrentPost, downloadCurrentCreator, userDownload, getPageType
  1366.             };
  1367.  
  1368.             // Menu User Interface
  1369.             GM_registerMenuCommand(CONST.Text.DownloadPost, downloadCurrentPost);
  1370.             GM_registerMenuCommand(CONST.Text.DownloadCreator, downloadCurrentCreator);
  1371.             GM_registerMenuCommand(CONST.Text.DownloadCustom, downloadCustom);
  1372.  
  1373.             // Graphical User Interface
  1374.             // Make button
  1375.             const dlbtn = $$CrE({
  1376.                 tagName: 'button',
  1377.                 styles: {
  1378.                     'background-color': 'transparent',
  1379.                     'color': 'white',
  1380.                     'border': 'transparent'
  1381.                 },
  1382.                 listeners: [['click', userDownload]]
  1383.             });
  1384.             const dltext = $$CrE({
  1385.                 tagName: 'span',
  1386.                 props: {
  1387.                     innerText: CONST.Text.DownloadZip
  1388.                 }
  1389.             });
  1390.             const dlprogress = $$CrE({
  1391.                 tagName: 'span',
  1392.                 styles: {
  1393.                     display: 'none',
  1394.                     'margin-left': '10px'
  1395.                 }
  1396.             });
  1397.             dlbtn.append(dltext);
  1398.             dlbtn.append(dlprogress);
  1399.  
  1400.             const board = gui.board;
  1401.  
  1402.             // Place button each time a new action panel appears (meaning navigating into a post page)
  1403.             let observer;
  1404.             detectDom({
  1405.                 selector: '.post__actions, .user-header__actions',
  1406.                 callback: action_panel => {
  1407.                     // Hide dlprogress, its content is still for previous page
  1408.                     dlprogress.style.display = 'none';
  1409.  
  1410.                     // Append to action panel
  1411.                     action_panel.append(dlbtn);
  1412.  
  1413.                     // Disconnect old observer
  1414.                     observer?.disconnect();
  1415.  
  1416.                     // Observe action panel content change, always put download button in last place
  1417.                     observer = detectDom({
  1418.                         root: action_panel,
  1419.                         selector: 'button',
  1420.                         callback: btn => btn !== dlbtn && action_panel.append(dlbtn)
  1421.                     });
  1422.                 }
  1423.             });
  1424.  
  1425.             return {
  1426.                 ConsoleUI,
  1427.                 dlbtn, dltext,
  1428.                 get ['selector']() { return selector; },
  1429.                 downloadCurrentPost, downloadCurrentCreator,
  1430.                 getCurrentPost, getCurrentCreator, getPageType
  1431.             }
  1432.  
  1433.             function userDownload() {
  1434.                 const page_type = getPageType();
  1435.                 const func = ({
  1436.                     post: downloadCurrentPost,
  1437.                     creator: downloadCurrentCreator
  1438.                 })[page_type] ?? function() {};
  1439.                 return func();
  1440.             }
  1441.  
  1442.             async function downloadCurrentPost() {
  1443.                 const post_info = getCurrentPost();
  1444.                 if (downloading) { return; }
  1445.                 if (!post_info) { return; }
  1446.  
  1447.                 try {
  1448.                     downloading = true;
  1449.                     dlprogress.style.display = 'inline';
  1450.                     dltext.innerText = CONST.Text.Downloading;
  1451.                     board.minimized = false;
  1452.                     board.closed = false;
  1453.                     board.clear();
  1454.                     await downloader.downloadPost(
  1455.                         post_info.service,
  1456.                         post_info.creator_id,
  1457.                         post_info.post_id,
  1458.                         on_progress
  1459.                     );
  1460.                 } finally {
  1461.                     downloading = false;
  1462.                     dltext.innerText = CONST.Text.DownloadZip;
  1463.                 }
  1464.  
  1465.                 function on_progress(finished_steps, total_steps, manager) {
  1466.                     const info = manager.info;
  1467.                     info.layer === 'root' && (dlprogress.innerText = `(${finished_steps}/${total_steps})`);
  1468.  
  1469.                     const progress = { finished: finished_steps, total: total_steps };
  1470.                     info.layer === 'root' && board.update(CONST.Text.TotalProgress, progress);
  1471.                     info.layer === 'post' && board.update(info.data.post.title, progress);
  1472.                     info.layer === 'file' && board.update(info.url, progress);
  1473.                     info.layer === 'zip' && board.update(info.filename, progress);
  1474.                     board.closed = false;
  1475.                 }
  1476.             }
  1477.  
  1478.             async function downloadCurrentCreator() {
  1479.                 const creator_info = getCurrentCreator();
  1480.                 if (downloading) { return; }
  1481.                 if (!creator_info) { return; }
  1482.  
  1483.                 try {
  1484.                     downloading = true;
  1485.                     Quasar.Loading.show({ message: CONST.Text.FetchingCreatorPosts });
  1486.                     const [profile, selected_posts] = await Promise.all([
  1487.                         api.Creators.profile(creator_info.service, creator_info.creator_id),
  1488.                         selectCreatorPosts(creator_info, () => Quasar.Loading.hide())
  1489.                     ]);
  1490.                     if (selected_posts) {
  1491.                         dlprogress.style.display = 'inline';
  1492.                         dltext.innerText = CONST.Text.Downloading;
  1493.                         board.minimized = false;
  1494.                         board.closed = false;
  1495.                         board.clear();
  1496.                         await downloader.downloadPosts(selected_posts.map(post => ({
  1497.                             service: creator_info.service,
  1498.                             creator_id: creator_info.creator_id,
  1499.                             post_id: post.id
  1500.                         })), `${profile.name}.zip`, on_progress);
  1501.                     }
  1502.                 } finally {
  1503.                     downloading = false;
  1504.                     dltext.innerText = CONST.Text.DownloadZip;
  1505.                 }
  1506.  
  1507.                 function on_progress(finished_steps, total_steps, manager) {
  1508.                     const info = manager.info;
  1509.                     info.layer === 'root' && (dlprogress.innerText = `(${finished_steps}/${total_steps})`);
  1510.  
  1511.                     const progress = { finished: finished_steps, total: total_steps };
  1512.                     info.layer === 'root' && board.update(CONST.Text.TotalProgress, progress);
  1513.                     info.layer === 'post' && board.update(info.data.post.title, progress);
  1514.                     info.layer === 'file' && board.update(info.url, progress);
  1515.                     info.layer === 'zip' && board.update(info.filename, progress);
  1516.                     board.closed = false;
  1517.                 }
  1518.             }
  1519.  
  1520.             async function downloadCustom() {
  1521.                 if (downloading) { return; }
  1522.  
  1523.                 try {
  1524.                     const post_info = getCurrentPost();
  1525.                     const creator_info = getCurrentCreator();
  1526.                     const info = post_info ?? creator_info ?? {};
  1527.                     const dl_info = await gui.panel.show({
  1528.                         download_type: post_info ? 'post' : (creator_info ? 'creator' : undefined),
  1529.                         service: info.service ?? undefined,
  1530.                         creator_id: info.creator_id ?? undefined,
  1531.                         post_id: info.post_id ?? undefined,
  1532.                         autoclose: false
  1533.                     });
  1534.                     if (dl_info !== null) {
  1535.                         downloading = true;
  1536.                         console.log(dl_info);
  1537.  
  1538.                         if (dl_info.download_type === 'post') {
  1539.                             gui.panel.close();
  1540.                             board.minimized = false;
  1541.                             board.closed = false;
  1542.                             board.clear();
  1543.                             await downloader.downloadPost(
  1544.                                 dl_info.service,
  1545.                                 dl_info.creator_id,
  1546.                                 dl_info.post_id,
  1547.                                 on_progress
  1548.                             );
  1549.                         } else if (dl_info.download_type === 'creator') {
  1550.                             gui.panel.loading = true;
  1551.                             Assert(creator_info !== null, 'dl_info.download_type === "creator" but creator_info is null', TypeError);
  1552.                             const [profile, selected_posts] = await Promise.all([
  1553.                                 api.Creators.profile(creator_info.service, creator_info.creator_id),
  1554.                                 selectCreatorPosts(creator_info, () => {
  1555.                                     gui.panel.loading = false;
  1556.                                     gui.panel.close();
  1557.                                 })
  1558.                             ]);
  1559.                             if (selected_posts) {
  1560.                                 dlprogress.style.display = 'inline';
  1561.                                 dltext.innerText = CONST.Text.Downloading;
  1562.                                 board.minimized = false;
  1563.                                 board.closed = false;
  1564.                                 board.clear();
  1565.                                 await downloader.downloadPosts(selected_posts.map(post => ({
  1566.                                     service: creator_info.service,
  1567.                                     creator_id: creator_info.creator_id,
  1568.                                     post_id: post.id
  1569.                                 })), `${profile.name}.zip`, on_progress);
  1570.                             }
  1571.                         }
  1572.                     }
  1573.                 } finally {
  1574.                     downloading = false;
  1575.                     dltext.innerText = CONST.Text.DownloadZip;
  1576.                 }
  1577.  
  1578.                 function on_progress(finished_steps, total_steps, manager) {
  1579.                     const info = manager.info;
  1580.                     const progress = { finished: finished_steps, total: total_steps };
  1581.                     info.layer === 'root' && board.update(CONST.Text.TotalProgress, progress);
  1582.                     info.layer === 'post' && board.update(info.data.post.title, progress);
  1583.                     info.layer === 'file' && board.update(info.url, progress);
  1584.                     info.layer === 'zip' && board.update(info.filename, progress);
  1585.                     board.closed = false;
  1586.                 }
  1587.             }
  1588.  
  1589.             /**
  1590.              * User select creator's posts
  1591.              * @param {CreatorInfo} creator_info
  1592.              * @param {function} onAjaxLoad - callback when api ajax loaded
  1593.              * @returns 
  1594.              */
  1595.             async function selectCreatorPosts(creator_info, onAjaxLoad=function() {}) {
  1596.                 const posts = await api.Custom.all_posts(creator_info.service, creator_info.creator_id);
  1597.                 typeof onAjaxLoad === 'function' && onAjaxLoad();
  1598.                 const selected_posts = await new Promise((resolve, reject) => {
  1599.                     if (!selector) {
  1600.                         selector = new ItemSelector();
  1601.                         selector.setTheme('dark');
  1602.                         selector.elements.container.style.setProperty('z-index', '1');
  1603.                     }
  1604.                     selector.show({
  1605.                         text: CONST.Text.SelectAll,
  1606.                         children: posts.map(post => ({
  1607.                             post,
  1608.                             text: post.title
  1609.                         }))
  1610.                     }, {
  1611.                         title: CONST.Text.DownloadCreator,
  1612.                         onok(e, json) {
  1613.                             const posts = json.children.map(obj => obj.post);
  1614.                             resolve(posts);
  1615.                         },
  1616.                         oncancel: e => resolve(null),
  1617.                         onclose: e => resolve(null)
  1618.                     });
  1619.                 });
  1620.                 return selected_posts;
  1621.             }
  1622.  
  1623.             /**
  1624.              * @typedef {Object} PostInfo
  1625.              * @property {string} service,
  1626.              * @property {number} creator_id
  1627.              * @property {number} post_id
  1628.              */
  1629.             /**
  1630.              * Get post info in current page
  1631.              * @returns {PostInfo | null}
  1632.              */
  1633.             function getCurrentPost() {
  1634.                 const regpath = /^\/([a-zA-Z]+)\/user\/(\d+)\/post\/(\d+)/;
  1635.                 const match = location.pathname.match(regpath);
  1636.                 if (!match) {
  1637.                     return null;
  1638.                 } else {
  1639.                     return {
  1640.                         service: match[1],
  1641.                         creator_id: parseInt(match[2], 10),
  1642.                         post_id: parseInt(match[3], 10)
  1643.                     }
  1644.                 }
  1645.             }
  1646.  
  1647.             /**
  1648.              * @typedef {Object} CreatorInfo
  1649.              * @property {string} service
  1650.              * @property {number} creator_id
  1651.              */
  1652.             /**
  1653.              * Get creator info in current page
  1654.              * @returns {CreatorInfo | null}
  1655.              */
  1656.             function getCurrentCreator() {
  1657.                 const regpath = /^\/([a-zA-Z]+)\/user\/(\d+)/;
  1658.                 const match = location.pathname.match(regpath);
  1659.                 if (!match) {
  1660.                     return null;
  1661.                 } else {
  1662.                     return {
  1663.                         service: match[1],
  1664.                         creator_id: parseInt(match[2], 10)
  1665.                     }
  1666.                 }
  1667.             }
  1668.  
  1669.             /** @typedef { 'post' | 'creator' } page_type */
  1670.             /**
  1671.              * @returns {page_type}
  1672.              */
  1673.             function getPageType() {
  1674.                 const matchers = {
  1675.                     post: {
  1676.                         type: 'regpath',
  1677.                         value: /^\/([a-zA-Z]+)\/user\/(\d+)\/post\/(\d+)/
  1678.                     },
  1679.                     creator: {
  1680.                         type: 'func',
  1681.                         value: () => /^\/([a-zA-Z]+)\/user\/(\d+)/.test(location.pathname) && !location.pathname.includes('/post/')
  1682.                     },
  1683.                 }
  1684.                 for (const [type, matcher] of Object.entries(matchers)) {
  1685.                     if (FunctionLoader.testCheckers(matcher)) {
  1686.                         return type;
  1687.                     }
  1688.                 }
  1689.             }
  1690.         },
  1691.     }]);
  1692. }) ();