☰

CKUIToolkit

A simple settings modal framework.

Questo script non dovrebbe essere installato direttamente. È una libreria per altri script da includere con la chiave // @require https://update.greatest.deepsurf.us/scripts/441653/1625560/CKUIToolkit.js 

  1. // ==UserScript==
  2. // @name         CKUIToolkit
  3. // @namespace    ckylin-script-lib-combined-ui-components
  4. // @version      1.2.4
  5. // @match        http://*
  6. // @match        https://*
  7. // // @require      https://greatest.deepsurf.us/scripts/429720-cktools/code/CKTools.js?version=1029952
  8. // @resource     popjs https://fastly.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.js
  9. // @resource     popcss https://fastly.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.css
  10. // @resource     fpjs https://fastly.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.js
  11. // @resource     fpcss https://fastly.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.modal.css
  12. // @resource     cktools https://greatest.deepsurf.us/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://fastly.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.js'},
  30.         { name: 'popcss', type: 'css', source:'https://fastly.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.css' },
  31.         { name: 'fpjs', type: 'js', source: 'https://fastly.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.js' },
  32.         { name: 'fpcss', type: 'css', source: 'https://fastly.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.modal.css' },
  33.         { name: 'cktools', type: 'js', source: 'https://greatest.deepsurf.us/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. body .ckfp-container{
  37.     /* FloatPanel colors override */
  38.     --page-background: white;
  39.     --page-frontcolor: black;
  40.     --highlight-background: white;
  41.     --highlight-frontcolor: rgb(16, 140, 255);
  42.     --btn-border: #74baff;
  43.     --btn-hover-border: #03a9f4;
  44.     --btn-bg: dodgerblue;
  45.     --btn-hover-bg: #1976d2;
  46.     --btn-fg: white;
  47. }
  48. .ckui-base{
  49.     /* color-schema */
  50.     --ckui-text-color: black;
  51.     --ckui-label-color: rgb(16, 140, 255);
  52.     --ckui-description-color: rgb(92, 92, 92);
  53.     --ckui-input-text-color: rgb(51, 51, 51);
  54.     --ckui-input-bg-color: rgb(255, 255, 255);
  55.     --ckui-input-border-color: rgb(204, 204, 204);
  56.     --ckui-btn-bg-color: rgb(16, 140, 255);
  57.     --ckui-btn-border-color: rgb(16, 140, 255);
  58.     --ckui-btn-text-color: rgb(255, 255, 255);
  59.     --ckui-btn-hover-bg-color: rgb(0, 122, 255);
  60.     --ckui-header-color: rgb(16, 140, 255);
  61.     --ckui-header-border-color: rgb(16, 140, 255);
  62.     --ckui-toggle-hint-color: gray;
  63.     --ckui-input-shadow: rgba(0, 0, 0, 0.075);
  64.     
  65.     /* PopNotify colors override */
  66.     --popnotify-success-bg: rgb(172, 255, 223);
  67.     --popnotify-success-text: rgb(0, 114, 70);
  68.     --popnotify-info-bg: rgb(195, 226, 255);
  69.     --popnotify-info-text: rgb(0, 80, 155);
  70.     --popnotify-error-bg: rgb(255, 196, 196);
  71.     --popnotify-error-text: rgb(255, 66, 66);
  72.     --popnotify-warn-bg: rgb(255, 218, 139);
  73.     --popnotify-warn-text: rgb(177, 94, 0);
  74.     --popnotify-default-bg: white;
  75.     --popnotify-default-text: black;
  76. }
  77. body.ckui-dark .ckfp-container{
  78.     /* FloatPanel colors override */
  79.     --page-background: rgb(40, 40, 40) !important;
  80.     --page-frontcolor: white !important;
  81.     --highlight-background: rgb(89, 89, 89) !important;
  82.     --highlight-frontcolor: rgb(16, 140, 255) !important;
  83.     --btn-border: #74baff !important;
  84.     --btn-hover-border: #03a9f4 !important;
  85.     --btn-bg: dodgerblue !important;
  86.     --btn-hover-bg: #1976d2 !important;
  87.     --btn-fg: rgb(255, 255, 255) !important;
  88. }
  89. .ckui-base.ckui-dark{
  90.     /* color-schema */
  91.     --ckui-text-color: rgb(230, 230, 230);
  92.     --ckui-label-color: rgb(100, 180, 255);
  93.     --ckui-description-color: rgb(160, 160, 160);
  94.     --ckui-input-text-color: rgb(220, 220, 220);
  95.     --ckui-input-bg-color: rgb(45, 45, 45);
  96.     --ckui-input-border-color: rgb(80, 80, 80);
  97.     --ckui-btn-bg-color: rgb(50, 120, 200);
  98.     --ckui-btn-border-color: rgb(50, 120, 200);
  99.     --ckui-btn-text-color: rgb(255, 255, 255);
  100.     --ckui-btn-hover-bg-color: rgb(30, 100, 180);
  101.     --ckui-header-color: rgb(100, 180, 255);
  102.     --ckui-header-border-color: rgb(100, 180, 255);
  103.     --ckui-toggle-hint-color: rgb(140, 140, 140);
  104.     --ckui-input-shadow: rgba(255, 255, 255, 0.1);
  105.     
  106.     /* PopNotify colors override for dark theme */
  107.     --popnotify-success-bg: rgb(30, 80, 50);
  108.     --popnotify-success-text: rgb(150, 255, 200);
  109.     --popnotify-info-bg: rgb(30, 50, 80);
  110.     --popnotify-info-text: rgb(150, 200, 255);
  111.     --popnotify-error-bg: rgb(80, 30, 30);
  112.     --popnotify-error-text: rgb(255, 150, 150);
  113.     --popnotify-warn-bg: rgb(80, 60, 20);
  114.     --popnotify-warn-text: rgb(255, 200, 100);
  115.     --popnotify-default-bg: rgb(50, 50, 50);
  116.     --popnotify-default-text: rgb(230, 230, 230);
  117. }
  118. .ckui-base .ckui-text{
  119.     font-size: 14px;
  120.     line-height: 1.428571429;
  121.     color: var(--ckui-text-color);
  122. }
  123. .ckui-base label{
  124.     display: block;
  125.     color: var(--ckui-label-color);
  126.     padding-top: 12px;
  127. }
  128. .ckui-base .ckui-texttoggle{
  129.     display: block;
  130.     color: var(--ckui-label-color);
  131.     padding-top: 12px;
  132. }
  133. .ckui-base .ckui-texttoggle-container::before{
  134.     display: inline;
  135.     content: "🔹";
  136. }
  137. .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value{
  138.     padding: 0px 6px;
  139.     font-weight: bold;
  140.     -webkit-user-select: none;
  141.     -moz-user-select: none;
  142.     -ms-user-select: none;
  143.     user-select: none;
  144.     cursor: pointer;
  145. }
  146. .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value::before{
  147.     content: "["
  148. }
  149. .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value::after{
  150.     content: "]"
  151. }
  152. .ckui-base .ckui-texttoggle-container::after{
  153.     display: inline;
  154.     content: "(点击切换)";
  155.     color: var(--ckui-toggle-hint-color);
  156.     font-size: 12px;
  157.     font-style: italic;
  158.     padding-left: 12px;
  159. }
  160. .ckui-base .ckui-description{
  161.     display: block;
  162.     color: var(--ckui-description-color);
  163.     font-size: small;
  164.     font-style: italic;
  165. }
  166. .ckui-base .ckui-toggle{
  167.     padding-top: 12px;
  168. }
  169. .ckui-base label.ckui-inline-label{
  170.     display: inline;
  171.     line-height: 18px;
  172. }
  173. .ckui-base .ckui-input input{
  174.     display: block;
  175.     width: calc(100% - 28px);
  176.     height: 34px;
  177.     padding: 1px 3px;
  178.     margin: 3px 6px;
  179.     font-size: 14px;
  180.     line-height: 1.428571429;
  181.     color: var(--ckui-input-text-color);
  182.     background-color: var(--ckui-input-bg-color);
  183.     border: 1px solid var(--ckui-input-border-color);
  184.     border-radius: 4px;
  185.     box-shadow: inset 0 1px 1px var(--ckui-input-shadow);
  186. }
  187. .ckui-base .ckui-inputnumber input{
  188.     display: block;
  189.     width: calc(100% - 36px);
  190.     height: 34px;
  191.     padding: 1px 12px;
  192.     margin: 3px 6px;
  193.     font-size: 14px;
  194.     line-height: 1.428571429;
  195.     color: var(--ckui-input-text-color);
  196.     background-color: var(--ckui-input-bg-color);
  197.     border: 1px solid var(--ckui-input-border-color);
  198.     border-radius: 4px;
  199.     box-shadow: inset 0 1px 1px var(--ckui-input-shadow);
  200. }
  201. .ckui-base .ckui-inputarea textarea{
  202.     display: block;
  203.     width: calc(100% - 28px);
  204.     height: 100px;
  205.     padding: 6px 6px;
  206.     margin: 3px 6px;
  207.     font-size: 14px;
  208.     line-height: 1.428571429;
  209.     color: var(--ckui-input-text-color);
  210.     background-color: var(--ckui-input-bg-color);
  211.     border: 1px solid var(--ckui-input-border-color);
  212.     border-radius: 4px;
  213.     box-shadow: inset 0 1px 1px var(--ckui-input-shadow);
  214. }
  215. .ckui-base .ckui-select select{
  216.     display: block;
  217.     width: calc(100% - 28px);
  218.     height: 34px;
  219.     padding: 6px 6px;
  220.     margin: 3px 6px;
  221.     font-size: 14px;
  222.     line-height: 1.428571429;
  223.     color: var(--ckui-input-text-color);
  224.     background-color: var(--ckui-input-bg-color);
  225.     border: 1px solid var(--ckui-input-border-color);
  226.     border-radius: 4px;
  227.     box-shadow: inset 0 1px 1px var(--ckui-input-shadow);
  228. }
  229. .ckui-base .ckui-select select option{
  230.     font-size: 16px;
  231.     line-height: 1.428571429;
  232.     color: var(--ckui-input-text-color);
  233. }
  234. .ckui-base .ckui-header::before{
  235.     content: "💠";
  236. }
  237. .ckui-base .ckui-header{
  238.     width: calc(100% - 8px);
  239.     display: block;
  240.     color: var(--ckui-header-color);
  241.     padding: 12px 3px;
  242.     border-bottom: 2px solid var(--ckui-header-border-color);
  243.     margin: 12px 0px 12px 0px;
  244. }
  245. .ckui-base .ckui-btns{
  246.     display: flex;
  247.     flex-wrap: wrap;
  248.     flex-direction: row;
  249. }
  250. .ckui-base .ckui-btn{
  251.     display: block;
  252.     width: calc(50% - 8px);
  253.     height: 40px;
  254.     padding: 6px 12px;
  255.     margin: 6px;
  256.     font-size: 14px;
  257.     line-height: 1.428571429;
  258.     color: var(--ckui-btn-text-color);
  259.     background-color: var(--ckui-btn-bg-color);
  260.     border: 1px solid var(--ckui-btn-border-color);
  261.     border-radius: 4px;
  262.     box-shadow: inset 0 1px 1px var(--ckui-input-shadow);
  263. }
  264. .ckui-base .ckui-btn:hover{
  265.     background-color: var(--ckui-btn-hover-bg-color);
  266. }
  267. .ckui-base .ckui-btns .ckui-btn{
  268.     flex: 1;
  269. }
  270.  
  271. /* PopNotify theme override */
  272. .ckui-base div.popNotifyUnitFrame {
  273.     background: var(--popnotify-default-bg) !important;
  274. }
  275. .ckui-base div.popNotifyUnitFrame .popNotifyUnitTitle,
  276. .ckui-base div.popNotifyUnitFrame .popNotifyUnitContent {
  277.     color: var(--popnotify-default-text) !important;
  278. }
  279. .ckui-base div.popNotifyUnitFrame .popNotifyUnitBar {
  280.     background: var(--popnotify-default-text) !important;
  281. }
  282.  
  283. .ckui-base .popStyle-success {
  284.     background: var(--popnotify-success-bg) !important;
  285. }
  286. .ckui-base .popStyle-success .popNotifyUnitTitle,
  287. .ckui-base .popStyle-success .popNotifyUnitContent {
  288.     color: var(--popnotify-success-text) !important;
  289. }
  290. .ckui-base .popStyle-success .popNotifyUnitBar{
  291.     background: var(--popnotify-success-text) !important;
  292. }
  293.  
  294. .ckui-base .popStyle-info {
  295.     background: var(--popnotify-info-bg) !important;
  296. }
  297. .ckui-base .popStyle-info .popNotifyUnitTitle,
  298. .ckui-base .popStyle-info .popNotifyUnitContent {
  299.     color: var(--popnotify-info-text) !important;
  300. }
  301. .ckui-base .popStyle-info .popNotifyUnitBar{
  302.     background: var(--popnotify-info-text) !important;
  303. }
  304.  
  305. .ckui-base .popStyle-error {
  306.     background: var(--popnotify-error-bg) !important;
  307. }
  308. .ckui-base .popStyle-error .popNotifyUnitTitle,
  309. .ckui-base .popStyle-error .popNotifyUnitContent {
  310.     color: var(--popnotify-error-text) !important;
  311. }
  312. .ckui-base .popStyle-error .popNotifyUnitBar{
  313.     background: var(--popnotify-error-text) !important;
  314. }
  315.  
  316. .ckui-base .popStyle-warn {
  317.     background: var(--popnotify-warn-bg) !important;
  318. }
  319. .ckui-base .popStyle-warn .popNotifyUnitTitle,
  320. .ckui-base .popStyle-warn .popNotifyUnitContent {
  321.     color: var(--popnotify-warn-text) !important;
  322. }
  323. .ckui-base .popStyle-warn .popNotifyUnitBar{
  324.     background: var(--popnotify-warn-text) !important;
  325. }
  326. ` }
  327.     ]
  328.     async function applyResource() {
  329.         resloop: for (let res of resourceList) {
  330.             if (true||!document.querySelector("#" + res.name)) {
  331.                 let el;
  332.                 switch (res.type) {
  333.                     case 'js':
  334.                     case 'rawjs':
  335.                         el = document.createElement("script");
  336.                         break;
  337.                     case 'css':
  338.                     case 'rawcss':
  339.                         el = document.createElement("style");
  340.                         break;
  341.                     default:
  342.                         console.error('[CKUI]','Err:unknown type', res);
  343.                         continue resloop;
  344.                 }
  345.                 el.id = res.name;
  346.                 let result = res.type.startsWith('raw') ? res.content : GM_getResourceText(res.name);
  347.                 if (result == null || result == 'null' || typeof result === 'undefined') {
  348.                     console.info('[CKUI]', 'Alternative method is using:',res.type,res.name);
  349.                     if (!res.source) {
  350.                         console.info('[CKUI]', 'Failed to apply:',res.type,res.name);
  351.                         continue resloop;
  352.                     }
  353.                     try {
  354.                         let response = await fetch(res.source);
  355.                         if (!response.ok) {
  356.                             console.info('[CKUI]', 'Failed to apply:',res.type,res.name,response.statusText);
  357.                             continue resloop;
  358.                         }
  359.                         result = await response.text();
  360.                     } catch (e) {
  361.                         console.info('[CKUI]', 'Failed to apply:',res.type,res.name,e);
  362.                         continue resloop;
  363.                     }
  364.                 }
  365.                 el.appendChild(document.createTextNode(result));
  366.                 document.head.appendChild(el);
  367.                 console.info('[CKUI]', 'Applied:',res.type,res.name);
  368.             }
  369.         }
  370.         console.info('[CKUI]', 'Resources all applied');
  371.     }
  372.     
  373.     let deepClone = (obj)=>{
  374.         let newObject = {};
  375.         if (Array.isArray(obj)) {
  376.             newObject = [];
  377.             for (let i = 0; i < obj.length; i++) {
  378.                 newObject.push(deepClone(obj[i]));
  379.             }
  380.             return newObject;
  381.         }
  382.         Object.keys(obj).map(key => {
  383.             if (typeof obj[key] === 'object') {
  384.                 newObject[key] = deepClone(obj[key]);
  385.             } else {
  386.                 newObject[key] = obj[key];
  387.             }
  388.         });
  389.         return newObject;
  390.     };
  391.  
  392.     let domHelper = (...args) => {
  393.         return CKTools.domHelper(...args);
  394.     }
  395.  
  396.     const CKUIToolkit = {};
  397.     class CompUtils{
  398.         static getId(name) {
  399.             return 'ckui-settings-' + name;
  400.         }
  401.         static getClass(type) {
  402.             return 'ckui-' + type;
  403.         }
  404.         static runChecker(checker = null,...args) {
  405.             if (checker && typeof (checker) == 'function') {
  406.                 try {
  407.                     const result = checker(...args);
  408.                     return !!result;
  409.                 } catch (e) {
  410.                     console.log('checker errored', e);
  411.                     return false;
  412.                 }
  413.             } else return true;
  414.         }
  415.         static cfgValidator(cfg, keystr='') {
  416.             let keys = keystr.split(',').map(el => el.trim()).filter(el => el.length > 0);
  417.             keys.concat(['name', 'type']);
  418.             if (!cfg) return false;
  419.             for (let key of keys) {
  420.                 if (cfg[key]===undefined) return false;
  421.             }
  422.             return true;
  423.         }
  424.     }
  425.     class Components{
  426.         static text(cfg) {
  427.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  428.             return domHelper('div', {
  429.                 id: CompUtils.getId(cfg.name),
  430.                 classlist: CompUtils.getClass(cfg.type),
  431.                 html: cfg.label
  432.             });
  433.         }
  434.         static header(cfg) {
  435.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  436.             return domHelper('div', {
  437.                 id: CompUtils.getId(cfg.name),
  438.                 classlist: CompUtils.getClass(cfg.type),
  439.                 html: cfg.label
  440.             });
  441.         }
  442.         static toggle(cfg) {
  443.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  444.             const customId = 'toggle'+CKTools.GUID.getShort();
  445.             return domHelper('div', {
  446.                 id: CompUtils.getId(cfg.name),
  447.                 classlist: CompUtils.getClass(cfg.type),
  448.                 childs: [
  449.                     domHelper('input', {
  450.                         id: customId,
  451.                         attr: {
  452.                             type: 'checkbox',
  453.                             checked: cfg.value??false
  454.                         },
  455.                         on: {
  456.                             change: (e) => {
  457.                                 const value = !!(e.target?.checked);
  458.                                 if (CompUtils.runChecker(cfg.checker,value)) cfg.value = value;
  459.                                 // else  TODO: error tip
  460.                             }
  461.                         }
  462.                     }),
  463.                     domHelper('label', {
  464.                         attr: {
  465.                             for: customId
  466.                         },
  467.                         classlist:'ckui-inline-label',
  468.                         html: cfg.label
  469.                     }),
  470.                     domHelper('span', {
  471.                         classList: 'ckui-description',
  472.                         html: cfg.description??''
  473.                     }),
  474.                 ]
  475.             });
  476.         }
  477.         static input(cfg) {
  478.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  479.             return domHelper('div', {
  480.                 id: CompUtils.getId(cfg.name),
  481.                 classlist: CompUtils.getClass(cfg.type),
  482.                 childs: [
  483.                     domHelper('label', {
  484.                         html: cfg.label
  485.                     }),
  486.                     domHelper('input', {
  487.                         attr: {
  488.                             value: cfg.value??''
  489.                         },
  490.                         on: {
  491.                             keyup: CKTools.debounce((e) => {
  492.                                 const value = e.target?.value;
  493.                                 if (CompUtils.runChecker(cfg.checker,value)) cfg.value = value;
  494.                                 // else  TODO: error tip
  495.                             })
  496.                         }
  497.                     }),
  498.                     domHelper('span', {
  499.                         classList: 'ckui-description',
  500.                         html: cfg.description??''
  501.                     }),
  502.                 ]
  503.             });
  504.         }
  505.         static inputarea(cfg) {
  506.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  507.             return domHelper('div', {
  508.                 id: CompUtils.getId(cfg.name),
  509.                 classlist: CompUtils.getClass(cfg.type),
  510.                 childs: [
  511.                     domHelper('label', {
  512.                         html: cfg.label
  513.                     }),
  514.                     domHelper('textarea', {
  515.                         attr: {
  516.                             value: cfg.value??''//not work until it put into dom
  517.                         },
  518.                         html:cfg.value??'',
  519.                         on: {
  520.                             keyup: CKTools.debounce((e) => {
  521.                                 const value = e.target?.value ?? e.target.innerHTMl;
  522.                                 console.log('inputarea', value,e.target?.value,e.target.innerHTMl);
  523.                                 if (CompUtils.runChecker(cfg.checker, value)) cfg.value = value;
  524.                                 else console.warn('checker refused');
  525.                                 // else  TODO: error tip
  526.                             })
  527.                         }
  528.                     }),
  529.                     domHelper('span', {
  530.                         classList: 'ckui-description',
  531.                         html: cfg.description??''
  532.                     }),
  533.                 ]
  534.             });
  535.         }
  536.         static inputnumber(cfg) {
  537.             if (!CompUtils.cfgValidator(cfg, 'label,min,max,step')) return;
  538.             return domHelper('div', {
  539.                 id: CompUtils.getId(cfg.name),
  540.                 classlist: CompUtils.getClass(cfg.type),
  541.                 childs: [
  542.                     domHelper('label', {
  543.                         html: cfg.label
  544.                     }),
  545.                     domHelper('input', {
  546.                         attr: {
  547.                             type: 'number',
  548.                             value: isNaN(cfg.value)?undefined:+cfg.value,
  549.                             min: cfg.min,
  550.                             max: cfg.max,
  551.                             step: cfg.step
  552.                         },
  553.                         on: {
  554.                             change: (e) => {
  555.                                 let value = e.target?.value;
  556.                                 if (!isNaN(value)) {
  557.                                     value = +value;
  558.                                 }
  559.                                 if (CompUtils.runChecker(cfg.checker, value)) {
  560.                                     console.log('updated:', value);
  561.                                     cfg.value = value;
  562.                                 } else {
  563.                                     console.log('refused to update value', value);
  564.                                 }
  565.                                 // else  TODO: error tip
  566.                             }
  567.                         }
  568.                     }),
  569.                     domHelper('span', {
  570.                         classList: 'ckui-description',
  571.                         html: cfg.description??''
  572.                     }),
  573.                 ]
  574.             });
  575.         }
  576.         static select(cfg) {
  577.             if (!CompUtils.cfgValidator(cfg, 'label,options')) return;
  578.             return domHelper('div', {
  579.                 id: CompUtils.getId(cfg.name),
  580.                 classlist: CompUtils.getClass(cfg.type),
  581.                 childs: [
  582.                     domHelper('label', {
  583.                         html: cfg.label
  584.                     }),
  585.                     domHelper('select', {
  586.                         init: select => {
  587.                             for (let option of cfg.options) {
  588.                                 console.log('select option', option.opt,option.value,cfg.value == option.value);
  589.                                 select.appendChild(domHelper('option', {
  590.                                     attr: {
  591.                                         value: option.value,
  592.                                     },
  593.                                     html: option.opt,
  594.                                     init: optionel => {
  595.                                         if (cfg.value == option.value) optionel.setAttribute('selected', true);
  596.                                     }
  597.                                 }));
  598.                             }
  599.                         },
  600.                         on: {
  601.                             change: (e) => {
  602.                                 const value = e.target?.value??'';
  603.                                 if (CompUtils.runChecker(cfg.checker,value)) cfg.value = value;
  604.                                 // else  TODO: error tip
  605.                             }
  606.                         }
  607.                     }),
  608.                     domHelper('span', {
  609.                         classList: 'ckui-description',
  610.                         html: cfg.description??''
  611.                     }),
  612.                 ]
  613.             });
  614.         }
  615.         static texttoggle(cfg) {
  616.             if (!CompUtils.cfgValidator(cfg, 'before,on,off,after')) return;
  617.             return domHelper('div', {
  618.                 id: CompUtils.getId(cfg.name),
  619.                 classlist: CompUtils.getClass(cfg.type),
  620.                 childs: [
  621.                     domHelper('div', {
  622.                         classList:'ckui-texttoggle-container',
  623.                         childs: [
  624.                             domHelper('span', { text: cfg.before }),
  625.                             domHelper('span', {classList:'ckui-texttoggle-value',text:'...'}),
  626.                             domHelper('span', {text:cfg.after}),
  627.                         ],
  628.                         init: div => {
  629.                             const getText = () => cfg.value ? cfg.on : cfg.off;
  630.                             const setValue = (value) => {
  631.                                 cfg.value = !!value;
  632.                                 div.querySelector('.ckui-texttoggle-value').innerText = getText();
  633.                             }
  634.                             const toggleValue = () => setValue(!cfg.value);
  635.                             div.addEventListener('click', toggleValue);
  636.                             setTimeout(()=>setValue(cfg.value),50);
  637.                         }
  638.                     }),
  639.                     domHelper('span', {
  640.                         classList: 'ckui-description',
  641.                         html: cfg.description??''
  642.                     }),
  643.                 ]
  644.             });
  645.         }
  646.         static raw(cfg) {
  647.             if (!CompUtils.cfgValidator(cfg, 'contents')) return;
  648.             return domHelper('div', {
  649.                 id: CompUtils.getId(cfg.name),
  650.                 classlist: CompUtils.getClass(cfg.type),
  651.                 childs:domHelper(cfg.contents)
  652.             })
  653.         }
  654.         static window(cfg,type) {
  655.             if (!CompUtils.cfgValidator(cfg, 'label,config')) return;
  656.             return domHelper('div', {
  657.                 id: CompUtils.getId(cfg.name),
  658.                 classlist: CompUtils.getClass(cfg.type),
  659.                 childs: [
  660.                     domHelper('button', {
  661.                         classList: 'ckui-btn',
  662.                         html: cfg.label,
  663.                         on: {
  664.                             click: async (e) => {
  665.                                 let subres = {};
  666.                                 if (type == 'confirm') subres = await SettingsBuilder.open(cfg.config);
  667.                                 else if (type == 'modal') subres = await SettingsBuilder.modal(cfg.config);
  668.                                 else return;
  669.                                 console.log('subres:', subres)
  670.                                 Object.assign(cfg.config, subres);
  671.                             }
  672.                         }
  673.                     })
  674.                 ]
  675.             })
  676.         }
  677.         static btns(cfg) {
  678.             if (!CompUtils.cfgValidator(cfg, 'btns')) return;
  679.             return domHelper('div', {
  680.                 id: CompUtils.getId(cfg.name),
  681.                 classlist: CompUtils.getClass(cfg.type),
  682.                 init: el => {
  683.                     for(let btn of cfg.btns) {
  684.                         el.appendChild(domHelper('button', {
  685.                             classList: 'ckui-btn',
  686.                             html: btn.label,
  687.                             on: {
  688.                                 click: async (e) => {
  689.                                     await btn.onclick?.();
  690.                                 }
  691.                             }
  692.                         }));
  693.                     }
  694.                 }
  695.             })
  696.         }
  697.     }
  698.     class SettingsBuilder{
  699.         static builder(cfg) {
  700.             return new SettingsBuilder(cfg);
  701.         }
  702.         static async open(cfg, values = null) {
  703.             const s = new SettingsBuilder(cfg);
  704.             if(values) s.setValues(values);
  705.             const result = await s.showWindow();
  706.             return result;
  707.         }
  708.         static async modal(cfg, values = null) {
  709.             const s = new SettingsBuilder(cfg);
  710.             if(values) s.setValues(values);
  711.             const result = await s.showAlertWindow();
  712.             return result;
  713.         }
  714.         constructor(config) {
  715.             this.config = Object.assign({
  716.                 title: '设置',
  717.                 theme: undefined,
  718.                 settings:[]
  719.             },config);
  720.         }
  721.         static getThemeVariable(){
  722.            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  723.             return prefersDark ? 'dark' : 'light';
  724.         }
  725.         findSettingObjectByName(key = '',cfg = this.config) {
  726.             const settings = cfg.settings;
  727.             for (const setting of settings) {
  728.                 if(setting.name == key) return setting;
  729.             }
  730.             const subSettings = settings.filter(el => el.type == 'window');
  731.             if (!subSettings.length) return null;
  732.             for (const setting of subSettings) {
  733.                 const subresult = this.findSettingObjectByName(key, setting);
  734.                 if(subresult) return subresult;
  735.             }
  736.             return null;
  737.         }
  738.         setValues(settingsValues = {}) {
  739.             for (let vk of Object.keys(settingsValues)) {
  740.                 const setting = this.findSettingObjectByName(vk);
  741.                 if (setting) setting.value = settingsValues[vk];
  742.                 else console.warn('[CKUI]', `${vk} not found in scheme`);
  743.             }
  744.         }
  745.         flatValues(cfg) {
  746.             const cfgs = {};
  747.             if(cfg.settings){
  748.                 cfg = cfg.settings;
  749.             }
  750.             if(!Array.isArray(cfg)){
  751.                 return cfgs;
  752.             }
  753.             for(const s of cfg){
  754.                 if(!s.name || !s.type) {
  755.                     console.warn('[CKUI]', 'missing name or type',s);
  756.                     continue;
  757.                 }
  758.                 switch(s.type){
  759.                     case "toggle":
  760.                     case "texttoggle":
  761.                         cfgs[s.name] = !!s.value;
  762.                         break;
  763.                     case "select":
  764.                     case "input":
  765.                     case "inputarea":
  766.                         cfgs[s.name] = s.value?s.value+"":"";
  767.                         break;
  768.                     case "inputnumber":
  769.                         if(!isNaN(s.value)) cfgs[s.name] = +s.value;
  770.                         break;
  771.                     case "window":
  772.                         {
  773.                             const sub = this.flatValues(s.config);
  774.                             Object.assign(cfgs,sub);
  775.                         }
  776.                         break;
  777.                     default:
  778.                         console.log('[CKUI]','unrecognized type',s.type);
  779.                 }
  780.             }
  781.             return cfgs;
  782.         }
  783.         async showAlertWindow(config = this.config) {
  784.             const copiedConfig = deepClone(config);
  785.             return new Promise(r => {
  786.                 const theme = (copiedConfig.theme??SettingsBuilder.getThemeVariable());
  787.                 document.body.classList.toggle('ckui-dark', theme == 'dark');
  788.                 FloatWindow.alert(copiedConfig.title, domHelper('div', {
  789.                     classlist:'ckui-base ckui-'+theme,
  790.                     init: el => {
  791.                         for (const comp of copiedConfig.settings) {
  792.                             const r = this.makeComponent(comp,'alert');
  793.                             r&&el.appendChild(r);
  794.                         }
  795.                     }
  796.                 }), copiedConfig.btnName ?? "确定").then(() => {
  797.                     r(this.flatValues(copiedConfig));
  798.                 });
  799.             })
  800.         }
  801.         async showWindow(config = this.config) {
  802.             const copiedConfig = deepClone(config);
  803.             return new Promise(r => {
  804.                 const theme = (copiedConfig.theme??SettingsBuilder.getThemeVariable());
  805.                 document.body.classList.toggle('ckui-dark', theme == 'dark');
  806.                 FloatWindow.confirm(copiedConfig.title, domHelper('div', {
  807.                     classlist:'ckui-base ckui-'+theme,
  808.                     init: el => {
  809.                         for (const comp of copiedConfig.settings) {
  810.                             const r = this.makeComponent(comp);
  811.                             r&&el.appendChild(r);
  812.                         }
  813.                     }
  814.                 }), copiedConfig.saveBtn??"保存", copiedConfig.cancelBtn??"取消").then(result => {
  815.                     console.log('[CKUI]', 'Save?', result);
  816.                     result ? r(this.flatValues(copiedConfig)) : r({});
  817.                 });
  818.             })
  819.         }
  820.         makeComponent(cfg, type='confirm') {
  821.             if (Components.hasOwnProperty(cfg.type)) {
  822.                 return Components[cfg.type](cfg,type);
  823.             }
  824.         }
  825.     }
  826.     CKUIToolkit.showSettings = SettingsBuilder.open;
  827.     CKUIToolkit.showModal = SettingsBuilder.modal;
  828.     CKUIToolkit.builder = SettingsBuilder.builder;
  829.  
  830.     unsafeWindow.CKUIToolkit = CKUIToolkit;
  831.     
  832.     applyResource().then(() => {unsafeWindow.CKUIToolkit_loaded = true; unsafeWindow.CKUIToolkit_onload?.();});
  833. })();