Per-page background snag

Somyrion

Hi all -

I'm trying to create individual, different backgrounds for each page based on what tag they have. I've done this by inserting this as a script into the custom HTML:

$(document).ready(function() {
    if ($('header[style*="rgb(193, 91, 169)"]').length ) {
        $('html,body').addClass('background1');
}
});

and this into the custom CSS:

.background1 {
background:url("https://i.imgur.com/e4zukj2.png") top center no-repeat fixed;
background-size:cover;
}

When I load a page whose header is default coloured rgb(193, 91, 169), the page background shows https://i.imgur.com/e4zukj2.png instead of the normal background - such as on this page: https://meihua.freeflarum.com/t/test

However, the problem is that because flarum doesn't reload the whole structure (and not the body styles) when you go to another inside-flarum page, that special background stays even though it doesn't match the page. Vice versa, if you access https://meihua.freeflarum.com/t/test by clicking on the link from the forum's main page, you never see the custom background because flarum doesn't reload the background image and see that there's a new one.

I don't know the core well enough to figure out what causes that function and how to get around it so the correct background shows up - so does anyone here have a solution? Would be much appreciated ?

Razor

Somyrion
I got around that by rexecuting code for some amount of time using setInterval(function(). It was only way around i could think of without creating extensions.

andreherberth

Somyrion maybe this could be of interest? https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Edit: I am on phone and might have misunderstood slightly. I will revisit when I am at my workstation.

clarkwinkelmann

Somyrion I think creating an extension to extend the page component will actually be the easiest solution for you here.

It might be possible to extend a component without actually using an extension, using the ready event then accessing modules via System.get calls.

andreherberth

clarkwinkelmann

Correct me if I am completely wrong, and don't understand it, but
creating an extension to solve this would require one to:

Learn/know how to develop with composer.
learn/know enough OOP programming to understand class extending and how to interact with flarums/vendors sourcecode.
Know enough javascript es6 (with GULP/Babel and all) to tie it all together.

Or am I completely off my bat here?

As for my last entry:
I have MutationObserver semi-working .
But, it stops after 3 tags. Going to try having it listen for content change inside the Hero title tomorrow instead.

Additionally, It would be best, I think, to add an ID to body, and not class, as it makes it easier to remove last style without having to regex it out of there. (Flarum inserts no-touch, and maybe others as body classes).

the easiest would of-course be to poll style thing every half second or so, but, if MutationObserver is doable, I believe it to be less intensive on the browser.

Somyrion

Thanks for all the responses so far! While I can certainly believe creating an extension would be the best solution to the problem here, working in that area is far, far, far beyond my ken, not to mention that I wouldn't be able to use any extension I created on the freeflarum anyway. MutationObserver seems promising and I'll read the docs on that and try and figure it out more fully tommorrow. In the meantime I've switched out the classes for IDs and added the setInterval solution for now (it works, if nothing else).