☰

CKUIToolkit

A simple settings modal framework.

当前为 2022-03-20 提交的版本，查看 最新版本。

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