☰

R4 Settings

R4 Settings Library

ეს სკრიპტი არ უნდა იყოს პირდაპირ დაინსტალირებული. ეს ბიბლიოთეკაა, სხვა სკრიპტებისთვის უნდა ჩართეთ მეტა-დირექტივაში // @require https://update.greatest.deepsurf.us/scripts/482052/1502912/R4%20Settings.js. 

  1. // ==UserScript==
  2. // @name            R4 Settings
  3. // @description     R4 Settings Library
  4. // @version         1.4.9
  5. // @grant           GM.info
  6. // @grant           GM.addStyle
  7. // @grant           GM.xmlHttpRequest
  8. // @grant           GM.setValue
  9. // @grant           GM.getValue
  10. // @grant           GM.deleteValue
  11. // @require         https://update.greatest.deepsurf.us/scripts/482042/1298685/R4%20Images.js
  12. // @require         https://update.greatest.deepsurf.us/scripts/482597/1301960/R4%20Utils.js
  13. // ==/UserScript==
  14.  
  15.     /* ------------------------------------------------- */
  16.     /* --------------Polyfills-------------------------- */
  17.     /* ------------------------------------------------- */
  18.  
  19.  
  20.     // Polyfill for Greasemonkey extension
  21.  
  22.     function R4_addStyle (aCss) {
  23.         let head = document.getElementsByTagName('head')[0];
  24.         if (head) {
  25.             let style = document.createElement('style');
  26.             style.setAttribute('type', 'text/css');
  27.             style.textContent = aCss;
  28.             head.appendChild(style);
  29.             return style;
  30.         }
  31.         return null;
  32.     };
  33.  
  34.     if (GM.info?.scriptHandler === 'Userscripts') {
  35.         console.log("Overriding GM.addStyle for Safari Userscripts extension.");
  36.         GM.addStyle = R4_addStyle;
  37.     }
  38.     
  39.     // Polyfill for Safari Userscripts extension
  40.  
  41.     const original_GM_xmlHttpRequest = GM.xmlHttpRequest;
  42.  
  43.     async function R4_xmlHttpRequest(details) {
  44.  
  45.         if (details.onload) {
  46.             const original_onload = details.onload;
  47.             details.onload = (response) => {
  48.                 if (response.responseURL) {
  49.                     response.finalUrl = response.responseURL;
  50.                 }
  51.                 return original_onload(response);
  52.             }
  53.         }
  54.  
  55.         return await original_GM_xmlHttpRequest(details);
  56.     }
  57.  
  58.     GM.xmlHttpRequest = R4_xmlHttpRequest;
  59.  
  60.  
  61. /* ------------------------------------------------- */
  62. /* --------------Settings--------------------------- */
  63. /* ------------------------------------------------- */
  64.  
  65. function R4Settings(options = {}) {
  66.  
  67.     const utils = R4Utils();
  68.     const images = R4Images();
  69.  
  70.     GM.addStyle(`
  71.     /* css */
  72.  
  73.     /* Settings */
  74.  
  75.     .r4-settings {
  76.         position: relative;
  77.     }
  78.  
  79.     .r4-settings > ul {
  80.         width: 350px;
  81.         background: #313131;
  82.         border-top: 0;
  83.         position: absolute;
  84.         top: 50px;
  85.         left: 0px;
  86.         white-space: nowrap;
  87.         box-shadow: 0 5px 20px 0px #000;
  88.         border-color: #222d33;
  89.         border-style: solid;
  90.         border-width: 3px 3px 3px 3px;
  91.         padding: 5px 0 0 0;
  92.     }
  93.     .r4-settings > ul:before {
  94.         content: '';
  95.         display: block;
  96.         position: absolute;
  97.         top: -13px;
  98.         left: 20px;
  99.         width: 0;
  100.         height: 0;
  101.         border-left: 10px solid transparent;
  102.         border-right: 10px solid transparent;
  103.         border-bottom: 10px solid #222d33;
  104.     }
  105.  
  106.     .r4-settings > ul:after {
  107.         content: '';
  108.         display: block;
  109.         position: absolute;
  110.         top: -9px;
  111.         left: 21px;
  112.         width: 0;
  113.         height: 0;
  114.         border-left: 9px solid transparent;
  115.         border-right: 9px solid transparent;
  116.         border-bottom: 9px solid #313131;
  117.     }
  118.  
  119.     .r4-settings > ul > li,
  120.     .r4-setting-submenu > ul > li {
  121.         color: #777;
  122.         font-size: 10px;
  123.         font-weight: bold;
  124.         margin: 0 !important;
  125.         padding-left: 10px;
  126.         padding-right: 10px;
  127.         padding-top: 5px;
  128.         padding-bottom: 5px;
  129.         min-height: 30px;
  130.     }
  131.  
  132.  
  133.     .r4-settings > ul > li .r4-setting,
  134.     .r4-setting-submenu > ul > li .r4-setting {
  135.         display: inline-block;
  136.         width: 100%;
  137.     }
  138.  
  139.     .r4-settings > ul > li .r4-tumbler,
  140.     .r4-setting-submenu > ul > li .r4-tumbler {
  141.         float: right;
  142.     }
  143.  
  144.     .r4-settings .r4-setting-header {
  145.         text-align: center;
  146.     }
  147.  
  148.     .r4-settings .r4-setting-text-value {
  149.         display: block;
  150.         opacity: .5;
  151.     }
  152.  
  153.     .r4-settings .r4-setting-text-block {
  154.         float: left;
  155.         position: relative;
  156.         padding-top: 5px;
  157.     }
  158.  
  159.     .r4-setting-submenu {
  160.         position: relative;
  161.         cursor: pointer;
  162.     }
  163.  
  164.     .r4-setting-submenu > ul {
  165.         background: #212121;
  166.         margin: 30px -10px 0;
  167.         padding: 10px 0;
  168.         cursor: auto;
  169.     }
  170.  
  171.     .r4-settings > ul > li:last-child .r4-setting-submenu > ul {
  172.         margin-bottom: -5px;
  173.     }
  174.  
  175.     .r4-setting-submenu-arrow {
  176.         float: right;
  177.         width: 15px;
  178.         height: 15px;
  179.         margin-right: 10px;
  180.         margin-top: 5px;
  181.         background-size: 15px 15px;
  182.         background-repeat: no-repeat;
  183.         background-image: url(${images.arrow});
  184.         filter: invert(100%) sepia(95%) saturate(21%) hue-rotate(280deg) brightness(106%) contrast(106%);
  185.         transform: rotate(180deg);
  186.     }
  187.  
  188.     /* Tumbler */
  189.  
  190.     .r4-tumbler {
  191.         width: 38px;
  192.         height: 30px;
  193.         background-color: #000;
  194.         border: #1d92b2;
  195.         border-radius: 30px;
  196.         display: flex;
  197.         justify-content: space-between;
  198.         align-items: center;
  199.         padding: 0 6px;
  200.         cursor: pointer;
  201.         position: relative;
  202.         user-select: none;
  203.         box-sizing: content-box;
  204.     }
  205.     .r4-tumbler-point {
  206.         border-radius: 50%;
  207.         content: '';
  208.         display: block;
  209.         height: 20px;
  210.         width: 20px;
  211.         background-color: #999;
  212.         background-clip: content-box;
  213.         box-sizing: border-box;
  214.         border-color: transparent;
  215.         border-style: solid;
  216.         border-width: 5px;
  217.     }
  218.     .r4-tumbler > .r4-tumbler-dot {
  219.         position: absolute;
  220.         height: 20px;
  221.         width: 20px;
  222.         border-radius: 50%;
  223.         background-color: #fff;
  224.         transition: transform .5s,background-color .5s;
  225.         will-change: transform;
  226.     }
  227.  
  228.     /* Tumbler On-Off */
  229.  
  230.     .r4-on-of-tumbler .r4-tumbler-point:nth-child(1) {
  231.         background-color: green;
  232.     }
  233.     .r4-on-of-tumbler .r4-tumbler-point:nth-child(2) {
  234.         background-color: indianred;
  235.     }
  236.  
  237.     /* Tumbler Settings */
  238.  
  239.     .r4-tumbler-settings {
  240.         width: 40px !important;
  241.     }
  242.     .r4-tumbler-settings .r4-tumbler-point {
  243.         background-size: 15px 15px;
  244.         background-repeat: no-repeat;
  245.         background-position: center;
  246.         border-width: 2px;
  247.     }
  248.     .r4-tumbler-settings .r4-tumbler-point:nth-child(1) {
  249.         background-image: url('${images.settings}');
  250.         background-color: transparent !important;
  251.     }
  252.     .r4-tumbler-settings .r4-tumbler-point:nth-child(2) {
  253.         background-image: url('${images.settingsclose}');
  254.         background-color: transparent !important;
  255.     }
  256.  
  257.     .r4-tumbler-settings-update,
  258.     .r4-tumbler-settings-update:hover {
  259.         height: 30px;
  260.         background: #f4363630;
  261.         position: absolute;
  262.         left: 0;
  263.         margin-left: 30px;
  264.         margin-top: 5px;
  265.         border-radius: 30px;
  266.         color: #b44b44 !important;
  267.         line-height: 30px;
  268.         padding: 0 20px 0 40px;
  269.         cursor: pointer;
  270.         text-decoration: none;
  271.     }
  272.  
  273.     /* Tooltip */
  274.  
  275.     .r4-tooltip {
  276.         position: relative;
  277.         display: inline-block;
  278.     }
  279.  
  280.     .r4-tooltip .tooltiptext {
  281.         background: #313131;
  282.         border-top: 0;
  283.         position: absolute;
  284.         top: -10px;
  285.         left: 35px;
  286.         white-space: nowrap;
  287.         box-shadow: 0 5px 20px 0px #000;
  288.         border-color: #222d33;
  289.         border-style: solid;
  290.         border-width: 3px;
  291.         visibility: hidden;
  292.         width: 300px;
  293.         white-space: normal;
  294.         padding: 15px;
  295.         position: absolute;
  296.         z-index: 3;
  297.     }
  298.  
  299.     .r4-tooltip:hover .tooltiptext {
  300.         visibility: visible;
  301.     }
  302.  
  303.     .r4-tooltip .tooltiptext:before {
  304.         content: '';
  305.         display: block;
  306.         position: absolute;
  307.         left: -13px;
  308.         top: 11px;
  309.         width: 0;
  310.         height: 0;
  311.         border-top: 10px solid transparent;
  312.         border-bottom: 10px solid transparent;
  313.         border-right: 10px solid #222d33;
  314.     }
  315.  
  316.     .r4-tooltip .tooltiptext:after {
  317.         content: '';
  318.         display: block;
  319.         position: absolute;
  320.         left: -9px;
  321.         top: 12px;
  322.         width: 0;
  323.         height: 0;
  324.         border-top: 9px solid transparent;
  325.         border-bottom: 9px solid transparent;
  326.         border-right: 9px solid #222d33;
  327.     }
  328.  
  329.     .r4-tooltip-icon {
  330.         border-radius: 50%;
  331.         background: #777;
  332.         width: 14px;
  333.         height: 14px;
  334.         display: inline-block;
  335.         text-align: center;
  336.         color: #000;
  337.         text-transform: lowercase;
  338.         cursor: pointer;
  339.         font-family: monospace, monospace;
  340.         font-size: 13px;
  341.         margin: 8px;
  342.     }
  343.  
  344.     /* !css */
  345.     `);
  346.  
  347.     const state = {
  348.         events: {
  349.             start: {
  350.                 fired: false,
  351.             },
  352.             end: {
  353.                 fired: false,
  354.             },
  355.         }
  356.     };
  357.  
  358.     const elements = {
  359.         tumbler: null,
  360.         dropdown: null,
  361.     };
  362.  
  363.     buildSettings();
  364.  
  365.     async function setSetting(name, value) {
  366.         await GM.setValue(name, value);
  367.         console.debug(`Saved setting ${name}: ${JSON.stringify(value)}`);
  368.     }
  369.  
  370.     async function deleteSetting(name) {
  371.         await GM.deleteValue(name);
  372.     }
  373.  
  374.     async function getSetting(name) {
  375.         const value = await GM.getValue(name);
  376.         if (value === undefined) {
  377.             return options.missingSettingHandler?.(name);
  378.         }
  379.         console.debug(`Got setting ${name}: ${JSON.stringify(value)}`);
  380.         return value;
  381.     }
  382.  
  383.     async function setCongigSetting(config, option) {
  384.         if (option.value === undefined) {
  385.             await deleteSetting(config.name);
  386.         } 
  387.         await setSetting(config.name, option.value);
  388.     }
  389.  
  390.     async function getConfigSetting(config) {
  391.         return await getSetting(config.name);
  392.     }
  393.  
  394.     async function getCurrentOption(config) {
  395.         const currentSetting = await getConfigSetting(config);
  396.  
  397.         for (const tumblerOption of config.options) {
  398.             const optionSetting = tumblerOption.value;
  399.             if (optionSetting === currentSetting) {
  400.                 return tumblerOption;
  401.             }
  402.         }
  403.  
  404.         const option = getDefaultOption(config);
  405.         await setCongigSetting(config, option);
  406.         return option;
  407.     }
  408.  
  409.     async function rotateSetting(config) {
  410.         const currentOption = await getCurrentOption(config);
  411.         const nextOption = getNextOption(config, currentOption);
  412.         await setCongigSetting(config, nextOption);
  413.         setBodyClass(config, nextOption);
  414.         if (nextOption.reload === true) {
  415.             document.location.reload();
  416.         }
  417.         if (nextOption.start) {
  418.             nextOption.start();
  419.         }
  420.         if (nextOption.end) {
  421.             nextOption.end();
  422.         }
  423.     }
  424.  
  425.     function getDefaultOption(config) {
  426.         for (const tumblerOption of config.options) {
  427.             if (tumblerOption.default === true) {
  428.                 return tumblerOption;
  429.             }
  430.         }
  431.         return config.options[0];
  432.     }
  433.  
  434.     function setBodyClass(config, option) {
  435.         for (const tumblerOption of config.options) {
  436.             if (tumblerOption.class) {
  437.                 document.body.classList.remove(tumblerOption.class);
  438.             }
  439.         }
  440.  
  441.         if (option?.class) {
  442.             document.body.classList.add(option.class);
  443.         }
  444.     }
  445.  
  446.     function getNextOption(config, option) {
  447.         let nextOptionIndex;
  448.         if (option) {
  449.             const currentOptionIndex = config.options.indexOf(option);
  450.             if (currentOptionIndex < config.options.length - 1) {
  451.                 nextOptionIndex = currentOptionIndex + 1;
  452.             } else {
  453.                 nextOptionIndex = 0;
  454.             }
  455.         } else {
  456.             nextOptionIndex = 1;
  457.         }
  458.         return config.options[nextOptionIndex];
  459.     }
  460.  
  461.     function afterStart(callback) {
  462.         if (state.events.start.fired === true) {
  463.             callback();
  464.         } else {
  465.             document.addEventListener("R4SettingsStart", callback);
  466.         }
  467.     }
  468.  
  469.     function afterEnd(callback) {
  470.         if (state.events.end.fired === true) {
  471.             callback();
  472.         } else {
  473.             document.addEventListener("R4SettingsEnd", callback);
  474.         }
  475.     }
  476.  
  477.     async function initSetting(config) {
  478.         const currentOption = await getCurrentOption(config);
  479.         afterStart(() => {
  480.             setBodyClass(config, currentOption);
  481.         });
  482.         if (config?.start) {
  483.             afterStart(() => {
  484.                 config.start();
  485.             });
  486.         }
  487.         if (currentOption?.start) {
  488.             afterStart(() => {
  489.                 currentOption.start();
  490.             });
  491.         }
  492.         if (config?.end) {
  493.             afterEnd(() => {
  494.                 config.end();
  495.             });
  496.         }
  497.         if (currentOption?.end) {
  498.             afterEnd(() => {
  499.                 currentOption.end();
  500.             });
  501.         }
  502.     }
  503.  
  504.     function buildSettings() {
  505.         elements.tumbler = buildTumbler({
  506.             handler: toggle,
  507.             name: "settings",
  508.             classes: ["r4-settings", "pull-right"],
  509.             options: [
  510.                 {
  511.                     class: null,
  512.                 },
  513.                 {
  514.                     class: "r4-settings-active",
  515.                 },
  516.             ],
  517.         });
  518.  
  519.         elements.dropdown = utils.fromHTML(
  520.             /* html */
  521.             `
  522.             <!-- html -->
  523.             <ul class="hidden"></ul>
  524.             <!-- !html -->
  525.             `
  526.         );
  527.  
  528.         elements.tumbler.appendChild(elements.dropdown);
  529.  
  530.         const header = utils.fromHTML(
  531.             /* html */
  532.             `
  533.             <!-- html -->
  534.             <div class="r4-setting-header"></div>
  535.             <!-- !html -->
  536.             `
  537.         );
  538.  
  539.         if (options.script_homepage) {
  540.             
  541.             header.appendChild(utils.fromHTML(
  542.                 /* html */
  543.                 `
  544.                 <!-- html -->
  545.                 <div class="r4-setting-label">
  546.                     <a href="${options.script_homepage}" target="_blank">
  547.                         ${GM.info.script.name}
  548.                     </a>
  549.                 </div>
  550.                 <!-- !html -->
  551.                 `
  552.             ));
  553.             
  554.             header.appendChild(utils.fromHTML(
  555.                 /* html */
  556.                 `
  557.                 <!-- html -->
  558.                 <div class="r4-setting-text-value">
  559.                     <a href="${options.script_homepage}/feedback" target="_blank">
  560.                         ${options.feedback_text || "Feedback"}
  561.                     </a>
  562.                 </div>
  563.                 <!-- !html -->
  564.                 `
  565.             ));
  566.  
  567.             GM.xmlHttpRequest({
  568.                 method: "GET",
  569.                 url: options.script_homepage,
  570.                 onload(response) {
  571.                     console.debug(`Response ${response.status} for ${response.finalUrl}`, {response});
  572.                     if (response.status === 200) {
  573.                         const patern = /<a class="install-link" [^>]* data-script-version="(?<version>[^"]*)" [^>]* href="(?<href>[^"]*)"[^>]*>/;
  574.                         const results = patern.exec(response.responseText);
  575.                         if (!results?.groups) {
  576.                             console.debug(`Failed to parse install link`);
  577.                             return;
  578.                         }
  579.                         if (results.groups.version == GM.info.script.version) {
  580.                             return;
  581.                         }
  582.                         console.log(`New version ${results.groups.version} is available`);
  583.  
  584.                         elements.tumbler.insertBefore(utils.fromHTML(
  585.                             /* html */
  586.                             `
  587.                             <!-- html -->
  588.                             <a class="r4-tumbler-settings-update" href="${results.groups.href}" target="_blank">
  589.                                 ${options.update_text || "Update"}
  590.                             </a>
  591.                             <!-- !html -->
  592.                             `
  593.                         ), elements.tumbler.firstChild);
  594.                     }
  595.                 },
  596.                 onerror(e) {
  597.                     console.debug(`Failed to request install link`);
  598.                     console.debug("Error:", {e});
  599.                 },
  600.             });
  601.  
  602.         } else {
  603.             
  604.             header.appendChild(utils.fromHTML(
  605.                 /* html */
  606.                 `
  607.                 <!-- html -->
  608.                 <div class="r4-setting-label">
  609.                     ${GM.info.script.name}
  610.                 </div>
  611.                 <!-- !html -->
  612.                 `
  613.             ));
  614.  
  615.         }
  616.             
  617.         header.appendChild(utils.fromHTML(
  618.             /* html */
  619.             `
  620.             <!-- html -->
  621.             <div class="r4-setting-text-value">
  622.                 ${options.version_text || "Version"}: ${GM.info.script.version}
  623.             </div>
  624.             <!-- !html -->
  625.             `
  626.         ));
  627.  
  628.         addElementSetting(header);
  629.  
  630.         document.addEventListener("click", close);
  631.     }
  632.  
  633.     function toggle(event) {
  634.         elements.dropdown.classList.toggle("hidden");
  635.         event.stopPropagation();
  636.         event.preventDefault();
  637.     }
  638.  
  639.     function close(event) {
  640.         if (!event.target.closest(".r4-settings")) {
  641.             elements.dropdown.classList.add("hidden");
  642.         }
  643.     }
  644.  
  645.     function findSubmenu(config) {
  646.         const submenuAll = elements.tumbler.querySelectorAll(".r4-setting-submenu");
  647.         const submenuFiltered = Array.from(submenuAll).find(
  648.             (el) => el.querySelector(".r4-setting-label").textContent === config.submenu
  649.         );
  650.         if (submenuFiltered) {
  651.             return submenuFiltered.querySelector("ul");
  652.         }
  653.     }
  654.  
  655.     function createSubmenu(config) {
  656.         const submenuItem = utils.fromHTML(
  657.             /* html */
  658.             `
  659.             <!-- html -->
  660.             <li>
  661.                 <div class="r4-setting r4-setting-submenu">
  662.                     <span class="r4-setting-submenu-arrow"></span>
  663.                     <ul class="hidden"></ul>
  664.                 </div>
  665.             </li>
  666.             <!-- !html -->
  667.             `
  668.         )
  669.  
  670.         const submenuElem = submenuItem.querySelector(".r4-setting-submenu");
  671.         submenuElem.insertBefore(
  672.             buildSettingTextBlock(config.submenu), 
  673.             submenuElem.firstChild
  674.         );
  675.  
  676.         const submenu = submenuElem.querySelector("ul");
  677.         submenu.addEventListener("click", (event) => {
  678.             event.stopPropagation();
  679.         });
  680.  
  681.         submenuItem.addEventListener("click", (event) => {
  682.             submenu.classList.toggle("hidden");
  683.         });
  684.  
  685.         elements.dropdown.appendChild(submenuItem);
  686.         return submenu;
  687.     }
  688.  
  689.     function addElementSetting(element, config) {
  690.         let container;
  691.  
  692.         if (config?.submenu) {
  693.             let submenu = findSubmenu(config);
  694.             if (!submenu) {
  695.                 submenu = createSubmenu(config);
  696.             }
  697.             container = submenu;
  698.         } else {
  699.             const dropdown = elements.tumbler.querySelector("ul");
  700.             container = dropdown;
  701.         }
  702.  
  703.         const item = document.createElement("li");
  704.         item.appendChild(element);
  705.         container.appendChild(item);
  706.     }
  707.  
  708.     function buildTumbler(config) {
  709.         const optionsLength = config.options.length;
  710.         const tumblerClassName = `r4-tumbler-${config.name}`;
  711.  
  712.         GM.addStyle(`
  713.         /* css */
  714.  
  715.         .${tumblerClassName} {
  716.             width: ${optionsLength * 15 + optionsLength * 5}px !important;
  717.         }
  718.  
  719.         /* !css */
  720.         `);
  721.  
  722.         const tumblerWrapper = utils.fromHTML(
  723.             /* html */
  724.             `
  725.             <!-- html -->
  726.             <div class="r4-tumbler-wrapper ${config.classes.join(" ")}">
  727.                 <div class="r4-tumbler ${tumblerClassName}"></div>
  728.             </div>
  729.             <!-- !html -->
  730.             `
  731.         );
  732.  
  733.         const tumbler = tumblerWrapper.querySelector(".r4-tumbler");
  734.         tumbler.addEventListener("click", config.handler);
  735.  
  736.         for (let optionIndex = 0; optionIndex < optionsLength; optionIndex++) {
  737.             const tumblerOption = config.options[optionIndex];
  738.             const tumblerPoint = utils.fromHTML(
  739.                 /* html */
  740.                 `
  741.                 <!-- html -->
  742.                 <div class="r4-tumbler-point"></div>
  743.                 <!-- !html -->
  744.                 `
  745.             );
  746.             tumbler.appendChild(tumblerPoint);
  747.  
  748.             if (tumblerOption.class) {
  749.                 GM.addStyle(`
  750.                 /* css */
  751.  
  752.                 .${tumblerOption.class} .${tumblerClassName} .r4-tumbler-dot {
  753.                     transform: translateX(${optionIndex * 100}%) !important;
  754.                 }
  755.  
  756.                 /* !css */
  757.                 `);
  758.             } else {
  759.                 GM.addStyle(`
  760.                 /* css */
  761.  
  762.                 .${tumblerClassName} .r4-tumbler-dot {
  763.                     transform: translateX(${optionIndex * 100}%);
  764.                 }
  765.  
  766.                 /* !css */
  767.                 `);
  768.             }
  769.         }
  770.  
  771.         tumbler.appendChild(utils.fromHTML(
  772.             /* html */
  773.             `
  774.             <!-- html -->
  775.             <div class="r4-tumbler-dot"></div>
  776.             <!-- !html -->
  777.             `
  778.         ));
  779.  
  780.         return tumblerWrapper;
  781.     }
  782.  
  783.     function buildSettingTextBlock(label) {
  784.         return utils.fromHTML(
  785.             /* html */
  786.             `
  787.             <!-- html -->
  788.             <div class="r4-setting-text-block">
  789.                 <span class="r4-setting-label">${label}</span>
  790.             </div>
  791.             <!-- !html -->
  792.             `
  793.         );
  794.     }
  795.  
  796.     function buildTumblerSetting(config) {
  797.         for (const tumplerOption of config.options) {
  798.             if (tumplerOption.class === undefined && tumplerOption.value !== undefined && tumplerOption.value !== null) {
  799.                 tumplerOption.class = `${config.name}-${tumplerOption.value}`;
  800.             }
  801.             if (tumplerOption.value === undefined && tumplerOption.class !== undefined) {
  802.                 tumplerOption.value = tumplerOption.class;
  803.             }
  804.         }
  805.  
  806.         initSetting(config);
  807.         
  808.         const originalHandler = config.handler;
  809.         config.handler = async (event) => {
  810.             await rotateSetting(config);
  811.             originalHandler?.(event);
  812.         };
  813.  
  814.         const tumblerWrapper = buildTumbler(config);
  815.         tumblerWrapper.classList.add("r4-setting");
  816.  
  817.         const settingClass = `r4-setting-${config.name}`;
  818.         tumblerWrapper.classList.add(settingClass);
  819.  
  820.         const settingTextBlock = buildSettingTextBlock(config.label);
  821.  
  822.         let textValueClassEmpty = null;
  823.         for (const tumblerOption of config.options) {
  824.             if (!tumblerOption.class) {
  825.                 const optionIndex = config.options.indexOf(tumblerOption);
  826.                 textValueClassEmpty = `r4-setting-text-value-${optionIndex + 1}`;
  827.             }
  828.         }
  829.  
  830.         const emptySelectors = [];
  831.         for (const tumblerOption of config.options) {
  832.             if (tumblerOption.class) {
  833.                 emptySelectors.push(`body.${tumblerOption.class} .${settingClass} .${textValueClassEmpty}`);
  834.             }
  835.         }
  836.  
  837.         for (const tumblerOption of config.options) {
  838.             const optionIndex = config.options.indexOf(tumblerOption);
  839.             const textValueClass = `r4-setting-text-value-${optionIndex + 1}`;
  840.  
  841.             settingTextBlock.appendChild(utils.fromHTML(
  842.                 /* html */
  843.                 `
  844.                 <!-- html -->
  845.                 <span class="r4-setting-text-value ${textValueClass}">
  846.                     ${tumblerOption.text}
  847.                 </span>
  848.                 <!-- !html -->
  849.                 `
  850.             ));
  851.  
  852.             if (tumblerOption.class) {
  853.                 GM.addStyle(`
  854.                 /* css */
  855.  
  856.                 body:not(.${tumblerOption.class}) .${settingClass} .${textValueClass} {
  857.                     display: none !important;
  858.                 }
  859.  
  860.                 /* !css */
  861.                 `);
  862.             } else {
  863.                 GM.addStyle(`
  864.                 /* css */
  865.  
  866.                 ${emptySelectors.join(",")} {
  867.                     display: none !important;
  868.                 }
  869.  
  870.                 /* !css */
  871.                 `);
  872.             }
  873.         }
  874.  
  875.         tumblerWrapper.appendChild(settingTextBlock);
  876.  
  877.         return tumblerWrapper;
  878.     }
  879.  
  880.     function createTumblerSetting(config, wrapSetting = tumblerSetting => tumblerSetting) {
  881.         const tumblerSetting = buildTumblerSetting(config);
  882.         addElementSetting(wrapSetting(tumblerSetting), config);
  883.     }
  884.  
  885.     if (document.body) {
  886.         state.events.start.fired = true;
  887.     } else {
  888.         new MutationObserver((mutationList, observer) => {
  889.             if (document.body && !state.events.start.fired) {
  890.                 document.dispatchEvent(new Event("R4SettingsStart"));
  891.                 state.events.start.fired = true;
  892.                 observer.disconnect();
  893.             }
  894.         }).observe(document.documentElement, {childList: true});
  895.     }
  896.  
  897.     if (/complete|interactive|loaded/.test(document.readyState)) {
  898.         state.events.end.fired = true;
  899.     } else {
  900.         document.addEventListener("DOMContentLoaded", () => {
  901.             document.dispatchEvent(new Event("R4SettingsEnd"));
  902.             state.events.end.fired = true;
  903.         });
  904.     }
  905.  
  906.     return {
  907.         tumbler: elements.tumbler,
  908.         buildTumblerSetting,
  909.         createTumblerSetting,
  910.         addElementSetting,
  911.         setSetting,
  912.         getSetting,
  913.         afterStart,
  914.         afterEnd,
  915.     }
  916. }