In an addon, I am adding a button to editor bycalling editor.addButton(...)
. The button works fine, but I want to disable/enable it according to what the editor is currently showing. I tried calling document.getElementById('mybutton').disabled = true;
, and it makes it unpressable, but doesn’t give the button the proper disabled look. What’s the right way to disable a button?
.
While you’re waiting for the experts to arrive, you might want to look at this:
Where are editor JavaScript functions defined? - Add-ons - Anki Forums (ankiweb.net)
There seems to be a suggestion that some functions might be missing in editor.py
Thanks
There’s some legacy css you can apply by just adding classes, which you can find here. However, it doesn’t include a disabled class. If you don’t want to use Svelte, the best way is to probably add some CSS of yourself, which mimics the built-in disabled styling, and apply that via a class.
…while I was taking a shower I remembered seeing an add-on called AnkiWebView Inspector, and wondered if I could use that to inspect Editor buttons as well, and turns out that I can! After some poking around I found out that the regular buttons (e.g. Bold, Italics button) have the class btn
and the add-on buttons don’t. So I did the following, and it seems to work!
button_html = editor.addButton(...)
button_html = button_html.replace('class="', 'class="btn ')
buttons.append(button_html)
Not sure why the addon buttons don’t have this class in the first place, or how they look like the other buttons in the first place ¯\_(ツ)_/¯
Your link points to a file that does not exist.
So the above trick broke on Anki 2.1.50. In fact, on Anki 2.1.50 the buttons that addons are adding appear square and have a huge font. I guess this is a bug?
Anyway, for now I went the road @hengiesel proposed, which works okay I guess. I think I could try accessing the Preview button via JavaScript and steal its classes, but this feels to tricky. I really wish Anki offered a more sane way to create simple text buttons.
def add_right_hand_side_buttons(self, buttons, editor):
if anki_version < (2, 1, 50):
extra_button_class = "btn"
else:
extra_button_class = "anki-connect-button"
editor.web.eval("""
(function(){
const style = document.createElement("style");
style.innerHTML = `
.anki-connect-button {
white-space: nowrap;
width: auto;
font-size: var(--base-font-size);
}
.anki-connect-button:disabled {
pointer-events: none;
opacity: .4;
}
`;
document.head.appendChild(style);
})();
""")
def add(cmd, function, label, tip, keys):
button_html = editor.addButton(
icon=None,
cmd=DOMAIN_PREFIX + cmd,
id=DOMAIN_PREFIX + cmd,
func=function,
label=f" {label} ",
tip=f"{tip} ({keys})",
keys=keys,
)
button_html = button_html.replace('class="',
f'class="{extra_button_class} ')
buttons.append(button_html)
add("browse", self.show_browser, "Browse", "Browse", "Ctrl+F")
add("previous", self.show_previous, "<", "Previous", "Alt+Left")
add("next", self.show_next, ">", "Next", "Alt+Right")