src/librustdoc/html/static/js/settings.js

   1 // Local js definitions:
   2 /* global getSettingValue, getVirtualKey, updateLocalStorage, updateTheme */
   3 /* global addClass, removeClass, onEach, onEachLazy, blurHandler, elemIsInParent */
   4 /* global MAIN_ID, getVar, getSettingsButton */
   5
   6 "use strict";
   7
   8 (function() {
   9     const isSettingsPage = window.location.pathname.endsWith("/settings.html");
  10
  11     function changeSetting(settingName, value) {
  12         if (settingName === "theme") {
  13             const useSystem = value === "system preference" ? "true" : "false";
  14             updateLocalStorage("use-system-theme", useSystem);
  15         }
  16         updateLocalStorage(settingName, value);
  17
  18         switch (settingName) {
  19             case "theme":
  20             case "preferred-dark-theme":
  21             case "preferred-light-theme":
  22                 updateTheme();
  23                 updateLightAndDark();
  24                 break;
  25             case "line-numbers":
  26                 if (value === true) {
  27                     window.rustdoc_add_line_numbers_to_examples();
  28                 } else {
  29                     window.rustdoc_remove_line_numbers_from_examples();
  30                 }
  31                 break;
  32         }
  33     }
  34
  35     function handleKey(ev) {
  36         // Don't interfere with browser shortcuts
  37         if (ev.ctrlKey || ev.altKey || ev.metaKey) {
  38             return;
  39         }
  40         switch (getVirtualKey(ev)) {
  41             case "Enter":
  42             case "Return":
  43             case "Space":
  44                 ev.target.checked = !ev.target.checked;
  45                 ev.preventDefault();
  46                 break;
  47         }
  48     }
  49
  50     function showLightAndDark() {
  51         removeClass(document.getElementById("preferred-light-theme"), "hidden");
  52         removeClass(document.getElementById("preferred-dark-theme"), "hidden");
  53     }
  54
  55     function hideLightAndDark() {
  56         addClass(document.getElementById("preferred-light-theme"), "hidden");
  57         addClass(document.getElementById("preferred-dark-theme"), "hidden");
  58     }
  59
  60     function updateLightAndDark() {
  61         const useSystem = getSettingValue("use-system-theme");
  62         if (useSystem === "true" || (useSystem === null && getSettingValue("theme") === null)) {
  63             showLightAndDark();
  64         } else {
  65             hideLightAndDark();
  66         }
  67     }
  68
  69     function setEvents(settingsElement) {
  70         updateLightAndDark();
  71         onEachLazy(settingsElement.querySelectorAll("input[type=\"checkbox\"]"), toggle => {
  72             const settingId = toggle.id;
  73             const settingValue = getSettingValue(settingId);
  74             if (settingValue !== null) {
  75                 toggle.checked = settingValue === "true";
  76             }
  77             toggle.onchange = function() {
  78                 changeSetting(this.id, this.checked);
  79             };
  80             toggle.onkeyup = handleKey;
  81             toggle.onkeyrelease = handleKey;
  82         });
  83         onEachLazy(settingsElement.querySelectorAll("input[type=\"radio\"]"), elem => {
  84             const settingId = elem.name;
  85             let settingValue = getSettingValue(settingId);
  86             if (settingId === "theme") {
  87                 const useSystem = getSettingValue("use-system-theme");
  88                 if (useSystem === "true" || settingValue === null) {
  89                     if (useSystem !== "false") {
  90                         settingValue = "system preference";
  91                     } else {
  92                         // This is the default theme.
  93                         settingValue = "light";
  94                     }
  95                 }
  96             }
  97             if (settingValue !== null && settingValue !== "null") {
  98                 elem.checked = settingValue === elem.value;
  99             }
 100             elem.addEventListener("change", ev => {
 101                 changeSetting(ev.target.name, ev.target.value);
 102             });
 103         });
 104     }
 105
 106     /**
 107      * This function builds the sections inside the "settings page". It takes a `settings` list
 108      * as argument which describes each setting and how to render it. It returns a string
 109      * representing the raw HTML.
 110      *
 111      * @param {Array<Object>} settings
 112      *
 113      * @return {string}
 114      */
 115     function buildSettingsPageSections(settings) {
 116         let output = "";
 117
 118         for (const setting of settings) {
 119             const js_data_name = setting["js_name"];
 120             const setting_name = setting["name"];
 121
 122             if (setting["options"] !== undefined) {
 123                 // This is a select setting.
 124                 output += `\
 125 <div class="setting-line" id="${js_data_name}">
 126     <div class="setting-radio-name">${setting_name}</div>
 127     <div class="setting-radio-choices">`;
 128                 onEach(setting["options"], option => {
 129                     const checked = option === setting["default"] ? " checked" : "";
 130                     const full = `${js_data_name}-${option.replace(/ /g,"-")}`;
 131
 132                     output += `\
 133         <label for="${full}" class="setting-radio">
 134             <input type="radio" name="${js_data_name}"
 135                 id="${full}" value="${option}"${checked}>
 136             <span>${option}</span>
 137         </label>`;
 138                 });
 139                 output += `\
 140     </div>
 141 </div>`;
 142             } else {
 143                 // This is a checkbox toggle.
 144                 const checked = setting["default"] === true ? " checked" : "";
 145                 output += `\
 146 <div class="setting-line">\
 147     <label class="setting-check">\
 148         <input type="checkbox" id="${js_data_name}"${checked}>\
 149         <span>${setting_name}</span>\
 150     </label>\
 151 </div>`;
 152             }
 153         }
 154         return output;
 155     }
 156
 157     /**
 158      * This function builds the "settings page" and returns the generated HTML element.
 159      *
 160      * @return {HTMLElement}
 161      */
 162     function buildSettingsPage() {
 163         const theme_names = getVar("themes").split(",").filter(t => t);
 164         theme_names.push("light", "dark", "ayu");
 165
 166         const settings = [
 167             {
 168                 "name": "Theme",
 169                 "js_name": "theme",
 170                 "default": "system preference",
 171                 "options": theme_names.concat("system preference"),
 172             },
 173             {
 174                 "name": "Preferred light theme",
 175                 "js_name": "preferred-light-theme",
 176                 "default": "light",
 177                 "options": theme_names,
 178             },
 179             {
 180                 "name": "Preferred dark theme",
 181                 "js_name": "preferred-dark-theme",
 182                 "default": "dark",
 183                 "options": theme_names,
 184             },
 185             {
 186                 "name": "Auto-hide item contents for large items",
 187                 "js_name": "auto-hide-large-items",
 188                 "default": true,
 189             },
 190             {
 191                 "name": "Auto-hide item methods' documentation",
 192                 "js_name": "auto-hide-method-docs",
 193                 "default": false,
 194             },
 195             {
 196                 "name": "Auto-hide trait implementation documentation",
 197                 "js_name": "auto-hide-trait-implementations",
 198                 "default": false,
 199             },
 200             {
 201                 "name": "Directly go to item in search if there is only one result",
 202                 "js_name": "go-to-only-result",
 203                 "default": false,
 204             },
 205             {
 206                 "name": "Show line numbers on code examples",
 207                 "js_name": "line-numbers",
 208                 "default": false,
 209             },
 210             {
 211                 "name": "Disable keyboard shortcuts",
 212                 "js_name": "disable-shortcuts",
 213                 "default": false,
 214             },
 215         ];
 216
 217         // Then we build the DOM.
 218         const elementKind = isSettingsPage ? "section" : "div";
 219         const innerHTML = `<div class="settings">${buildSettingsPageSections(settings)}</div>`;
 220         const el = document.createElement(elementKind);
 221         el.id = "settings";
 222         if (!isSettingsPage) {
 223             el.className = "popover";
 224         }
 225         el.innerHTML = innerHTML;
 226
 227         if (isSettingsPage) {
 228             document.getElementById(MAIN_ID).appendChild(el);
 229         } else {
 230             el.setAttribute("tabindex", "-1");
 231             getSettingsButton().appendChild(el);
 232         }
 233         return el;
 234     }
 235
 236     const settingsMenu = buildSettingsPage();
 237
 238     function displaySettings() {
 239         settingsMenu.style.display = "";
 240     }
 241
 242     function settingsBlurHandler(event) {
 243         blurHandler(event, getSettingsButton(), window.hidePopoverMenus);
 244     }
 245
 246     if (isSettingsPage) {
 247         // We replace the existing "onclick" callback to do nothing if clicked.
 248         getSettingsButton().onclick = function(event) {
 249             event.preventDefault();
 250         };
 251     } else {
 252         // We replace the existing "onclick" callback.
 253         const settingsButton = getSettingsButton();
 254         const settingsMenu = document.getElementById("settings");
 255         settingsButton.onclick = function(event) {
 256             if (elemIsInParent(event.target, settingsMenu)) {
 257                 return;
 258             }
 259             event.preventDefault();
 260             const shouldDisplaySettings = settingsMenu.style.display === "none";
 261
 262             window.hideAllModals();
 263             if (shouldDisplaySettings) {
 264                 displaySettings();
 265             }
 266         };
 267         settingsButton.onblur = settingsBlurHandler;
 268         settingsButton.querySelector("a").onblur = settingsBlurHandler;
 269         onEachLazy(settingsMenu.querySelectorAll("input"), el => {
 270             el.onblur = settingsBlurHandler;
 271         });
 272         settingsMenu.onblur = settingsBlurHandler;
 273     }
 274
 275     // We now wait a bit for the web browser to end re-computing the DOM...
 276     setTimeout(() => {
 277         setEvents(settingsMenu);
 278         // The setting menu is already displayed if we're on the settings page.
 279         if (!isSettingsPage) {
 280             displaySettings();
 281         }
 282         removeClass(getSettingsButton(), "rotate");
 283     }, 0);
 284 })();