How to run a script on page load?

Valeyard

Hi everyone, how do I load a script after the page content has finished loading from forum.js?

clarkwinkelmann

Can you describe your use case in more details?

If you want to extend the page of the single page application, you should use Mithril components and our API https://docs.flarum.org/extend/frontend

If you want to integrate an existing library that manipulates the DOM, there are various Mithril hooks you can use to modify content outside of virtual DOM templates. Each component has hooks, so you need to first identify which component contains the content you are trying to modify as it will be more reliable when extending a specific component.

If you are just trying to load a different script that doesn't interact with the single page app, there are ways to inject HTML in various places in the HTML templates both above or below Flarum's own scripts.

Valeyard

I want to put the post title in the header like Discourse.

let pageTag = document.getElementById("content").getElementsByClassName("DiscussionHero-items")[0].getElementsByClassName("item-tags")[0].innerHTML;
let pageTitle = document.getElementById("content").getElementsByClassName("DiscussionHero-items")[0].getElementsByClassName("item-title")[0].textContent;
console.log("Tag/Category: ", pageTag);
console.log("Title: ", pageTitle);

That gets the content I need just fine, but is there a simple way to do this without creating a package/extension?

Valeyard

I've figured out how to do what I want in pure JS. This is still a WIP:

window.onscroll = () => {
  if (document.body.scrollTop > 146 || document.documentElement.scrollTop > 146) {
    try{
      let pageHeader = document.getElementById("header");
      let pageTag = document.getElementsByClassName("DiscussionHero-items")[0].getElementsByClassName("item-tags")[0];
      let pageTitle = document.getElementsByClassName("DiscussionHero-items")[0].getElementsByClassName("item-title")[0].textContent;
      if(pageTag !== undefined || pageTag !== null){
        pageHeader.classList.add('scrolled-title');
        let homeLogo = document.getElementById("header").getElementsByClassName("Header-title")[0];
        let headerTitleContainer = document.getElementById("header-page-title");
        if(headerTitleContainer == null){
          let headerTitleContainer = document.createElement('div');
          headerTitleContainer.setAttribute('id','header-page-title');
          headerTitleContainer.classList.add('Header-primary');
          headerTitleContainer.innerHTML='<span class="post-title"><a href="' + window.location.href.split('?')[0] + '" title="' + pageTitle + '">' + pageTitle + '</a></span>' + pageTag.innerHTML;
          homeLogo.insertAdjacentElement("afterend",headerTitleContainer); 
        }
      }
    }catch{}
  } else {
    try{
      let pageHeader = document.getElementById("header");
      let pageTag = document.getElementsByClassName("DiscussionHero-items")[0].getElementsByClassName("item-tags")[0];
      if(pageTag !== undefined || pageTag !== null){
        let headerTitleContainer = document.getElementById("header-page-title");
        pageHeader.classList.remove('scrolled-title');
      }
    }catch{}
  }
}

It may look like a disgusting hack-job, but if it works it works. 😉 I say it's a WIP but really the rest from here can be handled with CSS I think.