Whitelist certain HTML code to allow external Tooltips


(Michele) #1

Ahoy, I’d like some help on figuring out this one.

There’s this game fansite kit that allows you to use “tooltips” and automatically hotlink them to the game’s official website. It’s basically a cool way when talking about items/missions etc within this videogame.

Link here: FINAL FANTASY XIV Fan Kit

It requires you to load a certain js and that’s easily done through the panel, can just add the js to the page and that’s it.

What stops me is that it also wants a certain tooltip code to be used for the tooltip to appear, and that’s a html link.

Example:

<a href="http://na.finalfantasyxiv.com/lodestone/playguide/db/item/b2cab67854f/" class="eorzeadb_link">Dreadwyrm Blade</a>

When I try to use it, it just gets stripped and the tooltip ends up not working. Is there any way to make this work?

Perhaps there’s an easier workaround too that I have not considered.

Thanks!


(Kane York) #2

(1) You’ll need to create a Dialect plugin to whitelist more HTML, and (2) “just adding the js to the page” won’t work, because posts are dynamically inserted in Discourse, so you needed more code anyways.

The whitelisting looks like this:

Discourse.Markdown.whiteListTag('a', 'class', 'eorzeadb_link');

The rendering code will look something like this (probably with certain parts removed!):


(Michele) #3

This sounds like an interesting way to get myself into playing with plugins and Discourse.

Thank you for your pointers, soon as I have time I will work on it and hopefully get it done :smiley:


(Kane York) #4

A few notes:

  • You need to import PostView from "discourse/views/post"; then in initialize(container) { call PostView.reopen({ which is where you put your rendering functions (you can copy all that from the poll plugin)

  • The functions will look like this:

     _initEorzeadbLinks: function($post) {
       ...
     }.on("postViewInserted", "postViewUpdated"),
    
     _cleanupEorzeadbLinks: function() {
       ...
     }.on("willClearRender"),
    

    The names must be unique for every plugin.

  • You can use any jQuery in the setup function - $post is a jQuery object

  • The contents of the link may not be correct - remember, someone can just type in any HTML they want, you need to deal with anything they could put in (even if dealing with it = ignoring it)

  • Any listeners you add MUST BE REMOVED in the cleanup function. Not doing so risks a memory leak!


(Michele) #5

Thank you again. Will keep this in mind when I begin playing around.