| var themes = document.getElementById("theme-choices"); |
| var themePicker = document.getElementById("theme-picker"); |
| |
| function showThemeButtonState() { |
| themes.style.display = "none"; |
| themePicker.style.borderBottomRightRadius = "3px"; |
| themePicker.style.borderBottomLeftRadius = "3px"; |
| } |
| |
| function hideThemeButtonState() { |
| themes.style.display = "block"; |
| themePicker.style.borderBottomRightRadius = "0"; |
| themePicker.style.borderBottomLeftRadius = "0"; |
| } |
| |
| function switchThemeButtonState() { |
| if (themes.style.display === "block") { |
| showThemeButtonState(); |
| } else { |
| hideThemeButtonState(); |
| } |
| }; |
| |
| function handleThemeButtonsBlur(e) { |
| var active = document.activeElement; |
| var related = e.relatedTarget; |
| |
| if (active.id !== "themePicker" && |
| (!active.parentNode || active.parentNode.id !== "theme-choices") && |
| (!related || |
| (related.id !== "themePicker" && |
| (!related.parentNode || related.parentNode.id !== "theme-choices")))) { |
| hideThemeButtonState(); |
| } |
| } |
| |
| themePicker.onclick = switchThemeButtonState; |
| themePicker.onblur = handleThemeButtonsBlur; |
| ["dark","light"].forEach(function(item) { |
| var but = document.createElement('button'); |
| but.innerHTML = item; |
| but.onclick = function(el) { |
| switchTheme(currentTheme, mainTheme, item); |
| }; |
| but.onblur = handleThemeButtonsBlur; |
| themes.appendChild(but); |
| }); |