☰

GM_config_cnjames

A lightweight, reusable, cross-browser graphical settings framework for inclusion in user scripts.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greatest.deepsurf.us/scripts/483173/1301961/GM_config_cnjames.js 

  1. /*
  2. Copyright 2009+, GM_config Contributors (https://github.com/sizzlemctwizzle/GM_config)
  3.  
  4. GM_config Collaborators/Contributors:
  5.     Mike Medley <medleymind@gmail.com>
  6.     Joe Simmons
  7.     Izzy Soft
  8.     Marti Martz
  9.     Adam Thompson-Sharpe
  10.  
  11. GM_config is distributed under the terms of the GNU Lesser General Public License.
  12.  
  13.     GM_config is free software: you can redistribute it and/or modify
  14.     it under the terms of the GNU Lesser General Public License as published by
  15.     the Free Software Foundation, either version 3 of the License, or
  16.     (at your option) any later version.
  17.  
  18.     This program is distributed in the hope that it will be useful,
  19.     but WITHOUT ANY WARRANTY; without even the implied warranty of
  20.     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21.     GNU Lesser General Public License for more details.
  22.  
  23.     You should have received a copy of the GNU Lesser General Public License
  24.     along with this program.  If not, see <https://www.gnu.org/licenses/>.
  25. */
  26.  
  27. // ==UserScript==
  28. // @exclude       *
  29. // @author        Mike Medley <medleymind@gmail.com> (https://github.com/sizzlemctwizzle/GM_config)
  30. // @icon          https://raw.githubusercontent.com/sizzlemctwizzle/GM_config/master/gm_config_icon_large.png
  31.  
  32. // ==UserLibrary==
  33. // @name          GM_config_cnjames
  34. // @description   A lightweight, reusable, cross-browser graphical settings framework for inclusion in user scripts.
  35. // @copyright     2009+, Mike Medley (https://github.com/sizzlemctwizzle)
  36. // @license       LGPL-3.0-or-later; https://raw.githubusercontent.com/sizzlemctwizzle/GM_config/master/LICENSE
  37.  
  38. // @homepageURL   https://openuserjs.org/libs/sizzle/GM_config
  39. // @homepageURL   https://github.com/sizzlemctwizzle/GM_config
  40. // @supportURL    https://github.com/sizzlemctwizzle/GM_config/issues
  41.  
  42. // ==/UserScript==
  43.  
  44. // ==/UserLibrary==
  45.  
  46. /* jshint esversion: 8 */
  47.  
  48. let GM_config = (function (GM) {
  49.   // This is the initializer function
  50.   function GM_configInit(config, args) {
  51.     // Initialize instance variables
  52.     if (typeof config.fields == "undefined") {
  53.       config.fields = {};
  54.       config.onInit = config.onInit || function() {};
  55.       config.onOpen = config.onOpen || function() {};
  56.       config.onSave = config.onSave || function() {};
  57.       config.onClose = config.onClose || function() {};
  58.       config.onReset = config.onReset || function() {};
  59.       config.isOpen = false;
  60.       config.title = 'User Script Settings';
  61.       config.css = {
  62.         basic: [
  63.           "#GM_config * { font-family: arial,tahoma,myriad pro,sans-serif; }",
  64.           "#GM_config { background: #FFF; }",
  65.           "#GM_config input[type='radio'] { margin-right: 8px; }",
  66.           "#GM_config .indent40 { margin-left: 40%; }",
  67.           "#GM_config .field_label { font-size: 12px; font-weight: bold; margin-right: 6px; }",
  68.           "#GM_config .radio_label { font-size: 12px; }",
  69.           "#GM_config .block { display: block; }",
  70.           "#GM_config .saveclose_buttons { margin: 16px 10px 10px; padding: 2px 12px; }",
  71.           "#GM_config .reset, #GM_config .reset a," +
  72.             " #GM_config_buttons_holder { color: #000; text-align: right; }",
  73.           "#GM_config .config_header { font-size: 20pt; margin: 0; }",
  74.           "#GM_config .config_desc, #GM_config .section_desc, #GM_config .reset { font-size: 9pt; }",
  75.           "#GM_config .center { text-align: center; }",
  76.           "#GM_config .section_header_holder { margin-top: 8px; }",
  77.           "#GM_config .config_var { margin: 0 0 4px; }",
  78.           "#GM_config .section_header { background: #414141; border: 1px solid #000; color: #FFF;",
  79.           " font-size: 13pt; margin: 0; }",
  80.           "#GM_config .section_desc { background: #EFEFEF; border: 1px solid #CCC; color: #575757;" +
  81.             " font-size: 9pt; margin: 0 0 6px; }"
  82.           ].join('\n') + '\n',
  83.         basicPrefix: "GM_config",
  84.         stylish: ""
  85.       };
  86.     }
  87.     config.frameStyle = [
  88.       'bottom: auto; border: 1px solid #000; display: none; height: 75%;',
  89.       'left: 0; margin: 0; max-height: 95%; max-width: 95%; opacity: 0;',
  90.       'overflow: auto; padding: 0; position: fixed; right: auto; top: 0;',
  91.       'width: 75%; z-index: 9999;'
  92. 	].join(' ');
  93.  
  94.     var settings = null;
  95.     if (args.length == 1 &&
  96.       typeof args[0].id == "string" &&
  97.       typeof args[0].appendChild != "function") settings = args[0];
  98.     else {
  99.       // Provide backwards-compatibility with argument style intialization
  100.       settings = {};
  101.  
  102.       // loop through GM_config.init() arguments
  103.       for (let i = 0, l = args.length, arg; i < l; ++i) {
  104.         arg = args[i];
  105.  
  106.         // An element to use as the config window
  107.         if (typeof arg.appendChild == "function") {
  108.           settings.frame = arg;
  109.           continue;
  110.         }
  111.  
  112.         switch (typeof arg) {
  113.           case 'object':
  114.             for (let j in arg) { // could be a callback functions or settings object
  115.               if (typeof arg[j] != "function") { // we are in the settings object
  116.                 settings.fields = arg; // store settings object
  117.                 break; // leave the loop
  118.               } // otherwise it must be a callback function
  119.               if (!settings.events) settings.events = {};
  120.               settings.events[j] = arg[j];
  121.             }
  122.             break;
  123.           case 'function': // passing a bare function is set to open callback
  124.             settings.events = {onOpen: arg};
  125.             break;
  126.           case 'string': // could be custom CSS or the title string
  127.             if (/\w+\s*\{\s*\w+\s*:\s*\w+[\s|\S]*\}/.test(arg))
  128.               settings.css = arg;
  129.             else
  130.               settings.title = arg;
  131.             break;
  132.         }
  133.       }
  134.     }
  135.  
  136.     /* Initialize everything using the new settings object */
  137.     // Set the id
  138.     if (settings.id) config.id = settings.id;
  139.     else if (typeof config.id == "undefined") config.id = 'GM_config';
  140.  
  141.     // Set the title
  142.     if (settings.title) config.title = settings.title;
  143.  
  144.     // Set the custom css
  145.     if (settings.css) config.css.stylish = settings.css;
  146.  
  147.     // Set the frame
  148.     if (settings.frame) config.frame = settings.frame;
  149. 	
  150.     // Set the style attribute of the frame
  151.     if (typeof settings.frameStyle === 'string') config.frameStyle = settings.frameStyle;
  152.  
  153.     // Set the event callbacks
  154.     if (settings.events) {
  155.       let events = settings.events;
  156.       for (let e in events) {
  157.         config["on" + e.charAt(0).toUpperCase() + e.slice(1)] = events[e];
  158.       }
  159.     }
  160.  
  161.     // If the id has changed we must modify the default style
  162.     if (config.id != config.css.basicPrefix) {
  163.       config.css.basic = config.css.basic.replace(
  164.         new RegExp('#' + config.css.basicPrefix, 'gm'), '#' + config.id);
  165.       config.css.basicPrefix = config.id;
  166.     }
  167.  
  168.     // Create the fields
  169.     config.isInit = false;
  170.     if (settings.fields) {
  171.       config.read(null, (stored) => { // read the stored settings
  172.         let fields = settings.fields,
  173.             customTypes = settings.types || {},
  174.             configId = config.id;
  175.  
  176.         for (let id in fields) {
  177.           let field = fields[id],
  178.               fieldExists = false;
  179.  
  180.           if (config.fields[id]) {
  181.             fieldExists = true;
  182.           }
  183.  
  184.           // for each field definition create a field object
  185.           if (field) {
  186.             if (config.isOpen && fieldExists) {
  187.                 config.fields[id].remove();
  188.             }
  189.  
  190.             config.fields[id] = new GM_configField(field, stored[id], id,
  191.               customTypes[field.type], configId);
  192.  
  193.             // Add field to open frame
  194.             if (config.isOpen) {
  195.               config.fields[id].wrapper = config.fields[id].toNode();
  196.               config.frameSection.appendChild(config.fields[id].wrapper);
  197.             }
  198.           } else if (!field && fieldExists) {
  199.             // Remove field from open frame
  200.             if (config.isOpen) {
  201.               config.fields[id].remove();
  202.             }
  203.  
  204.             delete config.fields[id];
  205.           }
  206.         }
  207.  
  208.         config.isInit = true;
  209.         config.onInit.call(config);
  210.       });
  211.     } else {
  212.       config.isInit = true;
  213.       config.onInit.call(config);
  214.     }
  215.   }
  216.  
  217.   let construct = function () {
  218.     // Parsing of input provided via frontends
  219.     GM_configInit(this, arguments);
  220.   };
  221.   construct.prototype = {
  222.     // Support re-initalization
  223.     init: function() {
  224.       GM_configInit(this, arguments);
  225.     },
  226.  
  227.     // call GM_config.open() from your script to open the menu
  228.     open: function () {
  229.       // don't open before init is finished
  230.       if (!this.isInit) {
  231.         setTimeout(() => this.open(), 0);
  232.         return;
  233.       }
  234.       // Die if the menu is already open on this page
  235.       // You can have multiple instances but you can't open the same instance twice
  236.       let match = document.getElementById(this.id);
  237.       if (match && (match.tagName == "IFRAME" || match.childNodes.length > 0)) return;
  238.  
  239.       // Sometimes "this" gets overwritten so create an alias
  240.       let config = this;
  241.  
  242.       // Function to build the mighty config window :)
  243.       function buildConfigWin (body, head) {
  244.         let create = config.create,
  245.             fields = config.fields,
  246.             configId = config.id,
  247.             bodyWrapper = create('div', {id: configId + '_wrapper'});
  248.  
  249.         // Append the style which is our default style plus the user style
  250.         head.appendChild(
  251.           create('style', {
  252.           type: 'text/css',
  253.           textContent: config.css.basic + config.css.stylish
  254.         }));
  255.  
  256.         // Add header and title
  257.         bodyWrapper.appendChild(create('div', {
  258.           id: configId + '_header',
  259.           className: 'config_header block center'
  260.         }, config.title));
  261.  
  262.         // Append elements
  263.         let section = bodyWrapper,
  264.             secNum = 0; // Section count
  265.  
  266.         // loop through fields
  267.         for (let id in fields) {
  268.           let field = fields[id],
  269.               settings = field.settings;
  270.  
  271.           if (settings.section) { // the start of a new section
  272.             section = bodyWrapper.appendChild(create('div', {
  273.                 className: 'section_header_holder',
  274.                 id: configId + '_section_' + secNum
  275.               }));
  276.  
  277.             if (!Array.isArray(settings.section))
  278.               settings.section = [settings.section];
  279.  
  280.             if (settings.section[0])
  281.               section.appendChild(create('div', {
  282.                 className: 'section_header center',
  283.                 id: configId + '_section_header_' + secNum
  284.               }, settings.section[0]));
  285.  
  286.             if (settings.section[1])
  287.               section.appendChild(create('p', {
  288.                 className: 'section_desc center',
  289.                 id: configId + '_section_desc_' + secNum
  290.               }, settings.section[1]));
  291.             ++secNum;
  292.           }
  293.           
  294.           if (secNum === 0) {
  295.             section = bodyWrapper.appendChild(create('div', {
  296.                 className: 'section_header_holder',
  297.                 id: configId + '_section_' + (secNum++)
  298.             }));
  299.           }
  300.  
  301.           // Create field elements and append to current section
  302.           section.appendChild((field.wrapper = field.toNode()));
  303.         }
  304.         
  305.         config.frameSection = section;
  306.  
  307.         // Add save and close buttons
  308.         bodyWrapper.appendChild(create('div',
  309.           {id: configId + '_buttons_holder'},
  310.  
  311.           create('button', {
  312.             id: configId + '_saveBtn',
  313.             textContent: 'Save',
  314.             title: 'Save settings',
  315.             className: 'saveclose_buttons',
  316.             onclick: function () { config.save(); }
  317.           }),
  318.  
  319.           create('button', {
  320.             id: configId + '_closeBtn',
  321.             textContent: 'Close',
  322.             title: 'Close window',
  323.             className: 'saveclose_buttons',
  324.             onclick: function () { config.close(); }
  325.           }),
  326.  
  327.           create('div',
  328.             {className: 'reset_holder block'},
  329.  
  330.             // Reset link
  331.             create('a', {
  332.               id: configId + '_resetLink',
  333.               textContent: 'Reset to defaults',
  334.               href: '#',
  335.               title: 'Reset fields to default values',
  336.               className: 'reset',
  337.               onclick: function(e) { e.preventDefault(); config.reset(); }
  338.             })
  339.         )));
  340.  
  341.         body.appendChild(bodyWrapper); // Paint everything to window at once
  342.         config.center(); // Show and center iframe
  343.         window.addEventListener('resize', config.center, false); // Center frame on resize
  344.  
  345.         // Call the open() callback function
  346.         config.onOpen(config.frame.contentDocument || config.frame.ownerDocument,
  347.                       config.frame.contentWindow || window,
  348.                       config.frame);
  349.  
  350.         // Close frame on window close
  351.         window.addEventListener('beforeunload', function () {
  352.             config.close();
  353.         }, false);
  354.  
  355.         // Now that everything is loaded, make it visible
  356.         config.frame.style.display = "block";
  357.         config.isOpen = true;
  358.       }
  359.  
  360.       // Either use the element passed to init() or create an iframe
  361.       if (this.frame) {
  362.         this.frame.id = this.id; // Allows for prefixing styles with the config id
  363.         if (this.frameStyle) this.frame.setAttribute('style', this.frameStyle);
  364.         buildConfigWin(this.frame, this.frame.ownerDocument.getElementsByTagName('head')[0]);
  365.       } else {
  366.         // Create frame
  367.         this.frame = this.create('iframe', { id: this.id });
  368.         if (this.frameStyle) this.frame.setAttribute('style', this.frameStyle);
  369.         document.body.appendChild(this.frame);
  370.  
  371.         // In WebKit src can't be set until it is added to the page
  372.         this.frame.src = '';
  373.         // we wait for the iframe to load before we can modify it
  374.         let that = this;
  375.         this.frame.addEventListener('load', function(e) {
  376.             let frame = config.frame;
  377.             if (!frame.contentDocument) {
  378.               that.log("GM_config failed to initialize default settings dialog node!");
  379.             } else {
  380.               let body = frame.contentDocument.getElementsByTagName('body')[0];
  381.               body.id = config.id; // Allows for prefixing styles with the config id
  382.               buildConfigWin(body, frame.contentDocument.getElementsByTagName('head')[0]);
  383.             }
  384.         }, false);
  385.       }
  386.     },
  387.  
  388.     save: function () {
  389.       this.write(null, null, (vals) => this.onSave(vals));
  390.     },
  391.  
  392.     close: function() {
  393.       // If frame is an iframe then remove it
  394.       if (this.frame && this.frame.contentDocument) {
  395.         this.remove(this.frame);
  396.         this.frame = null;
  397.       } else if (this.frame) { // else wipe its content
  398.         this.frame.innerHTML = "";
  399.         this.frame.style.display = "none";
  400.       }
  401.  
  402.       // Null out all the fields so we don't leak memory
  403.       let fields = this.fields;
  404.       for (let id in fields) {
  405.         let field = fields[id];
  406.         field.wrapper = null;
  407.         field.node = null;
  408.       }
  409.  
  410.       this.onClose(); //  Call the close() callback function
  411.       this.isOpen = false;
  412.     },
  413.  
  414.     set: function (name, val) {
  415.       this.fields[name].value = val;
  416.  
  417.       if (this.fields[name].node) {
  418.         this.fields[name].reload();
  419.       }
  420.     },
  421.  
  422.     get: function (name, getLive) {
  423.       /* Migration warning */
  424.       if (!this.isInit) {
  425.         this.log('GM_config: get called before init, see https://github.com/sizzlemctwizzle/GM_config/issues/113');
  426.       }
  427.  
  428.       let field = this.fields[name],
  429.           fieldVal = null;
  430.  
  431.       if (getLive && field.node) {
  432.         fieldVal = field.toValue();
  433.       }
  434.  
  435.       return fieldVal != null ? fieldVal : field.value;
  436.     },
  437.  
  438.     write: function (store, obj, cb) {
  439.       let forgotten = null,
  440.           values = null;
  441.       if (!obj) {
  442.         let fields = this.fields;
  443.  
  444.         values = {};
  445.         forgotten = {};
  446.  
  447.         for (let id in fields) {
  448.           let field = fields[id];
  449.           let value = field.toValue();
  450.  
  451.           if (field.save) {
  452.             if (value != null) {
  453.               values[id] = value;
  454.               field.value = value;
  455.             } else
  456.               values[id] = field.value;
  457.           } else
  458.             forgotten[id] = value != null ? value : field.value;
  459.         }
  460.       }
  461.  
  462.       (async () => {
  463.         try {
  464.           let val = this.stringify(obj || values);
  465.           await this.setValue(store || this.id, val);
  466.         } catch(e) {
  467.           this.log("GM_config failed to save settings!");
  468.         }
  469.         cb(forgotten);
  470.       })();
  471.     },
  472.  
  473.     read: function (store, cb) {
  474.       (async () => {
  475.         let val = await this.getValue(store || this.id, '{}');
  476.         try {
  477.           let rval = this.parser(val);
  478.           cb(rval);
  479.         } catch(e) {
  480.           this.log("GM_config failed to read saved settings!");
  481.           cb({});
  482.         }
  483.       })();
  484.     },
  485.  
  486.     reset: function () {
  487.       let fields = this.fields;
  488.  
  489.       // Reset all the fields
  490.       for (let id in fields) { fields[id].reset(); }
  491.  
  492.       this.onReset(); // Call the reset() callback function
  493.     },
  494.  
  495.     create: function () {
  496.       let A = null,
  497.           B = null;
  498.       switch(arguments.length) {
  499.         case 1:
  500.           A = document.createTextNode(arguments[0]);
  501.           break;
  502.         default:
  503.           A = document.createElement(arguments[0]);
  504.           B = arguments[1];
  505.           for (let b in B) {
  506.             if (b.indexOf("on") == 0)
  507.               A.addEventListener(b.substring(2), B[b], false);
  508.             else if (",style,accesskey,id,name,src,href,which,for".indexOf("," +
  509.                      b.toLowerCase()) != -1)
  510.               A.setAttribute(b, B[b]);
  511.             else
  512.               A[b] = B[b];
  513.           }
  514.           if (typeof arguments[2] == "string")
  515.             A.innerHTML = arguments[2];
  516.           else
  517.             for (let i = 2, len = arguments.length; i < len; ++i)
  518.               A.appendChild(arguments[i]);
  519.       }
  520.       return A;
  521.     },
  522.  
  523.     center: function () {
  524.       let node = this.frame;
  525.       if (!node) return;
  526.       let style = node.style,
  527.           beforeOpacity = style.opacity;
  528.       if (style.display == 'none') style.opacity = '0';
  529.       style.display = '';
  530.       style.top = Math.floor((window.innerHeight / 2) - (node.offsetHeight / 2)) + 'px';
  531.       style.left = Math.floor((window.innerWidth / 2) - (node.offsetWidth / 2)) + 'px';
  532.       style.opacity = '1';
  533.     },
  534.  
  535.     remove: function (el) {
  536.       if (el && el.parentNode) el.parentNode.removeChild(el);
  537.     }
  538.   };
  539.  
  540.   construct.prototype.name = 'GM_config';
  541.   construct.prototype.constructor = construct;
  542.   let isGM4 = typeof GM.getValue !== 'undefined' &&
  543.     typeof GM.setValue !== 'undefined';
  544.   let isGM = isGM4 || (typeof GM_getValue !== 'undefined' &&
  545.     typeof GM_getValue('a', 'b') !== 'undefined');
  546.   construct.prototype.isGM = isGM;
  547.  
  548.   if (!isGM4) {
  549.     let promisify = (old) => (...args) => {
  550.       return new Promise((resolve, reject) => {
  551.         try {
  552.           resolve(old.apply(this, args));
  553.         } catch (e) {
  554.           reject(e);
  555.         }
  556.       });
  557.     };
  558.  
  559.     let getValue = isGM ? GM_getValue
  560.       : (name, def) => {
  561.         let s = localStorage.getItem(name);
  562.         return s !== null ? s : def;
  563.       };
  564.     let setValue = isGM ? GM_setValue
  565.       : (name, value) => localStorage.setItem(name, value);
  566.     let log = typeof GM_log !== 'undefined' ? GM_log : console.log;
  567.  
  568.     GM.getValue = promisify(getValue);
  569.     GM.setValue = promisify(setValue);
  570.     GM.log = promisify(log);
  571.   }
  572.  
  573.   construct.prototype.stringify = JSON.stringify;
  574.   construct.prototype.parser = JSON.parse;
  575.   construct.prototype.getValue = GM.getValue;
  576.   construct.prototype.setValue = GM.setValue;
  577.   construct.prototype.log = GM.log || console.log;
  578.  
  579.   // Passthrough frontends for new and old usage
  580.   let config = function () {
  581.     return new (config.bind.apply(construct,
  582.       [null].concat(Array.from(arguments))));
  583.   };
  584.   config.prototype.constructor = config;
  585.  
  586.   // Support old method of initalizing
  587.   config.init = function () {
  588.     GM_config = config.apply(this, arguments);
  589.     GM_config.init = function() {
  590.       GM_configInit(this, arguments);
  591.     };
  592.   };
  593.  
  594.   // Reusable functions and properties
  595.   // Usable via GM_config.*
  596.   config.create = construct.prototype.create;
  597.   config.isGM = construct.prototype.isGM;
  598.   config.setValue = construct.prototype.setValue;
  599.   config.getValue = construct.prototype.getValue;
  600.   config.stringify = construct.prototype.stringify;
  601.   config.parser = construct.prototype.parser;
  602.   config.log = construct.prototype.log;
  603.   config.remove = construct.prototype.remove;
  604.   config.read = construct.prototype.read.bind(config);
  605.   config.write = construct.prototype.write.bind(config);
  606.  
  607.   return config;
  608. }(typeof GM === 'object' ? GM : Object.create(null)));
  609. let GM_configStruct = GM_config;
  610.  
  611. function GM_configField(settings, stored, id, customType, configId) {
  612.   // Store the field's settings
  613.   this.settings = settings;
  614.   this.id = id;
  615.   this.configId = configId;
  616.   this.node = null;
  617.   this.wrapper = null;
  618.   this.save = typeof settings.save == "undefined" ? true : settings.save;
  619.  
  620.   // Buttons are static and don't have a stored value
  621.   if (settings.type == "button") this.save = false;
  622.  
  623.   // if a default value wasn't passed through init() then
  624.   //   if the type is custom use its default value
  625.   //   else use default value for type
  626.   // else use the default value passed through init()
  627.   this['default'] = typeof settings['default'] == "undefined" ?
  628.     customType ?
  629.       customType['default']
  630.       : this.defaultValue(settings.type, settings.options)
  631.     : settings['default'];
  632.  
  633.   // Store the field's value
  634.   this.value = typeof stored == "undefined" ? this['default'] : stored;
  635.  
  636.   // Setup methods for a custom type
  637.   if (customType) {
  638.     this.toNode = customType.toNode;
  639.     this.toValue = customType.toValue;
  640.     this.reset = customType.reset;
  641.   }
  642. }
  643.  
  644. GM_configField.prototype = {
  645.   create: GM_config.create,
  646.  
  647.   defaultValue: function(type, options) {
  648.     let value;
  649.  
  650.     if (type.indexOf('unsigned ') == 0)
  651.       type = type.substring(9);
  652.  
  653.     switch (type) {
  654.       case 'radio': case 'select':
  655.         value = options[0];
  656.         break;
  657.       case 'checkbox':
  658.         value = false;
  659.         break;
  660.       case 'int': case 'integer':
  661.       case 'float': case 'number':
  662.         value = 0;
  663.         break;
  664.       default:
  665.         value = '';
  666.     }
  667.  
  668.     return value;
  669.   },
  670.  
  671.   toNode: function() {
  672.     let field = this.settings,
  673.         value = this.value,
  674.         options = field.options,
  675.         type = field.type,
  676.         id = this.id,
  677.         configId = this.configId,
  678.         labelPos = field.labelPos,
  679.         create = this.create;
  680.  
  681.     function addLabel(pos, labelEl, parentNode, beforeEl) {
  682.       if (!beforeEl) beforeEl = parentNode.firstChild;
  683.       switch (pos) {
  684.         case 'right': case 'below':
  685.           if (pos == 'below')
  686.             parentNode.appendChild(create('br', {}));
  687.           parentNode.appendChild(labelEl);
  688.           break;
  689.         default:
  690.           if (pos == 'above')
  691.             parentNode.insertBefore(create('br', {}), beforeEl);
  692.           parentNode.insertBefore(labelEl, beforeEl);
  693.       }
  694.     }
  695.  
  696.     let retNode = create('div', { className: 'config_var',
  697.           id: configId + '_' + id + '_var',
  698.           title: field.title || '' }),
  699.         firstProp;
  700.  
  701.     // Retrieve the first prop
  702.     for (let i in field) { firstProp = i; break; }
  703.  
  704.     let label = field.label && type != "button" ?
  705.       create('label', {
  706.         id: configId + '_' + id + '_field_label',
  707.         for: configId + '_field_' + id,
  708.         className: 'field_label'
  709.       }, field.label) : null;
  710.  
  711.     let wrap = null;
  712.     switch (type) {
  713.       case 'textarea':
  714.         retNode.appendChild((this.node = create('textarea', {
  715.           innerHTML: value,
  716.           id: configId + '_field_' + id,
  717.           className: 'block',
  718.           cols: (field.cols ? field.cols : 20),
  719.           rows: (field.rows ? field.rows : 2)
  720.         })));
  721.         break;
  722.       case 'radio':
  723.         wrap = create('div', {
  724.           id: configId + '_field_' + id
  725.         });
  726.         this.node = wrap;
  727.  
  728.         for (let i = 0, len = options.length; i < len; ++i) {
  729.           let radLabel = create('label', {
  730.             className: 'radio_label'
  731.           }, options[i]);
  732.  
  733.           let rad = wrap.appendChild(create('input', {
  734.             value: options[i],
  735.             type: 'radio',
  736.             name: id,
  737.             checked: options[i] == value
  738.           }));
  739.  
  740.           let radLabelPos = labelPos &&
  741.             (labelPos == 'left' || labelPos == 'right') ?
  742.             labelPos : firstProp == 'options' ? 'left' : 'right';
  743.  
  744.           addLabel(radLabelPos, radLabel, wrap, rad);
  745.         }
  746.  
  747.         retNode.appendChild(wrap);
  748.         break;
  749.       case 'select':
  750.         wrap = create('select', {
  751.           id: configId + '_field_' + id
  752.         });
  753.         this.node = wrap;
  754.  
  755.         for (let i = 0, len = options.length; i < len; ++i) {
  756.           let option = options[i];
  757.           wrap.appendChild(create('option', {
  758.             value: option,
  759.             selected: option == value
  760.           }, option));
  761.         }
  762.  
  763.         retNode.appendChild(wrap);
  764.         break;
  765.       default: // fields using input elements
  766.         let props = {
  767.           id: configId + '_field_' + id,
  768.           type: type,
  769.           value: type == 'button' ? field.label : value
  770.         };
  771.  
  772.         switch (type) {
  773.           case 'checkbox':
  774.             props.checked = value;
  775.             break;
  776.           case 'button':
  777.             props.size = field.size ? field.size : 25;
  778.             if (field.script) field.click = field.script;
  779.             if (field.click) props.onclick = field.click;
  780.             break;
  781.           case 'hidden':
  782.             break;
  783.           default:
  784.             // type = text, int, or float
  785.             props.type = 'text';
  786.             props.size = field.size ? field.size : 25;
  787.         }
  788.  
  789.         retNode.appendChild((this.node = create('input', props)));
  790.     }
  791.  
  792.     if (label) {
  793.       // If the label is passed first, insert it before the field
  794.       // else insert it after
  795.       if (!labelPos)
  796.         labelPos = firstProp == "label" || type == "radio" ?
  797.           "left" : "right";
  798.  
  799.       addLabel(labelPos, label, retNode);
  800.     }
  801.  
  802.     return retNode;
  803.   },
  804.  
  805.   toValue: function() {
  806.     let node = this.node,
  807.         field = this.settings,
  808.         type = field.type,
  809.         unsigned = false,
  810.         rval = null;
  811.  
  812.     if (!node) return rval;
  813.  
  814.     if (type.indexOf('unsigned ') == 0) {
  815.       type = type.substring(9);
  816.       unsigned = true;
  817.     }
  818.  
  819.     switch (type) {
  820.       case 'checkbox':
  821.         rval = node.checked;
  822.         break;
  823.       case 'select':
  824.         rval = node[node.selectedIndex].value;
  825.         break;
  826.       case 'radio':
  827.         let radios = node.getElementsByTagName('input');
  828.         for (let i = 0, len = radios.length; i < len; ++i) {
  829.           if (radios[i].checked)
  830.             rval = radios[i].value;
  831.         }
  832.         break;
  833.       case 'button':
  834.         break;
  835.       case 'int': case 'integer':
  836.       case 'float': case 'number':
  837.         let num = Number(node.value);
  838.         let warn = 'Field labeled "' + field.label + '" expects a' +
  839.           (unsigned ? ' positive ' : 'n ') + 'integer value';
  840.  
  841.         if (isNaN(num) || (type.substr(0, 3) == 'int' &&
  842.             Math.ceil(num) != Math.floor(num)) ||
  843.             (unsigned && num < 0)) {
  844.           alert(warn + '.');
  845.           return null;
  846.         }
  847.  
  848.         if (!this._checkNumberRange(num, warn))
  849.           return null;
  850.         rval = num;
  851.         break;
  852.       default:
  853.         rval = node.value;
  854.         break;
  855.     }
  856.  
  857.     return rval; // value read successfully
  858.   },
  859.  
  860.   reset: function() {
  861.     let node = this.node,
  862.         field = this.settings,
  863.         type = field.type;
  864.  
  865.     if (!node) return;
  866.  
  867.     switch (type) {
  868.       case 'checkbox':
  869.         node.checked = this['default'];
  870.         break;
  871.       case 'select':
  872.         for (let i = 0, len = node.options.length; i < len; ++i) {
  873.           if (node.options[i].textContent == this['default'])
  874.             node.selectedIndex = i;
  875.         }
  876.         break;
  877.       case 'radio':
  878.         let radios = node.getElementsByTagName('input');
  879.         for (let i = 0, len = radios.length; i < len; ++i) {
  880.           if (radios[i].value == this['default'])
  881.             radios[i].checked = true;
  882.         }
  883.         break;
  884.       case 'button' :
  885.         break;
  886.       default:
  887.         node.value = this['default'];
  888.         break;
  889.       }
  890.   },
  891.  
  892.   remove: function() {
  893.     GM_config.remove(this.wrapper);
  894.     this.wrapper = null;
  895.     this.node = null;
  896.   },
  897.  
  898.   reload: function() {
  899.     let wrapper = this.wrapper;
  900.     if (wrapper) {
  901.       let fieldParent = wrapper.parentNode;
  902.       let newWrapper = this.toNode();
  903.       fieldParent.insertBefore(newWrapper, wrapper);
  904.       GM_config.remove(this.wrapper);
  905.       this.wrapper = newWrapper;
  906.     }
  907.   },
  908.  
  909.   _checkNumberRange: function(num, warn) {
  910.     let field = this.settings;
  911.     if (typeof field.min == "number" && num < field.min) {
  912.       alert(warn + ' greater than or equal to ' + field.min + '.');
  913.       return null;
  914.     }
  915.  
  916.     if (typeof field.max == "number" && num > field.max) {
  917.       alert(warn + ' less than or equal to ' + field.max + '.');
  918.       return null;
  919.     }
  920.     return true;
  921.   }
  922. };