☰

CKUIToolkit

A simple settings modal framework.

目前為 2022-03-20 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/441653/1030335/CKUIToolkit.js 

  1. // ==UserScript==
  2. // @name         CKUIToolkit
  3. // @namespace    ckylin-script-lib-combined-ui-components
  4. // @version      1.0
  5. // @match        http://*
  6. // @match        https://*
  7. // @require      https://greasyfork.org/scripts/429720-cktools/code/CKTools.js?version=1028655
  8. // @resource     popjs https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.js
  9. // @resource     popcss https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.css
  10. // @resource     fpjs https://cdn.jsdelivr.net/gh/CKylinMC/FloatPopup.js@main/floatpopup.js
  11. // @resource     fpcss https://cdn.jsdelivr.net/gh/CKylinMC/FloatPopup.js@main/floatpopup.modal.css
  12. // @author       CKylinMC
  13. // @license      GPL-3.0-only
  14. // @grant        GM_getResourceText
  15. // @grant        unsafeWindow
  16. // ==/UserScript==
  17.  
  18. (function () {
  19.     if (typeof (unsafeWindow) == 'undefined') {
  20.         unsafeWindow = window;
  21.     }
  22.     if (typeof (GM_getResourceText) != 'function') {
  23.         GM_getResourceText = () => null;
  24.     }
  25.     //======[Apply all resources]
  26.     const resourceList = [
  27.         { name: 'popjs', type: 'js', source: 'https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.js'},
  28.         { name: 'popcss', type: 'css', source:'https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.css' },
  29.         { name: 'fpjs', type: 'js', source: 'https://cdn.jsdelivr.net/gh/CKylinMC/FloatPopup.js@main/floatpopup.js' },
  30.         { name: 'fpcss', type: 'css', source: 'https://cdn.jsdelivr.net/gh/CKylinMC/FloatPopup.js@main/floatpopup.modal.css' },
  31.         { name: 'popcsspatch', type: 'rawcss', content: "div.popNotifyUnitFrame{z-index:110000!important;}.CKTOOLS-modal-content{color: #616161!important;max-height: 80vh;overflow: auto;}" },
  32.         { name: 'settingscss', type: 'rawcss', content: `
  33.             .ckui-base .ckui-text{
  34.                 font-size: 14px;
  35.                 line-height: 1.428571429;
  36.             }
  37.             .ckui-base label{
  38.                 display: block;
  39.                 color: rgb(16, 140, 255);
  40.                 padding-top: 12px;
  41.             }
  42.             .ckui-base .ckui-texttoggle{
  43.                 display: block;
  44.                 color: rgb(16, 140, 255);
  45.                 padding-top: 12px;
  46.             }
  47.             .ckui-base .ckui-texttoggle-container::before{
  48.                 display: inline;
  49.                 content: "🔹";
  50.             }
  51.             .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value{
  52.                 padding: 0px 6px;
  53.                 font-weight: bold;
  54.                 -webkit-user-select: none;
  55.                 -moz-user-select: none;
  56.                 -ms-user-select: none;
  57.                 user-select: none;
  58.                 cursor: pointer;
  59.             }
  60.             .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value::before{
  61.                 content: "["
  62.             }
  63.             .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value::after{
  64.                 content: "]"
  65.             }
  66.             .ckui-base .ckui-texttoggle-container::after{
  67.                 display: inline;
  68.                 content: "(点击切换)";
  69.                 color: gray;
  70.                 font-size: 12px;
  71.                 font-style: italic;
  72.                 padding-left: 12px;
  73.             }
  74.             .ckui-base .ckui-description{
  75.                 display: block;
  76.                 color: rgb(92, 92, 92);
  77.                 font-size: small;
  78.                 font-style: italic;
  79.             }
  80.             .ckui-base .ckui-toggle{
  81.                 padding-top: 12px;
  82.             }
  83.             .ckui-base label.ckui-inline-label{
  84.                 display: inline;
  85.                 line-height: 18px;
  86.             }
  87.             .ckui-base .ckui-input input{
  88.                 display: block;
  89.                 width: calc(100% - 28px);
  90.                 height: 34px;
  91.                 padding: 1px 3px;
  92.                 margin: 3px 6px;
  93.                 font-size: 14px;
  94.                 line-height: 1.428571429;
  95.                 color: rgb(51, 51, 51);
  96.                 background-color: rgb(255, 255, 255);
  97.                 border: 1px solid rgb(204, 204, 204);
  98.                 border-radius: 4px;
  99.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  100.             }
  101.             .ckui-base .ckui-inputnumber input{
  102.                 display: block;
  103.                 width: calc(100% - 36px);
  104.                 height: 34px;
  105.                 padding: 1px 12px;
  106.                 margin: 3px 6px;
  107.                 font-size: 14px;
  108.                 line-height: 1.428571429;
  109.                 color: rgb(51, 51, 51);
  110.                 background-color: rgb(255, 255, 255);
  111.                 border: 1px solid rgb(204, 204, 204);
  112.                 border-radius: 4px;
  113.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  114.             }
  115.             .ckui-base .ckui-inputarea textarea{
  116.                 display: block;
  117.                 width: calc(100% - 28px);
  118.                 height: 100px;
  119.                 padding: 6px 6px;
  120.                 margin: 3px 6px;
  121.                 font-size: 14px;
  122.                 line-height: 1.428571429;
  123.                 color: rgb(51, 51, 51);
  124.                 background-color: rgb(255, 255, 255);
  125.                 border: 1px solid rgb(204, 204, 204);
  126.                 border-radius: 4px;
  127.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  128.             }
  129.             .ckui-base .ckui-select select{
  130.                 display: block;
  131.                 width: calc(100% - 28px);
  132.                 height: 34px;
  133.                 padding: 6px 6px;
  134.                 margin: 3px 6px;
  135.                 font-size: 14px;
  136.                 line-height: 1.428571429;
  137.                 color: rgb(51, 51, 51);
  138.                 background-color: rgb(255, 255, 255);
  139.                 border: 1px solid rgb(204, 204, 204);
  140.                 border-radius: 4px;
  141.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  142.             }
  143.             .ckui-base .ckui-select select option{
  144.                 font-size: 16px;
  145.                 line-height: 1.428571429;
  146.                 color: rgb(51, 51, 51);
  147.             }
  148.             .ckui-base .ckui-header::before{
  149.                 content: "💠";
  150.             }
  151.             .ckui-base .ckui-header{
  152.                 width: calc(100% - 8px);
  153.                 display: block;
  154.                 color: rgb(16, 140, 255);
  155.                 padding: 12px 3px;
  156.                 border-bottom: 2px solid rgb(16, 140, 255);
  157.                 margin: 12px 0px 12px 0px;
  158.             }
  159.             .ckui-base .ckui-btns{
  160.                 display: flex;
  161.                 flex-wrap: wrap;
  162.                 flex-direction: row;
  163.             }
  164.             .ckui-base .ckui-btn{
  165.                 display: block;
  166.                 width: calc(50% - 8px);
  167.                 height: 40px;
  168.                 padding: 6px 12px;
  169.                 margin: 6px;
  170.                 font-size: 14px;
  171.                 line-height: 1.428571429;
  172.                 color: rgb(255, 255, 255);
  173.                 background-color: rgb(16, 140, 255);
  174.                 border: 1px solid rgb(16, 140, 255);
  175.                 border-radius: 4px;
  176.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  177.             }
  178.             .ckui-base .ckui-btn:hover{
  179.                 background-color: rgb(0, 122, 255);
  180.             }
  181.             .ckui-base .ckui-btns .ckui-btn{
  182.                 flex: 1;
  183.             }` }
  184.     ]
  185.     async function applyResource() {
  186.         resloop: for (let res of resourceList) {
  187.             if (true||!document.querySelector("#" + res.name)) {
  188.                 let el;
  189.                 switch (res.type) {
  190.                     case 'js':
  191.                     case 'rawjs':
  192.                         el = document.createElement("script");
  193.                         break;
  194.                     case 'css':
  195.                     case 'rawcss':
  196.                         el = document.createElement("style");
  197.                         break;
  198.                     default:
  199.                         console.error('[CKUI]','Err:unknown type', res);
  200.                         continue resloop;
  201.                 }
  202.                 el.id = res.name;
  203.                 let result = res.type.startsWith('raw') ? res.content : GM_getResourceText(res.name);
  204.                 if (result == null || result == 'null' || typeof result === 'undefined') {
  205.                     console.info('[CKUI]', 'Alternative method is using:',res.type,res.name);
  206.                     if (!res.source) {
  207.                         console.info('[CKUI]', 'Failed to apply:',res.type,res.name);
  208.                         continue resloop;
  209.                     }
  210.                     try {
  211.                         let response = await fetch(res.source);
  212.                         if (!response.ok) {
  213.                             console.info('[CKUI]', 'Failed to apply:',res.type,res.name,response.statusText);
  214.                             continue resloop;
  215.                         }
  216.                         result = await response.text();
  217.                     } catch (e) {
  218.                         console.info('[CKUI]', 'Failed to apply:',res.type,res.name,e);
  219.                         continue resloop;
  220.                     }
  221.                 }
  222.                 el.appendChild(document.createTextNode(result));
  223.                 document.head.appendChild(el);
  224.                 console.info('[CKUI]', 'Applied:',res.type,res.name);
  225.             }
  226.         }
  227.         console.info('[CKUI]', 'Resources all applied');
  228.     }
  229.     applyResource();
  230.     
  231.     let { domHelper, deepClone } = CKTools;
  232.     if (!deepClone) {
  233.         deepClone = (obj)=>{
  234.             let newObject = {};
  235.             if (Array.isArray(obj)) {
  236.                 newObject = [];
  237.                 for (let i = 0; i < obj.length; i++) {
  238.                     newObject.push(deepClone(obj[i]));
  239.                 }
  240.                 return newObject;
  241.             }
  242.             Object.keys(obj).map(key => {
  243.                 if (typeof obj[key] === 'object') {
  244.                     newObject[key] = deepClone(obj[key]);
  245.                 } else {
  246.                     newObject[key] = obj[key];
  247.                 }
  248.             });
  249.             return newObject;
  250.         };
  251.     }
  252.     const CKUIToolkit = {};
  253.     class CompUtils{
  254.         static getId(name) {
  255.             return 'ckui-settings-' + name;
  256.         }
  257.         static getClass(type) {
  258.             return 'ckui-' + type;
  259.         }
  260.         static runChecker(checker = null,...args) {
  261.             if (checker && typeof (checker) == 'function') {
  262.                 try {
  263.                     const result = checker(...args);
  264.                     return !!result;
  265.                 } catch (e) {
  266.                     return false;
  267.                 }
  268.             } else return true;
  269.         }
  270.         static cfgValidator(cfg, keystr='') {
  271.             let keys = keystr.split(',').map(el => el.trim()).filter(el => el.length > 0);
  272.             keys.concat(['name', 'type']);
  273.             if (!cfg) return false;
  274.             for (let key of keys) {
  275.                 if (cfg[key]===undefined) return false;
  276.             }
  277.             return true;
  278.         }
  279.     }
  280.     class Components{
  281.         static text(cfg) {
  282.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  283.             return domHelper('div', {
  284.                 id: CompUtils.getId(cfg.name),
  285.                 classlist: CompUtils.getClass(cfg.type),
  286.                 html: cfg.label
  287.             });
  288.         }
  289.         static header(cfg) {
  290.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  291.             return domHelper('div', {
  292.                 id: CompUtils.getId(cfg.name),
  293.                 classlist: CompUtils.getClass(cfg.type),
  294.                 html: cfg.label
  295.             });
  296.         }
  297.         static toggle(cfg) {
  298.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  299.             const customId = 'toggle'+CKTools.GUID.getShort();
  300.             return domHelper('div', {
  301.                 id: CompUtils.getId(cfg.name),
  302.                 classlist: CompUtils.getClass(cfg.type),
  303.                 childs: [
  304.                     domHelper('input', {
  305.                         id: customId,
  306.                         attr: {
  307.                             type: 'checkbox',
  308.                             value: cfg.value??false
  309.                         },
  310.                         on: {
  311.                             change: (e) => {
  312.                                 const value = !!(e.target?.value);
  313.                                 if (CompUtils.runChecker(cfg.checker)) cfg.value = value;
  314.                                 // else  TODO: error tip
  315.                             }
  316.                         }
  317.                     }),
  318.                     domHelper('label', {
  319.                         attr: {
  320.                             for: customId
  321.                         },
  322.                         classlist:'ckui-inline-label',
  323.                         html: cfg.label
  324.                     }),
  325.                     domHelper('span', {
  326.                         classList: 'ckui-description',
  327.                         html: cfg.description??''
  328.                     }),
  329.                 ]
  330.             });
  331.         }
  332.         static input(cfg) {
  333.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  334.             return domHelper('div', {
  335.                 id: CompUtils.getId(cfg.name),
  336.                 classlist: CompUtils.getClass(cfg.type),
  337.                 childs: [
  338.                     domHelper('label', {
  339.                         html: cfg.label
  340.                     }),
  341.                     domHelper('input', {
  342.                         attr:cfg.value,
  343.                         on: {
  344.                             keyup: CKTools.debounce((e) => {
  345.                                 const value = e.target?.value;
  346.                                 if (CompUtils.runChecker(cfg.checker)) cfg.value = value;
  347.                                 // else  TODO: error tip
  348.                             })
  349.                         }
  350.                     }),
  351.                     domHelper('span', {
  352.                         classList: 'ckui-description',
  353.                         html: cfg.description??''
  354.                     }),
  355.                 ]
  356.             });
  357.         }
  358.         static inputarea(cfg) {
  359.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  360.             return domHelper('div', {
  361.                 id: CompUtils.getId(cfg.name),
  362.                 classlist: CompUtils.getClass(cfg.type),
  363.                 childs: [
  364.                     domHelper('label', {
  365.                         html: cfg.label
  366.                     }),
  367.                     domHelper('textarea', {
  368.                         attr: {
  369.                             value: cfg.value
  370.                         },
  371.                         on: {
  372.                             keyup: CKTools.debounce((e) => {
  373.                                 const value = e.target?.value ?? e.target.innerHTMl;
  374.                                 if (CompUtils.runChecker(cfg.checker)) cfg.value = value;
  375.                                 // else  TODO: error tip
  376.                             })
  377.                         }
  378.                     }),
  379.                     domHelper('span', {
  380.                         classList: 'ckui-description',
  381.                         html: cfg.description??''
  382.                     }),
  383.                 ]
  384.             });
  385.         }
  386.         static inputnumber(cfg) {
  387.             if (!CompUtils.cfgValidator(cfg, 'label,min,max,step')) return;
  388.             return domHelper('div', {
  389.                 id: CompUtils.getId(cfg.name),
  390.                 classlist: CompUtils.getClass(cfg.type),
  391.                 childs: [
  392.                     domHelper('label', {
  393.                         html: cfg.label
  394.                     }),
  395.                     domHelper('input', {
  396.                         attr: {
  397.                             type: 'number',
  398.                             value: cfg.value,
  399.                             min: cfg.min,
  400.                             max: cfg.max,
  401.                             step: cfg.step
  402.                         },
  403.                         on: {
  404.                             keyup: CKTools.debounce((e) => {
  405.                                 const value = e.target?.value;
  406.                                 if (CompUtils.runChecker(cfg.checker)) cfg.value = value;
  407.                                 // else  TODO: error tip
  408.                             })
  409.                         }
  410.                     }),
  411.                     domHelper('span', {
  412.                         classList: 'ckui-description',
  413.                         html: cfg.description??''
  414.                     }),
  415.                 ]
  416.             });
  417.         }
  418.         static select(cfg) {
  419.             if (!CompUtils.cfgValidator(cfg, 'label,options')) return;
  420.             return domHelper('div', {
  421.                 id: CompUtils.getId(cfg.name),
  422.                 classlist: CompUtils.getClass(cfg.type),
  423.                 childs: [
  424.                     domHelper('label', {
  425.                         html: cfg.label
  426.                     }),
  427.                     domHelper('select', {
  428.                         attr: {
  429.                             value: cfg.value??'',
  430.                         },
  431.                         init: select => {
  432.                             for (let option of cfg.options) {
  433.                                 select.appendChild(domHelper('option', {
  434.                                     attr: {
  435.                                         value: option.value,
  436.                                         selected: cfg.value == option.value
  437.                                     },
  438.                                     html: option.opt
  439.                                 }));
  440.                             }
  441.                         },
  442.                         on: {
  443.                             change: CKTools.debounce((e) => {
  444.                                 const value = !!(e.target?.value);
  445.                                 if (CompUtils.runChecker(cfg.checker)) cfg.value = value;
  446.                                 // else  TODO: error tip
  447.                             })
  448.                         }
  449.                     }),
  450.                     domHelper('span', {
  451.                         classList: 'ckui-description',
  452.                         html: cfg.description??''
  453.                     }),
  454.                 ]
  455.             });
  456.         }
  457.         static texttoggle(cfg) {
  458.             if (!CompUtils.cfgValidator(cfg, 'before,on,off,after')) return;
  459.             return domHelper('div', {
  460.                 id: CompUtils.getId(cfg.name),
  461.                 classlist: CompUtils.getClass(cfg.type),
  462.                 childs: [
  463.                     domHelper('div', {
  464.                         classList:'ckui-texttoggle-container',
  465.                         childs: [
  466.                             domHelper('span', { text: cfg.before }),
  467.                             domHelper('span', {classList:'ckui-texttoggle-value',text:'...'}),
  468.                             domHelper('span', {text:cfg.after}),
  469.                         ],
  470.                         init: div => {
  471.                             const getText = () => cfg.value ? cfg.on : cfg.off;
  472.                             const setValue = (value) => {
  473.                                 cfg.value = !!value;
  474.                                 div.querySelector('.ckui-texttoggle-value').innerText = getText();
  475.                             }
  476.                             const toggleValue = () => setValue(!cfg.value);
  477.                             div.addEventListener('click', toggleValue);
  478.                             setValue(cfg.value);
  479.                         }
  480.                     }),
  481.                     domHelper('span', {
  482.                         classList: 'ckui-description',
  483.                         html: cfg.description??''
  484.                     }),
  485.                 ]
  486.             });
  487.         }
  488.         static raw(cfg) {
  489.             if (!CompUtils.cfgValidator(cfg, 'contents')) return;
  490.             return domHelper('div', {
  491.                 id: CompUtils.getId(cfg.name),
  492.                 classlist: CompUtils.getClass(cfg.type),
  493.                 childs:domHelper(cfg.contents)
  494.             })
  495.         }
  496.         static window(cfg) {
  497.             if (!CompUtils.cfgValidator(cfg, 'label,config')) return;
  498.             return domHelper('div', {
  499.                 id: CompUtils.getId(cfg.name),
  500.                 classlist: CompUtils.getClass(cfg.type),
  501.                 childs: [
  502.                     domHelper('button', {
  503.                         classList: 'ckui-btn',
  504.                         html: cfg.label,
  505.                         on: {
  506.                             click: async (e) => {
  507.                                 cfg.config = await SettingsBuilder.open(cfg.config);
  508.                             }
  509.                         }
  510.                     })
  511.                 ]
  512.             })
  513.         }
  514.         static btns(cfg) {
  515.             if (!CompUtils.cfgValidator(cfg, 'btns')) return;
  516.             return domHelper('div', {
  517.                 id: CompUtils.getId(cfg.name),
  518.                 classlist: CompUtils.getClass(cfg.type),
  519.                 init: el => {
  520.                     for(let btn of cfg.btns) {
  521.                         el.appendChild(domHelper('button', {
  522.                             classList: 'ckui-btn',
  523.                             html: btn.label,
  524.                             on: {
  525.                                 click: async (e) => {
  526.                                     await btn.onclick();
  527.                                 }
  528.                             }
  529.                         }));
  530.                     }
  531.                 }
  532.             })
  533.         }
  534.     }
  535.     class SettingsBuilder{
  536.         static async open(cfg) {
  537.             const s = new SettingsBuilder(cfg);
  538.             const result = await s.showWindow();
  539.             return result;
  540.         }
  541.         constructor(config) {
  542.             this.config = Object.assign({
  543.                 title: '设置',
  544.                 settings:[]
  545.             },config);
  546.         }
  547.         async showWindow(config = this.config) {
  548.             const copiedConfig = deepClone(config);
  549.             console.log('Cloned:',config,copiedConfig)
  550.             return new Promise(r => {
  551.                 FloatPopup.confirm(copiedConfig.title, domHelper('div', {
  552.                     classlist:'ckui-base',
  553.                     init: el => {
  554.                         for (const comp of copiedConfig.settings) {
  555.                             const r = this.makeComponent(comp);
  556.                             r&&el.appendChild(r);
  557.                         }
  558.                     }
  559.                 }), "保存", "取消").then(result => result?r(copiedConfig):r(config));
  560.             })
  561.         }
  562.         makeComponent(cfg) {
  563.             if (Components.hasOwnProperty(cfg.type)) {
  564.                 return Components[cfg.type](cfg);
  565.             }
  566.         }
  567.     }
  568.     CKUIToolkit.showSettings = SettingsBuilder.open;
  569.  
  570.     unsafeWindow.CKUIToolkit = CKUIToolkit;
  571. })();