How can I make jQuery run on all pages?

UziForex

Howdy Everyone.

I would not be repetitive, but I am new in this solid and strong community.

I signed up yesterday and I did a little intervention. This is my first topic so I introduce myself again, in fact I think it's good education to knock on the door, introduce yourself and ask permission instead of breaking it and screaming "Here I am"!

But if you find me boring, go to the WE COME TO THE CONCRETE title

PRESENTATION

I'm a foreigner, but I've been in Los Angeles for a short while, so excuse my English.

About 2 years ago I founded a small community to share a software that I use in my work as financial investor.

At that time I did not make a real selection, it is not my sector, so I simply entrusted the diffusion and I chose the phpbb.

Well, actually ... bad. After 2 years I discovered that I spent half of my time taking care of ... the phpbb! This instead of following my financial software and my community.

I've been following FLARUM for about 2 months, reading all the documentation and the interesting topics.

At the same time I made the migration from phpbb to FLARUM.

More than a migration, it was a transition. In fact, for us the daily discussion matters. In the evening I close all the topics and start the next day. Past topics are not of great importance, on the contrary, they can distract from the present. Therefore it was not necessary to report them in FLARUM.

MY DISCUSSION BOARD IN FREEFLARUM

What is my discussion board? I have a precise plan.

Complete all the simple work of graphics and visualization on a PC and on a mobile phone.
Ask for the kind analysis of those who want to lend themselves. In fact I want my discussion board to be a good example of how to use FLARUM in production, not a big mess.
Only at that point spread the domain.

I use FREEFLARUM, not for the FREE but for FLARUM!

I have to focus on my financial software and on my community, not on the discussion board developing and maintenance.

FREEFLARUM solves many problems, above all guarantees the security of the domain. In fact another big problem of phpbb is that you can mix http content with https especially posted by users ... and google has picked up my https already a couple of times.

As I told, managing phpbb isn't my sector, and it was a nightmare to discover were I lost the https, so every time I had to change domain.

WE COME TO THE CONCRETE

Sorry for this long introduction, but next time I'll go straight to the point!

The concrete: I have to insert jQuery but on FREEFLARUM I have only the FLARUM clean, I can not act on the code or on the extensions.

I am using the CUSTOM HEADER but it is not called on all pages, so jQuery is executed only a few times.

How can I make jQuery run on all pages?

Thanks in advance to those who can help me. Marco.

luceos

UziForex maybe start with what you want to do with jquery so we can give you thr best guidance possible.

And thanks for the introduction 🤗

UziForex

luceos

Hi Luceos and hanks for your attention!.

Please excuse my poor code, this isn't my sector. I only need some little adjustment for graphical purposes, for the rest the FLARUM is already exceptional as it is!

I have some graphical elements I added above the FLARUM body and a little sript to enlarge picture in a new window when clicked.

This is my code.

$(document).ready(function() {

        if($(location).attr("href").length > 32) {
            $("#uziheader").hide();
            $(".target").hide();
            $(".btn-group").hide();
            $(".account").hide();
        }
        else {
            $("#uziheader").show();
            $(".target").show();
            $(".btn-group").show();
            $(".account").hide();
        }

        $("<p>CLICK sull'immagine per ingrandirla, poi la X in alto per chiuderla</p>").insertBefore(".Post-body img");

        $(".Post-body img").addClass("center-img");

        $(".Post-body img").click(function(evn) {
            //alert("CLICK OK !!!");
            evn.preventDefault();

            var ref = $(this).attr("src");
            var win = window.open();
            win.document.open().write('<title>CLICK CHIUDI --></title><body><img src="' + ref + '" style="width:100%; height:auto;"></body>');
            // win.close();
        });
    });

Thx. Marco.

UziForex

Wow! I found this that it seems to work.

As I told, this isn't my sector, the max for me is to google around and put something together .

I fount this piece of jQuery to replace the main page titles href with an onclick so they recall the page and it executes the header javascript.

Can this be an acceptable solution or is it only a mess?

        $(".DiscussionListItem-main").each(function(index) {
            var sHref = $(this).attr("href");
            $(this).attr("onclick", "location.href='" + sHref + "';");
        });

Thx. Marco.

UziForex

I extended the trick adding a onclick event to all the "a" tags.

So every time a link is clicked, it reloads the page and this always triggers the header and its jQuery.

It works fine, but is it a good solution or only a mess ?

        $("a").each(function(index) {
            var sHref = $(this).attr("href");
            $(this).attr("onclick", "location.href='" + sHref + "';");
        });

UziForex

As I told, my code is very poor, the max for me is to google around and to put something together.

MY PROBLEM: I put my jQuery in custom header from admin panel, but it's triggered only on few pages.

MY SOLUTION: In my jQuery I replace all the link with an onclick call. This recharge the linked page and it always triggers the header jQuery.

It works fine, but please tell me if this is an acceptable solution or it's only a mess.

If it's an elegant (...maybe I'm a bit exaggerating !) and above all it's an acceptable solution, you can move this in SOLVED problems and I hope it can help others.

CONCLUSION: Put this in your custom header from admin panel

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

    $(document).ready(function() {

        .... all your jQuery scripts ....


        $("a").each(function(index) {
            var sHref = $(this).attr("href");
            $(this).attr("onclick", "location.href='" + sHref + "';");
        });
        
    });

</script>

Thx. Marco.

clarkwinkelmann

This sounds like something you would typically do with an extension. Because Flarum is a single page app, the header code will only run one time.

You can't use your own extensions on Freeflarum, but this doesn't mean you can't use Flarum methods for extending the front-end. I suggest you extend the Post component and run your jquery code in its config method.

Here's an example:

<script>
$(document).ready(function () {
	System.get('flarum/extend').extend(System.get('flarum/components/CommentPost').default.prototype, 'config', function (original, isInitialized) {
		if (isInitialized) { return; }

		this.$('.Post-body').append('<p>This post is approved by a jQuery script</p>');

		this.$('.Post-body a').each(function () {
			$(this).css('color', 'green');
		});
	});
});
</script>

There are a few challenges though:

The custom header code runs before Flarum boots, and document.ready callback runs after Flarum started. So the initial draw of the page won't include the code added via extend(). So you still need to run your code outside of the component the first time the page loads
Because the code isn't compiled by Gulp, you can't use the fancy way of importing classes from Flarum. But you can use System.get() to resolve them (that's what I used in the example). The syntax for that will likely change in beta8 because webpack will be used
Flarum includes its own jQuery, but it will only be available once Flarum JS code is loaded. If you want to skip loading your own jQuery, use document.addEventListener('DOMContentLoaded', function () {}) or another variant to wait for page load, at which time $ will be made globally available by Flarum

PS: this.$ is a helper built into all Components that will let you access a jQuery object already scoped to the current component.

UziForex

clarkwinkelmann

I don't know how to thank you enough ! Your is a real solution !

Many thanks again for your great help.

Thx. Marco.

luceos

clarkwinkelmann eye opener, the first time I've seen jQuery being used to hook (or should I say hack) into Flarum. Well done sir!

clarkwinkelmann

UziForex one thing I noted in my first post is that the code won't run for components loaded on page boot.

So if you start from the homepage, everything's great. However if you load a discussion page first (by refreshing on that page for example), the code won't run for all components visible at boot time.

You might have to still run the jquery code a first time outside of the extend() call to make sure you affect those elements at boot time. That wouldn't be needed if you could use an extension bootstrapper (that runs after the JS is loaded, but before Flarum boots), unfortunately I don't see any way of registering a bootstrapper without using an actual extension.

luceos eye opener, the first time I've seen jQuery being used to hook (or should I say hack) into Flarum. Well done sir!

Actually, this isn't too different from where Flarum uses jQuery. In core the same method is used to run script tags in post content https://github.com/flarum/core/blob/5bcf72dd49a760722ececff3fc907ce2b3724008/js/forum/src/components/CommentPost.js#L67

Using jQuery to alter HTML markup inside an element is still risky. There's a possibility Mithril removes it or gets confused if a refresh happens. This shouldn't be an issue with the post (and most other components) as its markup doesn't change during the components lifecycle.

UziForex

With the big help of Clarkwinkelmann now I've my solution.

The minimum that I can do is to share the final code.

Simpy put it in your custom header from admin panel and you can click on every image in your posts to enlarge it in a new TAB.

Only a note: it applies to all the image, so if you use the emoticons, well, you should insert a minimum width check.

I hope my little effort but above all the Clarkwinkelmann's great help can be useful to others.

Thx. Marco.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        
    	System.get('flarum/extend').extend(System.get('flarum/components/CommentPost').default.prototype, 'config', function (original, isInitialized) {
    
    		if (isInitialized) {
    		    return;
    		}

    		this.$(".Post-body img").each(function() {
    		    var sText = "<p style='color: orange !important;'>CLICK on the immage to ZOOM it in a new TAB</p>";
    			$(sText).insertBefore(this);
    		});
            

    		this.$(".Post-body img").click(function(evn) {
    		    evn.preventDefault();
    		    var ref = $(this).attr("src");
    		    var win = window.open();
    		    win.document.open().write('<title>CLICK CLOSE --></title><body><img src="' + ref + '" style="width:100%; height:auto;"></body>');

    		});
    	});
    });
    
</script>

UziForex

This is the code update after the last kind Clarkwinkelmann observation and useful help.

I defined a function
I call the same function as inside as outside the "extend"
I put a check to prevent multiple loops

I report the Italian label only because so I'm sure it's my original and tested code. There are only few word to translate.

BTW I don't understand why my code looses the identation.... but now it's not important.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

    function EnlargeImg() {

		this.$(".Post-body img").each(function() {

            // avoid multiple loops

		    var src = $('img').attr('src').split('/');
            var file = src[src.length - 1];

            if($("[id='" + file + "']").length > 1) {
                return;
            }

		    var sText = "<p id='" + file + "' style='color: orange !important;'>CLICK sull'immagine per ingrandirla, poi la X in alto per chiuderla</p>";
		    $(sText).insertBefore(this);
			$(this).addClass("center-img");
		});
        
        this.$(".Post-body img").click(function(evn) {
            evn.preventDefault();
            var ref = $(this).attr("src");
            var win = window.open();
            win.document.open().write('<title>CLICK CHIUDI --></title><body><img src="' + ref + '" style="width:100%; height:auto;"></body>');
        });
        
    }

    $(document).ready(function () {
        
        EnlargeImg();
        
    	System.get('flarum/extend').extend(System.get('flarum/components/CommentPost').default.prototype, 'config', function (original, isInitialized) {
    
    		if (isInitialized) {
    		    return;
    		}
    		
    		EnlargeImg()

            /*
    		this.$(".Post-body").append("<p>This post is approved by a jQuery script</p>");
    
    		this.$(".Post-body a").each(function() {
    			$(this).css("color", "green");
    		});
    		*/
    	});
    });
    
</script>

UziForex

Howdy Everyone.

I found a better solution.

After 2 years with the phpbb a couple of months with FREEFLARUM were enough to go from a nightmare to a dream!

Now the next step, I took my old phpbb hosting again, I changed my domain and I'm installing FLARUM directly. so I have complete access to all the wonderful extensions and to all the flexibility that this incredible product offers.

I prefer to make my domain known only when it is a good example of how to use FLARUMI in production, and here I will ask a kind analysis to those who are available.

I want those who visit my site to gape in front of FLARUM as I am left!

Thx. Marco.