Smooth semifunctional JS

telethon_generator/data/html/core.html

@@ -6,13 +6,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link id="style" href="css/docs.light.css" rel="stylesheet">
     <script>
-    try {
+        (function () {
-        which = document.cookie.split('=')[1].split(';')[0];
+            var themes = [ 'light', 'dark' ];
-        if (which) {
+            var style = document.getElementById('style');
-            document.getElementById("style").href = "css/" + which;
+
+            // setTheme(<link />, 'light' / 'dark')
+            function setTheme(theme) {
+                if (themes.indexOf(theme) === -1) {
+                    return console.warn('Invalid theme');
                 }
-    } catch (e) {
+                document.cookie = 'css=' + theme + '; path=/';
+                return style.href = 'css/docs.' + theme + '.css';
             }
+
+            // setThemeOnClick(<link />, 'light' / 'dark', <a />)
+            function setThemeOnClick(theme, button) {
+                return button.addEventListener('click', function (e) {
+                    setTheme(theme);
+                    e.preventDefault();
+                    return false;
+                });
+            }
+
+            setTheme(document.cookie
+                .split(';')[0]
+                .split('=')[1] || 'light');
+
+            document.addEventListener('DOMContentLoaded', function () {
+                setThemeOnClick('light', document.getElementById('themeLight'));
+                setThemeOnClick('dark', document.getElementById('themeDark'));
+            });
+        })();
     </script>
     <link href="https://fonts.googleapis.com/css?family=Nunito|Source+Code+Pro" rel="stylesheet">
     <style>
@@ -30,7 +54,10 @@
     on what the methods, constructors and types mean. Nevertheless, this
     page aims to provide easy access to all the available methods, their
     definition and parameters.</p>
-    <p id="themeSelect"></p>
+    <p id="themeSelect">
+        <a href="#" id="themeLight">light</a> /
+        <a href="#" id="themeDark">dark</a> theme.
+    </p>
     <p>Please note that when you see this:</p>
     <pre>---functions---
 users.getUsers#0d91a548 id:Vector&lt;InputUser&gt; = Vector&lt;User&gt;</pre>
@@ -154,17 +181,5 @@ users.getUsers#0d91a548 id:Vector&lt;InputUser&gt; = Vector&lt;User&gt;</pre>
     </p>
 </div>
 <script src="js/search.js"></script>
-<script>
-document.getElementById("themeSelect").innerHTML = `
-Select
-<a href="#" onclick="setTheme('docs.light.css')">light</a> /
-<a href="#" onclick="setTheme('docs.dark.css')">dark</a> theme.
-`;
-
-function setTheme(which) {
-    style.href = "css/" + which;
-    document.cookie = "css=" + which + "; path=/";
-}
-</script>
 </body>
 </html>