XF 2.2 Discussion preview breaks with custom bbcode iframe

[zackw]

We have a bbcode for GMAP which was pulled in during a VB import. The content of the bbcode is an iframe.

If this bbcode is used anywhere in a thread (top, bottom, middle, etc), then the thread discussion tooltip preview is broken. What happens is you hover the mouse over the thread title, and the ENTIRE page disappears and goes to a blank white screen, and the Google map then appears by itself. There is no way to go back and see the rest of the page/thread list again unless you refresh the page.

I tried to use CSS to hide iframes, I tried messing with the /preview version of the page. I tried tweaks to the bbcode itself, nothing worked.

It seems like the only fix is making sure this custom bbcode is not interpreted when creating the tooltip preview in the first place, but I don't see how to make such an exclusion.

If I can simply exclude the custom bbcode entirely, that would work.

 

[Chris D]

Can you please provide the exact definition of the BB code so we can test it and advise a workaround?

I suspect it will be a case of adjusting the output or CSS in a specific way rather than a bug we can fix, though once we have an idea of what’s happening we can advise.

 

[zackw]

Can you please provide the exact definition of the BB code so we can test it and advise a workaround?

I suspect it will be a case of adjusting the output or CSS in a specific way rather than a bug we can fix, though once we have an idea of what’s happening we can advise.

It pretty much comes straight from vBulletin. I've redacted the Google key.

<script>
t_i="{text}";
t_n_q=t_i.replace(/\s/g,'+');
document.write('<div><iframe style="float: right;" width="512" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="//maps.google.com/maps?f=q&key={KEY}&source=s_q&hl=en&ie=UTF8&z=14&iwloc=A&output=embed&geocode=&q='+t_n_q+'"></iframe></div>');
</script>

The content of {text} is just a text address like 123 Baker Street. It replaces spaces with + symbols.

To be honest I think I already know the issue. It has something to do with using document.write. When these codes are processed on the normal thread page, it works, but in the popup, I think document.write is taking over the entire DOM body.

I'm trying to figure out how to change how this writes to the page, but whatever I change to fix the popup is going to change how it appears in the thread body too. So the solution needs to function under both circumstances.

I think some long term solutions to this could be some kind of exclusion system where we can define this particular custom bbcode to not be rendered in previews, or have an alternate rendering. This is already a thing because we can have alternate rendering for email, and alternate rendering for plain text. So we need another alternate rendering for thread preview.

I'll take any solution at this point.

Thanks!

 

[Chris D]

You might potentially have larger issues than simply thread previews.

In my testing just now I created a new post and the process of the new post being loaded in instantly took over the entire page until I refreshed.

I agree the document.write approach is likely best avoided.

To be honest, and you may need to test this with existing embeds and across different browsers, you may be able to get away with not doing the document.write method at all.

<div class="gmap-bb-code"><iframe style="float: right;" width="512" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="//maps.google.com/maps?f=q&key={KEY}&source=s_q&hl=en&ie=UTF8/&z=14&iwloc=A&output=embed&geocode=&q={text}"></iframe></div>

This is just HTML, without the document.write and it works fine. It doesn't need the + encoding for spaces because the browser and/or Google itself is able to parse the URL regardless.

As I say you may need to do a bit of testing but this should work. If you add a specific class name to the outer div (like I have in the example above) you should be able to use CSS to hide the map entirely if it is loaded inside a tooltip. Something like:

.tooltip .gmap-bb-code
{
    display: none;
}

 

[zackw]

You might potentially have larger issues than simply thread previews.

In my testing just now I created a new post and the process of the new post being loaded in instantly took over the entire page until I refreshed.

I agree the document.write approach is likely best avoided.

To be honest, and you may need to test this with existing embeds and across different browsers, you may be able to get away with not doing the document.write method at all.

<div class="gmap-bb-code"><iframe style="float: right;" width="512" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="//maps.google.com/maps?f=q&key={KEY}&source=s_q&hl=en&ie=UTF8/&z=14&iwloc=A&output=embed&geocode=&q={text}"></iframe></div>

This is just HTML, without the document.write and it works fine. It doesn't need the + encoding for spaces because the browser and/or Google itself is able to parse the URL regardless.

As I say you may need to do a bit of testing but this should work. If you add a specific class name to the outer div (like I have in the example above) you should be able to use CSS to hide the map entirely if it is loaded inside a tooltip. Something like:

.tooltip .gmap-bb-code
{
    display: none;
}

Yes that's a very good point. This whole output doesn't even need JS except for the little find/replace. I removed all that and of course it still output the map just fine.

Then added some css to hide it within tooltips. This did the trick!

I would still consider a way to ignore processing bbcodes within tooltips since those could be used for outputting all sorts of embedded content and iframes and media, etc. Would be nice to ignore them sometimes.

Thanks!