Handle blur on theme buttons nicely
This commit is contained in:
parent
8c80124fef
commit
9483e9b564
1 changed files with 19 additions and 1 deletions
|
@ -789,7 +789,8 @@ fn write_shared(cx: &Context,
|
||||||
format!(
|
format!(
|
||||||
r#"var themes = document.getElementById("theme-choices");
|
r#"var themes = document.getElementById("theme-choices");
|
||||||
var themePicker = document.getElementById("theme-picker");
|
var themePicker = document.getElementById("theme-picker");
|
||||||
themePicker.onclick = function() {{
|
|
||||||
|
function switchThemeButtonState() {{
|
||||||
if (themes.style.display === "block") {{
|
if (themes.style.display === "block") {{
|
||||||
themes.style.display = "none";
|
themes.style.display = "none";
|
||||||
themePicker.style.borderBottomRightRadius = "3px";
|
themePicker.style.borderBottomRightRadius = "3px";
|
||||||
|
@ -800,12 +801,29 @@ themePicker.onclick = function() {{
|
||||||
themePicker.style.borderBottomLeftRadius = "0";
|
themePicker.style.borderBottomLeftRadius = "0";
|
||||||
}}
|
}}
|
||||||
}};
|
}};
|
||||||
|
|
||||||
|
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")))) {{
|
||||||
|
switchThemeButtonState();
|
||||||
|
}}
|
||||||
|
}}
|
||||||
|
|
||||||
|
themePicker.onclick = switchThemeButtonState;
|
||||||
|
themePicker.onblur = handleThemeButtonsBlur;
|
||||||
[{}].forEach(function(item) {{
|
[{}].forEach(function(item) {{
|
||||||
var but = document.createElement('button');
|
var but = document.createElement('button');
|
||||||
but.innerHTML = item;
|
but.innerHTML = item;
|
||||||
but.onclick = function(el) {{
|
but.onclick = function(el) {{
|
||||||
switchTheme(currentTheme, mainTheme, item);
|
switchTheme(currentTheme, mainTheme, item);
|
||||||
}};
|
}};
|
||||||
|
but.onblur = handleThemeButtonsBlur;
|
||||||
themes.appendChild(but);
|
themes.appendChild(but);
|
||||||
}});"#,
|
}});"#,
|
||||||
themes.iter()
|
themes.iter()
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue