Mangadex Post Autocomplete Userscript

[FireFish5000]

Mangadex Post Autocomplete:
Install via Greasyfork​

NEW FEATURES!
[ul]
[*]Autocomplete Manga titles!
[*]Settings menu! [ul][*] Customize history limits
[*] Autocomplete only users or titles
[*] Change Manga Title autocomplete character
[*] Chose to autocomplete titles into a link to the title page, a thumbnail, or even a description in a

Spoiler

S P O I L E R !

[/ul]
[/ul]

Example:

Features:
[ul][*]Autocompletes @mention usernames. Maintains a small history of user posts you recently viewed and searches that for matches.
[*] Autocompletes :Title titles to bbcode links (optionally to an image or description spoiler as well).
[*]Quick access Settings menu! located within the little cog at the top right of your screen (next to your username). Click autocompletions tab in the popup dialog
[*]Configurable completion character(or string) for Titles.
[*]Suggestion box uses the selected site's color theme.
[*]Shows user's icon or Manga's thumbnail next to the name in the suggestion box for easy identification.
[*]Show a 100 character preview of the last viewed post from a user on mouseover.
[*]Show a 1000 character preview of the manga's description (must visit the title page at least once for this feature to work).
[*]Known to work on Firefox, Chrome, and Firefox Android!
[/ul]
Usernames are sorted so:
[ol][*] Matches at the beginning of the name come first
[*] Users who have commented in the current thread come before those from other threads
[*] Users who mentioned you come before those who haven't
[*] More recently viewed users come before others (we sort based off of the time you last viewed it, NOT the time it was posted!)
[/ol]
Titles are sorted so:
[ol][*] Matches at the beginning of the name come first
[*] Followed titles come before unfollowed ones.
[*] More recently viewed manga come before others (we sort based off of the time you last viewed it, NOT the time it was uploaded!)
[/ol]

Want to know what Title Completion looks like?
Well, if I type ':ten'
In plain completion mode, I'll simply get
Tensei Shitara Slime Datta Ken: Mamono no Kuni no Arukikata

In Link mode(default), I get
Tensei Shitara Slime Datta Ken: Mamono no Kuni no Arukikata

In Thumbnail + Link mode, I get
Tensei Shitara Slime Datta Ken: Mamono no Kuni no Arukikata


In Thumbnail + Link + Description mode, I get
Tensei Shitara Slime Datta Ken: Mamono no Kuni no Arukikata | Description:

Spoiler

The story that revolves around a bunny in a demon country of Rimuru Tempest.

By the way, this looks pretty good centered. However, mangadex spoilers do not seem to play well with formatting ATM. Best to try with description off

Tensei Shitara Slime Datta Ken: Mamono no Kuni no Arukikata

​

Suggestion dialog legend:
[ul][*]@ means the user has mentioned you before
[*]comments icon means they are talking in the current thread.
[*]bookmark icon means you are following this chapter[/ul]

Installation:
This is a UserScript! To use it, you need a UserScript manager such as GreaseMonkey, ViolentMonkey, or TamperMonkey available from your browser's App/Web store!
Developed for ViolentMonkey on FireFox.
Tested on Chrome/Chromium, and FireFox Nightly on Android.

After installing with your monkey of choice, go to any thread and:[ol][*]type @ to start the autocompletion
[*]type however much of the name is necessary to see it in the suggestion list (note it will only suggest users you have seen since installing).
[*]Hover over their name, or push the down arrow until their name is highlighted.
[*]Press Tab, Enter, or LeftMouseClick to accept the suggestion![/ol]

Note autocompletion for titles won't work until you visit the home page while logged in, or the manga's title page.
Autocompletion for a user won't work until we see a post by that user.

Current Bugs/Limitations:
[ul][*]Your own name is not filtered out of suggestion (because I talk to myself quite a bit.... is that sad?)
[*]Does not currently differentiate histories for different accounts (same suggestions will pop up even if you login to a different account)
[*]We are considering any value other than unfollowed as Following. This includes dropped.
[*]FireFox Android does not show suggestions until you have typed at least one letter, or tap next to the @ sighn in the textbox.[/ul]

TODO:
[ul][*]Update example image with new UI (minimal change) and titles.
[*]Add example image for settings UI.
[/ul]

---

More Cool Scripts​

---

Also check out: Mangadex Post Preview -- Displays a formatted post preview above the edit/post box. Used for formatting everything I post​

 

[Zephyrus]

It's....it's *beautiful*.

 

[ixlone]

Nifty.

 

[FireFish5000]

Thanks @Zephyrus , @ixlone! I am still working on it, but the basics are done!
I got sick of copy/pasting usernames and titles, and am not talented enough to spell either correctly. So this was my solution!
Unfortunately, I am also not social enough to justify the time I spent on this..... hopefully a NEET Social butterfly will find this useful.
Note, it also works on Firefox for android! Not great yet, but better than typing it all out. There is no UserScript Manager for popular browsers on iPhone that I know of, so it is unsupported.

Hoping I can get some people interested in this (UserScript users are rather rare. Most popular library I produced only gained 4k users between all forks over 3 years...).
If I can spark an interest in this, I will add it to the suggestion form. If not... I guess I'll get a job (been putting that off a bit too long)

 

[Zephyrus]

@firefish5000
It's actually been suggested! I've talked to @rdn about implementing something very similar to your userscript. It's on a list that the devs are working off of, but it's fairly low priority. When the time comes, would you be ok with us using this userscript as a foundation if we need to? If not, that's fine!

 

[FireFish5000]

@Zephyrus
I have no problem with that.

Spoiler

The only library I used is MIT licensed, and I just switched to MIT as well.
However, keep in mind my script is entirely local (utilizing LocalStorage rather than AJAX). If you are actually thinking of adding sever side support (AJAX calls, grabbing a list of users in the thread from the db as soon as the first @ is typed, etc), there are several libraries made with that in mind.

May want to look at At.js or Tibute. I am currently using my own code to sort, build the UI, and respond to keypress events. But I am planning to utilize At.js as well (need to read the docs more, but it still allows me to use my own filter, and customize the UI, so no need to maintain my own interface. Not limited to mentions, could additionally use colon for emoji or titles for instance).

Once I switch over, most of the code will be for maintaining and filtering viewed post history. Since you will probably serve post history from the server side, I suppose only the filtering algorithm could be of use.

If they do decide to take/modify a snippet of code, I don't particularly care that the copyright notice be copied. just a comment like "// Portions of code graciously stolen from <github-link>" or "// Filter Written in part by <github-name>" in the code would make my day. The copyright is mainly there to deter potential forkers from claiming they wrote everything despite not changing anything but the author tag.

 

[FireFish5000]

Userscript to autocomplete @mentions
Updated, now using AtJS. Also slowly adopting a style guide
Now colors usernames appropriately
Bolds the matched portion of the username.

Spoiler

In regards to inclusion of this in the site, should you need any help I am available. However, almost nothing I wrote should be of any interest. The library I'm using, atjs, handles everything you should be interested in. It is easy to use, though needs a bit more documentation.
For reference, the basics of it are

<script src="https://cdn.rawgit.com/ichord/Caret.js/341fb20b6126220192b2cd226836cd5d614b3e09/dist/jquery.caret.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/1b7a52011ec2571f73385d0c0d81a61003142050/dist/js/jquery.atwho.js"></script>
<script>
$('textarea[id="text"]').atwho({
      at: '@'
      ,displayTpl: formatDisplayItem
      ,insertTpl: '${atwho-at}${username}'
      ,searchKey: 'username'
      // We don't want to use your filter or sorter. remoteFilter is a better fit for us.
      ,data: []
      // data: uhist.history,
      ,limit: 200
      ,callbacks: {
        remoteFilter: autoComplete
        // NoOp
        ,sorter: (_ ,i) => i
      }
    })
</script>

at = character we must type to begin completion
displayTpl = function which takes is given an object from the data array, and turns outputs an html string to be displayed in the autocomplete menu. Outermost elements must be <li></li>

insertTpl = function which takes is given an object from the data array, and outputs the completed string. object is equivelent to the one you passed into the data array, with the addition of the 'atwho-at' property, which is set to whatever you set 'at' to.

searchKey = the name of the property in the objects in the data array that we are trying to autocomplete. probably username.
data = an array of objects which represents usernames to attempt to autocomplete. I left it empty in favor of remoteFilter
remoteFilter = (strToMatch, render) => {} a function given the string the user typed so far, and a callback function 'render'.
remoteFilter is called when data is empty, or no match was found within data.
it is expected to find a match from another source, build its own object array, and pass that into render(obj_array).
Intended to be used to fetch and filter data remotely, though you could do it locally here as well, in which case data should be empty.

Actual Documentation because I can't cover all that
Basicly, atjs handles everything as long as you supply it with an array of user objects, and a few functions to tell it how you want it to sort and format them.
Almost everything else I wrote was for maintaining a history of user posts localy, or injecting the site's theme into it.
Edit:
My God this highlight is ugly. I'm on a dark theme, the yellow just doesn't go with it.

 

[FireFish5000]

Userscript to autocomplete @Mentions and :Titles in posts
Update! Implemented :Title completion!
Yea!
Also a new experimental settings menu! A gif example will come later. for now, here is a couple pics

To access settings menu, first click the cog at the top right of the screen

Then click the Autocomplete tab

And change whatever you want!

And here is a quick example of what title autocompletion looks like. I also added examples to the top of the page
Tensei Shitara Slime Datta Ken: Mamono no Kuni no Arukikata

 

[omae_wa_mou_shindeiru]

i use bootstrap suggest for me social stuff and emoji and w/e stuff

http://lodev09.github.io/bootstrap-suggest/

i just changed my key @ with w/e to find users or emoji from json output xD

firefish your script looks superb and thanks for sharing it ?

 

[Teddy]

Honesty didn't know this til I necroed this, usually a mobile user

 

[Knonderd]

I just tried this, it looks really cool and a nice script to increase social aspect of Mangadex website

 

[CBFlap]

I used this script for a few days, but suddenly it disappears, now I tried to reinstall, I already had MeddleMonkey, but when I try with that, it says "Error loading dependencies" and I cant install. If I disable MeddleMonkey and but TamperMonkey, I can install but the tab closes and nothing happens. After that, the option Re-install appears, indicating that its already installed now, but I get no autocomplete results what so ever