How to insert custom JavaScript to Flarum in right way?

masihdindar

Hi there,
I want to do some customize for my forum and one of these customizations is adding a Class to links in post content. I wrote a JS code and this code can detect links in articles and add custom class to links based on "Inline" or "Standalone". So i can customize pasted links, like this:

And this is JS code:

$(document).ready(function () {
   $(".Post-body a").each(function () {
      var parent = $(this).parent().html().trim();
      var myTag = $(this).wrap("<p/>").parent().html().trim();
      $(this).unwrap();
      if (parent === myTag) {
         $(this).addClass("standalone");
      } else {
         $(this).addClass("inline");
      }
   });
});

This code check all links in a topic and can insert custom class on them and let me use custom CSS on links.
But there is one important problem. This code work only when a topic open with link or refresh on that page, but when you enter that topic from topic lists in forum, this JS code can't run. Only works when i refresh or open a topic with link.
So i think this code should be run just before a topic loading with Ajax and this is what i can't do.
Anyone know how can i insert this JS code and run without refresh needed?

askvortsov

masihdindar Essentially what you want is for this code to run every time posts are initially rendered. To do this, you'll need to make an extension which extends the oncreate method of the CommentPost component to run this code.

https://docs.flarum.org/extend/frontend has an intro to frontend development with Flarum.

Valeyard

You can hook on vanilla JS if you want to without having to extend Flarum by making an extension, I've got a couple of functions doing that. Onscroll is probably sufficient for what you're doing:

function modifyLinks(){
   $(".Post-body a").each(function () {
      var parent = $(this).parent().html().trim();
      var myTag = $(this).wrap("<p/>").parent().html().trim();
      $(this).unwrap();
      if (parent === myTag) {
         $(this).addClass("standalone");
      } else {
         $(this).addClass("inline");
      }
   });
}
// Launch link function on scroll (this may load additional posts)
window.onscroll = () => {modifyLinks();}
// Launch link function once document loads
let appF = document.getElementById("app"), ob = new MutationObserver(function(){modifyLinks();});
ob.observe(appF,{attributes: true, attributeFilter: ["class"]});

The one thing that won't trigger on is dynamically loading one post to another post, but vanilla Flarum doesn't support that anyway, and the extension for it does it wrong IMO. I might fork the extension and fix it, with all due respect to others if you can't figure out how to do this correctly without the potential for your extension to create potentially unwanted behaviour then I should probably just make my own version. 😉

masihdindar

Valeyard Your code works fine and it's awesome. Thanks for saving a lot of my time to making an extension 👍️
And i just edited your code to make sure this functions only run in topic page. Correct me if this code has a typo or syntax mistake:

function modifyLinks(){
   $(".Post-body a").each(function () {
      var parent = $(this).parent().html().trim();
      var myTag = $(this).wrap("<p/>").parent().html().trim();
      $(this).unwrap();
      if (parent === myTag) {
         $(this).addClass("standalone");
      } else {
         $(this).addClass("inline");
      }
   });
}
// Launch link function on scroll (this may load additional posts)
if (window.location.href === `https://example.com/d/`) {
     window.onscroll = () => {modifyLinks();}
}
// Launch link function once document loads
let appF = document.getElementById("app"), ob = new MutationObserver(function(){modifyLinks();});
ob.observe(appF,{attributes: true, attributeFilter: ["class"]});

Valeyard

No, you need to use this.location.href.toLowerCase().startsWith("https://example.com/d/") -

I.e.

function modifyLinks(){
   // If dicussion
   if(this.location.href.toLowerCase().startsWith("https://example.com/d/")){
     $(".Post-body a").each(function () {
         var parent = $(this).parent().html().trim();
         var myTag = $(this).wrap("<p/>").parent().html().trim();
         $(this).unwrap();
         if (parent === myTag) {
            $(this).addClass("standalone");
         } else {
            $(this).addClass("inline");
         }
      });
   }
}
// Launch link function on scroll (this may load additional posts)
window.onscroll = () => {modifyLinks();}
// Launch link function once document loads
let appF = document.getElementById("app"), ob = new MutationObserver(function(){modifyLinks();});
ob.observe(appF,{attributes: true, attributeFilter: ["class"]});

Now of course it's possible your site may have /D/... as well (e.g. you put downloads in a big-D directory for some idiotic reason) in which case the code needs to be modified (which is a word of caution against generalising this without first accounting for all the ways people may be using their sites), but don't forget that domain names are case insensitive and while it's convention that browsers convert requests to lowercase it's not forced so you have to assume your visitor somehow has something weird in their address bar like EXamPle.CoM or whatever.

masihdindar

Valeyard Well done mate, that's what i wanted.
Thank you for taking the time to resolve this issue 👍️