How do I properly disable/enable an editor button?

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?

1 Like

.
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 ¯\_(ツ)_/¯

1 Like

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"&nbsp;&nbsp;{label}&nbsp;&nbsp;",
            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, "&lt;", "Previous", "Alt+Left")
    add("next", self.show_next, "&gt;", "Next", "Alt+Right")
1 Like