☰

MonkeyConfig-branch

Easy configuration dialog builder for 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/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. };