How to add js/css?

mercurius

I am trying to add a iframely to flarum, this way (trying with jQuery): getting all a elements inside div.Post-body elements like in this example:

$("div.Post-body  a").each(function(){
		href = $(this).attr('href');
		console.log(href);
    $(this).closest('.Post-body').css( "background", "yellow" ).append("<span>"+href+"</span>");
  }
);

So to after change this snippet to query the API using ajax and then mount the link card; however it just loads when entering directly on the post page. Can you guys point on how I could do this?

askvortsov

mercurius If you add code to the cusotm header/footer, it will only run once on page load. What you'll need to do is make an extension that extends CommentPost oncreate method to run your custom logic.

mercurius

askvortsov

oncreate is executed on user posting? should I use on post/with comments load? (Directly and via post listing?)

edit: I am using (new Extend\Frontend('forum'))->content(function (Document $document) { $document->foot[] = '<script type="text/javascript" src="https://cdn.domain/iframely/script.js"></script> <link rel="stylesheet" href="https://cdn.domain/iframely/style.css" />'; }), on extend.php

askvortsov

mercurius oncreate is executed whenever the CommentPost component is rendered in the browser.

mercurius edit: I am using (new Extend\Frontend('forum'))->content(function (Document $document) {
$document->foot[] = '<script type="text/javascript" src="https://cdn.domain/iframely/script.js"></script> <link rel="stylesheet" href="https://cdn.domain/iframely/style.css" />';
}), on extend.php

Gotcha. This is not a bad way to get some quick and easy hacks in, especially on the backend, but for non-trivial frontend modifications the full extension API explained in https://docs.flarum.org/ is much more flexible and powerful.

mercurius

I managed to achieve it reading the extend.php from fancybox extension which I've seen on extiverse.com and it's GitHub repository. Here is the result, which you can use to make an extension or put in your extend.php in your Flarum's installation root directory (this way it both runs on opening the post directly or via the posts listing):

<?php

use Flarum\Extend;
use Flarum\Frontend\Document;

return [
    (new Extend\Frontend('forum'))
        ->content(function (Document $document) {
            $document->head[] = '<link rel="preload" as="style" href="https://cdn.domain/iframely/style.css" onload="this.onload=null;this.rel=\'stylesheet\'">';
            $document->foot[] = <<<HTML
<script>
flarum.core.compat.extend.extend(flarum.core.compat['components/CommentPost'].prototype, 'oncreate', function (output, vnode) {
    const self = this;

    this.$('div.Post-body a').each(function () {
        href = $(this).attr('href');
        $(this).closest('.Post-body').css( "background", "yellow" ).append("<span>"+href+"</span>");

        try {
            $().ready(function(){
// execute code here
            })
        } catch (e) {
            console.error(e.name);
            console.error(e.message);
        }
    });
</script>
HTML;
        })
];