Extension Template

[deleted]

Is there an extension template anywhere that can be used as a framework to create a new extension ?

askvortsov

I use https://github.com/FriendsOfFlarum/extension-generator whenever I start a new extension

[deleted]

In fact, I'm looking for a "cheap" way to use extend.php to insert an attribute into <img>

$document->head[] = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">';
$document->head[] = '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>';
$document->head[] = '<script>$("img").attr("data-fancybox", "gallery");</script>';

Everything seems to work fine on page load, but this doesn't work for subsequent pages added by the SPA.

What am I doing wrong ?

Thanks

tankerkiller125

[deleted] extend.php only modifies the HTML on initial page load and no-script page loads. If you want to do something with all page loads you'll have to do some stuff with Mithril I think.

[deleted]

I've even created a basic extension for this, and it exhibits the same issues :-(

[deleted]

tankerkiller125 Thanks. Any pointers ?

askvortsov

tankerkiller125 [deleted]

Not quite. When you go to a flarum site, the backend returns a server-generated HTML page that shows the pure minimum of useful content (we actually have a GH issue for improving this no-js view). Then, we load in the JS bundle and initialize the Flarum SPA within that HTML skeleton. Those initializations shouldn't override most of the document head (with some exceptions, like the page title).

Now, the problem with this script as far as I can tell is '<script>$("img").attr("data-fancybox", "gallery");</script>'. This will be executed exactly once, when the page loads for the first time. So it'll apply to any images initially there, and then not to any more.

The current fancybox extension works by effectively applying this code whenever a post is rendered or updated by Mithril: https://github.com/squeevee/flarum-ext-fancybox/blob/master/js/src/forum/index.js#L62. I don't think there's an easy way to do this without using the Flarum API, unless you want to run the fancybox script on an interval, which could cause performance issues / bugs.

EDIT: Or do what Clark said

tankerkiller125

[deleted] This is more @askvortsov or @datitisev area of expertise. I generally work on the PHP side of things.

[deleted]

tankerkiller125 Ok. Thanks

clarkwinkelmann

You can customize the post HTML outputted by Flarum to some extent using TextFormatter.

Here's an example to add attributes to links https://github.com/franzliedke/flarum-open-links-in-new-tab/blob/master/extend.php

[deleted]

clarkwinkelmann thanks !

[deleted]

askvortsov I'm going to do what Clark said. I expect I can simply append this to my own extend.php in the Flarum root ? I know this works for opening all links in new tabs, but would this fire each time for images ?

askvortsov

You'll need to tweak this so that instead of setting link attributes, it runs that jquery command on that image element. So probably inserting a script element adjacently.

And it should execute for each image when that image is loaded, if implemented correctly.

[deleted]

askvortsov excellent. Thanks very much.

clarkwinkelmann

Running javascript from the post content isn't the best approach. It creates additional duplicate code that's transferred for each post instead of cached in the assets, and also makes it more complicated in case CSP is used. The formatter extender should ideally be used only for custom attributes and such.

The preferred solution for javascript to run on the post content is to hook to the Mithril oncreate lifecycle method of the comment post component using the javascript extension API.

010101

You may be good thanks to all of the suggestions above, but, it sounds like you need to copy an extension like my external links extension. This does what I think Clark is saying. I’m sure it’s not the best approach. But, it works. And I've never noticed this type of extension slowing things down.

https://github.com/zerosonesfun/elint

You will notice it is basically just an extend file using pure JavaScript and wrapped in whatever Mithril and Flarum needs.

[deleted]

010101 Hey Billy,

Thanks for the pointer !

I got it working using this

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

return [
    (new Extend\Frontend('forum'))
        ->content(function (Document $document) {
            $document->head[] = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">';
            $document->head[] = '<script type="text/javascript" src="/js/jquery.min.js"></script>';
            $document->head[] = '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>';
            $document->foot[] = <<<HTML
<script>
  flarum.core.compat.extend.extend(flarum.core.compat['components/CommentPost'].prototype, 'oncreate', function(output, vnode) {
$("img").attr("data-fancybox", "gallery");
  });
</script>
HTML;
        })
];

I've created an extension for this, although it's super-simple 🙂 It's just essentially loading the Fancybox libraries along with jQuery, and then forcing the data-fancybox attribute to all images.

[deleted]

And as it turns out, there's a bug in the sense that when the image is closed, display:none; is being inserted. This is by the Fanybox library because it usually targets an a href element so I'll need to get the img src and insert that as the a href

010101

Although, once again, we know this isn’t the preferred "Flarum way," I was just thinking... I could turn this into a tool that automatically generates these super basic extensions. I’ll add this to my list of things to try one day. All I'd have to do is create a webpage with a form, you tell the form what you want in the head, what you want in the footer, and then what JavaScript you want in that middle part which makes sure the script runs on all pages. Click generate, bingo.