☰

CKUIToolkit

A simple settings modal framework.

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greatest.deepsurf.us/scripts/441653/1625560/CKUIToolkit.js

Cara pemasangan

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

Cara pemasangan

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!) 

  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. })();