☰

UIModules

Modules for UI constructing

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/384232/704113/UIModules.js 

  1. // ==UserScript==
  2. // @name           UIModules
  3. // @name:en        UIModules
  4. // @description    Modules for UI constructing
  5. // @description:en Modules for UI constructing
  6. // @namespace      https://gf.qytechs.cn/users/174399
  7. // @version        0.1.0
  8. // @include        *://*.mozilla.org/*
  9. // @run-at         document-start
  10. // @grant          none
  11. // ==/UserScript==
  12.  
  13. (function(window) {
  14.     'use strict';
  15.     const listSymbol = Symbol('list');
  16.     const modeSymbol = Symbol('mode');
  17.     const valueSymbol = Symbol('value');
  18.     const fn = {};
  19.     fn.toJSON = function() {
  20.         return {
  21.             __function_body__: this.toString().replace(/\s+/g, ' '),
  22.             __function_name__: this.name,
  23.             __function_length__: this.length,
  24.          };
  25.     };
  26.     function reviver(key, value) {
  27.         if (key === '__function_body__') {
  28.             return new Function('return ' + value)();
  29.         }
  30.         if (typeof value === 'object' && typeof value.__function_body__ === 'function') {
  31.             return value.__function_body__;
  32.         }
  33.         return value;
  34.     }
  35.     /*
  36.     const interfaceTemplate = {
  37.         title: 'template interface',
  38.         version: '0.1.0',
  39.         mode: 'normal',
  40.         tabs: {
  41.             data: {
  42.                 'general': {},
  43.             },
  44.             order: ['general'],
  45.         },
  46.     };
  47.     const tabDataTemplate = {
  48.         name: 'general',
  49.         label: 'General',
  50.         options: {
  51.             data: {
  52.                 'option-name': {},
  53.             },
  54.             order: ['option-name'],
  55.         },
  56.     };
  57.     const optionDataTemplate = {
  58.         name: 'option-name',
  59.         label: 'Option name',
  60.         value: 'option-value',
  61.         description: 'description text (optional)',
  62.         type: 'string',
  63.         mode: 'normal',
  64.         tab: 'general',
  65.     };
  66.     */
  67.     /*
  68.     <div class="interface-ui">
  69.         <div class="tabs-ui tabs-ui-active">
  70.             <div class="tab-ui tab-ui-active" data-name="{tabUI.name}">
  71.                 <div class="tab-ui-label">
  72.                     <span>{tabUI.label}</span>
  73.                 </div>
  74.                 <div class="tab-ui-data">
  75.                     <input type="radio" name="file-size" data-key="10G" value="10G" />
  76.                     <input type="radio" name="file-size" data-key="1G"  value="1G" />
  77.                     <input type="radio" name="file-size" data-key="1M"  value="1M" />
  78.                     <input type="radio" name="file-size" data-key="1Kb"  value="1024" />
  79.                     <input type="text" name="file-name" value="foo.txt" />
  80.                 </div>
  81.             </div>
  82.             <div class="tab-ui"/>
  83.         </div>
  84.     </div>
  85.     */
  86.     function dummy() {}
  87.     function Mode(name = 'normal', label = '', onChange = dummy) {
  88.         let nam;
  89.         Object.defineProperty(this, 'name', { 
  90.             get: function() { return nam; },
  91.             set: function(n) {
  92.                 try {
  93.                     Mode.validateName(n);
  94.                     nam = n;
  95.                     onChange(null, n);
  96.                 } catch (err) {
  97.                     onChange(err);
  98.                 }
  99.             },
  100.             enumerable: true,
  101.         });
  102.         this.name = name;
  103.         this.label = label || name;
  104.     }
  105.     Object.defineProperties(Mode, {
  106.         'NORMAL': {
  107.             value: 'normal',
  108.             enumerable: true,
  109.         },
  110.         'ADVANCED': {
  111.             value: 'advanced',
  112.             enumerable: true,
  113.         },
  114.         'NAMES': {
  115.             get: function(){
  116.                 return [Mode.NORMAL, Mode.ADVANCED];
  117.             },
  118.             enumerable: true,
  119.         },
  120.     });
  121.     Mode.validateName = function(name) {
  122.         switch (name) {
  123.             case Mode.NORMAL:
  124.             case Mode.ADVANCED:
  125.                 return true;
  126.             default:
  127.                 throw new Error('invalid mode name (' + name + '), valid names = [' + Mode.NAMES.join(', ') + ']');
  128.         }
  129.     };
  130.     Mode.descriptor = {
  131.         get: function() { return this[modeSymbol]; },
  132.         set: function(mode) {
  133.             try {
  134.                 Mode.validateName(mode);
  135.                 this[modeSymbol] = mode;
  136.             } catch (error) {
  137.                 if (typeof this.onChange === 'function') {
  138.                     this.onChange(error);
  139.                 } else {
  140.                     console.error('mode validation: ', error);
  141.                 }
  142.             }
  143.         },
  144.         enumerable: true,
  145.     };
  146.     function Datum({
  147.         mode = Mode.NORMAL,
  148.         label,
  149.         key,
  150.         name,
  151.         description,
  152.         onChange = dummy,
  153.         validate = dummy,
  154.         setter = function(v) { return v; },
  155.     } = {}) {
  156.         console.log('new Datum() -> args: ', JSON.stringify(arguments[0], null, 2));
  157.         this.onChange = onChange;
  158.         this.validate = validate;
  159.         this.setter = setter;
  160.         this.label = label;
  161.         this.description = description;
  162.         this.mode = mode;
  163.         Object.defineProperty(this, 'name', { value: name });
  164.         Object.defineProperty(this, 'key', { value: (key || name) });
  165.     }
  166.     Datum.descriptor = {
  167.         get: function(){ return this[valueSymbol]; },
  168.         set: function(val) {
  169.             try {
  170.                 this.validate(val);
  171.                 this[valueSymbol] = this.setter(val);
  172.                 this.onChange(null, this[valueSymbol], val);
  173.             } catch (error) {
  174.                 this.onChange(error);
  175.             }
  176.         },
  177.         enumerable: true,
  178.     };
  179.     Object.defineProperty(Datum.prototype, 'mode',  extend({}, Mode.descriptor));
  180.     Datum.prototype.toJSON = function() {
  181.         const { mode, name, label, description, key } = this;
  182.         return { mode, name, label, description, key };
  183.     };
  184.     Datum.prototype.assign = function(item, checkName = false) {
  185.         if (!item || item === this) {
  186.             return this;
  187.         }
  188.         const {
  189.             key,
  190.             name,
  191.             validate = this.validate,
  192.             onChange = this.onChange,
  193.             label = this.label,
  194.             description = this.description,
  195.         } = item;
  196.         if (name !== this.name && checkName) {
  197.             throw new Error('In assign (' + this.TYPE + ', name does not match, expected "' + this.name + '", but got "' + name + '"');
  198.         }
  199.         this.validate = validate;
  200.         this.onChange = onChange;
  201.         this.label = label;
  202.         this.description = description;
  203.         return this;
  204.     };
  205.     function Input({
  206.         mode = Mode.NORMAL,
  207.         label,
  208.         name,
  209.         key,
  210.         value,
  211.         description,
  212.         type,
  213.         onChange,
  214.         validate,
  215.         setter,
  216.     } = {}) {
  217.         this.index = Input.index++;
  218.         console.log('new Input() -> args: ', JSON.stringify(arguments[0], null, 2));
  219.         Datum.call(this, { mode, label, name, key, description, onChange, validate, setter });
  220.         Object.defineProperty(this, 'value', extend({}, Datum.descriptor));
  221.         Object.defineProperty(this, 'tag', { value: 'input' });
  222.         let _type;
  223.         Object.defineProperty(this, 'type', {
  224.             get: function(){ return _type; },
  225.             set: function(t) {
  226.                 if (Input.TYPES.indexOf(t) === -1) {
  227.                     throw new TypeError('invalid input type, expected one of ' + JSON.stringify(Input.TYPES) + ', but got ' + t);
  228.                 }
  229.                 _type = t;
  230.             },
  231.             enumerable: true,
  232.         });
  233.         this.type = type;
  234.         this.value = value;
  235.     }
  236.     Input.index = 0;
  237.     Input.TYPES = ['number', 'text', 'checkbox', 'date', 'email', 'radio', 'tel', 'time'];
  238.     Object.defineProperty(Input.prototype, 'mode',  extend({}, Mode.descriptor));
  239.     Input.parse = function(item){
  240.         if (item instanceof Input) {
  241.             return item;
  242.         }
  243.         if (typeof item === 'object') {
  244.             return new Input(item);
  245.         }
  246.         return new Input();
  247.     };
  248.     Input.prototype.toJSON = function() {
  249.         const { value, type } = this;
  250.         return extend({ value, type }, Datum.prototype.toJSON.call(this));
  251.     };
  252.     Input.prototype.toHTML = function() {
  253.         const div = document.createElement('div');
  254.         const elem = document.createElement('input');
  255.         elem.setAttribute('type', this.type);
  256.         elem.setAttribute('value', this.value);
  257.         elem.setAttribute('name', this.name);
  258.         elem.setAttribute('data-key', this.key);
  259.         const id = this.name + '-' + (this.key === this.name ? this.globalIndex : this.key);
  260.         elem.setAttribute('id', id);
  261.         elem.setAttribute('title', this.description);
  262.         div.appendChild(elem);
  263.         return div.firstElementChild;
  264.     };
  265.     Input.prototype.assign = function(item, checkName = false) {
  266.         if (!item || item === this) {
  267.             return this;
  268.         }
  269.         Datum.prototype.assign.call(this, item, checkName);
  270.         const { value = this.value } = item;
  271.         this.value = value;
  272.         return this;
  273.     };
  274.     
  275.     function Option({
  276.         label,
  277.         name,
  278.         key,
  279.         value,
  280.         description,
  281.         onChange,
  282.         validate,
  283.         setter,
  284.     } = {}) {
  285.         this.globalIndex = Option.index++;
  286.         console.log('new Option() -> args: ', JSON.stringify(arguments[0], null, 2));
  287.         Datum.call(this, { label, name, key, description, onChange, validate, setter });
  288.         Object.defineProperty(this, 'value', extend({}, Datum.descriptor));
  289.         Object.defineProperty(this, 'tag', { value: 'option' });
  290.         this.value = value;
  291.     }
  292.     Object.defineProperty(Option.prototype, 'mode',  extend({}, Mode.descriptor));
  293.     Option.parse = function(item){
  294.         if (item instanceof Option) {
  295.             return item;
  296.         }
  297.         if (typeof item === 'object') {
  298.             return new Option(item);
  299.         }
  300.         return new Option();
  301.     };
  302.     Option.prototype.toJSON = function() {
  303.         const { value, type } = this;
  304.         return extend({ value, type }, Datum.prototype.toJSON.call(this));
  305.     };
  306.     Option.index = 0;
  307.     Option.prototype.toHTML = function() {
  308.         const div = document.createElement('div');
  309.         const elem = document.createElement('option');
  310.         elem.setAttribute('value', this.value);
  311.         elem.setAttribute('name', this.name);
  312.         elem.setAttribute('data-key', this.key);
  313.         const id = this.name + '-' + (this.key === this.name ? this.globalIndex : this.key);
  314.         elem.setAttribute('id', id);
  315.         elem.setAttribute('title', this.description);
  316.         div.appendChild(elem);
  317.         return div.firstElementChild;
  318.     };
  319.     Option.prototype.assign = function(item, checkName = false) {
  320.         if (!item || item === this) {
  321.             return this;
  322.         }
  323.         Datum.prototype.assign.call(this, item, checkName);
  324.         const { value = this.value } = item;
  325.         this.value = value;
  326.         return this;
  327.     };
  328.     
  329.     function List(Item = Input, itemKey = 'name', itemDefaults = {}) {
  330.         Object.defineProperty(this, 'Item', { value: Item });
  331.         this.data = {};
  332.         this.order = [];
  333.         this.itemDefaults = itemDefaults;
  334.         List.validateItemKey(itemKey);
  335.         Object.defineProperty(this, 'itemKey', { value: itemKey });
  336.     }
  337.     List.ITEM_KEYS = ['key', 'name'];
  338.     List.validateItemKey = function(key) {
  339.         if (List.ITEM_KEYS.indexOf(key) === -1) {
  340.             throw new Error('Invalid key property name, expected ' + JSON.stringify(List.ITEM_KEYS) + ', but got ' + key + ' (typeof = ' + typeof key + ')');
  341.         }
  342.     };
  343.     List.prototype.add = function(...data) {
  344.         const { Item, itemKey, itemDefaults } = this;
  345.         for (const datum of data) {
  346.             const item = datum instanceof Item ? datum : new Item(extend({}, itemDefaults, datum));
  347.             const { [itemKey]: name } = item;
  348.             if (this.data[name] || this.order.indexOf(name) !== -1) {
  349.                 throw new Error('data already exists, type = "' + Item.name + '", name = "' + name + '"');
  350.             }
  351.             this.data[name] = item;
  352.             this.order.push(name);
  353.         }
  354.     };
  355.     List.prototype.update = function(datum) {
  356.         if (!datum || typeof datum !== 'object') {
  357.             return;
  358.         }
  359.         const { Item, itemKey } = this;
  360.         const { [itemKey]: name } = datum;
  361.         const item = this.data[name];
  362.         if (item instanceof Item) {
  363.             item.assign(datum);
  364.         }
  365.     };
  366.     List.prototype.remove = function(name = '') {
  367.         if (!name) {
  368.             return;
  369.         }
  370.         const { Item } = this;
  371.         const item = this.data[name];
  372.         const index = this.order.indexOf(name);
  373.         if (item) {
  374.             delete this.data[name];
  375.         }
  376.         if (index !== -1) {
  377.             this.order.splice(index, 1);
  378.         }
  379.     };
  380.     List.prototype.setValue = function(name = '', value) {
  381.         const { Item } = this;
  382.         const item = this.data[name];
  383.         if (item instanceof Item) {
  384.             item.value = value;
  385.         }
  386.     };
  387.     List.prototype.getValue = function(name = '') {
  388.         const { Item } = this;
  389.         const item = this.data[name];
  390.         if (item instanceof Item) {
  391.             return item.value;
  392.         }
  393.         return null;
  394.     };
  395.     List.prototype.assign = function(_list) {
  396.         if (!_list || _list === this) {
  397.             return this;
  398.         }
  399.         if (!(_list instanceof List) && typeof _list !== 'object') {
  400.             return this;
  401.         }
  402.         const {
  403.             data = this.data,
  404.             order = this.order,
  405.             itemKey = this.itemKey,
  406.             itemDefaults = this.itemDefaults,
  407.         } = _list;
  408.         if (order !== this.order && itemKey !== 'key') {
  409.             this.order = [...order];
  410.         }
  411.         if (itemKey !== this.itemKey) {
  412.             this.itemKey = itemKey;
  413.         }
  414.         if (itemDefaults !== this.itemDefaults) {
  415.             this.itemDefaults = itemDefaults;
  416.         }
  417.         if (data !== this.data) {
  418.             this.data = extend({}, data);
  419.         }
  420.         return this;
  421.     };
  422.     List.parse = function(elem) {
  423.         if (elem instanceof List) {
  424.             return elem;
  425.         }
  426.         if (typeof elem === 'object') {
  427.             let Item;
  428.             switch (elem.itemType) {
  429.                 case 'Datum':
  430.                     Item = Datum;
  431.                     break;
  432.                 case 'Input':
  433.                     Item = Input;
  434.                     break;
  435.                 case 'Radio':
  436.                     Item = Radio;
  437.                     break;
  438.                 case 'Option':
  439.                     Item = Option;
  440.                     break;
  441.                 case 'Tab':
  442.                     Item = Tab;
  443.                     break;
  444.                 case 'TabItem':
  445.                     Item = TabItem;
  446.                     break;
  447.                 case 'List':
  448.                     Item = List;
  449.                     break;
  450.                 case 'Mode':
  451.                     Item = Mode;
  452.                     break;
  453.                 case 'Select':
  454.                     Item = Select;
  455.                     break;
  456.                 default:
  457.                     throw new TypeError('Invalid itemType (' + itemType + ', ' + typeof itemType + ')');
  458.             }
  459.             const { itemKey, itemDefaults, data = {}, order = [] } = elem;
  460.             const list = new List(Item, itemKey, itemDefaults);
  461.             for (const key of order) {
  462.                 list.add(data[key]);
  463.             }
  464.             return list;
  465.         }
  466.         return new List();
  467.     };
  468.     List.prototype.toJSON = function() {
  469.         const { data, order, itemKey, itemDefaults, Item } = this;
  470.         return { data, order, itemKey, itemDefaults, itemType: Item.name };
  471.     };
  472.     
  473.     function Radio({ mode, label, description, name, value, onChange, validate, setter } = {}) {
  474.         Datum.call(this, { mode, label, description, name, onChange, validate, setter });
  475.         Object.defineProperty(this, 'value', Datum.descriptor);
  476.         List.call(this, Input, 'key', {
  477.             type: 'radio',
  478.             name: this.name,
  479.             mode: this.mode,
  480.             validate: this.validate,
  481.             setter: this.setter,
  482.         });
  483.     }
  484.     Object.defineProperty(Radio.prototype, 'mode',  Mode.descriptor);
  485.     for (const fn of ['add', 'update', 'remove', 'setValue', 'getValue']) {
  486.         Radio.prototype[fn] = function(...args) {
  487.             return List.prototype[fn].apply(this, args);
  488.         };
  489.     }
  490.     Radio.prototype.changeItem = function(itemValue) {
  491.         const { Item, itemDefaults } = this;
  492.         console.log('------ itemDefaults: ', JSON.stringify(itemDefaults, null, 2));
  493.         console.log('changeItem: ', itemValue);
  494.         let error;
  495.         const elem = new Item(extend({}, itemDefaults, {
  496.             value: itemValue,
  497.             onChange: function(err){
  498.                 error = err;
  499.             },
  500.         }));
  501.         console.log('changeItem -> elem: ', JSON.stringify(elem, null, 2));
  502.         if (error) {
  503.             console.log('In changeItem, ', error);
  504.             return;
  505.         }
  506.         console.log('changeItem -> item: ', JSON.stringify(elem, null, 2));
  507.         for (const key of this.order) {
  508.             const item = this.data[key];
  509.             console.log('[' + key + ']: ', JSON.stringify(item, null, 2));
  510.             if (item.value === elem.value) {
  511.                 this.value = itemValue;
  512.                 console.log('-------------------- found');
  513.                 break;
  514.             }
  515.         }
  516.     };
  517.     Radio.prototype.assign = function(radio) {
  518.         if (!radio || radio === this) {
  519.             return this;
  520.         }
  521.         if (radio instanceof Radio || typeof radio === 'object') {
  522.             const { value = this.value } = radio;
  523.             this.value = value;
  524.         }
  525.         Datum.prototype.assign.call(this, radio);
  526.         List.prototype.assign.call(this, radio);
  527.         return this;
  528.     };
  529.     Radio.parse = function(elem) {
  530.         if (elem instanceof Radio) {
  531.             return elem;
  532.         }
  533.         if (typeof elem === 'object') {
  534.             const radio = new Radio(elem);
  535.             const { data = {}, order = [] } = elem;
  536.             for (const key of order) {
  537.                 radio.add(data[key]);
  538.             }
  539.             return radio;
  540.         }
  541.         return new Radio();
  542.     };
  543.     Radio.prototype.toJSON = function() {
  544.         const { value } = this;
  545.         return extend(
  546.             { value, type: 'radio' },
  547.             Datum.prototype.toJSON.call(this),
  548.             List.prototype.toJSON.call(this),
  549.         );
  550.     };
  551.     function Select({ mode, label, description, name, value, onChange, validate, setter } = {}) {
  552.         Datum.call(this, { mode, label, description, name, onChange, validate, setter });
  553.         Object.defineProperty(this, 'value', Datum.descriptor);
  554.         List.call(this, Option, 'key', {
  555.             name: this.name,
  556.             mode: this.mode,
  557.             validate: this.validate,
  558.             setter: this.setter,
  559.         });
  560.     }
  561.     Object.defineProperty(Select.prototype, 'mode',  Mode.descriptor);
  562.     for (const fn of ['add', 'update', 'remove', 'setValue', 'getValue']) {
  563.         Radio.prototype[fn] = function(...args) {
  564.             return List.prototype[fn].apply(this, args);
  565.         };
  566.     }
  567.     Select.prototype.changeItem = function(itemValue) {
  568.         const { Item, itemDefaults } = this;
  569.         console.log('------ itemDefaults: ', JSON.stringify(itemDefaults, null, 2));
  570.         console.log('changeItem: ', itemValue);
  571.         let error;
  572.         const elem = new Item(extend({}, itemDefaults, {
  573.             value: itemValue,
  574.             onChange: function(err){
  575.                 error = err;
  576.             },
  577.         }));
  578.         console.log('changeItem -> elem: ', JSON.stringify(elem, null, 2));
  579.         if (error) {
  580.             console.log('changeItem -> elem: ', JSON.stringify(elem, null, 2));
  581.             return;
  582.         }
  583.         console.log('changeItem -> item: ', JSON.stringify(elem, null, 2));
  584.         for (const key of this.order) {
  585.             const item = this.data[key];
  586.             console.log('[' + key + ']: ', JSON.stringify(item, null, 2));
  587.             if (item.value === elem.value) {
  588.                 this.value = itemValue;
  589.                 console.log('-------------------- found');
  590.                 break;
  591.             }
  592.         }
  593.     };
  594.     Select.prototype.assign = function(elem) {
  595.         if (!elem || elem === this) {
  596.             return this;
  597.         }
  598.         if (elem instanceof Select || typeof elem === 'object') {
  599.             const { value = this.value } = elem;
  600.             this.value = value;
  601.         }
  602.         Datum.prototype.assign.call(this, elem);
  603.         List.prototype.assign.call(this, elem);
  604.         return this;
  605.     };
  606.     Select.parse = function(elem) {
  607.         if (elem instanceof Select) {
  608.             return elem;
  609.         }
  610.         if (typeof elem === 'object') {
  611.             const select = new Select(elem);
  612.             const { data = {}, order = [] } = elem;
  613.             for (const key of order) {
  614.                 select.add(data[key]);
  615.             }
  616.             return select;
  617.         }
  618.         return new Select();
  619.     };
  620.     Select.prototype.toJSON = function() {
  621.         const { value } = this;
  622.         return extend(
  623.             { value, type: 'select' },
  624.             Datum.prototype.toJSON.call(this),
  625.             List.prototype.toJSON.call(this),
  626.         );
  627.     };
  628.     const list = new List();
  629.     const onChange = function(error, value) {
  630.         if (error) {
  631.             console.log('error occured while setting value, ', error);
  632.             return;
  633.         }
  634.         console.log('next value: ', value);
  635.     };
  636.     onChange.toJSON = fn.toJSON;
  637.     const validate = function(value) {
  638.         let match;
  639.         switch (typeof value) {
  640.             case 'undefined':
  641.             case 'number':
  642.                 break;
  643.             case 'string':
  644.                 match = value.trim().match(/^(\d+(?:\.\d+)?)\s?(k|m|g|t)?b?/i);
  645.                 if (match && match[1]) break;
  646.             default:
  647.                 throw new TypeError('invalid value');
  648.         }
  649.     };
  650.     validate.toJSON = fn.toJSON;
  651.     const setter = function(value) {
  652.         let match;
  653.         switch (typeof value) {
  654.             case 'string':
  655.                 match = value.trim().match(/^(\d+(?:\.\d+)?)\s?(k|m|g|t)?b?/i);
  656.                 return +match[1] * Math.pow(1024, match[2] ? ['', 'k', 'm', 'g', 't'].indexOf(match[2].toLowerCase()) : undefined);
  657.             case 'number':
  658.                 return value;
  659.             default:
  660.                 throw new TypeError('invalid value');
  661.         }
  662.     };
  663.     setter.toJSON = fn.toJSON;
  664.     const input = new Input({
  665.         name: 'file-size',
  666.         label: 'File size (bytes)',
  667.         description: 'Here is size of uploaded file in bytes',
  668.         value: 1023,
  669.         key: '1G',
  670.         type: 'radio',
  671.         onChange,
  672.         validate,
  673.         setter,
  674.     });
  675.     list.add(input);
  676.     console.log('item: ', JSON.stringify(input, null, 2));
  677.     console.log('list: ', JSON.stringify(list, null, 2));
  678.     list.setValue('file-size', '1 GB');
  679.     console.log('item.value: ', input.value);
  680.     const radio = new Radio({ name: 'file-size', value: '1G', onChange, validate, setter });
  681.     radio.add(input);
  682.     radio.add(new Input({
  683.         name: 'file-size',
  684.         key: '10MB',
  685.         label: 'File size (bytes)',
  686.         value: '10 MB',
  687.         type: 'radio',
  688.         onChange,
  689.         validate,
  690.         setter,
  691.     }));
  692.     radio.changeItem('10MB');
  693.     radio.value;
  694.     console.log('radio: ', JSON.stringify(radio, null, 2));
  695.     function TabItem({
  696.         mode, type, name, label, description, value, onChange, validate, setter,
  697.     } = {}) {
  698.         let Item;
  699.         switch (type) {
  700.             case 'radio':
  701.                 Item = Radio;
  702.                 break;
  703.             case 'select':
  704.                 Item = Select;
  705.                 break;
  706.             default:
  707.                 Item = Input;
  708.         }
  709.         Object.defineProperty(this, 'Class', { value: Item });
  710.         this.Class.call(this, arguments[0]);
  711.     }
  712.     Object.defineProperty(TabItem.prototype, 'mode',  Mode.descriptor);
  713.     TabItem.prototype.assign = function() {
  714.         return this.Class.prototype.assign.apply(this, arguments);
  715.     };
  716.     TabItem.parse = function(elem) {
  717.         if (elem instanceof Option) {
  718.             return elem;
  719.         }
  720.         if (typeof elem !== 'object') {
  721.             return new Option();
  722.         }
  723.         const { type } = elem;
  724.         if (type === 'radio') {
  725.             const opt = new TabItem(elem);
  726.             const { data = {}, order = [] } = elem;
  727.             for (const key of order) {
  728.                 opt.add(data[key]);
  729.             }
  730.             return opt;
  731.         }
  732.         return new TabItem(elem);
  733.     };
  734.     TabItem.prototype.toJSON = function() {
  735.         return this.Class.prototype.toJSON.apply(this, arguments);
  736.     };
  737.     for (const fn of ['add', 'update', 'remove', 'setValue', 'getValue', 'changeItem']) {
  738.         TabItem.prototype[fn] = function() {
  739.             if (this.Class === Radio) {
  740.                 return Radio.prototype[fn].apply(this, arguments);
  741.             }
  742.         };
  743.     }
  744.     const opt = new TabItem({ mode: Mode.ADVANCED, type: 'radio', name: 'file-size', value: '10.5 MB', onChange, validate, setter });
  745.     opt.add({
  746.         key: '1MB', value: '1MB',
  747.     }, {
  748.         key: '2MB', value: '2MB',
  749.     }, {
  750.         key: '1Gb', value: '1GB',
  751.     }, {
  752.         key: '2KB', value: '2K',
  753.     });
  754.     opt.changeItem('2kb');
  755.     console.log('================== value: ', opt.value);
  756.     const opt2 = new TabItem({ mode: Mode.ADVANCED, type: 'text', name: 'file-name', value: 'my_file.txt', onChange });
  757.     console.log('================== opt2: ', JSON.stringify(opt2, null, 2));
  758.     console.log('================== opt: ', JSON.stringify(opt, null, 2));
  759.     opt2.value = 'my_file_xxx.out';
  760.     console.log('================== opt2: ', JSON.stringify(opt2, null, 2));
  761.     const json = JSON.stringify({ setter }, null, 2);
  762.     console.log('{ setter }: ', json);
  763.     const parsed = JSON.parse(json, reviver);
  764.     console.log('parsed.setter: ', parsed.setter);
  765.     try {
  766.         if (1024 === parsed.setter('1Kb')) {
  767.             console.log('PASSED');
  768.         } else {
  769.             console.log('FAILED');
  770.         }
  771.     } catch (err) {
  772.         console.log('setter error: ', err);
  773.     }
  774.     const optJson = JSON.stringify(opt2, null, 2);
  775.     const parsedOpt = JSON.parse(optJson, reviver);
  776.     const opt3 = TabItem.parse(parsedOpt);
  777.     console.log('opt3: ', opt3);
  778.     
  779.     function Tab({ name, key, label, description } = {}) {
  780.         this.name = name;
  781.         this.key = key || name;
  782.         this.label = label;
  783.         this.description = description;
  784.         List.call(this, TabItem);
  785.     }
  786.     for (const fn of ['add', 'update', 'remove', 'setValue', 'getValue']) {
  787.         Tab.prototype[fn] = function() {
  788.             return List.prototype[fn].apply(this, arguments);
  789.         };
  790.     }
  791.     Tab.prototype.assign = function(elem) {
  792.         throw new Error('TODO');
  793.     }; // TODO
  794.     Tab.prototype.toJSON = function() {
  795.         const { name, key, label, description } = this;
  796.         return extend({
  797.             name, key, label, description,
  798.         }, List.prototype.toJSON.call(this));
  799.     };
  800.     Tab.parse = function(elem) {
  801.         if (elem instanceof Tab) {
  802.             return elem;
  803.         }
  804.         if (typeof elem !== 'object') {
  805.             return new Tab();
  806.         }
  807.         const tb = new Tab(elem);
  808.         const { data = {}, order = [] } = elem;
  809.         for (const key of order) {
  810.             tb.add(data[key]);
  811.         }
  812.         return tb;
  813.     };
  814.     const tab = new Tab({ name: 'general', label: 'General', description: 'Here are general options' });
  815.     tab.add({ name: 'file-owner', type: 'text', value: 'Enakin Skywalker' });
  816.     tab.add({ name: 'file-size', type: 'radio', value: '1Mb', validate, setter });
  817.     tab.data['file-size'].add({
  818.         key: '1Mb', value: '1M',
  819.     }, {
  820.         key: '10Mb', value: '10M',
  821.     }, {
  822.         key: '1Gb', value: '1GB',
  823.     });
  824.     const tabJson = JSON.stringify(tab, null, 2);
  825.     console.log('tab: ', tabJson);
  826.     const tab2 = Tab.parse(JSON.parse(tabJson, reviver));
  827.     console.log('tab2: ', tab2);
  828.     function Interface({
  829.         mode: modeName = Mode.NORMAL, title = 'Interface', version = '0.1.0', onChangeMode = function(){},
  830.     } = {}) {
  831.         const mode = new Mode(modeName, null, onChangeMode);
  832.         Object.defineProperty(this, 'mode', {
  833.             get: function() { return mode.name; },
  834.             set: function(n) { mode.name = n; },
  835.             enumerable: true,
  836.         });
  837.         this.title = title;
  838.         this.version = version;
  839.         this.onChangeMode = onChangeMode;
  840.         List.call(this, Tab);
  841.     }
  842.     for (const fn of ['add', 'update', 'remove']) {
  843.         Interface.prototype[fn] = function() {
  844.             return List.prototype[fn].apply(this, arguments);
  845.         };
  846.     }
  847.     Interface.prototype.toJSON = function() {
  848.         const { mode, title, version } = this;
  849.         return extend({
  850.             mode, title, version,
  851.         }, List.prototype.toJSON.call(this));
  852.     };
  853.     Interface.parse = function(elem) {
  854.         if (elem instanceof Interface) {
  855.             return elem;
  856.         }
  857.         if (typeof elem !== 'object') {
  858.             return new Interface();
  859.         }
  860.         const intf = new Interface(elem);
  861.         const { data = {}, order = [] } = elem;
  862.         for (const key of order) {
  863.             intf.add(data[key]);
  864.         }
  865.         return intf;
  866.     };
  867.     const iface = new Interface({
  868.         onChangeMode: function(error, mode) {
  869.             if (error) {
  870.                 console.log('onChangeMode: ', error);
  871.                 return;
  872.             }
  873.             console.log('new mode: ', mode);
  874.         },
  875.     });
  876.     iface.add(tab);
  877.     tab2.name = 'advanced';
  878.     iface.add(tab2);
  879.     const ifaceJson = JSON.stringify(iface, null, 2);
  880.     console.log('interface: ', ifaceJson);
  881.     const iface2 = Interface.parse(JSON.parse(ifaceJson));
  882.     console.log('interface2: ', iface2);
  883.  
  884.     function extend(target) {
  885.         target = target || {};
  886.         const args = Array.prototype.slice.call(arguments, 1);
  887.         for (const arg of args) {
  888.             for (const key of Object.keys(arg)) {
  889.                 target[key] = arg[key];
  890.             }
  891.         }
  892.         return target;
  893.     }
  894.     const { ESModules = {} } = window;
  895.     ESModules.UIModules = {
  896.         Mode,
  897.         Datum,
  898.         Input,
  899.         Option,
  900.         List,
  901.         Radio,
  902.         Select,
  903.         Tab,
  904.         TabItem,
  905.         Interface,
  906.         functionToJSON: fn.toJSON,
  907.         functionReviver: reviver,
  908.         memoryValidator: validate,
  909.         memorySetter: setter,
  910.     };
  911.     window.ESModules = ESModules;
  912. })(window)

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址