“View on Ankihub” shortcut

Hello!

I was wondering if there is a way to assign a hotkey/shortcut for “view on ankihub,” both on mobile and desktop. I searched through the ankihub community and found this thread from Dec. ‘23 on the topic.

I was wondering:

  • Has this feature been added? I couldn’t find it.
  • Is there a way for me to JavaScript it myself somehow?

It really would make my life a whole lot easier.

Thanks everyone!

It’s not been added yet. You can try modifying the add-on’s sources as follows to add a shortcut:

  1. Open the gui/editor.py file and go to line 102.
  2. Change the following code:
    view_on_ankihub_button = editor.addButton(
        icon=None,
        cmd=VIEW_NOTE_BTN_ID,
        func=_on_view_note_button_press,
        label="View on AnkiHub",
        id=VIEW_NOTE_BTN_ID,
        disables=False,
    )

To add a keys argument like this:

    view_on_ankihub_button = editor.addButton(
        icon=None,
        cmd=VIEW_NOTE_BTN_ID,
        func=_on_view_note_button_press,
        label="View on AnkiHub",
        id=VIEW_NOTE_BTN_ID,
        disables=False,
        keys="YOUR_SHORTCUT"
    )

The shortcut shouldn’t be already assigned to some other function in the editor, otherwise, it may not work.

Note that any changes to the source code will be overwritten after add-on updates.


I’m not seeing a gui/editor.py file - where might I find it in the addon files?
Thank you for your help!

It’s editor.py inside the gui folder

Awesome, thank you!

I’m not sure what the overlap here is, but is there a way to make it one of the possible dropdown options for the AnkiMobile User Actions?

Thanks again!

And I have (hopefully) only one more question: in the
keys=“YOUR_SHORTCUT”
line, I’m assuming that I should put something along the lines of
keys=“W”
or something like that? If I used the above example, will hitting the “W” key on my keyboard cause my computer to open the ankihub page for that note? I ask because doing that doesn’t seem to have accomplished this task.

Thanks!

I assumed you’re asking about the View on AnkiHub button in the editor, rather than the reviewer. Changing the shortcut there is more involved. Check the gui/reviewer.py file. You have to know some basic JavaScript to add a keydown event listener to the button.

The reviewer button is only shown on desktop. For mobile, you have to modify the card template (a similar button is included there).

It’s possible, but it involves some coding.

Anybody figured out “View on Ankihub” shortcut in reviewer on desktop? If so, kindly share the code.

Well, here is what I did tonight (with significant thanks to ChatGPT, given that the only coding experience I have is over 10 years ago in high school when I learned what a dictionary in python is). This took me, and this is true, well over 5 hours. I apologize to anyone who actually knows how to code and would’ve done this in 5 minutes. In my defense, I have pretty much no idea what I’m doing. This was a ton of guesswork and trial and error.

GOAL
I wanted to make two keyboard shortcuts. I wanted the first to activate the “View on Ankihub” button without me actually needing to click it. I wanted the second to simultaneously both* open the edit screen and “click” “View on Ankihub.” Importantly, I wanted both of these shortcuts to work on both my iPad and my computer. Here is what I did, and it does seem like its working.
P.S. Note that I am using the 8bitdo micro in keyboard mode when I’m using it with my iPad, so I guess I didn’t need to define the ankimobile user actions. I haven’t actually checked if the ankimobile user actions are working correctly or not with the remote because you can’t use the ankimobile user actions with the remote in keyboard mode (“K mode”). I like K mode better because I find it much much more versatile. When I’m on my iPad, the remote is working in K mode for the singular “view in ankihub” shortcut, not for the combined “View in Ankihub + edit.” This isn’t bothering me because the remote is small so I bound one button on my remote to “edit” and one to my new “open in ankihub”, and its very easy to click them in short succession, so its basically simultaneous anyway.

First, in notetype_setting_definitions.py in the 952691989 addon, I added the following options because it seemed right (again, I have no idea what I’m doing). I think this means that my two shortcuts were added to the dropdown menu of the ankimobile user actions. I mean, it does mean that, but as to whether those options in the dropdown will actually link correctly with my shortcuts, I’m not sure (see the P.S. above).

ANKIMOBILE_USER_ACTIONS = [
    "undefined",
    "window.revealNextCloze",
    "window.toggleAllCloze",
    "() => revealNextClozeOf('word')",
    "window.toggleNextButton",
    "() => (Array.from(document.getElementsByClassName('hintBtn')).forEach(e => toggleHintBtn(e.id)))",
    "window.toggleNext",
    "window.toggleAll",
    "window.showtags",
    *[f"() => toggleHintBtn('hint-{id}')" for id in HINT_BUTTONS.keys()],
    "window.viewOnAnkiHub",
    "window.editAndViewOnAnkiHub",
]
ANKIMOBILE_USER_ACTION_LABELS = [
    "None",
    "Reveal Next Cloze",
    "Toggle All Clozes",
    "Reveal Cloze Word",
    "Toggle Next Button",
    "Toggle All Buttons",
    "Reveal Next Occlusion",
    "Toggle All Occlusions",
    "Toggle Tags",
    *[f"Reveal {name}" for name in HINT_BUTTONS.values()],
    "Open in AnkiHub",
    "Edit + Open in AnkiHub",
]

Second, in Anki itself now, editing the AnKingOverhaul note type (I think that’s what that screen is called, again, unsure of many things here), I added the following code in the back template:

<script>
window.viewOnAnkiHub = function() {
    const viewButton = document.querySelector('.ankihub-view-note');
    if (viewButton) {
        viewButton.click();
    } else {
        console.error("View on AnkiHub button not found.");
    }
};
</script>

<script>
// Combined "View on AnkiHub" and "Edit" functionality
window.editAndViewOnAnkiHub = function() {
    // Trigger the "View on AnkiHub" functionality
    window.viewOnAnkiHub();

    // Delay edit action slightly to ensure proper execution order
    setTimeout(() => {
        if (window.pycmd) {
            pycmd("edit"); // Trigger the edit window
        } else {
            console.error("Edit command not supported in this environment.");
        }
    }, 300); // Adjust delay as needed
};
</script>

<script>
    var viewOnAnkiHubShortcutKey = "[";
    ankingAddEventListener('keydown', function(e) {
        if (shortcutMatcher(viewOnAnkiHubShortcutKey)(e)) {
            window.viewOnAnkiHub();
            e.preventDefault();
        }
    });
</script>

<script>
var editAndViewShortcutKey = "]";

ankingAddEventListener('keydown', function(e) {
    if (shortcutMatcher(editAndViewShortcutKey)(e)) {
        window.editAndViewOnAnkiHub();
        e.preventDefault();
    }
});
</script>

I specifically added it in between

  //CUSTOMIZATION
  //this is a variable controlling whether user must click the "w" key to open the popup.
  //if set to true: user must select text, then click the "w" key to open wikipedia popup. Clicking "w" key again will close the popup. 
  //if set to false: user only needs to select text. popup will open automatically. Clicking "w" is an alternative but not obligatory way of opening/closing the popup in this mode.
  //BELOW SET to true or to false. 
  var mustClickW = true;
  //END CUSTOMIZATION
</script>

and

<!-- ANKIMOBILE USER ACTIONS -->
<script>
var userJs1 = undefined
var userJs2 = undefined
var userJs3 = undefined
var userJs4 = undefined
var userJs5 = undefined
var userJs6 = undefined
var userJs7 = undefined
var userJs8 = undefined
</script>

(Mine aren’t undefined in real life, but I thought I’d show the native version)




I wanted my shortcuts to also work before the card has been flipped, which means I needed to add code to the front template of the AnKingOverhaul note type:

After

<!--
ANKIHUB_END
Text below this comment will not be modified by AnkiHub or AnKing add-ons.
Do not edit or remove this comment if you want to protect the content below.
-->

I added the following:
{{#ankihub_id}}
<a class='ankihub-view-note'
    href='https://app.ankihub.net/decks/notes/{{ankihub_id}}'
    target="_blank" rel="noopener noreferrer"
    style="display: none;">
    View Note on AnkiHub
</a>
{{/ankihub_id}}



<script>
window.viewOnAnkiHub = function() {
    const viewButton = document.querySelector('.ankihub-view-note');
    if (viewButton) {
        viewButton.click();
    } else {
        console.error("View on AnkiHub button not found.");
    }
};
</script>

<script>
// Combined "View on AnkiHub" and "Edit" functionality
window.editAndViewOnAnkiHub = function() {
    // Trigger the "View on AnkiHub" functionality
    window.viewOnAnkiHub();

    // Delay edit action slightly to ensure proper execution order
    setTimeout(() => {
        if (window.pycmd) {
            pycmd("edit"); // Trigger the edit window
        } else {
            console.error("Edit command not supported in this environment.");
        }
    }, 300); // Adjust delay as needed
};
</script>

<script>
    var viewOnAnkiHubShortcutKey = "[";
    ankingAddEventListener('keydown', function(e) {
        if (shortcutMatcher(viewOnAnkiHubShortcutKey)(e)) {
            window.viewOnAnkiHub();
            e.preventDefault();
        }
    });
</script>

<script>
var editAndViewShortcutKey = "]";

ankingAddEventListener('keydown', function(e) {
    if (shortcutMatcher(editAndViewShortcutKey)(e)) {
        window.editAndViewOnAnkiHub();
        e.preventDefault();
    }
});
</script>

Here's the deal guys. This basically works. I have at best a moderate understanding of why, but it works. I'm sure it's clunky and all around somewhat poopy for reasons that I'm not going to try to figure out right now because, well, it actually works-ish. So here's something for the AnKing coders to use, fix, and please implement soon in a future update. And if it's terrible and completely unusable code, maybe the fact that an MS3 stupidly tried to do this in the middle of clerkships for 5 hours at night instead of studying will encourage someone in Anking who could've done it faster to try to do it.


Conclusion

I should have like taken coding classes during my gap years before med school or something.


The end.


P.S. I’m awarding myself the solution because I’ve decided that I deserve it.




* He said redundantly

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.