Doc: refactor code to use data structure v1

python · hugovk · Apr 17, 2024 · Mar 18, 2024 · Apr 9, 2024 · Apr 9, 2024
commit 00eee9086b8db5d89b0f075b7d8ffb6f1985f646
@@ -51,80 +51,80 @@
 }

 document.addEventListener("readthedocs-addons-data-ready", function(event) {
-     event.detail.initialize();
-     event.detail.data().then((config) => {
-        // Add some mocked hardcoded versions pointing to the official
-        // documentation while migrating to Read the Docs.
-        // These are only for testing purposes.
-        // TODO: remove them when managing all the versions on Read the Docs,
-        // since all the "active, built and not hidden" versions will be shown automatically.
-        let versions = config.versions.active.concat([
-            {
-                slug: "dev (3.13)",
-                urls: {
-                    documentation: "https://docs.python.org/3.13/",
-                }
-            },
-            {
-                slug: "3.12",
-                urls: {
-                    documentation: "https://docs.python.org/3.12/",
-                }
-            },
-            {
-                slug: "3.11",
-                urls: {
-                    documentation: "https://docs.python.org/3.11/",
-                }
-            },
-        ]);
+   const config = event.detail.data()

-        const versionSelect = `
-        <select id="version_select">
-        ${ versions.map(
-            (version) => `
-            <option
-                value="${ version.slug }"
-                ${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' }
-                data-url="${ version.urls.documentation }">
-                ${ version.slug }
-            </option>`
-        ).join("\n") }
-        </select>
-        `;
+   // Add some mocked hardcoded versions pointing to the official
+   // documentation while migrating to Read the Docs.
+   // These are only for testing purposes.
+   // TODO: remove them when managing all the versions on Read the Docs,
+   // since all the "active, built and not hidden" versions will be shown automatically.
+   let versions = config.versions.active.concat([
+       {
+           slug: "dev (3.13)",
+           urls: {
+               documentation: "https://docs.python.org/3.13/",
+           }
+       },
+       {
+           slug: "3.12",
+           urls: {
+               documentation: "https://docs.python.org/3.12/",
+           }
+       },
+       {
+           slug: "3.11",
+           urls: {
+               documentation: "https://docs.python.org/3.11/",
+           }
+       },
+   ]);

-        let languages = config.projects.translations.concat(config.projects.current);
-        languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name));
+   const versionSelect = `
+   <select id="version_select">
+   ${ versions.map(
+       (version) => `
+       <option
+           value="${ version.slug }"
+           ${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' }
+           data-url="${ version.urls.documentation }">
+           ${ version.slug }
+       </option>`
+   ).join("\n") }
+   </select>
+   `;

-        const languageSelect = `
-        <select id="language_select">
-        ${ languages.map(
-            (translation) => `
-            <option
-                value="${ translation.slug }"
-                ${ config.projects.current.slug === translation.slug ? 'selected="selected"' : '' }
-                data-url="${ translation.urls.documentation }">
-                ${ translation.language.name }
-            </option>`
-        ).join("\n") }
-        </select>
-        `;
+   // Prepend the current language to the options on the selector
+   let languages = config.projects.translations.concat(config.projects.current);
+   languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name));

-         // Query all the placeholders because there are different ones for Desktop/Mobile
-         let placeholders = document.querySelectorAll(".version_switcher_placeholder");
-         for (placeholder of placeholders) {
-             placeholder.innerHTML = versionSelect;
-             let selectElement = placeholder.querySelector("select");
-             selectElement.addEventListener("change", onSwitch);
-         }
+   const languageSelect = `
+   <select id="language_select">
+   ${ languages.map(
+       (translation) => `
+       <option
+           value="${ translation.slug }"
+           ${ config.projects.current.slug === translation.slug ? 'selected="selected"' : '' }
+           data-url="${ translation.urls.documentation }">
+           ${ translation.language.name }
+       </option>`
+   ).join("\n") }
+   </select>
+   `;

-         placeholders = document.querySelectorAll(".language_switcher_placeholder");
-         for (placeholder of placeholders) {
-             placeholder.innerHTML = languageSelect;
-             let selectElement = placeholder.querySelector("select");
-             selectElement.addEventListener("change", onSwitch);
-         }
-     });
+   // Query all the placeholders because there are different ones for Desktop/Mobile
+   const versionPlaceholders = document.querySelectorAll(".version_switcher_placeholder");
+   for (placeholder of versionPlaceholders) {
+       placeholder.innerHTML = versionSelect;
+       let selectElement = placeholder.querySelector("select");
+       selectElement.addEventListener("change", onSwitch);
+   }
+
+   const languagePlaceholders = document.querySelectorAll(".language_switcher_placeholder");
+   for (placeholder of languagePlaceholders) {
+       placeholder.innerHTML = languageSelect;
+       let selectElement = placeholder.querySelector("select");
+       selectElement.addEventListener("change", onSwitch);
+   }
 });
 </script>
 {% endblock %}