☰

MonkeyConfig-branch

Easy configuration dialog builder for user scripts

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greatest.deepsurf.us/scripts/486241/1321368/MonkeyConfig-branch.js 

  1. // ==UserScript==
  2. // @name           MonkeyConfig-branch
  3. // @namespace      http://odyniec.net/
  4. // @description    Easy configuration dialog builder for user scripts
  5. // @include        *
  6. // ==/UserScript==
  7.  
  8. /*
  9.  * MonkeyConfig
  10.  * version 0.1.3
  11.  * 
  12.  * Copyright (c) 2011-2013 Michal Wojciechowski (odyniec.net)
  13.  */
  14.  
  15. function MonkeyConfig() {
  16.     var cfg = this,
  17.         /* Data object passed to the constructor */
  18.         data,
  19.         /* Configuration parameters (data.parameters or data.params) */
  20.         params,
  21.         /* Current values of configuration parameters */
  22.         values = {},
  23.         /* Identifier used to store/retrieve configuration */
  24.         storageKey,
  25.         /* Is the configuration dialog displayed? */
  26.         displayed,
  27.         /* Currently displayed window/layer */
  28.         openWin, openLayer,
  29.         /* DOM element wrapping the configuration form */
  30.         container,
  31.         /* Darkened overlay used in the layer display mode */
  32.         overlay;
  33.     
  34.     /**
  35.      * Initialize configuration 
  36.      * 
  37.      * @param newData New data object
  38.      */
  39.     function init(newData) {
  40.         data = newData;
  41.  
  42.         if (data) {
  43.             params = data.parameters || data.params;
  44.             
  45.             if (data.buttons === undefined)
  46.                 /* Set default buttons */
  47.                 data.buttons = [ 'save', 'defaults', 'cancel' ];
  48.             
  49.             if (data.title === undefined)
  50.                 /*
  51.                  * If GM_getMetadata is available, get the name of the script
  52.                  * and use it in the dialog title
  53.                  */
  54.                 if (typeof GM_getMetadata == 'function') {
  55.                     var scriptName = GM_getMetadata('name');
  56.                     data.title = scriptName + ' Configuration'; 
  57.                 }
  58.                 else
  59.                     data.title = 'Configuration';
  60.         }
  61.         
  62.         /* Make a safe version of title to be used as stored value identifier */ 
  63.         var safeTitle = data && data.title ?
  64.                 data.title.replace(/[^a-zA-Z0-9]/g, '_') : '';
  65.  
  66.         storageKey = '_MonkeyConfig_' + safeTitle + '_cfg';
  67.         
  68.         var storedValues;
  69.         
  70.         /* Load stored values (if present) */
  71.         if (GM_getValue(storageKey))
  72.             storedValues = JSON.parse(GM_getValue(storageKey));
  73.  
  74.         for (var name in params) {
  75.             /* If there's a value defined in the passed data object, use it */
  76.             if (params[name]['value'] !== undefined)
  77.                 set(name, params[name].value);
  78.             /* Check if there's a stored value for this parameter */
  79.             else if (storedValues && storedValues[name] !== undefined)
  80.                 set(name, storedValues[name]);            
  81.             /* Otherwise, set the default value (if defined) */
  82.             else if (params[name]['default'] !== undefined)
  83.                 set(name, params[name]['default']);
  84.             else
  85.                 set(name, '');
  86.         }
  87.  
  88.         if (data.menuCommand) {
  89.             /* Add an item to the User Script Commands menu */
  90.             var caption = data.menuCommand !== true ? data.menuCommand :
  91.                 data.title;
  92.             
  93.             GM_registerMenuCommand(caption, function () { cfg.open(); });
  94.         }
  95.  
  96.         /* Expose public methods */
  97.         cfg.open = open;
  98.         cfg.close = close;
  99.         cfg.setHide = setHide;
  100.         cfg.get = get;
  101.         cfg.set = function (name, value) {
  102.             set(name, value);
  103.             update();
  104.         };
  105.     }
  106.  
  107.     function setHide(name, show) {
  108.        params[name].hide = show
  109.        return true
  110.     }
  111.     
  112.     /**
  113.      * Get the value of a configuration parameter
  114.      * 
  115.      * @param name Name of the configuration parameter
  116.      * @returns Value of the configuration parameter
  117.      */
  118.     function get(name) {
  119.         return values[name];
  120.     }
  121.     
  122.     /**
  123.      * Set the value of a configuration parameter
  124.      * 
  125.      * @param name Name of the configuration parameter
  126.      * @param value New value of the configuration parameter
  127.      */
  128.     function set(name, value) {
  129.         values[name] = value;
  130.     }
  131.     
  132.     /**
  133.      * Reset configuration parameters to default values
  134.      */ 
  135.     function setDefaults() {
  136.         for (var name in params) {
  137.             if (typeof params[name]['default'] !== 'undefined') {
  138.                 set(name, params[name]['default']);
  139.             }
  140.         }
  141.     }
  142.     
  143.     /**
  144.      * Render the configuration dialog
  145.      */
  146.     function render() {
  147.         var html = '<div class="__MonkeyConfig_container">' +
  148.             '<h1>' + data.title + '</h1>' +
  149.             '<table>';
  150.  
  151.         for (var name in params) {
  152.             html += MonkeyConfig.formatters['tr'](name, params[name]);}
  153.  
  154.         html += '<tr><td colspan="2" class="__MonkeyConfig_buttons">' +
  155.                 '<table><tr>';
  156.  
  157.         /* Render buttons */
  158.         for (var button in data.buttons) {
  159.             html += '<td>';
  160.             
  161.             switch (data.buttons[button]) {
  162.             case 'cancel':
  163.                 html += '<button type="button" ' +
  164.                     'id="__MonkeyConfig_button_cancel">' +
  165.                     '<img src="data:image/png;base64,' +
  166.                         MonkeyConfig.res.icons.cancel + '" />&nbsp;' +
  167.                     'Cancel</button>';
  168.                 break;
  169.             case 'defaults':
  170.                 html += '<button type="button" ' +
  171.                     'id="__MonkeyConfig_button_defaults">' +
  172.                     '<img src="data:image/png;base64,' +
  173.                         MonkeyConfig.res.icons.arrow_undo + '" />&nbsp;' +
  174.                     'Set&nbsp;Defaults</button>';
  175.                 break;
  176.             case 'save':
  177.                 html += '<button type="button" ' +
  178.                     'id="__MonkeyConfig_button_save">' +
  179.                     '<img src="data:image/png;base64,' +
  180.                         MonkeyConfig.res.icons.tick + '" />&nbsp;' +
  181.                     'Save</button>';
  182.                 break;
  183.             }
  184.             
  185.             html += '</td>';
  186.         }
  187.         
  188.         html += '</tr></table></td></tr>';
  189.         
  190.         html += "</table><div>";
  191.  
  192.         return html;
  193.     }
  194.     
  195.     /**
  196.      * Update the fields in the dialog to reflect current values 
  197.      */
  198.     function update() {
  199.         /* Do nothing if the dialog is not currently displayed */
  200.         if (!displayed)
  201.             return;
  202.         
  203.         for (var name in params) {
  204.             var value = values[name];
  205.             
  206.             switch (params[name].type) {
  207.             case 'checkbox':
  208.                 var elem = container.querySelector('[name="' + name + '"]');
  209.                 elem.checked = !!value;
  210.                 break;
  211.             case 'custom':
  212.                 params[name].set(value, container
  213.                         .querySelector('#__MonkeyConfig_parent_' + name));
  214.                 break;
  215.             case 'number': case 'text':
  216.                 var elem = container.querySelector('[name="' + name + '"]');
  217.                 elem.value = value;
  218.                 break;
  219.             case 'select':
  220.                 var elem = container.querySelector('[name="' + name + '"]');
  221.                 
  222.                 if (elem.tagName.toLowerCase() == 'input') {
  223.                     if (elem.type && elem.type == 'radio') {
  224.                         /* Single selection with radio buttons */
  225.                         elem = container.querySelector(
  226.                             '[name="' + name + '"][value="' + value + '"]');
  227.                         elem.checked = true;
  228.                     }
  229.                     else if (elem.type && elem.type == 'checkbox') {
  230.                         /* Multiple selection with checkboxes */
  231.                         var checkboxes = container.querySelectorAll(
  232.                             'input[name="' + name + '"]');
  233.  
  234.                         for (var i = 0; i < checkboxes.length; i++)
  235.                             checkboxes[i].checked = 
  236.                                 (value.indexOf(checkboxes[i].value) > -1);
  237.                     }
  238.                 }
  239.                 else if (elem.tagName.toLowerCase() == 'select')
  240.                     if (elem.multiple) {
  241.                         /* Multiple selection element */
  242.                         var options = container.querySelectorAll(
  243.                             'select[name="' + name + '"] option');
  244.                             
  245.                         for (var i = 0; i < options.length; i++)
  246.                             options[i].selected =
  247.                                 (value.indexOf(options[i].value) > -1);
  248.                     }
  249.                     else
  250.                         /* Single selection element */
  251.                         elem.value = value;
  252.                 break;
  253.             }
  254.         }
  255.     }
  256.     
  257.     /**
  258.      * Save button click event handler
  259.      */
  260.     function saveClick() {
  261.         for (name in params) {
  262.             switch (params[name].type) {
  263.             case 'checkbox':
  264.                 var elem = container.querySelector('[name="' + name + '"]');
  265.                 values[name] = elem.checked;
  266.                 break;
  267.             case 'custom':
  268.                 values[name] = params[name].get(container
  269.                         .querySelector('#__MonkeyConfig_parent_' + name));
  270.                 break;
  271.             case 'number': case 'text':
  272.                 var elem = container.querySelector('[name="' + name + '"]');
  273.                 values[name] = elem.value;
  274.                 break;
  275.             case 'select':
  276.                 var elem = container.querySelector('[name="' + name + '"]');
  277.  
  278.                 if (elem.tagName.toLowerCase() == 'input') {
  279.                     if (elem.type && elem.type == 'radio')
  280.                         /* Single selection with radio buttons */
  281.                         values[name] = container.querySelector(
  282.                             '[name="' + name + '"]:checked').value;
  283.                     else if (elem.type && elem.type == 'checkbox') {
  284.                         /* Multiple selection with checkboxes */
  285.                         values[name] = [];
  286.                         var inputs = container.querySelectorAll(
  287.                             'input[name="' + name + '"]');
  288.  
  289.                         for (var i = 0; i < inputs.length; i++)
  290.                             if (inputs[i].checked)
  291.                                 values[name].push(inputs[i].value);
  292.                     }
  293.                 }
  294.                 else if (elem.tagName.toLowerCase() == 'select' && elem.multiple) {
  295.                     /* Multiple selection element */
  296.                     values[name] = [];
  297.                     var options = container.querySelectorAll(
  298.                         'select[name="' + name + '"] option');
  299.  
  300.                     for (var i = 0; i < options.length; i++)
  301.                         if (options[i].selected)
  302.                             values[name].push(options[i].value);
  303.                 }
  304.                 else
  305.                     values[name] = elem.value;
  306.                 break;
  307.             }
  308.         }
  309.         
  310.         GM_setValue(storageKey, JSON.stringify(values));
  311.         
  312.         close();
  313.         
  314.         if (data.onSave)
  315.             data.onSave(values);
  316.     }
  317.     
  318.     /**
  319.      * Cancel button click event handler 
  320.      */
  321.     function cancelClick() {
  322.         close();
  323.     }
  324.     
  325.     /**
  326.      * Set Defaults button click event handler
  327.      */
  328.     function defaultsClick() {
  329.         setDefaults();
  330.         update();
  331.     }
  332.  
  333.     /**
  334.      * Open configuration dialog
  335.      * 
  336.      * @param mode
  337.      *            Display mode ("iframe", "layer", or "window", defaults to
  338.      *            "iframe")
  339.      * @param options
  340.      *            Display mode options
  341.      */
  342.     function open(mode, options) {
  343.         function openDone() {
  344.             /* Attach button event handlers */
  345.             var button;
  346.             
  347.             if (button = container.querySelector('#__MonkeyConfig_button_save'))
  348.                 button.addEventListener('click', saveClick, true);
  349.             if (button = container.querySelector('#__MonkeyConfig_button_cancel'))
  350.                 button.addEventListener('click', cancelClick, true);
  351.             if (button = container.querySelector('#__MonkeyConfig_button_defaults'))
  352.                 button.addEventListener('click', defaultsClick, true);
  353.             
  354.             displayed = true;
  355.             update();
  356.         }
  357.         
  358.         switch (mode) {
  359.         case 'window':        
  360.             var windowFeatures = {
  361.                 location: 'no',
  362.                 status: 'no',
  363.                 left: window.screenX,
  364.                 top: window.screenY,
  365.                 width: 100,
  366.                 height: 100
  367.             };
  368.             
  369.             /* Additional features may be specified as an option */
  370.             if (options && options.windowFeatures)
  371.                 for (var name in options.windowFeatures)
  372.                     windowFeatures[name] = options.windowFeatures[name];
  373.  
  374.             var featuresArray = [];
  375.             
  376.             for (var name in windowFeatures)
  377.                 featuresArray.push(name + '=' + windowFeatures[name]);
  378.  
  379.             var win = window.open('', data.title, featuresArray.join(','));
  380.             
  381.             /* Find head and body (then call the blood spatter analyst) */
  382.             var head = win.document.getElementsByTagName('head')[0],
  383.                 body = win.document.getElementsByTagName('body')[0];
  384.  
  385.             head.innerHTML = '<title>' + data.title + '</title>' + 
  386.                 '<style type="text/css">' +
  387.                 MonkeyConfig.res.stylesheets.main + '</style>';
  388.             
  389.             body.className = '__MonkeyConfig_window';
  390.             /* Place the rendered configuration dialog inside the window body */
  391.             body.innerHTML = render();
  392.  
  393.             /* Find the container (CBAN-3489) */
  394.             container = win.document.querySelector('.__MonkeyConfig_container');
  395.             
  396.             /* Resize window to the dimensions of the container div */
  397.             win.innerWidth = container.clientWidth;
  398.             win.resizeBy(0, -win.innerHeight + container.clientHeight);
  399.             
  400.             /* Place the window centered relative to the parent */
  401.             win.moveBy(Math.round((window.outerWidth - win.outerWidth) / 2),
  402.                 Math.round((window.outerHeight - win.outerHeight) / 2));
  403.             
  404.             openWin = win;
  405.             
  406.             openDone();
  407.             
  408.             break;
  409.         case 'layer':
  410.             if (!MonkeyConfig.styleAdded) {
  411.                 GM_addStyle(MonkeyConfig.res.stylesheets.main);
  412.                 MonkeyConfig.styleAdded = true;
  413.             }
  414.             
  415.             var body = document.querySelector('body');
  416.             
  417.             /* Create the layer element */
  418.             openLayer = document.createElement('div');
  419.             openLayer.className = '__MonkeyConfig_layer';
  420.             
  421.             /* Create the overlay */
  422.             overlay = document.createElement('div');
  423.             overlay.className = '__MonkeyConfig_overlay';
  424.             overlay.style.left = 0;
  425.             overlay.style.top = 0;
  426.             overlay.style.width = window.innerWidth + 'px';
  427.             overlay.style.height = window.innerHeight + 'px';
  428.             overlay.style.zIndex = 9999;
  429.             
  430.             body.appendChild(overlay);         
  431.             body.appendChild(openLayer);
  432.             
  433.             /* 
  434.              * Place the rendered configuration dialog inside the layer element
  435.              */
  436.             openLayer.innerHTML = render();
  437.             
  438.             /* Position the layer in the center of the viewport */
  439.             openLayer.style.left = Math.round((window.innerWidth -
  440.                     openLayer.clientWidth) / 2) + 'px';
  441.             openLayer.style.top = Math.round((window.innerHeight -
  442.                     openLayer.clientHeight) / 2) + 'px';
  443.             openLayer.style.zIndex = 9999;
  444.             
  445.             container = document.querySelector('.__MonkeyConfig_container');
  446.             
  447.             openDone();
  448.             
  449.             break;
  450.         case 'iframe':
  451.         default:
  452.             if (!MonkeyConfig.styleAdded) {
  453.                 GM_addStyle(MonkeyConfig.res.stylesheets.main);
  454.                 MonkeyConfig.styleAdded = true;
  455.             }
  456.         
  457.             var body = document.querySelector('body');
  458.             var iframe = document.createElement('iframe');
  459.             
  460.             /* Create the layer element */
  461.             openLayer = document.createElement('div');
  462.             openLayer.className = '__MonkeyConfig_layer';
  463.             
  464.             /* Create the overlay */
  465.             overlay = document.createElement('div');
  466.             overlay.className = '__MonkeyConfig_overlay';
  467.             overlay.style.left = 0;
  468.             overlay.style.top = 0;
  469.             overlay.style.width = window.innerWidth + 'px';
  470.             overlay.style.height = window.innerHeight + 'px';
  471.             overlay.style.zIndex = 9999;
  472.             
  473.             iframe.id = '__MonkeyConfig_frame';
  474.             /* 
  475.              * Make the iframe transparent so that it remains invisible until
  476.              * the document inside it is ready
  477.              */
  478.             iframe.style.opacity = 0;
  479.             iframe.src = 'about:blank';
  480.             
  481.             /* Make the iframe seamless with no border and no scrollbars */ 
  482.             if (undefined !== iframe.frameborder)
  483.                 iframe.frameBorder = '0';
  484.             if (undefined !== iframe.scrolling)
  485.                 iframe.scrolling = 'no';
  486.             if (undefined !== iframe.seamless)
  487.                 iframe.seamless = true;
  488.             
  489.             /* Do the rest in the load event handler */
  490.             iframe.addEventListener('load', function () {
  491.                 iframe.contentDocument.body.innerHTML = render();
  492.                 iframe.style.opacity = 1;
  493.                 
  494.                 /* Append the style to the head */
  495.                 var head = iframe.contentDocument.querySelector('head'),
  496.                     style = iframe.contentDocument.createElement('style');
  497.                 style.setAttribute('type', 'text/css');
  498.                 style.appendChild(iframe.contentDocument.createTextNode(
  499.                         MonkeyConfig.res.stylesheets.main));
  500.                 head.appendChild(style);
  501.                 
  502.                 var body = iframe.contentDocument.querySelector('body');
  503.                 body.className = '__MonkeyConfig_body';
  504.                 
  505.                 container = iframe.contentDocument
  506.                     .querySelector('.__MonkeyConfig_container');
  507.  
  508.                 iframe.width = container.clientWidth;
  509.                 iframe.height = container.clientHeight;
  510.  
  511.                 /* Position the layer in the center of the viewport */
  512.                 openLayer.style.left = Math.round((window.innerWidth -
  513.                         openLayer.clientWidth) / 2) + 'px';
  514.                 openLayer.style.top = Math.round((window.innerHeight -
  515.                         openLayer.clientHeight) / 2) + 'px';
  516.                 openLayer.style.zIndex = 9999;
  517.                 
  518.                 openDone();
  519.             }, false);
  520.  
  521.             setTimeout(function () {
  522.                 iframe.width = container.clientWidth;
  523.                 iframe.height = container.clientHeight;
  524.                 
  525.                 /* Position the layer in the center of the viewport */
  526.                 openLayer.style.left = Math.round((window.innerWidth -
  527.                         openLayer.clientWidth) / 2) + 'px';
  528.                 openLayer.style.top = Math.round((window.innerHeight -
  529.                         openLayer.clientHeight) / 2) + 'px';
  530.                 openLayer.style.zIndex = 9999;
  531.             }, 100);
  532.             
  533.             body.appendChild(overlay);         
  534.             body.appendChild(openLayer);
  535.             openLayer.appendChild(iframe);
  536.         
  537.             break;
  538.         }
  539.     }
  540.     
  541.     /**
  542.      * Close configuration dialog 
  543.      */
  544.     function close() {
  545.         if (openWin) {
  546.             openWin.close();
  547.             openWin = undefined;
  548.         }
  549.         else if (openLayer) {
  550.             openLayer.parentNode.removeChild(openLayer);
  551.             openLayer = undefined;
  552.             
  553.             if (overlay) {
  554.                 overlay.parentNode.removeChild(overlay);
  555.                 overlay = undefined;
  556.             }
  557.         }
  558.         
  559.         displayed = false;
  560.     }
  561.  
  562.     init(arguments[0]);
  563. }
  564.  
  565. /**
  566.  * Replace double quotes with entities so that the string can be safely used
  567.  * in a HTML attribute
  568.  * 
  569.  * @param string A string
  570.  * @returns String with double quotes replaced with entities
  571.  */
  572. MonkeyConfig.esc = function (string) {
  573.     return string.replace(/"/g, '&quot;');
  574. };
  575.  
  576. MonkeyConfig.HTML = {
  577.     '_field': function (name, options, data) {
  578.         var html;
  579.         
  580.         if (options.type && MonkeyConfig.HTML[options.type])
  581.             html = MonkeyConfig.HTML[options.type](name, options, data);
  582.         else
  583.             return;
  584.         
  585.         if (/\[FIELD\]/.test(options.html)) {
  586.             html = options.html.replace(/\[FIELD\]/, html);
  587.         }
  588.         
  589.         return html;
  590.     },
  591.     '_label': function (name, options, data) {
  592.         var label = options['label'] ||
  593.             name.substring(0, 1).toUpperCase() + name.substring(1)
  594.                 .replace(/_/g, '&nbsp;');
  595.  
  596.         let t = '<label for="__MonkeyConfig_field_' + name + '">' + label +
  597.             '</label>';
  598.         if (options['info']) {
  599.             t += `<p style="font-size: .7rem; opacity: .7; margin-top: .1rem; color: green; white-space: pre;">${options['info']}</p>`
  600.         }
  601.         return t;
  602.     },
  603.     'checkbox': function (name, options, data) {
  604.         return '<input id="__MonkeyConfig_field_' + name + 
  605.             '" type="checkbox" name="' + name + '" />'; 
  606.     },
  607.     'custom': function (name, options, data) {
  608.         return options.html;
  609.     },
  610.     'number': function (name, options, data) {
  611.         return '<input id="__MonkeyConfig_field_' + name + '" ' +
  612.             'type="text" class="__MonkeyConfig_field_number" ' +
  613.             'name="' + name + '" />';
  614.     },
  615.     'select': function (name, options, data) {
  616.         var choices = {}, html = '';
  617.         
  618.         if (options.choices.constructor == Array) {
  619.             /* options.choices is an array -- build key/value pairs */
  620.             for (var i = 0; i < options.choices.length; i++)
  621.                 choices[options.choices[i]] = options.choices[i];
  622.         }
  623.         else
  624.             /* options.choices is an object -- use it as it is */
  625.             choices = options.choices;
  626.  
  627.         if (!options.multiple) {
  628.             /* Single selection */
  629.             if (!/^radio/.test(options.variant)) {
  630.                 /* Select element */
  631.                 html += '<select id="__MonkeyConfig_field_' + name + '" ' +
  632.                     'class="__MonkeyConfig_field_select" ' +
  633.                     'name="' + name + '">';
  634.             
  635.                 for (var value in choices)
  636.                     html += '<option value="' + MonkeyConfig.esc(value) + '">' +
  637.                         choices[value] + '</option>';
  638.                 
  639.                 html += '</select>';
  640.             }
  641.             else {
  642.                 /* Radio buttons */
  643.                 for (var value in choices) {
  644.                     html += '<label><input type="radio" name="' + name + '" ' +
  645.                         'value="' + MonkeyConfig.esc(value) + '" />&nbsp;' +
  646.                         choices[value] + '</label>' +
  647.                         (/ column/.test(options.variant) ? '<br />' : '');
  648.                 }
  649.             }
  650.         }
  651.         else {
  652.             /* Multiple selection */
  653.             if (!/^checkbox/.test(options.variant)) {
  654.                 /* Checkboxes */
  655.                 html += '<select id="__MonkeyConfig_field_' + name + '" ' +
  656.                     'class="__MonkeyConfig_field_select" ' +
  657.                     'multiple="multiple" ' +
  658.                     'name="' + name + '">';
  659.                 
  660.                 for (var value in choices)
  661.                     html += '<option value="' + MonkeyConfig.esc(value) + '">' +
  662.                         choices[value] + '</option>';
  663.                 
  664.                 html += '</select>';
  665.             }
  666.             else {
  667.                 /* Select element */
  668.                 for (var value in choices) {
  669.                     html += '<label><input type="checkbox" ' +
  670.                         'name="' + name + '" ' +
  671.                         'value="' + MonkeyConfig.esc(value) + '" />&nbsp;' +
  672.                         choices[value] + '</label>' +
  673.                         (/ column/.test(options.variant) ? '<br />' : '');
  674.                 }
  675.             }
  676.         }
  677.         
  678.         return html;
  679.     },
  680.     'text': function (name, options, data) {
  681.         if (options.long)
  682.             return '<textarea id="__MonkeyConfig_field_' + name + '" ' +
  683.                 'class="__MonkeyConfig_field_text" ' +
  684.                 (!isNaN(options.long) ? 'rows="' + options.long + '" ' : '') +
  685.                 'name="' + name + '"></textarea>';
  686.         else
  687.             return '<input id="__MonkeyConfig_field_' + name + '" ' +
  688.                 'type="text" class="__MonkeyConfig_field_text" ' +
  689.                 'name="' + name + '" />';
  690.     }
  691. };
  692.  
  693. MonkeyConfig.formatters = {
  694.     'tr': function (name, options, data) {
  695.         var html = `<tr style="display: ${options.hide ? 'none' : ''}">`;
  696.  
  697.         switch (options.type) {
  698.         case 'checkbox':
  699.             /* Checkboxes get special treatment */
  700.             html += '<td id="__MonkeyConfig_parent_' + name + '" colspan="2">';
  701.             html += MonkeyConfig.HTML['_field'](name, options, data) + ' ';
  702.             html += MonkeyConfig.HTML['_label'](name, options, data);
  703.             html += '</td>';
  704.             break;
  705.         default:
  706.             html += '<td>';
  707.             html += MonkeyConfig.HTML['_label'](name, options, data);
  708.             html += '</td><td id="__MonkeyConfig_parent_' + name + '">';
  709.             html += MonkeyConfig.HTML['_field'](name, options, data);
  710.             html += '</td>';
  711.             break;
  712.         }
  713.         
  714.         html += '</tr>';
  715.  
  716.         return html;
  717.     }
  718. };
  719.  
  720. /* Has the stylesheet been added? */
  721. MonkeyConfig.styleAdded = false;
  722.  
  723. /* Resources */
  724. MonkeyConfig.res = {};
  725.  
  726. /* Icons */
  727. MonkeyConfig.res.icons = {
  728.     'arrow_undo': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0\
  729. U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIJSURBVDjLpVM9aJNRFD35GsRSoUKKzQ/B\
  730. 0NJJF3EQlKrVgijSCBmC4NBFKihIcXBwEZdSHVoUwUInFUEkQ1DQ4CKiFsQsTrb5xNpgaZHw2Uog\
  731. 5t5zn0NJNFaw0guX97hwzuPcc17IOYfNlIdNVrhxufR6xJkZjAbSQGXjNAorqixSWFDV3KPhJ+UG\
  732. LtSQMPryrDscPwLnAHOEOQc6gkbUpIagGmApWIb/pZRX4fjj889nWiSQtgYyBZ1BTUEj6AjPa0P7\
  733. 1nb0Jfqwa+futIheHrzRn2yRQCUK/lOQhApBJVQJChHfnkCqOwWEQ+iORJHckUyX5ksvAEyGNuJC\
  734. +s6xCRXNHNxzKMmQ4luwgjfvZp69uvr2+IZcyJ8rjIporrxURggetnV0QET3rrPxzMNM2+n7p678\
  735. jUTrCiWhphAjVHR9DlR0WkSzf4IHxg5MSF0zXZEuVKWKSlCBCostS8zeG7oV64wPqxInbw86lbVX\
  736. KEQ8mkAqmUJ4SxieeVhcnANFC02C7N2h69HO2IXeWC8MDj2JnqaFNAMd8f3HKjx6+LxQRmnOz1OZ\
  737. axKIaF1VISYwB9ARZoQaYY6o1WpYCVYxt+zDn/XzVBv/MOWXW5J44ubRyVgkelFpmF/4BJVfOVDl\
  738. VyqLVBZI5manPjajDOdcswfG9k/3X9v3/vfZv7rFBanriIo++J/f+BMT+YWS6hXl7QAAAABJRU5E\
  739. rkJggg==',
  740.     'cancel': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0\
  741. U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLpZNraxpBFIb3a0ggISmmNISW\
  742. XmOboKihxpgUNGWNSpvaS6RpKL3Ry//Mh1wgf6PElaCyzq67O09nVjdVlJbSDy8Lw77PmfecMwZg\
  743. /I/GDw3DCo8HCkZl/RlgGA0e3Yfv7+DbAfLrW+SXOvLTG+SHV/gPbuMZRnsyIDL/OASziMxkkKkU\
  744. QTJJsLaGn8/iHz6nd+8mQv87Ahg2H9Th/BxZqxEkEgSrq/iVCvLsDK9awtvfxb2zjD2ARID+lVVl\
  745. babTgWYTv1rFL5fBUtHbbeTJCb3EQ3ovCnRC6xAgzJtOE+ztheYIEkqbFaS3vY2zuIj77AmtYYDu\
  746. sPy8/zuvunJkDKXM7tYWTiyGWFjAqeQnAD6+7ueNx/FLpRGAru7mcoj5ebqzszil7DggeF/DX1nB\
  747. N82rzPqrzbRayIsLhJqMPT2N83Sdy2GApwFqRN7jFPL0tF+10cDd3MTZ2AjNUkGCoyO6y9cRxfQo\
  748. wFUbpufr1ct4ZoHg+Dg067zduTmEbq4yi/UkYidDe+kaTcP4ObJIajksPd/eyx3c+N2rvPbMDPbU\
  749. FPZSLKzcGjKPrbJaDsu+dQO3msfZzeGY2TCvKGYQhdSYeeJjUt21dIcjXQ7U7Kv599f4j/oF55W4\
  750. g/2e3b8AAAAASUVORK5CYII=',
  751.     'tick': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0\
  752. U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGrSURBVDjLvZPZLkNhFIV75zjvYm7VGFNC\
  753. qoZUJ+roKUUpjRuqp61Wq0NKDMelGGqOxBSUIBKXWtWGZxAvobr8lWjChRgSF//dv9be+9trCwAI\
  754. /vIE/26gXmviW5bqnb8yUK028qZjPfoPWEj4Ku5HBspgAz941IXZeze8N1bottSo8BTZviVWrEh5\
  755. 46EO03EXpuJOdG63otJbjBKHkEp/Ml6yNYYzpuezWL4s5VMtT8acCMQcb5XL3eJE8VgBlR7BeMGW\
  756. 9Z4yT9y1CeyucuhdTGDxfftaBO7G4L+zg91UocxVmCiy51NpiP3n2treUPujL8xhOjYOzZYsQWAN\
  757. yRYlU4Y9Br6oHd5bDh0bCpSOixJiWx71YY09J5pM/WEbzFcDmHvwwBu2wnikg+lEj4mwBe5bC5h1\
  758. OUqcwpdC60dxegRmR06TyjCF9G9z+qM2uCJmuMJmaNZaUrCSIi6X+jJIBBYtW5Cge7cd7sgoHDfD\
  759. aAvKQGAlRZYc6ltJlMxX03UzlaRlBdQrzSCwksLRbOpHUSb7pcsnxCCwngvM2Rm/ugUCi84fycr4\
  760. l2t8Bb6iqTxSCgNIAAAAAElFTkSuQmCC'
  761. };
  762.  
  763. /* Stylesheets */
  764. MonkeyConfig.res.stylesheets = {
  765.     'main': '\
  766. body.__MonkeyConfig_window {\
  767.     appearance: window !important;\
  768.     -moz-appearance: window !important;\
  769.     background: auto;\
  770.     font-family: sans-serif !important;\
  771.     height: 100% !important;\
  772.     margin: 0 !important;\
  773.     padding: 0 !important;\
  774.     width: 100% !important;\
  775. }\
  776. \
  777. div.__MonkeyConfig_container {\
  778.     display: table !important;\
  779.     font-family: sans-serif !important;\
  780.     padding: 0.3em !important;\
  781. }\
  782. \
  783. body.__MonkeyConfig_window div.__MonkeyConfig_container {\
  784.     appearance: window !important;\
  785.     -moz-appearance: window !important;\
  786.     height: 100%;\
  787.     width: 100%;\
  788. }\
  789. \
  790. div.__MonkeyConfig_container h1 {\
  791.     border-bottom: solid 1px #999 !important;\
  792.     font-family: sans-serif !important;\
  793.     font-size: 120% !important;\
  794.     margin: 0 !important;\
  795.     padding: 0 0 0.3em 0 !important;\
  796. }\
  797. \
  798. div.__MonkeyConfig_container table {\
  799.     border-spacing: 0 !important;\
  800.     margin: 0 !important;\
  801. }\
  802. \
  803. div.__MonkeyConfig_container table td {\
  804.     border: none !important;\
  805.     line-height: 100% !important;\
  806.     padding: 0.3em !important;\
  807.     text-align: left !important;\
  808.     vertical-align: top !important;\
  809.     white-space: nowrap !important;\
  810. }\
  811. \
  812. div.__MonkeyConfig_container table td.__MonkeyConfig_buttons {\
  813.     padding: 0.2em 0 !important;\
  814. }\
  815. \
  816. .__MonkeyConfig_field_number {\
  817.     width: 5em !important;\
  818. }\
  819. \
  820. div.__MonkeyConfig_container td.__MonkeyConfig_buttons table {\
  821.     border-top: solid 1px #999 !important;\
  822.     width: 100% !important;\
  823. }\
  824. \
  825. div.__MonkeyConfig_container td.__MonkeyConfig_buttons td {\
  826.     padding: 0.6em 0.3em 0.1em 0.3em !important;\
  827.     text-align: center !important;\
  828.     vertical-align: top;\
  829. }\
  830. \
  831. div.__MonkeyConfig_container td.__MonkeyConfig_buttons button {\
  832.     appearance: button !important;\
  833.     -moz-appearance: button !important;\
  834.     background-position: 8px 50% !important;\
  835.     background-repeat: no-repeat !important;\
  836.     padding: 3px 8px 3px 24px !important;\
  837.     padding: 3px 8px !important;\
  838.     white-space: nowrap !important;\
  839. }\
  840. \
  841. div.__MonkeyConfig_container td.__MonkeyConfig_buttons button img {\
  842.     vertical-align: middle !important;\
  843. }\
  844. \
  845. div.__MonkeyConfig_layer {\
  846.     display: table !important;\
  847.     position: fixed !important;\
  848. }\
  849. \
  850. div.__MonkeyConfig_layer div.__MonkeyConfig_container,\
  851. body.__MonkeyConfig_body > div.__MonkeyConfig_container {\
  852.     background: #eee linear-gradient(180deg,\
  853.         #f8f8f8 0, #ddd 100%) !important;\
  854.     border-radius: 0.5em !important;\
  855.     box-shadow: 2px 2px 16px #000 !important;\
  856.     color: #000 !important;\
  857.     font-family: sans-serif !important;\
  858.     font-size: 11pt !important;\
  859.     padding: 1em 1em 0.4em 1em !important;\
  860. }\
  861. \
  862. div.__MonkeyConfig_layer div.__MonkeyConfig_container td,\
  863. div.__MonkeyConfig_layer div.__MonkeyConfig_container label,\
  864. div.__MonkeyConfig_layer div.__MonkeyConfig_container input,\
  865. div.__MonkeyConfig_layer div.__MonkeyConfig_container select,\
  866. div.__MonkeyConfig_layer div.__MonkeyConfig_container textarea,\
  867. div.__MonkeyConfig_layer div.__MonkeyConfig_container button {\
  868.     color: #000 !important;\
  869.     font-family: sans-serif !important;\
  870.     font-size: 11pt !important;\
  871.     line-height: 100% !important;\
  872.     margin: 0 !important;\
  873.     vertical-align: baseline !important;\
  874. }\
  875. \
  876. div.__MonkeyConfig_container label {\
  877.     line-height: 120% !important;\
  878.     vertical-align: baseline !important;\
  879. }\
  880. \
  881. div.__MonkeyConfig_container textarea {\
  882.     vertical-align: text-top !important;\
  883.     width: 100%;\
  884. }\
  885. \
  886. div.__MonkeyConfig_layer div.__MonkeyConfig_container input[type="text"] {\
  887.     appearance: textfield !important;\
  888.     -moz-appearance: textfield !important;\
  889.     background: #fff !important;\
  890. }\
  891. \
  892. div.__MonkeyConfig_layer div.__MonkeyConfig_container h1 {\
  893.     font-weight: bold !important;\
  894.     text-align: left !important;\
  895. }\
  896. \
  897. div.__MonkeyConfig_layer div.__MonkeyConfig_container td.__MonkeyConfig_buttons button,\
  898. body > div.__MonkeyConfig_container td.__MonkeyConfig_buttons button {\
  899.     appearance: button !important;\
  900.     -moz-appearance: button !important;\
  901.     background: #ccc linear-gradient(180deg,\
  902.         #ddd 0, #ccc 45%, #bbb 50%, #aaa 100%) !important;\
  903.     border-style: solid !important;\
  904.     border-width: 1px !important;\
  905.     border-radius: 0.5em !important;\
  906.     box-shadow: 0 0 1px #000 !important;\
  907.     color: #000 !important;\
  908.     font-size: 11pt !important;\
  909. }\
  910. \
  911. div.__MonkeyConfig_layer div.__MonkeyConfig_container td.__MonkeyConfig_buttons button:hover,\
  912. body > div.__MonkeyConfig_container td.__MonkeyConfig_buttons button:hover {\
  913.     background: #d2d2d2 linear-gradient(180deg,\
  914.         #e2e2e2 0, #d2d2d2 45%, #c2c2c2 50%, #b2b2b2 100%) !important;\
  915. }\
  916. \
  917. div.__MonkeyConfig_overlay {\
  918.     background-color: #000 !important;\
  919.     opacity: 0.6 !important;\
  920.     position: fixed !important;\
  921. }\
  922. \
  923. iframe#__MonkeyConfig_frame {\
  924.     border: none !important;\
  925.     box-shadow: 2px 2px 16px #000 !important;\
  926. }\
  927. \
  928. body.__MonkeyConfig_body {\
  929.     margin: 0 !important;\
  930.     padding: 0 !important;\
  931. }\
  932. '
  933. };