1 // Local js definitions:
2 /* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
3 /* global addClass, removeClass, onEach, onEachLazy, blurHandler, elemIsInParent */
4 /* global MAIN_ID, getVar, getSettingsButton */
9 const isSettingsPage = window.location.pathname.endsWith("/settings.html");
11 function changeSetting(settingName, value) {
12 if (settingName === "theme") {
13 const useSystem = value === "system preference" ? "true" : "false";
14 updateLocalStorage("use-system-theme", useSystem);
16 updateLocalStorage(settingName, value);
18 switch (settingName) {
20 case "preferred-dark-theme":
21 case "preferred-light-theme":
27 window.rustdoc_add_line_numbers_to_examples();
29 window.rustdoc_remove_line_numbers_from_examples();
35 function handleKey(ev) {
36 // Don't interfere with browser shortcuts
37 if (ev.ctrlKey || ev.altKey || ev.metaKey) {
40 switch (getVirtualKey(ev)) {
44 ev.target.checked = !ev.target.checked;
50 function showLightAndDark() {
51 removeClass(document.getElementById("preferred-light-theme"), "hidden");
52 removeClass(document.getElementById("preferred-dark-theme"), "hidden");
55 function hideLightAndDark() {
56 addClass(document.getElementById("preferred-light-theme"), "hidden");
57 addClass(document.getElementById("preferred-dark-theme"), "hidden");
60 function updateLightAndDark() {
61 const useSystem = getSettingValue("use-system-theme");
62 if (useSystem === "true" || (useSystem === null && getSettingValue("theme") === null)) {
69 function setEvents(settingsElement) {
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";
77 toggle.onchange = function() {
78 changeSetting(this.id, this.checked);
80 toggle.onkeyup = handleKey;
81 toggle.onkeyrelease = handleKey;
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";
92 // This is the default theme.
93 settingValue = "light";
97 if (settingValue !== null && settingValue !== "null") {
98 elem.checked = settingValue === elem.value;
100 elem.addEventListener("change", ev => {
101 changeSetting(ev.target.name, ev.target.value);
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.
111 * @param {Array<Object>} settings
115 function buildSettingsPageSections(settings) {
118 for (const setting of settings) {
119 const js_data_name = setting["js_name"];
120 const setting_name = setting["name"];
122 if (setting["options"] !== undefined) {
123 // This is a select setting.
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,"-")}`;
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>
143 // This is a checkbox toggle.
144 const checked = setting["default"] === true ? " checked" : "";
146 <div class="setting-line">\
147 <label class="setting-check">\
148 <input type="checkbox" id="${js_data_name}"${checked}>\
149 <span>${setting_name}</span>\
158 * This function builds the "settings page" and returns the generated HTML element.
160 * @return {HTMLElement}
162 function buildSettingsPage() {
163 const theme_names = getVar("themes").split(",").filter(t => t);
164 theme_names.push("light", "dark", "ayu");
170 "default": "system preference",
171 "options": theme_names.concat("system preference"),
174 "name": "Preferred light theme",
175 "js_name": "preferred-light-theme",
177 "options": theme_names,
180 "name": "Preferred dark theme",
181 "js_name": "preferred-dark-theme",
183 "options": theme_names,
186 "name": "Auto-hide item contents for large items",
187 "js_name": "auto-hide-large-items",
191 "name": "Auto-hide item methods' documentation",
192 "js_name": "auto-hide-method-docs",
196 "name": "Auto-hide trait implementation documentation",
197 "js_name": "auto-hide-trait-implementations",
201 "name": "Directly go to item in search if there is only one result",
202 "js_name": "go-to-only-result",
206 "name": "Show line numbers on code examples",
207 "js_name": "line-numbers",
211 "name": "Disable keyboard shortcuts",
212 "js_name": "disable-shortcuts",
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);
222 if (!isSettingsPage) {
223 el.className = "popover";
225 el.innerHTML = innerHTML;
227 if (isSettingsPage) {
228 document.getElementById(MAIN_ID).appendChild(el);
230 el.setAttribute("tabindex", "-1");
231 getSettingsButton().appendChild(el);
236 const settingsMenu = buildSettingsPage();
238 function displaySettings() {
239 settingsMenu.style.display = "";
242 function settingsBlurHandler(event) {
243 blurHandler(event, getSettingsButton(), window.hidePopoverMenus);
246 if (isSettingsPage) {
247 // We replace the existing "onclick" callback to do nothing if clicked.
248 getSettingsButton().onclick = function(event) {
249 event.preventDefault();
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)) {
259 event.preventDefault();
260 const shouldDisplaySettings = settingsMenu.style.display === "none";
262 window.hideAllModals();
263 if (shouldDisplaySettings) {
267 settingsButton.onblur = settingsBlurHandler;
268 settingsButton.querySelector("a").onblur = settingsBlurHandler;
269 onEachLazy(settingsMenu.querySelectorAll("input"), el => {
270 el.onblur = settingsBlurHandler;
272 settingsMenu.onblur = settingsBlurHandler;
275 // We now wait a bit for the web browser to end re-computing the DOM...
277 setEvents(settingsMenu);
278 // The setting menu is already displayed if we're on the settings page.
279 if (!isSettingsPage) {
282 removeClass(getSettingsButton(), "rotate");